@carbon/ibm-products 2.73.1 → 2.74.0

package/es/components/AboutModal/AboutModal.d.ts

@@ -7,65 +7,59 @@
 import React, { ReactNode } from 'react';
 export interface AboutModalProps {
     /**
-     * If you are legally required to display logos of technologies used
-     * to build your product you can provide this in the additionalInfo.
-     * Additional information will be displayed in the footer.
+     * Provide additional detail for the modal footer, such as logos of
+     * technologies used in the product, legally required for some products
      */
     additionalInfo?: ReactNode;
     /**
-     * Provide an optional class to be applied to the modal root node.
+     * Specify an optional className to be applied to the modal root node
      */
     className?: string;
     /**
-     * The accessibility title for the close icon.
+     * Provide an accessible name for the close icon
      */
     closeIconDescription: string;
     /**
-     * Subhead text providing any relevant product disclaimers including
-     * legal information (optional)
+     * Provide any relevant product disclaimers or legal information
      */
     content?: ReactNode;
     /**
-     * Trademark and copyright information. Displays first year of
-     * product release to current year.
+     * Specify the first year of product release to the current year
      */
     copyrightText: string;
     /**
-     * An array of Carbon `Link` component if there are additional information
-     * to call out within the card. The about modal should be used to display
-     * the product information and not where users go to find help (optional)
+     * Provide an array of Carbon `Link`s for additional detail about the
+     * product
      */
     links?: ReactNode[];
     /**
-     * A visual symbol used to represent the product.
+     * Provide a visual representation of the product
      */
     logo: ReactNode;
     /**
-     * Specifies aria label for AboutModal
+     * Specify an aria-label for the modal
      */
     modalAriaLabel?: string;
     /**
-     * Specifies an optional handler which is called when the AboutModal
-     * is closed. Returning `false` prevents the AboutModal from closing.
+     * Specify an optional handler for closing modal. Returning `false`
+     * prevents the modal from closing
      */
     onClose?: () => void | boolean;
     /**
-     * Specifies whether the AboutModal is open or not.
+     * Specify whether the modal is currently open
      */
     open?: boolean;
     /**
-     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     * Provide the DOM node where the modal should be rendered.
+     * Defaults to `document.body`
      */
     portalTarget?: ReactNode;
     /**
-     * Header text that provides the product name. The IBM Services logo
-     * consists of two discrete, but required, elements: the iconic
-     * IBM 8-bar logo represented alongside the IBM Services logotype.
-     * Please follow these guidelines to ensure proper execution.
+     * Provide the product name for the modal header
      */
     title: ReactNode;
     /**
-     * Text that provides information on the version number of your product.
+     * Provide the product’s version number
      */
     version: string;
 }

package/es/components/AboutModal/AboutModal.js

@@ -118,65 +118,59 @@ AboutModal.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 AboutModal.propTypes = {
   /**
-   * If you are legally required to display logos of technologies used
-   * to build your product you can provide this in the additionalInfo.
-   * Additional information will be displayed in the footer.
+   * Provide additional detail for the modal footer, such as logos of
+   * technologies used in the product, legally required for some products
    */
   additionalInfo: PropTypes.node,
   /**
-   * Provide an optional class to be applied to the modal root node.
+   * Specify an optional className to be applied to the modal root node
    */
   className: PropTypes.string,
   /**
-   * The accessibility title for the close icon.
+   * Provide an accessible name for the close icon
    */
   closeIconDescription: PropTypes.string.isRequired,
   /**
-   * Subhead text providing any relevant product disclaimers including
-   * legal information (optional)
+   * Provide any relevant product disclaimers or legal information
    */
   content: PropTypes.node,
   /**
-   * Trademark and copyright information. Displays first year of
-   * product release to current year.
+   * Specify the first year of product release to the current year
    */
   copyrightText: PropTypes.string.isRequired,
   /**
-   * An array of Carbon `Link` component if there are additional information
-   * to call out within the card. The about modal should be used to display
-   * the product information and not where users go to find help (optional)
+   * Provide an array of Carbon `Link`s for additional detail about the
+   * product
    */
   links: PropTypes.arrayOf(PropTypes.element),
   /**
-   * A visual symbol used to represent the product.
+   * Provide a visual representation of the product
    */
   logo: PropTypes.node.isRequired,
   /**
-   * Specifies aria label for AboutModal
+   * Specify an aria-label for the modal
    */
   modalAriaLabel: PropTypes.string,
   /**
-   * Specifies an optional handler which is called when the AboutModal
-   * is closed. Returning `false` prevents the AboutModal from closing.
+   * Specify an optional handler for closing modal. Returning `false`
+   * prevents the modal from closing
    */
   onClose: PropTypes.func,
   /**
-   * Specifies whether the AboutModal is open or not.
+   * Specify whether the modal is currently open
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * Provide the DOM node where the modal should be rendered.
+   * Defaults to `document.body`
    */
   portalTarget: PropTypes.node,
   /**
-   * Header text that provides the product name. The IBM Services logo
-   * consists of two discrete, but required, elements: the iconic
-   * IBM 8-bar logo represented alongside the IBM Services logotype.
-   * Please follow these guidelines to ensure proper execution.
+   * Provide the product name for the modal header
    */
   title: PropTypes.node.isRequired,
   /**
-   * Text that provides information on the version number of your product.
+   * Provide the product’s version number
    */
   version: PropTypes.string.isRequired
 };

