@carbon/ibm-products 2.71.1 → 2.72.0

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js

@@ -28,7 +28,7 @@ const ItemOption = _ref => {
   const {
     conditionBuilderRef
   } = useContext(ConditionBuilderContext);
-  const allOptions = config.options;
+  const allOptions = config?.options;
   const [searchValue, setSearchValue] = useState('');
   const selection = conditionState.value;
   const filteredItems = searchValue ? allOptions?.filter(opt => opt.label?.toLowerCase().includes(searchValue.toLowerCase())) : allOptions;
@@ -95,7 +95,7 @@ const ItemOption = _ref => {
       className: `${blockClass}__item-option__option-content`
     }, /*#__PURE__*/React__default.createElement("span", {
       className: `${blockClass}__item-option__option-label`
-    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
+    }, Icon && /*#__PURE__*/React__default.createElement(Icon, null), config?.isStatement ? getStatementContent(option) : option.label), isSelected && /*#__PURE__*/React__default.createElement(Checkmark, {
       className: `${blockClass}__checkmark`
     })));
   })));

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/ItemOptionForValueField.js

@@ -32,7 +32,7 @@ const ItemOptionForValueField = _ref => {
     conditionBuilderRef
   } = useContext(ConditionBuilderContext);
   const contentRef = useRef(null);
-  const [allOptions, setAllOptions] = useState(config.options);
+  const [allOptions, setAllOptions] = useState(config?.options);
   const [searchValue, setSearchValue] = useState('');
   const filteredItems = allOptions?.filter(opt => opt.label.toLowerCase().includes(searchValue.toLowerCase()));
   const selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useContext, useState, useRef, Fragment } from 'react';
+import React__default, { useContext, useState, useRef, useEffect, Fragment } from 'react';
 import ConditionBlock from '../ConditionBlock/ConditionBlock.js';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
@@ -47,6 +47,45 @@ const ConditionGroupBuilder = _ref => {
   const [showConditionSubGroupPreview, setShowConditionSubGroupPreview] = useState(-1);
   useState(false);
   const conditionBuilderContentRef = useRef(null);
+  const scrollParentRef = useRef(null);
+  useEffect(() => {
+    // getting scrollable parent initially
+    if (typeof conditionBuilderRef !== 'function' && conditionBuilderRef?.current) {
+      scrollParentRef.current = getScrollableParent(conditionBuilderRef.current);
+    }
+  }, [conditionBuilderRef]);
+  useEffect(() => {
+    // This fix addresses a flickering issue when hovering over "Add Condition" or "Add Subgroup".
+    // On hover, the component inserts a preview element below, ideally pushing the layout downward to create space.
+    // However, if the container is scrolled to the bottom, the layout may instead shift content upward,
+    // breaking the hover chain and causing the preview to flicker.
+    // Fix: When showing the preview on hover, if the scroll position is at the bottom,
+    // scrolling up by 1px prevents layout shift from breaking the hover chain and eliminates flickering.
+
+    const parent = scrollParentRef.current;
+    let atBottom = false;
+    if (parent instanceof Window || parent === document.body || parent === document.documentElement) {
+      atBottom = window.innerHeight + window.scrollY >= document.body.scrollHeight;
+    } else if (scrollParentRef.current) {
+      const parent = scrollParentRef.current;
+      atBottom = parent.scrollTop + parent.clientHeight >= parent.scrollHeight;
+    }
+    if ((showConditionPreview || showConditionSubGroupPreview) && atBottom) {
+      scrollParentRef.current?.scrollBy(0, -1);
+    }
+  }, [showConditionPreview, showConditionSubGroupPreview]);
+  const getScrollableParent = element => {
+    while (element && element !== document.body) {
+      const style = getComputedStyle(element);
+      const overflowY = style.overflowY;
+      const isScrollable = overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay';
+      if (isScrollable && element.scrollHeight > element.clientHeight) {
+        return element;
+      }
+      element = element.parentElement;
+    }
+    return window; // fallback to window
+  };
   const onRemoveHandler = (conditionId, evt, conditionIndex) => {
     if (group && group.conditions && group.conditions.length > 1) {
       if (variant == HIERARCHICAL_VARIANT) {
@@ -327,10 +366,10 @@ const ConditionGroupBuilder = _ref => {
       },
       hideConditionPreviewHandler: hideConditionPreviewHandler,
       isLastCondition: isLastCondition
-    })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+    })), conditionIndex === showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default.createElement(ConditionPreview, {
       previewType: "subGroup",
       group: group
-    }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default.createElement(ConditionPreview, {
+    }))), conditionIndex === showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default.createElement(ConditionPreview, {
       previewType: "condition",
       group: group
     }))))));

