@carbon/ibm-products 2.73.1 → 2.74.0-rc.0

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

@@ -30,7 +30,7 @@ const focusThisItem = (currentElement, conditionBuilderRef) => {
     manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };
-const traverseClockVise = (eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) => {
+const traverseClockwise = (eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) => {
   if (eachElem == document.activeElement) {
     if (index !== allElements.length - 1) {
       focusThisItem(allElements[index + 1], conditionBuilderRef);
@@ -91,4 +91,4 @@ const onKeyDownHandlerForSearch = (evt, conditionBuilderRef, closePopover) => {
   }
 };
 
-export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkForMultiSelectOperator, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, onKeyDownHandlerForSearch, traverseClockVise, traverseReverse };
+export { HIERARCHICAL_VARIANT, NON_HIERARCHICAL_VARIANT, blockClass, checkForHoldingKey, checkForMultiSelectOperator, checkIsValid, focusThisField, focusThisItem, getValue, manageTabIndexAndFocus, onKeyDownHandlerForSearch, traverseClockwise, traverseReverse };

package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -10,7 +10,7 @@ import React__default from 'react';
 import { pkg } from '../../../settings.js';
 import { TableBody, TableRow, TableCell } from '@carbon/react';
 import { EmptyState } from '../../EmptyStates/EmptyState.js';
-import '../../EmptyStates/EmptyStateV2.js';
+import '../../EmptyStates/EmptyStateV2.deprecated.js';
 import { ErrorEmptyState } from '../../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
 import { NoDataEmptyState } from '../../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
 import '../../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';

package/es/components/EmptyStates/EmptyState.js

@@ -7,7 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import { EmptyStateV2 } from './EmptyStateV2.js';
+import { EmptyStateV2 } from './EmptyStateV2.deprecated.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Button } from '@carbon/react';

package/es/components/EmptyStates/{EmptyStateV2.js → EmptyStateV2.deprecated.js}

@@ -13,7 +13,7 @@ import { Button, Link } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import '../../global/js/utils/props-helper.js';
 import { pkg } from '../../settings.js';
-import EmptyStateIllustration from './EmptyStateIllustration.js';
+import EmptyStateIllustration from './EmptyStateIllustration.deprecated.js';
 
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'EmptyStateV2';

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { EmptyState } from './EmptyState';
-export { EmptyStateV2 } from './EmptyStateV2';
+export { EmptyStateV2 } from './EmptyStateV2.deprecated';
 export { ErrorEmptyState } from './ErrorEmptyState';
 export { NoDataEmptyState } from './NoDataEmptyState';
 export { NoTagsEmptyState } from './NoTagsEmptyState';
@@ -13,7 +13,7 @@ export { NotFoundEmptyState } from './NotFoundEmptyState';
 export { NotificationsEmptyState } from './NotificationsEmptyState';
 export { UnauthorizedEmptyState } from './UnauthorizedEmptyState';
 export type { EmptyStateProps } from './EmptyState';
-export type { EmptyStateV2Props } from './EmptyStateV2';
+export type { EmptyStateV2Props } from './EmptyStateV2.deprecated';
 export type { ErrorEmptyStateProps } from './ErrorEmptyState';
 export type { NoDataEmptyStateProps } from './NoDataEmptyState';
 export type { NoTagsEmptyStateProps } from './NoTagsEmptyState';

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -11,7 +11,7 @@ import { dateTimeFormat } from '@carbon/utilities';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
 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/SidePanel/SidePanel.d.ts

@@ -4,6 +4,7 @@
  * 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 '../../feature-flags';
 import { ButtonProps } from '@carbon/react';
 import React, { ReactNode, RefObject } from 'react';
 type SidePanelBaseProps = {

package/es/components/SidePanel/SidePanel.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { ArrowLeft, Close } from '@carbon/react/icons';
+import '../../feature-flags.js';
 import { Button, Section, IconButton, Heading } from '@carbon/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import React__default, { useState, useRef, useEffect, useCallback } from 'react';

package/es/components/StepFlow/StepContext.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { StepContextType } from './types';
+interface StepProviderProps {
+    children?: ReactNode;
+}
+export declare const StepProvider: React.FC<StepProviderProps>;
+export declare const useStepContext: () => StepContextType;
+export {};

package/es/components/StepFlow/StepGroup.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 from 'react';
+export declare const StepGroup: ({ children }: {
+    children: any;
+}) => string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;

package/es/components/StepFlow/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ */
+export { StepGroup } from './StepGroup';
+export { StepProvider, useStepContext } from './StepContext';
+export type { StepState, StepContextType } from './types';

package/es/components/StepFlow/story-assets/SidePanel/Example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 from 'react';
+export declare const Example: () => React.JSX.Element;

package/es/components/StepFlow/story-assets/SidePanel/StepSidePanel.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { StepState } from '../..';
+interface Props {
+    children?: ReactNode;
+    subtitle?: ((a: StepState) => ReactNode) | null;
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasCloseIcon?: boolean;
+    closeIconDescription?: string;
+    selectorPrimaryFocus?: string;
+}
+export declare const StepSidePanel: ({ subtitle, children, open, onClose, title, selectorPrimaryFocus, ...rest }: Props) => React.JSX.Element;
+export {};

package/es/components/StepFlow/story-assets/StepActions.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 } from 'react';
+import { StepState } from '..';
+export interface StepActionsProps {
+    buttonRenderer: (stepData: StepState) => ReactNode;
+    className?: string;
+}
+/**
+ * This is an alternative approach to creating your own component and using the `useStepContext` hook.
+ * @example <StepActions buttonRenderer={(stepData) => <><Button /><Button /><Button /></>}/>
+ *
+ * In the example above, you can see how to retrieve the step data in order to update your buttons
+ * (disabled states, changing text, ie Next to Submit, etc.).
+ */
+export declare const StepActions: {
+    ({ buttonRenderer }: StepActionsProps): ReactNode;
+    displayName: string;
+};

package/es/components/StepFlow/story-assets/Tearsheet/Example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 from 'react';
+export declare const Example: () => React.JSX.Element;

package/es/components/StepFlow/story-assets/Tearsheet/StepTearsheet.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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, { ReactNode } from 'react';
+import { StepState } from '../../types';
+interface Props {
+    children?: ReactNode;
+    influencer?: ((a: StepState) => ReactNode) | null;
+    open?: boolean;
+    onClose?: () => void;
+    title?: ReactNode;
+    hasCloseIcon?: boolean;
+    closeIconDescription?: string;
+    selectorPrimaryFocus?: string;
+}
+export declare const StepTearsheet: ({ children, open, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, ...rest }: Props) => React.JSX.Element;
+export {};

package/es/components/StepFlow/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { Dispatch, SetStateAction } from 'react';
+export type StepContextType = StepState;
+interface formStateType {
+    [key: string]: any;
+}
+export interface StepState {
+    formState: formStateType;
+    setFormState: Dispatch<SetStateAction<formStateType>>;
+    totalSteps: number | undefined;
+    setTotalSteps: Dispatch<SetStateAction<number | undefined>>;
+    currentStep: number;
+    handleGoToStep: (a: number) => void;
+    handleNext: () => void;
+    handlePrevious: () => void;
+}
+export {};

package/es/components/TruncatedText/TruncatedText.js

@@ -54,12 +54,14 @@ let TruncatedText = /*#__PURE__*/forwardRef((props, ref) => {
       handleExpand();
     }
   };
-  const valueBody = /*#__PURE__*/React__default.createElement("span", {
+  const valueBody = /*#__PURE__*/React__default.createElement("span", _extends({}, type === 'tooltip' ? {
+    role: 'button'
+  } : {}, {
     ref: contentRef,
     className: textContentClasses,
     id: id,
     style: textContentStyles
-  }, value);
+  }), value);
   const tooltipVariant = /*#__PURE__*/React__default.createElement(Tooltip, {
     align: align,
     autoAlign: autoAlign,

package/es/global/js/utils/makeDraggable/makeDraggable.js

@@ -32,7 +32,29 @@ function makeDraggable(_ref) {
   let isDragging = false;
   let offsetX = 0;
   let offsetY = 0;
+  function dispatch(type) {
+    let detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    el.dispatchEvent(new CustomEvent(type, {
+      detail,
+      bubbles: true
+    }));
+  }
   function onKeyDown(e) {
+    if (e.key === 'Enter') {
+      isDragging = !isDragging;
+    }
+    if (isDragging) {
+      dispatch('dragstart', {
+        keyboard: true
+      });
+    } else {
+      dispatch('dragend', {
+        keyboard: true
+      });
+    }
+    if (!isDragging) {
+      return;
+    }
     const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
     switch (e.key) {
       case 'Enter':
@@ -61,6 +83,9 @@ function makeDraggable(_ref) {
     offsetX = e.clientX - el.offsetLeft;
     offsetY = e.clientY - el.offsetTop;
     isDragging = true;
+    dispatch('dragstart', {
+      mouse: true
+    });
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp, {
       once: true
@@ -78,6 +103,9 @@ function makeDraggable(_ref) {
       return;
     }
     isDragging = false;
+    dispatch('dragend', {
+      mouse: true
+    });
     document.removeEventListener('mousemove', onMouseMove);
   }
   if (dragHandle) {

package/es/index.js

@@ -21,7 +21,7 @@ export { CreateTearsheetStep } from './components/CreateTearsheet/CreateTearshee
 export { CreateTearsheetDivider } from './components/CreateTearsheet/CreateTearsheetDivider.js';
 export { CreateTearsheetNarrow } from './components/CreateTearsheetNarrow/CreateTearsheetNarrow.js';
 export { EmptyState } from './components/EmptyStates/EmptyState.js';
-export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
+export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.deprecated.js';
 export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
 export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
 export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';

package/lib/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/lib/components/AboutModal/AboutModal.js

@@ -120,65 +120,59 @@ exports.AboutModal.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.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: index.default.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: index.default.string,
   /**
-   * The accessibility title for the close icon.
+   * Provide an accessible name for the close icon
    */
   closeIconDescription: index.default.string.isRequired,
   /**
-   * Subhead text providing any relevant product disclaimers including
-   * legal information (optional)
+   * Provide any relevant product disclaimers or legal information
    */
   content: index.default.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: index.default.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: index.default.arrayOf(index.default.element),
   /**
-   * A visual symbol used to represent the product.
+   * Provide a visual representation of the product
    */
   logo: index.default.node.isRequired,
   /**
-   * Specifies aria label for AboutModal
+   * Specify an aria-label for the modal
    */
   modalAriaLabel: index.default.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: index.default.func,
   /**
-   * Specifies whether the AboutModal is open or not.
+   * Specify whether the modal is currently open
    */
   open: index.default.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: index.default.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: index.default.node.isRequired,
   /**
-   * Text that provides information on the version number of your product.
+   * Provide the product’s version number
    */
   version: index.default.string.isRequired
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -15,7 +15,7 @@ var react = require('@carbon/react');
 var Tearsheet = require('../Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
 require('../EmptyStates/EmptyState.js');
-require('../EmptyStates/EmptyStateV2.js');
+require('../EmptyStates/EmptyStateV2.deprecated.js');
 require('../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
 require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
 require('../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');

package/lib/components/Carousel/Carousel.js

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

package/lib/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/lib/components/Coachmark/Coachmark.js

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

package/lib/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/lib/components/Coachmark/CoachmarkDragbar.js

@@ -15,6 +15,7 @@ var icons = require('@carbon/react/icons');
 var react = require('@carbon/react');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var context = require('./utils/context.js');
 
 var _Draggable;
 
@@ -26,7 +27,6 @@ const blockClass = `${settings.pkg.prefix}--coachmark-dragbar`;
 const overlayBlockClass = `${settings.pkg.prefix}--coachmark-overlay`;
 const componentName = 'CoachmarkDragbar';
 const defaults = {
-  closeIconDescription: 'Close',
   onDrag: () => {},
   onClose: () => {},
   showCloseButton: true,
@@ -39,7 +39,6 @@ const defaults = {
 exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     a11yKeyboardHandler,
-    closeIconDescription = defaults.closeIconDescription,
     onClose = defaults.onClose,
     onDrag = defaults.onDrag,
     showCloseButton = defaults.showCloseButton,
@@ -66,6 +65,7 @@ exports.CoachmarkDragbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     };
   }, [isDragging, onDrag]);
   const handleDragStart = () => setIsDragging(true);
+  const closeIconDescription = context.useCoachmark()?.closeIconDescription;
   return /*#__PURE__*/React.createElement("header", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element
@@ -112,10 +112,6 @@ exports.CoachmarkDragbar.propTypes = {
    * Handler to manage keyboard interactions with the dragbar.
    */
   a11yKeyboardHandler: index.default.func.isRequired,
-  /**
-   * Tooltip text and aria label for the Close button icon.
-   */
-  closeIconDescription: index.default.string,
   /**
    * Function to call when the close button is clicked.
    */

package/lib/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.
      */