package/es/components/AddSelect/AddSelectBody.js

@@ -13,7 +13,7 @@ import { Tag } from '@carbon/react';
 import { Tearsheet } from '../Tearsheet/Tearsheet.js';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
 import '../EmptyStates/EmptyState.js';
-import '../EmptyStates/EmptyStateV2.js';
+import '../EmptyStates/EmptyStateV2.deprecated.js';
 import '../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
 import '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
 import '../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';

package/es/components/Carousel/Carousel.js

@@ -160,7 +160,7 @@ const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }, [handleOnScroll]);
   const handleScrollToView = useCallback(itemNumber => {
     updateAriaHiddenTabIndex(itemNumber);
-    childElementsRef.current[itemNumber].scrollIntoView();
+    childElementsRef.current[itemNumber]?.scrollIntoView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const getFocusableElements = container => {

package/es/components/Coachmark/Coachmark.d.ts

@@ -78,6 +78,10 @@ export interface CoachmarkProps {
      * Does nothing if `overlayKind=stacked`.
      */
     isOpenByDefault?: boolean;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
 }
 /**
  * Coachmarks are used to call out specific functionality or concepts

package/es/components/Coachmark/Coachmark.js

@@ -29,7 +29,8 @@ const defaults = {
   onClose: () => {},
   overlayKind: 'tooltip',
   theme: 'light',
-  isOpenByDefault: false
+  isOpenByDefault: false,
+  closeIconDescription: ''
 };
 /**
  * Coachmarks are used to call out specific functionality or concepts
@@ -52,6 +53,7 @@ let Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
     target,
     theme = defaults.theme,
     isOpenByDefault = defaults.isOpenByDefault,
+    closeIconDescription = defaults.closeIconDescription,
     // Collect any other property values passed in.
     ...rest
   } = _ref;
@@ -132,7 +134,8 @@ let Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
     targetOffset: targetOffset,
     align: align,
     positionTune: positionTune,
-    isOpen: isOpen
+    isOpen: isOpen,
+    closeIconDescription
   };
   const handleResize = throttle(() => {
     closeOverlay();
@@ -280,6 +283,10 @@ Coachmark.propTypes = {
    * Optional class name for this component.
    */
   className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
   /**
    * Determines if the coachmark is open by default.
    * Does nothing if `overlayKind=stacked`.

package/es/components/Coachmark/CoachmarkDragbar.d.ts

@@ -10,10 +10,6 @@ interface CoachmarkDragbarProps {
      * Handler to manage keyboard interactions with the dragbar.
      */
     a11yKeyboardHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-    /**
-     * Tooltip text and aria label for the Close button icon.
-     */
-    closeIconDescription?: string;
     /**
      * Function to call when the close button is clicked.
      */

package/es/components/Coachmark/CoachmarkDragbar.js

@@ -13,6 +13,7 @@ import { Draggable, Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { useCoachmark } from './utils/context.js';
 
 var _Draggable;
 
@@ -24,7 +25,6 @@ const blockClass = `${pkg.prefix}--coachmark-dragbar`;
 const overlayBlockClass = `${pkg.prefix}--coachmark-overlay`;
 const componentName = 'CoachmarkDragbar';
 const defaults = {
-  closeIconDescription: 'Close',
   onDrag: () => {},
   onClose: () => {},
   showCloseButton: true,
@@ -37,7 +37,6 @@ const defaults = {
 let CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     a11yKeyboardHandler,
-    closeIconDescription = defaults.closeIconDescription,
     onClose = defaults.onClose,
     onDrag = defaults.onDrag,
     showCloseButton = defaults.showCloseButton,
@@ -64,6 +63,7 @@ let CoachmarkDragbar = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     };
   }, [isDragging, onDrag]);
   const handleDragStart = () => setIsDragging(true);
+  const closeIconDescription = useCoachmark()?.closeIconDescription;
   return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -110,10 +110,6 @@ CoachmarkDragbar.propTypes = {
    * Handler to manage keyboard interactions with the dragbar.
    */
   a11yKeyboardHandler: PropTypes.func.isRequired,
-  /**
-   * Tooltip text and aria label for the Close button icon.
-   */
-  closeIconDescription: PropTypes.string,
   /**
    * Function to call when the close button is clicked.
    */

package/es/components/Coachmark/CoachmarkHeader.d.ts

@@ -6,10 +6,6 @@
  */
 import React from 'react';
 interface CoachmarkHeaderProps {
-    /**
-     * Tooltip text and aria label for the Close button icon.
-     */
-    closeIconDescription?: string;
     /**
      * Function to call when the close button is clicked.
      */

package/es/components/Coachmark/CoachmarkHeader.js

@@ -13,13 +13,13 @@ import { Close } from '@carbon/react/icons';
 import { Button } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { useCoachmark } from './utils/context.js';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--coachmark-header`;
 const overlayBlockClass = `${pkg.prefix}--coachmark-overlay`;
 const componentName = 'CoachmarkHeader';
 const defaults = {
-  closeIconDescription: 'Close',
   onClose: () => {},
   showCloseButton: true,
   theme: 'light'
@@ -30,13 +30,13 @@ const defaults = {
  */
 let CoachmarkHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
-    closeIconDescription = defaults.closeIconDescription,
     onClose = defaults.onClose,
     showCloseButton = defaults.showCloseButton,
     theme = defaults.theme,
     // Collect any other property values passed in.
     ...rest
   } = _ref;
+  const closeIconDescription = useCoachmark()?.closeIconDescription;
   return /*#__PURE__*/React__default.createElement("header", _extends({}, rest, {
     className: cx(blockClass, `${blockClass}__${theme}`),
     ref: ref

package/es/components/Coachmark/CoachmarkTagline.js

@@ -21,9 +21,9 @@ var _Idea;
 const blockClass = `${pkg.prefix}--coachmark-tagline`;
 const componentName = 'CoachmarkTagline';
 const defaults = {
-  closeIconDescription: 'Close',
   onClose: () => {},
-  theme: 'light'
+  theme: 'light',
+  closeIconDescription: 'Close'
 };
 /**
  * DO NOT USE. This component is for the exclusive use
@@ -38,6 +38,8 @@ let CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const coachmark = useCoachmark();
+  const contextCloseIconDescription = useCoachmark()?.closeIconDescription;
+  const closeIconDesc = closeIconDescription ?? contextCloseIconDescription;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, `${blockClass}__${theme}`, coachmark?.isOpen && `${blockClass}--is-open`),
     ref: ref
@@ -55,7 +57,7 @@ let CoachmarkTagline = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     kind: "ghost",
     size: "sm",
     renderIcon: Close,
-    iconDescription: closeIconDescription,
+    iconDescription: closeIconDesc,
     hasIconOnly: true,
     className: `${blockClass}--close-btn`,
     onClick: onClose

package/es/components/Coachmark/next/Coachmark/Coachmark.d.ts

@@ -4,10 +4,9 @@
  * 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, { FC, ForwardRefExoticComponent, ReactNode, RefAttributes, RefObject } from 'react';
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import { CoachmarkContentProps } from './CoachmarkContent';
 import { NewPopoverAlignment } from '@carbon/react';
-export declare const blockClass: string;
 export interface CoachmarkProps {
     /**
      * Provide the contents of the Coachmark.
@@ -17,10 +16,6 @@ export interface CoachmarkProps {
      * Provide an optional class to be applied to the containing node.
      */
     className?: string;
-    /**
-     * The aria label applied to the Coachmark component
-     */
-    ariaLabel?: string;
     /**
      * Specifies whether the component is currently open.
      */
@@ -48,25 +43,9 @@ export interface CoachmarkProps {
 export type CoachmarkComponent = ForwardRefExoticComponent<CoachmarkProps & RefAttributes<HTMLDivElement>> & {
     Content: FC<CoachmarkContentProps>;
 };
-interface CoachmarkContextType {
-    onClose?: () => void;
-    open?: boolean;
-    setOpen: (value: boolean) => void;
-    align?: NewPopoverAlignment;
-    triggerRef: RefObject<HTMLElement | null>;
-    position: {
-        x: number;
-        y: number;
-    };
-    contentRef: HTMLElement | null;
-    setContentRef: (value: any) => void;
-    floating?: boolean;
-}
-export declare const CoachmarkContext: React.Context<CoachmarkContextType>;
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  */
 export declare const Coachmark: CoachmarkComponent;
-export {};

package/es/components/Coachmark/next/Coachmark/Coachmark.js

@@ -6,16 +6,16 @@
  */
 
 import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { createContext, forwardRef, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import PropTypes from '../../../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../../../global/js/utils/devtools.js';
-import { pkg } from '../../../../settings.js';
+import { CoachmarkContext, blockClass } from './context.js';
 import CoachmarkContent from './CoachmarkContent.js';
 import { useIsomorphicEffect } from '../../../../global/js/hooks/useIsomorphicEffect.js';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${pkg.prefix}--coachmark__next`;
+
 const componentName = 'Coachmark';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -31,21 +31,6 @@ const componentName = 'Coachmark';
 
 // Define the type for Coachmark, extending it to include Trigger and Content
 
-const CoachmarkContext = /*#__PURE__*/createContext({
-  open: false,
-  setOpen: () => {},
-  align: 'bottom',
-  triggerRef: {
-    current: null
-  },
-  position: {
-    x: 0,
-    y: 0
-  },
-  contentRef: null,
-  setContentRef: value => {},
-  floating: false
-});
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
@@ -55,7 +40,6 @@ const Coachmark = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     className,
-    ariaLabel,
     onClose,
     align = 'bottom',
     open,
@@ -90,6 +74,12 @@ const Coachmark = /*#__PURE__*/forwardRef((props, ref) => {
       triggerRef.current = firstFocusable;
     }
   }, [children]);
+  useEffect(() => {
+    const el = triggerRef.current;
+    if (el) {
+      el.setAttribute('aria-expanded', String(!!open));
+    }
+  }, [open]);
   useIsomorphicEffect(() => {
     const {
       x = 0,
@@ -128,7 +118,6 @@ const Coachmark = /*#__PURE__*/forwardRef((props, ref) => {
     {
       [`${blockClass}--floating`]: floating
     }),
-    "aria-label": ariaLabel,
     ref: setRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}--container`
@@ -148,10 +137,6 @@ Coachmark.propTypes = {
    * Where to render the Coachmark relative to its target.
    */
   align: PropTypes.string,
-  /**
-   * The aria label applied to the Coachmark component
-   */
-  ariaLabel: PropTypes.string,
   /**
    * Provide the contents of the CoachmarkV2.
    */
@@ -160,10 +145,6 @@ Coachmark.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-  /**
-   * Specifies whether the component is currently open.
-   */
-  defaultOpen: PropTypes.bool,
   /**
    * Specifies whether the component is floating or not.
    */
@@ -172,6 +153,10 @@ Coachmark.propTypes = {
    * Function to call when the close button is clicked.
    */
   onClose: PropTypes.func,
+  /**
+   * Specifies whether the component is currently open.
+   */
+  open: PropTypes.bool,
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
@@ -182,4 +167,4 @@ Coachmark.propTypes = {
   })
 };
 
-export { Coachmark, CoachmarkContext, blockClass };
+export { Coachmark };

package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -17,6 +17,7 @@ export interface CoachmarkButtonProps extends ButtonProps<ElementType> {
     onDoubleClick?(): void;
     tabIndex?: number;
     ['aria-expanded']?: boolean;
+    id?: string;
 }
 export interface CoachmarkBeaconProps {
     /**

package/es/components/Coachmark/next/Coachmark/CoachmarkBubble/CoachmarkBubble.js

@@ -13,7 +13,7 @@ import { pkg } from '../../../../../settings.js';
 import { offset, flip, shift, arrow } from '../../../../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js';
 import { autoUpdate, computePosition } from '../../../../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js';
 
-const CoachmarkBubble = /*#__PURE__*/forwardRef(props => {
+const CoachmarkBubble = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     children,
     align,
@@ -35,6 +35,9 @@ const CoachmarkBubble = /*#__PURE__*/forwardRef(props => {
   useLayoutEffect(() => {
     if (target) {
       if (typeof target === 'string') {
+        if (target === '#' || target.trim() === '') {
+          return;
+        }
         targetRef.current = document.querySelector(target);
       } else if ('current' in target) {
         targetRef.current = target.current;
@@ -102,8 +105,16 @@ const CoachmarkBubble = /*#__PURE__*/forwardRef(props => {
   if (!target) {
     return null;
   }
+  const mergedRefs = node => {
+    tooltipRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    ref: tooltipRef,
+    ref: mergedRefs,
     className: cx({
       [`${carbonPrefix}--g100`]: theme === 'white' && highContrast || theme === 'g100' && !highContrast,
       [`${carbonPrefix}--g90`]: theme === 'g10' && highContrast || theme === 'g90' && !highContrast,

package/es/components/Coachmark/next/Coachmark/CoachmarkContent.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelp
 import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
 import PropTypes from '../../../../_virtual/index.js';
 import { pkg } from '../../../../settings.js';
-import { CoachmarkContext, blockClass } from './Coachmark.js';
+import { CoachmarkContext, blockClass } from './context.js';
 import { CoachmarkBubble } from './CoachmarkBubble/CoachmarkBubble.js';
 import './CoachmarkBubble/CoachmarkBubbleHeader.js';
 import ContentHeader from './ContentHeader.js';
@@ -40,7 +40,7 @@ const CoachmarkContent = /*#__PURE__*/forwardRef((props, ref) => {
   useEffect(() => {
     if (open && bubbleRef.current) {
       requestAnimationFrame(() => {
-        const contentBody = bubbleRef.current.querySelector(`.${contentBodyClass}`);
+        const contentBody = bubbleRef.current?.querySelector(`.${contentBodyClass}`);
         if (contentBody) {
           const firstFocusable = Array.from(contentBody.querySelectorAll('*')).find(el => el.tabIndex >= 0);
           firstFocusable?.focus();

package/es/components/Coachmark/next/Coachmark/ContentBody.js

@@ -8,7 +8,7 @@
 import React__default, { forwardRef } from 'react';
 import PropTypes from '../../../../_virtual/index.js';
 import cx from 'classnames';
-import { blockClass } from './Coachmark.js';
+import { blockClass } from './context.js';
 
 const ContentBody = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/components/Coachmark/next/Coachmark/ContentHeader.js

@@ -10,7 +10,7 @@ import { Button } from '@carbon/react';
 import React__default, { forwardRef, useContext, useRef, useEffect } from 'react';
 import PropTypes from '../../../../_virtual/index.js';
 import cx from 'classnames';
-import { CoachmarkContext, blockClass } from './Coachmark.js';
+import { CoachmarkContext, blockClass } from './context.js';
 import './CoachmarkBubble/CoachmarkBubble.js';
 import { CoachmarkBubbleHeader } from './CoachmarkBubble/CoachmarkBubbleHeader.js';
 import { Draggable, Close } from '@carbon/react/icons';
@@ -45,6 +45,20 @@ const ContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
         dragHandle: handleRef.current,
         focusableDragHandle: dragRef.current
       });
+      const onDragStart = () => {
+        if (contentRef) {
+          contentRef.classList.add(`${contentHeaderBlockClass}--is-dragging`);
+          contentRef.setAttribute('aria-label', 'Coachmark is being dragged');
+        }
+      };
+      const onDragEnd = () => {
+        if (contentRef) {
+          contentRef.classList.remove(`${contentHeaderBlockClass}--is-dragging`);
+          contentRef.removeAttribute('aria-label');
+        }
+      };
+      contentRef.addEventListener('dragstart', onDragStart);
+      contentRef.addEventListener('dragend', onDragEnd);
     }
   });
   return /*#__PURE__*/React__default.createElement(CoachmarkBubbleHeader, _extends({

package/es/components/Coachmark/next/Coachmark/context.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 { RefObject } from 'react';
+import { NewPopoverAlignment } from '@carbon/react';
+interface CoachmarkContextType {
+    onClose?: () => void;
+    open?: boolean;
+    setOpen: (value: boolean) => void;
+    align?: NewPopoverAlignment;
+    triggerRef: RefObject<HTMLElement | null>;
+    position: {
+        x: number;
+        y: number;
+    };
+    contentRef: HTMLElement | null;
+    setContentRef: (value: any) => void;
+    floating?: boolean;
+}
+export declare const CoachmarkContext: import("react").Context<CoachmarkContextType>;
+export declare const blockClass: string;
+export {};