@carbon/ibm-products 2.71.1 → 2.72.0-rc.0

package/lib/components/EmptyStates/EmptyState.js

@@ -10,12 +10,6 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var EmptyStateV2 = require('./EmptyStateV2.js');
-require('./ErrorEmptyState/ErrorEmptyState.js');
-require('./NoDataEmptyState/NoDataEmptyState.js');
-require('./NoTagsEmptyState/NoTagsEmptyState.js');
-require('./NotFoundEmptyState/NotFoundEmptyState.js');
-require('./NotificationsEmptyState/NotificationsEmptyState.js');
-require('./UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
@@ -140,8 +134,8 @@ exports.EmptyState.propTypes = {
    */
   title: index.default.oneOfType([index.default.string, index.default.node]).isRequired,
   /**
-   * Designates which version of the EmptyState component is being used.
-   * Refer to V2 documentation separately.
+   * **Deprecated:** Designates which version of the EmptyState component is being used. Refer to V2 documentation separately.
+   * @deprecated
    */
   v2: index.default.bool
 };

package/lib/components/FilterPanel/FilterPanelGroup/index.d.ts

@@ -0,0 +1 @@
+export { FilterPanelGroup } from "./FilterPanelGroup";

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

@@ -8,8 +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';
+import { ActionType } from './context';
 export interface InterstitialScreenProps {
     /**
      * Provide the contents of the InterstitialScreen.
@@ -46,28 +45,6 @@ export type InterstitialScreenComponent = React.ForwardRefExoticComponent<Inters
     Body: React.FC<InterstitialScreenBodyProps>;
     Footer: React.FC<InterstitialScreenFooterProps>;
 };
-export type disableButtonConfigType = {
-    skip?: boolean;
-    back?: boolean;
-    next?: boolean;
-    start?: boolean;
-};
-interface InterstitialScreenContextType {
-    bodyChildrenData?: ReactNode;
-    setBodyChildrenData?: (value: ReactNode) => void;
-    isFullScreen?: boolean;
-    handleClose?: (value: ActionType) => void;
-    progStep: number;
-    setProgStep?: (value: number) => void;
-    bodyScrollRef?: RefObject<HTMLDivElement | null>;
-    scrollRef?: RefObject<HTMLDivElement>;
-    handleGotoStep?: (value: number) => void;
-    stepCount: number;
-    setStepCount?: (value: number) => void;
-    disableButtonConfig?: disableButtonConfigType;
-    setDisableButtonConfig?: (value: disableButtonConfigType) => void;
-}
-export declare const InterstitialScreenContext: React.Context<InterstitialScreenContextType>;
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -75,4 +52,3 @@ export declare const InterstitialScreenContext: React.Context<InterstitialScreen
  * newly purchased capability is presented).
  */
 export declare let InterstitialScreen: InterstitialScreenComponent;
-export {};

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -17,28 +17,12 @@ var settings = require('../../settings.js');
 var InterstitialScreenHeader = require('./InterstitialScreenHeader.js');
 var InterstitialScreenBody = require('./InterstitialScreenBody.js');
 var InterstitialScreenFooter = require('./InterstitialScreenFooter.js');
+var context = require('./context.js');
 
-// The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
 const 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.
-
 // Define the type for InterstitialScreen, extending it to include Header
 
-const InterstitialScreenContext = /*#__PURE__*/React.createContext({
-  progStep: 0,
-  stepCount: 0
-});
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -71,7 +55,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
     next: false,
     start: false
   });
