@carbon/ibm-products 2.83.0 → 2.84.0

package/es/components/Tearsheet/usePresenceContext.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 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 { type RefObject } from 'react';
+export interface PresenceContext {
+    /**
+     * The ref object the presence mode is mounted with
+     */
+    presenceRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting: boolean;
+    /**
+     * Returns if the caller is exclusive to this presence context
+     */
+    isPresenceExclusive: (id: string) => boolean;
+}
+/**
+ * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
+ */
+export declare const usePresenceContext: (open: boolean, initialPresenceId?: string) => readonly [boolean, PresenceContext];

package/es/components/Tearsheet/usePresenceContext.js

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef, useCallback, useMemo } from 'react';
+import { usePresence } from './usePresence.js';
+
+/**
+ * Returns if the presence node is present and the context value to be used by a presence context, e.g. ModalPresence.
+ */
+const usePresenceContext = (open, initialPresenceId) => {
+  const presenceIdRef = useRef(initialPresenceId);
+  const presenceRef = useRef(null);
+  const prevPresenceRef = useRef(null);
+
+  // clean up the presence id, if not predefined and if the presence node was unmounted
+  if (!initialPresenceId && prevPresenceRef.current && !presenceRef.current) {
+    presenceIdRef.current = null;
+  }
+  prevPresenceRef.current = presenceRef.current;
+  const {
+    isPresent,
+    isExiting
+  } = usePresence(presenceRef, open);
+  const isPresenceExclusive = useCallback(id => {
+    if (!id) {
+      return false;
+    }
+
+    // return false if the presence context is occupied
+    if (presenceIdRef.current && presenceIdRef.current !== id) {
+      return false;
+    }
+
+    // otherwise occupy presence context and return true
+    presenceIdRef.current = id;
+    return true;
+  }, []);
+  const contextValue = useMemo(() => ({
+    presenceRef,
+    isPresenceExclusive,
+    isExiting
+  }), [presenceRef, isPresenceExclusive, isExiting]);
+  return [isPresent, contextValue];
+};
+
+export { usePresenceContext };

package/es/global/js/hooks/useMergedRefs.d.ts

@@ -0,0 +1 @@
+export function useMergedRefs(refs: any): (node: any) => void;

package/es/global/js/hooks/useMergedRefs.js

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Merges multiple refs into a single callback ref.
+ *
+ * This hook is useful when you need to attach multiple refs (for example, a ref
+ * passed from `forwardRef` and a local ref from `useRef`) to the same node. It
+ * accepts an array of refs and returns a callback ref that, when attached to a
+ * node, assigns that node to every ref in the array.
+ */
+const useMergedRefs = refs => {
+  // eslint-disable-next-line  react-hooks/exhaustive-deps
+  const memoizedRefs = useMemo(() => refs, refs);
+  return useCallback(node => {
+    memoizedRefs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    });
+  }, [memoizedRefs]);
+};
+
+export { useMergedRefs };

package/es/global/js/hooks/useOverflowString.js

@@ -22,20 +22,5 @@ function useOverflowStringWidth(elementRef) {
   }, [checkWidthOverflow, elementRef, innerText]);
   return isOverflowing;
 }
-const useOverflowStringHeight = elementRef => {
-  const innerText = elementRef?.current?.innerText;
-  const [isOverflowing, setIsOverflowing] = useState();
-  const checkHeightOverflow = useCallback(() => {
-    const offsetHeight = elementRef?.current?.offsetHeight;
-    const scrollHeight = elementRef?.current?.scrollHeight;
-    if (offsetHeight && scrollHeight) {
-      setIsOverflowing(offsetHeight < scrollHeight);
-    }
-  }, [elementRef]);
-  useEffect(() => {
-    checkHeightOverflow();
-  }, [checkHeightOverflow, elementRef, innerText]);
-  return isOverflowing;
-};
 
-export { useOverflowStringHeight, useOverflowStringWidth };
+export { useOverflowStringWidth };

package/es/index.js

@@ -49,6 +49,7 @@ export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { TagSet } from './components/TagSet/TagSet.js';
 export { Tearsheet } from './components/Tearsheet/Tearsheet.js';
 export { TearsheetNarrow } from './components/Tearsheet/TearsheetNarrow.js';