package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.d.ts

@@ -10,10 +10,12 @@ interface ConditionPreviewProps {
     previewType: 'newGroup' | 'subGroup' | 'condition';
     group: ConditionGroup;
     colorIndex?: number;
+    className?: string;
 }
 declare const ConditionPreview: {
-    ({ previewType, group, colorIndex, }: ConditionPreviewProps): React.JSX.Element;
+    ({ previewType, group, colorIndex, className, }: ConditionPreviewProps): React.JSX.Element;
     propTypes: {
+        className: any;
         /**
          * index of the color for next group
          */

package/es/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -19,7 +19,8 @@ const ConditionPreview = _ref => {
   let {
     previewType,
     group,
-    colorIndex
+    colorIndex,
+    className
   } = _ref;
   const [animate, setAnimate] = useState(false);
   const [propertyText, operatorText, valueText, ifText] = useTranslations(['valueText', 'operatorText', 'propertyText', 'ifText']);
@@ -39,7 +40,7 @@ const ConditionPreview = _ref => {
     })));
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: cx([`${blockClass}__group__row ${blockClass}__group-preview `, {
+    className: cx([`${blockClass}__group__row ${blockClass}__group-preview ${className}`, {
       [`${blockClass}__group-preview-animate`]: animate
     }])
   }, /*#__PURE__*/React__default.createElement(ConditionBuilderItem, {
@@ -48,7 +49,7 @@ const ConditionPreview = _ref => {
   })), /*#__PURE__*/React__default.createElement("div", {
     "data-color-index": colorIndex,
     "aria-hidden": true,
-    className: cx([`${blockClass}__group ${blockClass}__condition-wrapper ${blockClass}__group-preview ${blockClass}__group-wrapper `, {
+    className: cx([`${blockClass}__group  ${blockClass}__condition-wrapper ${blockClass}__group-preview ${blockClass}__group-wrapper ${className}`, {
       [`${blockClass}__group-preview-animate`]: animate
     }])
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -84,6 +85,7 @@ const ConditionPreview = _ref => {
   }), getConditionSection())));
 };
 ConditionPreview.propTypes = {
+  className: PropTypes.string,
   /**
    * index of the color for next group
    */

package/es/components/ConditionBuilder/utils/useEvent.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { RefObject } from 'react';
+export declare const useEvent: <E extends keyof GlobalEventHandlersEventMap>(elementOrRef: HTMLElement | RefObject<Element | null>, eventName: E, callback: (event: GlobalEventHandlersEventMap[E]) => void) => void;

package/es/components/ConditionBuilder/utils/useEvent.js

@@ -0,0 +1,32 @@
+/**
+ * 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.
+ */
+
+import { useRef, useEffect } from 'react';
+
+const useEvent = (elementOrRef, eventName, callback) => {
+  const savedCallback = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const element = 'current' in elementOrRef ? elementOrRef.current : elementOrRef;
+    if (!element) {
+      return;
+    }
+    const handler = event => {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    };
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+};
+
+export { useEvent };

package/es/components/ConditionBuilder/utils/useTranslations.js

@@ -17,7 +17,7 @@ const useTranslations = (translationKeys, alterTranslationKeyMap) => {
     if (alterTranslationKeyMap?.[translationKey]) {
       translationKey = alterTranslationKeyMap[translationKey];
     }
-    if (translateWithId?.(translationKey)) {
+    if (translateWithId?.(translationKey) && translateWithId?.(translationKey) !== translationKey) {
       return translateWithId(translationKey);
     } else if (translationsObject[translationKey]) {
       return translationsObject[translationKey];

package/es/components/EditInPlace/EditInPlace.js

@@ -179,7 +179,6 @@ let EditInPlace = /*#__PURE__*/forwardRef((_ref, ref) => {
     label: cancelLabel,
     onClick: onCancelHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "cancel",
     className: `${blockClass}__btn ${blockClass}__btn-cancel`
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
@@ -190,7 +189,6 @@ let EditInPlace = /*#__PURE__*/forwardRef((_ref, ref) => {
     label: saveLabel,
     onClick: onSaveHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "save",
     className: `${blockClass}__btn ${blockClass}__btn-save`,
     disabled: !canSave
@@ -205,7 +203,6 @@ let EditInPlace = /*#__PURE__*/forwardRef((_ref, ref) => {
     label: editLabel,
     onClick: onFocusHandler,
     kind: "ghost",
-    tabIndex: 0,
     key: "edit"
   }, _Edit || (_Edit = /*#__PURE__*/React__default.createElement(Edit, {
     size: 16

package/es/components/EmptyStates/EmptyState.d.ts

@@ -67,8 +67,8 @@ export interface EmptyStateProps {
      */
     title: string | ReactNode;
     /**
-     * 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?: boolean;
 }

package/es/components/EmptyStates/EmptyState.js

@@ -8,12 +8,6 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import { EmptyStateV2 } from './EmptyStateV2.js';
-import './ErrorEmptyState/ErrorEmptyState.js';
-import './NoDataEmptyState/NoDataEmptyState.js';
-import './NoTagsEmptyState/NoTagsEmptyState.js';
-import './NotFoundEmptyState/NotFoundEmptyState.js';
-import './NotificationsEmptyState/NotificationsEmptyState.js';
-import './UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Button } from '@carbon/react';
@@ -138,8 +132,8 @@ EmptyState.propTypes = {
    */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.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: PropTypes.bool
 };

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

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

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

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { unstable_FeatureFlags, ComposedModal } from '@carbon/react';
-import React__default, { createContext, useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -15,28 +15,12 @@ import { pkg } from '../../settings.js';
 import InterstitialScreenHeader from './InterstitialScreenHeader.js';
 import InterstitialScreenBody from './InterstitialScreenBody.js';
 import InterstitialScreenFooter from './InterstitialScreenFooter.js';
+import { InterstitialScreenContext, blockClass } from './context.js';
 
-// The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${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__*/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
@@ -213,4 +197,4 @@ InterstitialScreen.propTypes = {
   open: PropTypes.bool
 };
 
-export { InterstitialScreen, InterstitialScreenContext, blockClass };
+export { InterstitialScreen };

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

@@ -8,7 +8,7 @@
 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, blockClass } from './InterstitialScreen.js';
+import { InterstitialScreenContext, blockClass } from './context.js';
 import { ModalBody } from '@carbon/react';
 import { Carousel } from '../Carousel/Carousel.js';
 import '../Carousel/CarouselItem.js';

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

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useRef, useState, useEffect, useMemo } from 'react';
 import PropTypes from '../../_virtual/index.js';
-import { InterstitialScreenContext, blockClass } from './InterstitialScreen.js';
+import { InterstitialScreenContext, blockClass } from './context.js';
 import { ModalFooter, Button, InlineLoading } from '@carbon/react';
 import { clamp } from '../../global/js/utils/clamp.js';
 import { ArrowRight } from '@carbon/react/icons';

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

@@ -10,7 +10,7 @@ import { usePrefix, ModalHeader, ProgressIndicator, ProgressStep } from '@carbon
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { InterstitialScreenContext, blockClass } from './InterstitialScreen.js';
+import { InterstitialScreenContext, blockClass } from './context.js';
 import { useId } from '../../global/js/utils/useId.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 

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

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

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

@@ -28,6 +28,7 @@ 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;
 
@@ -133,6 +134,7 @@ let NotificationsPanel = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const supportedLocale = getSupportedLocale(dateTimeLocale, DefaultLocale);
   usePrefix();
   const headingId = useId();
+  const isClickOnTrigger = useRef(false);
   const reducedMotion = usePrefersReducedMotion();
   const exitAnimationName = reducedMotion ? 'notifications-panel-exit-reduced' : 'notifications-panel-fade-out';
   const {
@@ -142,17 +144,28 @@ 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 as HTMLElement;
-  //   if (!isActionableElement(element)) {
-  //     setTimeout(() => {
-  //       triggerButtonRef?.current?.focus();
-  //     }, 100);
-  //   }
-  //   onClickOutside?.();
-  // });
-
+  useEffect(() => {
+    const button = triggerButtonRef?.current;
+    const handleClick = () => {
+      isClickOnTrigger.current = true;
+    };
+    button?.addEventListener('click', handleClick, true);
+    return () => {
+      button?.removeEventListener('click', handleClick, true);
+    };
+  }, [triggerButtonRef]);
+  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') {
@@ -310,6 +323,17 @@ 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();
@@ -322,8 +346,7 @@ let NotificationsPanel = /*#__PURE__*/React__default.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/es/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/es/components/PageHeader/PageHeader.js

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

package/es/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, };