-  const variantClass = isFullScreen ? `${blockClass}--full-screen` : `${blockClass}--modal`;
+  const variantClass = isFullScreen ? `${context.blockClass}--full-screen` : `${context.blockClass}--modal`;
   const [bodyChildrenData, setBodyChildrenData] = React.useState(null);
   const handleClose = React.useCallback(actionName => {
     setProgStep(0);
@@ -115,7 +99,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       preventCloseOnClickOutside: true,
-      className: cx(blockClass,
+      className: cx(context.blockClass,
       // Apply the block class to the main HTML element
       className // Apply any supplied class names to the main HTML element.
       ),
@@ -128,7 +112,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const renderFullScreen = () => {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-      className: cx(blockClass,
+      className: cx(context.blockClass,
       // Apply the block class to the main HTML element
       className,
       // Apply any supplied class names to the main HTML element.
@@ -137,7 +121,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       "aria-label": ariaLabel,
       ref: ref
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-      className: `${blockClass}--container`
+      className: `${context.blockClass}--container`
     }, children));
   };
   const handleGotoStep = targetStep => {
@@ -151,7 +135,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef((props, ref) => {
       behavior: 'smooth'
     });
   };
-  return /*#__PURE__*/React.createElement(InterstitialScreenContext.Provider, {
+  return /*#__PURE__*/React.createElement(context.InterstitialScreenContext.Provider, {
     value: {
       bodyChildrenData,
       setBodyChildrenData,
@@ -214,6 +198,3 @@ exports.InterstitialScreen.propTypes = {
    */
   open: index.default.bool
 };
-
-exports.InterstitialScreenContext = InterstitialScreenContext;
-exports.blockClass = blockClass;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactElement, ReactNode } from 'react';
-import { disableButtonConfigType } from './InterstitialScreen';
+import { disableButtonConfigType } from './context';
 import { EnrichedChildren } from './InterstitialScreenHeader';
 type contentRendererArgs = {
     handleGotoStep?: (value: number) => void;

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../_virtual/index.js');
-var InterstitialScreen = require('./InterstitialScreen.js');
+var context = require('./context.js');
 var react = require('@carbon/react');
 var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
@@ -24,7 +24,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
     contentRenderer,
     ...rest
   } = props;
-  const bodyBlockClass = `${InterstitialScreen.blockClass}--internal-body`;
+  const bodyBlockClass = `${context.blockClass}--internal-body`;
   const [stepType, setStepType] = React.useState();
   const {
     setBodyChildrenData,
@@ -38,7 +38,7 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
     setStepCount,
     disableButtonConfig,
     setDisableButtonConfig
-  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
+  } = React.useContext(context.InterstitialScreenContext);
   const [scrollPercent, setScrollPercent] = React.useState(-1);
   React.useEffect(() => {
     const _bodyContent = contentRenderer?.({
@@ -77,12 +77,12 @@ const InterstitialScreenBody = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const onScrollHandler = scrollPercent => setScrollPercent(scrollPercent);
   const renderBody = () => /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
-    className: `${InterstitialScreen.blockClass}--body ${className}`,
+    className: `${context.blockClass}--body ${className}`,
     ref: bodyScrollRef ?? ref
   }, devtools.getDevtoolsProps('InterstitialScreenBody'), isFullScreen ? rest : {}), /*#__PURE__*/React.createElement("div", {
-    className: `${InterstitialScreen.blockClass}--content`
+    className: `${context.blockClass}--content`
   }, stepType === 'multi' ? /*#__PURE__*/React.createElement("div", {
-    className: `${InterstitialScreen.blockClass}__carousel`
+    className: `${context.blockClass}__carousel`
   }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
     disableArrowScroll: true,
     ref: scrollRef,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { ActionType, disableButtonConfigType } from './InterstitialScreen';
+import { ActionType, disableButtonConfigType } from './context';
 type actionButtonRendererArgs = {
     handleGotoStep?: (value: number) => void;
     progStep?: number;

package/lib/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../_virtual/index.js');
-var InterstitialScreen = require('./InterstitialScreen.js');
+var context = require('./context.js');
 var react = require('@carbon/react');
 var clamp = require('../../global/js/utils/clamp.js');
 var icons = require('@carbon/react/icons');
@@ -30,7 +30,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     onAction,
     ...rest
   } = props;
-  const footerBlockClass = `${InterstitialScreen.blockClass}--footer`;
+  const footerBlockClass = `${context.blockClass}--footer`;
   const {
     handleClose,
     progStep,
@@ -38,7 +38,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     stepCount,
     disableButtonConfig,
     isFullScreen
-  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
+  } = React.useContext(context.InterstitialScreenContext);
   const startButtonRef = React.useRef(null);
   const nextButtonRef = React.useRef(null);
   const [loadingAction, setLoadingAction] = React.useState('');
@@ -84,23 +84,23 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     return {};
   }, [loadingAction, isMultiStep, progStep, progStepCeil]);
   const getFooterContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
-    className: `${InterstitialScreen.blockClass}--skip-btn`,
+    className: `${context.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: `${InterstitialScreen.blockClass}--footer-controls`
+    className: `${context.blockClass}--footer-controls`
   }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
-    className: `${InterstitialScreen.blockClass}--prev-btn`,
+    className: `${context.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: `${InterstitialScreen.blockClass}--next-btn`,
+    className: `${context.blockClass}--next-btn`,
     renderIcon: loadingAction !== 'next' ? icons.ArrowRight : undefined,
     ref: nextButtonRef,
     size: "lg",
@@ -108,7 +108,7 @@ const InterstitialScreenFooter = /*#__PURE__*/React.forwardRef((props, ref) => {
     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: `${InterstitialScreen.blockClass}--start-btn`,
+    className: `${context.blockClass}--start-btn`,
     ref: startButtonRef,
     size: "lg",
     title: startButtonLabel,
@@ -117,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: `${InterstitialScreen.blockClass}--footer`
+      className: `${context.blockClass}--footer`
     }, actionButtonRenderer({
       handleGotoStep,
       progStep,

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

@@ -1,3 +1,9 @@
+/**
+ * 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.
+ */
 import React from 'react';
 export interface InterstitialScreenHeaderProps {
     /**

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -14,7 +14,7 @@ var react = require('@carbon/react');
 var React = require('react');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
-var InterstitialScreen = require('./InterstitialScreen.js');
+var context = require('./context.js');
 var useId = require('../../global/js/utils/useId.js');
 var devtools = require('../../global/js/utils/devtools.js');
 
@@ -35,15 +35,15 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef((props, ref) => {
     progStep,
     handleClose,
     stepCount
-  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
-  const headerBlockClass = `${InterstitialScreen.blockClass}--internal-header`;
+  } = React.useContext(context.InterstitialScreenContext);
+  const headerBlockClass = `${context.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: `${InterstitialScreen.blockClass}--titleContainer`
+      className: `${context.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: `${InterstitialScreen.blockClass}--progress`
+      className: `${context.blockClass}--progress`
     }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
       vertical: false,
       currentIndex: progStep

package/lib/components/InterstitialScreen/_story-assets/InterstitialScreenViewModule/InterstitialScreenViewModule.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { disableButtonConfigType } from '../../InterstitialScreen';
+import { disableButtonConfigType } from '../../context';
 import './_interstitial-screen-view-module.scss';
 export interface InterstitialScreenViewModuleProps {
     /**

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

@@ -0,0 +1,31 @@
+/**
+ * Copyright IBM Corp. 2025, 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 { ReactNode, RefObject } from 'react';
+export type ActionType = 'close' | 'start' | 'skip' | 'back' | 'next';
+export type disableButtonConfigType = {
+    skip?: boolean;
+    back?: boolean;
+    next?: boolean;
+    start?: boolean;
+};
+export interface InterstitialScreenContextType {
+    bodyChildrenData?: ReactNode;
+    setBodyChildrenData?: (value: ReactNode) => void;
+    isFullScreen?: boolean;
+    handleClose?: (value: ActionType) => void;
+    progStep: number;
+    setProgStep?: (value: number) => void;
+    bodyScrollRef?: RefObject<HTMLDivElement | null>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    handleGotoStep?: (value: number) => void;
+    stepCount: number;
+    setStepCount?: (value: number) => void;
+    disableButtonConfig?: disableButtonConfigType;
+    setDisableButtonConfig?: (value: disableButtonConfigType) => void;
+}
+export declare const blockClass: string;
+export declare const InterstitialScreenContext: import("react").Context<InterstitialScreenContextType>;

package/lib/components/InterstitialScreen/context.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var settings = require('../../settings.js');
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
+const InterstitialScreenContext = /*#__PURE__*/React.createContext({
+  progStep: 0,
+  stepCount: 0
+});
+
+exports.InterstitialScreenContext = InterstitialScreenContext;
+exports.blockClass = blockClass;

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

@@ -1,11 +1,12 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * 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.
  */
 export { InterstitialScreen } from './InterstitialScreen';
-export type { InterstitialScreenProps, InterstitialScreenComponent, disableButtonConfigType, ActionType, } from './InterstitialScreen';
+export type { InterstitialScreenProps, InterstitialScreenComponent, } from './InterstitialScreen';
+export type { disableButtonConfigType, ActionType } from './context';
 export type { InterstitialScreenBodyProps } from './InterstitialScreenBody';
 export type { InterstitialScreenFooterProps } from './InterstitialScreenFooter';
 export type { InterstitialScreenHeaderProps } from './InterstitialScreenHeader';

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -30,6 +30,7 @@ var useId = require('../../global/js/utils/useId.js');
 var settings = require('../../settings.js');
 var utils = require('./utils.js');
 var usePresence = require('../../global/js/hooks/usePresence.js');
+var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
 
 var _Close;
 
@@ -135,6 +136,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const supportedLocale = getSupportedLocale.getSupportedLocale(dateTimeLocale, DefaultLocale);
   react.usePrefix();
   const headingId = useId.useId();
+  const isClickOnTrigger = React.useRef(false);
   const reducedMotion = usePrefersReducedMotion.usePrefersReducedMotion();
   const exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
   const {
@@ -144,17 +146,28 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     // Set the notifications passed to the state within this component
     setAllNotifications(data);
   }, [data]);
-
-  // useClickOutside(ref || notificationPanelRef, (target) => {
-  //   const element = target as HTMLElement;
-  //   if (!isActionableElement(element)) {
-  //     setTimeout(() => {
-  //       triggerButtonRef?.current?.focus();
-  //     }, 100);
-  //   }
-  //   onClickOutside?.();
-  // });
-
+  React.useEffect(() => {
+    const button = triggerButtonRef?.current;
+    const handleClick = () => {
+      isClickOnTrigger.current = true;
+    };
+    button?.addEventListener('click', handleClick, true);
+    return () => {
+      button?.removeEventListener('click', handleClick, true);
+    };
+  }, [triggerButtonRef]);
+  useClickOutside.useClickOutside(ref || notificationPanelRef, target => {
+    const element = target;
+    if (!isClickOnTrigger.current) {
+      if (!isActionableElement(element)) {
+        setTimeout(() => {
+          triggerButtonRef?.current?.focus();
+        }, 100);
+      }
+      onClickOutside?.();
+    }
+    isClickOnTrigger.current = false;
+  });
   const handleKeydown = event => {
     event.stopPropagation();
     if (event.key === 'Escape') {
@@ -312,6 +325,17 @@ exports.NotificationsPanel = /*#__PURE__*/React.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();
@@ -324,8 +348,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     as: "div",
     role: "dialog",
     "aria-labelledby": headingId,
-    onKeyDown: handleKeydown,
-    tabIndex: 0
+    onKeyDown: handleKeydown
   }, rest, {
     id: blockClass,
     className: cx(blockClass, className, `${blockClass}__container`, {

package/lib/components/PageHeader/PageHeader.d.ts

@@ -293,7 +293,8 @@ export type PageHeaderProps = PageHeaderBaseProps & PageActionProps & CollapseHe
 export declare let PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
 export declare const deprecatedProps: {
     /**
-     * **Deprecated** see property `enableBreadcrumbScroll`
+     * **Deprecated**
+     * see property `enableBreadcrumbScroll`
      */
     disableBreadcrumbScroll: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**

package/lib/components/PageHeader/PageHeader.js

@@ -554,7 +554,8 @@ const TYPES = {
 const tagTypes = Object.keys(TYPES);
 const deprecatedProps = {
   /**
-   * **Deprecated** see property `enableBreadcrumbScroll`
+   * **Deprecated**
+   * see property `enableBreadcrumbScroll`
    */
   disableBreadcrumbScroll: propsHelper.deprecateProp(index.default.bool, 'Property replaced by `enableBreadcrumbScroll`'),
   /**

package/lib/components/PageHeader/next/PageHeader.d.ts

@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2025
+ * Copyright IBM Corp. 2025, 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 React, { type ComponentType, type FunctionComponent } from 'react';
+import { IconButtonProps, BreadcrumbItemProps, BreadcrumbProps } from '@carbon/react';
 import { TYPES } from '@carbon/react/es/components/Tag/Tag';
 /**
  * ----------
@@ -208,8 +209,19 @@ interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
     tags?: TagItem[];
+    scroller?: React.ReactNode;
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
+interface PageHeaderScrollButtonProps extends IconButtonProps {
+    collapseText?: string;
+    expandText?: string;
+}
+declare const PageHeaderScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
+declare const PageHeaderTitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+interface PageHeaderBreadcrumbOverflowProps extends BreadcrumbProps {
+    renderOverflowBreadcrumb?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement<BreadcrumbItemProps>;
+}
+declare const PageHeaderBreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
 /**
  * -------
  * Exports
@@ -273,5 +285,8 @@ declare const HeroImage: {
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };
+declare const ScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
+declare const TitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, };