+export { TearsheetPresence, withTearsheetPresence } from './components/Tearsheet/TearsheetPresence.js';
 export { WebTerminal } from './components/WebTerminal/WebTerminal.js';
 export { WebTerminalContentWrapper } from './components/WebTerminal/WebTerminalContentWrapper.js';
 export { WebTerminalProvider, useWebTerminal } from './components/WebTerminal/hooks/index.js';

package/lib/components/AddSelect/AddSelectBody.js

@@ -14,6 +14,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var Tearsheet = require('../Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
+var settings = require('../../settings.js');
 require('../EmptyStates/EmptyState.js');
 require('../EmptyStates/EmptyStateV2.deprecated.js');
 require('../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
@@ -32,7 +33,6 @@ var addSelectUtils = require('./add-select-utils.js');
 var useItemSort = require('./hooks/useItemSort.js');
 var useParentSelect = require('./hooks/useParentSelect.js');
 var usePath = require('./hooks/usePath.js');
-var settings = require('../../settings.js');
 
 const blockClass = `${settings.pkg.prefix}--add-select`;
 const componentName = 'AddSelectBody';

package/lib/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js

@@ -33,18 +33,18 @@ const CoachmarkBeacon = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, `${blockClass}-${kind}`, className)
-  }, devtools.getDevtoolsProps(componentName), {
-    role: "tooltip"
-  }, rest, {
+  }, devtools.getDevtoolsProps(componentName), rest, {
     ref: ref
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
   }, buttonProps, {
-    className: `${blockClass}__target`
+    className: `${blockClass}__target`,
+    "aria-label": label
   }), /*#__PURE__*/React.createElement("svg", {
     className: `${blockClass}__center`,
-    "aria-label": label
-  }, /*#__PURE__*/React.createElement("title", null, label), _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
+    "aria-hidden": "true",
+    focusable: "false"
+  }, _circle || (_circle = /*#__PURE__*/React.createElement("circle", {
     r: 1,
     cx: 38,
     cy: 38

package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -13,9 +13,9 @@ var React = require('react');
 var index = require('../../../../../_virtual/index.js');
 require('../../../../Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('../../../../Tearsheet/TearsheetNarrow.js');
+var settings = require('../../../../../settings.js');
 var Columns = require('./Columns.js');
 var Actions = require('./Actions.js');
-var settings = require('../../../../../settings.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const CustomizeColumnsTearsheet = _ref => {

package/lib/components/PageHeader/PageHeader.js

@@ -21,7 +21,6 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-var useOverflowString = require('../../global/js/hooks/useOverflowString.js');
 var useWindowScroll = require('../../global/js/hooks/useWindowScroll.js');
 var useWindowResize = require('../../global/js/hooks/useWindowResize.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
@@ -357,12 +356,6 @@ const PageHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       }
     });
   }, [headerRef, pageHeaderStyles]);
-  const subtitleRef = React.useRef(null);
-  const isOverflowing = useOverflowString.useOverflowStringHeight(subtitleRef);
-  const subtitleContent = /*#__PURE__*/React.createElement("span", {
-    ref: subtitleRef,
-    className: `${PageHeaderUtils.blockClass}__subtitle-text`
-  }, subtitle);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${PageHeaderUtils.blockClass}--offset-top-measuring-element`,
     ref: offsetTopMeasuringRef
@@ -439,10 +432,9 @@ const PageHeader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: `${PageHeaderUtils.blockClass}__subtitle-row`
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: `${PageHeaderUtils.blockClass}__subtitle`
-  }, isOverflowing ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
-    definition: subtitle,
-    className: `${PageHeaderUtils.blockClass}__subtitle-tooltip`
-  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React.createElement(react.Row, {
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${PageHeaderUtils.blockClass}__subtitle-text`
+  }, subtitle))), children ? /*#__PURE__*/React.createElement(react.Row, {
     className: `${PageHeaderUtils.blockClass}__available-row`
   }, /*#__PURE__*/React.createElement(react.Column, {
     className: `${PageHeaderUtils.blockClass}__available-column`

package/lib/components/PageHeader/next/PageHeader.js

@@ -59,6 +59,7 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
   const [fullyCollapsed, setFullyCollapsed] = React.useState(false);
   const [titleClipped, setTitleClipped] = React.useState(false);
   const [contentActionsClipped, setContentActionsClipped] = React.useState(false);
+  const [breadcrumbActionsClipped, setBreadcrumbActionsClipped] = React.useState(false);
 
   // Intersection Observer setup, tracks if the PageHeaderContent is visible on page.
   // If it is not visible, we should set fully collapsed to true so that the
@@ -103,6 +104,7 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
       entries.forEach(entry => {
         if (entry.target === refs?.contentActions.current) {
           setContentActionsClipped(!entry.isIntersecting);
+          setBreadcrumbActionsClipped(entry.isIntersecting);
         }
       });
     }, {
@@ -142,7 +144,8 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
       pageActionsInstance,
       setPageActionsInstance,
       titleClipped,
-      contentActionsClipped
+      contentActionsClipped,
+      breadcrumbActionsClipped
     }
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
@@ -169,10 +172,11 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
     pageActionsFlush,
     ...other
   } = _ref2;
+  const context$1 = context.usePageHeader();
   const {
     pageActionsInstance: globalActions,
     contentActionsClipped
-  } = context.usePageHeader();
+  } = context$1;
   const classNames = cx({
     [`${PageHeaderUtils.blockClass}__breadcrumb-bar`]: true,
     [`${PageHeaderUtils.blockClass}__breadcrumb-bar-border`]: border,
@@ -183,7 +187,12 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
     [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
     [`${PageHeaderUtils.blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
   });
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+  return /*#__PURE__*/React.createElement(context.PageHeaderContext.Provider, {
+    value: {
+      ...context$1,
+      isContentActionsInBreadcrumbBar: true
+    }
+  }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: classNames,
     ref: ref
   }, other), /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement(react.Column, {
@@ -200,7 +209,7 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeade
     className: `${PageHeaderUtils.blockClass}__breadcrumb__actions`
   }, /*#__PURE__*/React.createElement("div", {
     className: contentActionsClasses
-  }, contentActions), pageActions)))));
+  }, contentActions), pageActions))))));
 });
 PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 
@@ -332,12 +341,14 @@ const PageHeaderContentPageActions = _ref4 => {
   } = _ref4;
   const {
     setRefs,
-    contentActionsClipped
+    contentActionsClipped,
+    breadcrumbActionsClipped,
+    isContentActionsInBreadcrumbBar: isInBreadcrumbBar
   } = context.usePageHeader();
   const classNames = cx(`${PageHeaderUtils.blockClass}__content__page-actions`, {
     // Revisit this:
     // May want to only add this class if there are content actions in the breadcrumb bar as well
-    [`${PageHeaderUtils.blockClass}__content__page-actions--clipped`]: contentActionsClipped
+    [`${PageHeaderUtils.blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? breadcrumbActionsClipped : contentActionsClipped
   }, className);
   const containerRef = React.useRef(null);
   const offsetRef = React.useRef(null);
@@ -353,12 +364,18 @@ const PageHeaderContentPageActions = _ref4 => {
     }
   }, [menuButtonVisibility]);
   React.useEffect(() => {
-    setRefs(prev => ({
-      ...prev,
-      contentActions: containerRef
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (isInBreadcrumbBar) {
+      setRefs(prev => ({
+        ...prev,
+        breadcrumbActions: containerRef
+      }));
+    } else {
+      setRefs(prev => ({
+        ...prev,
+        contentActions: containerRef
+      }));
+    }
+  }, [isInBreadcrumbBar, setRefs]);
   React.useEffect(() => {
     if (!containerRef.current || !Array.isArray(actions)) {
       return;

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

@@ -14,6 +14,7 @@ export type PageHeaderRefs = {
     contentRef?: RefObject<HTMLDivElement | null>;
     titleRef?: RefObject<HTMLHeadingElement | null>;
     contentActions?: RefObject<HTMLDivElement | null>;
+    breadcrumbActions?: RefObject<HTMLDivElement | null>;
 };
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
@@ -23,6 +24,8 @@ type PageHeaderContextType = {
     fullyCollapsed?: boolean;
     titleClipped?: boolean;
     contentActionsClipped?: boolean;
+    breadcrumbActionsClipped?: boolean;
+    isContentActionsInBreadcrumbBar?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
 export declare function usePageHeader(): PageHeaderContextType;

package/lib/components/PageHeader/next/utils.js

@@ -41,6 +41,14 @@ const windowExists = typeof window !== `undefined`;
  */
 const scrollable = target => {
   const style = window.getComputedStyle(target);
+  const tagName = target.tagName.toLowerCase();
+
+  // Exclude body/html from hidden check (modals set overflow:hidden on body)
+  if (tagName === 'body' || tagName === 'html') {
+    return /(auto|scroll)/.test(style.overflow);
+  }
+
+  // For other elements, include hidden as it may be intentional scroll container
   return /(auto|scroll|hidden)/.test(style.overflow);
 };
 

package/lib/components/SidePanel/SidePanel.js

@@ -115,11 +115,19 @@ const SidePanel = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Title animation on scroll related state
   const [labelTextHeight, setLabelTextHeight] = React.useState(0);
-  const handleEscapeKey = event => {
+  const handleEscapeKey = React.useCallback(event => {
     if (event.key === 'Escape' && open) {
       onRequestClose?.();
     }
-  };
+  }, [onRequestClose, open]);
+  React.useEffect(() => {
+    if (open && !slideIn) {
+      window.addEventListener('keydown', handleEscapeKey);
+      return () => {
+        window.removeEventListener('keydown', handleEscapeKey);
+      };
+    }
+  }, [handleEscapeKey, open, slideIn]);
   React.useEffect(() => {
     if (!enableResizer) {
       return;

package/lib/components/Tearsheet/TearsheetPresence.d.ts

@@ -0,0 +1,37 @@
+/**
+ * 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 React, { type ComponentType, type FC, type PropsWithChildren } from 'react';
+import { type PresenceContext } from './usePresenceContext';
+export interface TearsheetPresenceProps {
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open: boolean;
+    /**
+     * Internal property for backwards compatibility. Specify whether the Modal should opt in to presence mode.
+     */
+    _autoEnablePresence?: boolean;
+    /**
+     * Internal property to predefine the presence context's id for exclusivity.
+     */
+    _presenceId?: string;
+}
+export declare const TearsheetPresence: ({ open, _presenceId: presenceId, _autoEnablePresence: autoEnablePresence, children, }: PropsWithChildren<TearsheetPresenceProps>) => React.JSX.Element | null;
+interface ModalPresenceContextProps extends PresenceContext {
+    autoEnablePresence: boolean;
+}
+export declare const TearsheetPresenceContext: React.Context<ModalPresenceContextProps | undefined>;
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+export declare const useExclusiveTearsheetPresenceContext: (id: string) => ModalPresenceContextProps | undefined;
+type WithModalPresenceProps = Pick<TearsheetPresenceProps, 'open'>;
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+export declare const withTearsheetPresence: <TProps extends object>(Component: ComponentType<TProps>) => FC<TProps & WithModalPresenceProps>;
+export {};

package/lib/components/Tearsheet/TearsheetPresence.js

@@ -0,0 +1,61 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var React = require('react');
+var usePresenceContext = require('./usePresenceContext.js');
+
+const TearsheetPresence = _ref => {
+  let {
+    open,
+    _presenceId: presenceId,
+    _autoEnablePresence: autoEnablePresence = true,
+    children
+  } = _ref;
+  const [isPresent, context] = usePresenceContext.usePresenceContext(open, presenceId);
+  const contextValue = React.useMemo(() => ({
+    autoEnablePresence,
+    ...context
+  }), [autoEnablePresence, context]);
+  if (!isPresent) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(TearsheetPresenceContext.Provider, {
+    value: contextValue
+  }, children);
+};
+const TearsheetPresenceContext = /*#__PURE__*/React.createContext(undefined);
+
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+const useExclusiveTearsheetPresenceContext = id => {
+  const ctx = React.useContext(TearsheetPresenceContext);
+  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+};
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+const withTearsheetPresence = Component => {
+  const WithModalPresence = props => {
+    const {
+      open,
+      ...componentProps
+    } = props;
+    return /*#__PURE__*/React.createElement(TearsheetPresence, {
+      open: open
+    }, /*#__PURE__*/React.createElement(Component, componentProps));
+  };
+  WithModalPresence.displayName = `withModalPresence(${Component.displayName || Component.name || 'Component'})`;
+  return WithModalPresence;
+};
+
+exports.TearsheetPresence = TearsheetPresence;
+exports.TearsheetPresenceContext = TearsheetPresenceContext;
+exports.useExclusiveTearsheetPresenceContext = useExclusiveTearsheetPresenceContext;
+exports.withTearsheetPresence = withTearsheetPresence;