@carbon/ibm-products 2.68.0 → 2.69.0

package/lib/components/Coachmark/Coachmark.d.ts

@@ -31,15 +31,21 @@ export interface CoachmarkProps {
      */
     onClose?: () => void;
     /**
+     *  @deprecated
      * Optional class name for the Coachmark Overlay component.
      */
     overlayClassName?: string;
     /**
+     *  @deprecated
      * What kind or style of Coachmark to render.
      */
     overlayKind?: 'tooltip' | 'floating' | 'stacked';
+    /**
+     *  @deprecated
+     */
     overlayRef?: MutableRefObject<HTMLElement | null>;
     /**
+     *  @deprecated
      * By default, the Coachmark will be appended to the end of `document.body`.
      * The Coachmark will remain persistent as the user navigates the app until
      * the user closes the Coachmark.
@@ -58,10 +64,12 @@ export interface CoachmarkProps {
         y: number;
     };
     /**
+     * @deprecated
      * The optional button or beacon that the user will click to show the Coachmark.
      */
     target: React.ReactNode;
     /**
+     * @deprecated
      * Determines the theme of the component.
      */
     theme?: 'light' | 'dark';
@@ -77,3 +85,38 @@ export interface CoachmarkProps {
  * user to gain understanding of the product's main value and discover new use cases.
  */
 export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     * Optional class name for the Coachmark Overlay component.
+     */
+    overlayClassName: any;
+    /**
+     * **Deprecated**
+     * What kind or style of Coachmark to render.
+     */
+    overlayKind: any;
+    overlayRef: any;
+    /**
+     * **Deprecated**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget: any;
+    /**
+     * **Deprecated**
+     * The optional button or beacon that the user will click to show the Coachmark.
+     */
+    target: any;
+    /**
+     * **Deprecated**
+     * Determines the theme of the component.
+     */
+    theme: any;
+};

package/lib/components/Coachmark/Coachmark.js

@@ -72,6 +72,10 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const _overlayRef = overlayRef || overlayBackupRef;
   const portalNode = React.useRef(null);
   const popoverRef = React.useRef(null);
+  let targetName;
+  if (/*#__PURE__*/React.isValidElement(target) && typeof target.type !== 'string') {
+    targetName = target.type;
+  }
   useIsomorphicEffect.useIsomorphicEffect(() => {
     portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
@@ -175,7 +179,9 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
     className: cx(blockClass, `${blockClass}__${theme}`, className),
     ref: _coachmarkRef
-  }, rest, devtools.getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React.createElement(React.Fragment, null, target, isOpen && portalNode?.current && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }, rest, devtools.getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React.createElement(React.Fragment, null, targetName?.displayName === 'CoachmarkBeacon' ? /*#__PURE__*/React.cloneElement(target, {
+    buttonProps: contextValue.buttonProps
+  }) : target, isOpen && portalNode?.current && /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
@@ -191,7 +197,9 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     align: align,
     autoAlign: autoAlign,
     open: isOpen
-  }, target, /*#__PURE__*/React.createElement(react.PopoverContent, null, isOpen && /*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
+  }, targetName?.displayName === 'CoachmarkBeacon' ? /*#__PURE__*/React.cloneElement(target, {
+    buttonProps: contextValue.buttonProps
+  }) : target, /*#__PURE__*/React.createElement(react.PopoverContent, null, isOpen && /*#__PURE__*/React.createElement(CoachmarkOverlay.CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
@@ -212,6 +220,43 @@ exports.Coachmark = settings.pkg.checkComponentEnabled(exports.Coachmark, compon
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 exports.Coachmark.displayName = componentName;
+const deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Optional class name for the Coachmark Overlay component.
+   */
+  overlayClassName: index.default.string,
+  /**
+   * **Deprecated**
+   * What kind or style of Coachmark to render.
+   */
+  overlayKind: index.default.oneOf(['tooltip', 'floating', 'stacked']),
+  overlayRef: index.default.shape({
+    current: overlayRefType
+  }),
+  /**
+   * **Deprecated**
+   * By default, the Coachmark will be appended to the end of `document.body`.
+   * The Coachmark will remain persistent as the user navigates the app until
+   * the user closes the Coachmark.
+   *
+   * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+   * element or other component by specifying a CSS selector. The Coachmark will
+   * remain visible as long as that element remains visible or mounted. When the
+   * element is hidden or component is unmounted, the Coachmark will disappear.
+   */
+  portalTarget: index.default.string,
+  /**
+   * **Deprecated**
+   * The optional button or beacon that the user will click to show the Coachmark.
+   */
+  target: index.default.node,
+  /**
+   * **Deprecated**
+   * Determines the theme of the component.
+   */
+  theme: index.default.oneOf(['light', 'dark'])
+};
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
@@ -246,28 +291,6 @@ exports.Coachmark.propTypes = {
    * Function to call when the Coachmark closes.
    */
   onClose: index.default.func,
-  /**
-   * Optional class name for the Coachmark Overlay component.
-   */
-  overlayClassName: index.default.string,
-  /**
-   * What kind or style of Coachmark to render.
-   */
-  overlayKind: index.default.oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: index.default.shape({
-    current: overlayRefType
-  }),
-  /**
-   * By default, the Coachmark will be appended to the end of `document.body`.
-   * The Coachmark will remain persistent as the user navigates the app until
-   * the user closes the Coachmark.
-   *
-   * Alternatively, the app developer can tightly couple the Coachmark to a DOM
-   * element or other component by specifying a CSS selector. The Coachmark will
-   * remain visible as long as that element remains visible or mounted. When the
-   * element is hidden or component is unmounted, the Coachmark will disappear.
-   */
-  portalTarget: index.default.string,
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
@@ -276,12 +299,7 @@ exports.Coachmark.propTypes = {
     x: index.default.number,
     y: index.default.number
   }),
-  /**
-   * The optional button or beacon that the user will click to show the Coachmark.
-   */
-  target: index.default.node,
-  /**
-   * Determines the theme of the component.
-   */
-  theme: index.default.oneOf(['light', 'dark'])
+  ...deprecatedProps
 };
+
+exports.deprecatedProps = deprecatedProps;

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -199,6 +199,12 @@ const useWindowDimensions = () => {
   return windowDimensions;
 };
 
+/**@ts-ignore*/
+exports.CoachmarkOverlay.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.CoachmarkOverlay = settings.pkg.checkComponentEnabled(exports.CoachmarkOverlay, componentName);
 

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

@@ -8,3 +8,4 @@ export { Coachmark } from './Coachmark';
 export { BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT, } from './utils/enums';
 export { useCoachmark } from './utils/context';
 export type { CoachmarkProps } from './Coachmark';
+export { CoachmarkTagline } from './CoachmarkTagline';

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.d.ts

@@ -6,6 +6,13 @@
  */
 import { BEACON_KIND } from '../Coachmark';
 import React from 'react';
+import { ButtonProps } from '@carbon/react';
+export interface CoachmarkButtonProps extends ButtonProps<React.ElementType> {
+    onClick?(): void;
+    onDoubleClick?(): void;
+    tabIndex?: number;
+    ['aria-bool']?: boolean;
+}
 export interface CoachmarkBeaconProps {
     /**
      * Optional class name for this component.
@@ -21,6 +28,10 @@ export interface CoachmarkBeaconProps {
      * The aria label.
      */
     label: string;
+    /**
+     * button props
+     */
+    buttonProps?: CoachmarkButtonProps;
 }
 /**
  * Use beacon for the target prop of a Coachmark component.

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -8,15 +8,14 @@
 'use strict';
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-require('../Coachmark/Coachmark.js');
-var context = require('../Coachmark/utils/context.js');
 var index = require('../../_virtual/index.js');
 var React = require('react');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var react = require('@carbon/react');
 
-var _div, _circle;
+var _circle;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${settings.pkg.prefix}--coachmark-beacon`;
@@ -27,17 +26,14 @@ const defaults = {
 /**
  * Use beacon for the target prop of a Coachmark component.
  */
-exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
+exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
     label,
     className,
     kind = defaults.kind,
+    buttonProps,
     ...rest
-  } = _ref;
-  const coachmark = context.useCoachmark();
-  if (!coachmark) {
-    return _div || (_div = /*#__PURE__*/React.createElement("div", null, "CoachmarkBeacon is to be use exclusively within the target prop of Coachmark"));
-  }
+  } = props;
   return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, `${blockClass}-${kind}`, className),
     ref: ref
@@ -46,7 +42,7 @@ exports.CoachmarkBeacon = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
     tabIndex: 0,
     type: "button"
-  }, coachmark.buttonProps, {
+  }, buttonProps, {
     className: `${blockClass}__target`
   }), /*#__PURE__*/React.createElement("svg", {
     className: `${blockClass}__center`,
@@ -69,6 +65,18 @@ exports.CoachmarkBeacon.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.CoachmarkBeacon.propTypes = {
+  /**
+   * button props
+   */
+  buttonProps: index.default.shape({
+    /**@ts-ignore*/
+    ...react.Button.propTypes,
+    /**@ts-ignore*/
+    onClick: index.default.func,
+    onDoubleClick: index.default.func,
+    tabIndex: index.default.number,
+    ['aria-expanded']: index.default.bool
+  }),
   /**
    * Optional class name for this component.
    */

package/lib/components/CoachmarkButton/CoachmarkButton.js

@@ -16,6 +16,7 @@ var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
+require('../Coachmark/CoachmarkTagline.js');
 
 var _div;
 
@@ -71,6 +72,12 @@ exports.CoachmarkButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, devtools.getDevtoolsProps(componentName), coachmark.buttonProps), label);
 });
 
+/**@ts-ignore*/
+exports.CoachmarkButton.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.CoachmarkButton = settings.pkg.checkComponentEnabled(exports.CoachmarkButton, componentName);
 

package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -53,6 +53,12 @@ exports.CoachmarkOverlayElement = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }, button));
 });
 
+/**@ts-ignore*/
+exports.CoachmarkOverlayElement.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.CoachmarkOverlayElement = settings.pkg.checkComponentEnabled(exports.CoachmarkOverlayElement, componentName);
 

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -20,6 +20,7 @@ var pconsole = require('../../global/js/utils/pconsole.js');
 var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
+require('../Coachmark/CoachmarkTagline.js');
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${settings.pkg.prefix}--coachmark-overlay-elements`;
@@ -164,6 +165,12 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef((_ref, ref) =>
   }, coachmark.closeButtonProps), closeButtonLabel))));
 });
 
+/**@ts-ignore*/
+exports.CoachmarkOverlayElements.deprecated = {
+  level: 'warn',
+  details: `${componentName} is deprecated.`
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.CoachmarkOverlayElements = settings.pkg.checkComponentEnabled(exports.CoachmarkOverlayElements, componentName);
 

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -84,6 +84,7 @@ const DatagridContent = _ref => {
   const contentRows = DatagridPagination && page || rows;
   const gridAreaRef = React.useRef(null);
   const multiKeyTrackingRef = React.useRef(null);
+  const carbonPrefix = react.usePrefix();
   const enableEditableCell = index$1.useFeatureFlag('enable-datagrid-useEditableCell');
   const enableInlineEdit = index$1.useFeatureFlag('enable-datagrid-useInlineEdit');
   const enableCustomizeCols = index$1.useFeatureFlag('enable-datagrid-useCustomizeColumns');
@@ -137,7 +138,8 @@ const DatagridContent = _ref => {
         keysPressedList,
         state: inlineEditState,
         usingMac,
-        ref: multiKeyTrackingRef
+        ref: multiKeyTrackingRef,
+        carbonPrefix
       })),
       onFocus: withInlineEdit && (() => handleGridFocus.handleGridFocus(inlineEditState, dispatch)),
       title
@@ -160,12 +162,12 @@ const DatagridContent = _ref => {
       return;
     }
     const gridElement = document.querySelector(`#${tableId}`);
-    const tableHeader = gridElement?.querySelector(`.${settings.carbon.prefix}--data-table-header`);
+    const tableHeader = gridElement?.querySelector(`.${carbonPrefix}--data-table-header`);
     gridElement?.style?.setProperty(`--${blockClass}--grid-width`, layout.px((totalColumnsWidth || 0) + 32));
     if (gridActive) {
       gridElement?.style.setProperty(`--${blockClass}--grid-header-height`, layout.px(tableHeader?.clientHeight || 0));
     }
-  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive, carbonPrefix]);
   useSubscribeToEventEmitter.default(constants.CLEAR_SINGLE_FILTER, id => FilterProvider.clearSingleFilter(id, setAllFilters, state, contextTableId));
   const renderFilterSummary = () => state.filters.length > 0 && /*#__PURE__*/React.createElement(FilterSummary.default, {
     className: `${blockClass}__filter-summary`,

package/lib/components/Datagrid/Datagrid/DatagridRow.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2024
+ * 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.

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -43,6 +43,7 @@ const DatagridRow = datagridState => {
     visibleColumns,
     getAsyncSubRows
   } = datagridState;
+  const carbonPrefix = react.usePrefix();
   const getVisibleNestedRowCount = _ref => {
     let {
       isExpanded,
@@ -122,7 +123,7 @@ const DatagridRow = datagridState => {
     [`${blockClass}__carbon-row-expanded`]: row.isExpanded,
     [`${blockClass}__carbon-row-expandable`]: row.canExpand,
     [`${blockClass}__carbon-row-expandable--async`]: getAsyncSubRows && row.depth > 0,
-    [`${settings.carbon.prefix}--data-table--selected`]: row.isSelected,
+    [`${carbonPrefix}--data-table--selected`]: row.isSelected,
     [`${blockClass}__slug--row`]: /*#__PURE__*/React.isValidElement(row?.original?.slug),
     [`${blockClass}__ai-label--row`]: /*#__PURE__*/React.isValidElement(row?.original?.aiLabel)
   });

package/lib/components/Datagrid/Datagrid/DatagridToolbar.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2021, 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.

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -37,6 +37,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
     batchActionMenuButtonLabel,
     translateWithIdBatchActions
   } = datagridState;
+  const carbonPrefix = react.usePrefix();
   const [availableRowsCount, setAvailableRowsCount] = React.useState(rows.length);
   const batchActionMenuButtonLabelText = batchActionMenuButtonLabel ?? 'More';
   const selectedKeys = Object.keys(selectedRowIds || {});
@@ -53,19 +54,19 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
   // the ButtonMenu
   React.useEffect(() => {
     if (totalSelected === 1 && !receivedInitialWidth) {
-      const batchActionListWidth = ref?.current?.querySelector(`.${settings.carbon.prefix}--action-list`).offsetWidth;
+      const batchActionListWidth = ref?.current?.querySelector(`.${carbonPrefix}--action-list`).offsetWidth;
       setInitialListWidth(batchActionListWidth);
       setReceivedInitialWidth(true);
     }
-  }, [totalSelected, receivedInitialWidth, ref]);
+  }, [totalSelected, receivedInitialWidth, ref, carbonPrefix]);
   React.useEffect(() => {
-    const summaryWidth = ref?.current.querySelector(`.${settings.carbon.prefix}--batch-summary`).offsetWidth;
+    const summaryWidth = ref?.current.querySelector(`.${carbonPrefix}--batch-summary`).offsetWidth;
     if (width < summaryWidth + initialListWidth + 32) {
       setDisplayAllInMenu(true);
     } else {
       setDisplayAllInMenu(false);
     }
-  }, [width, ref, initialListWidth]);
+  }, [width, ref, initialListWidth, carbonPrefix]);
   const getSelectedRowData = () => {
     if (selectedKeys.length === 0) {
       return [];
@@ -153,7 +154,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
         renderIcon: batchAction.renderIcon,
         onClick: event => onClickHandler(event, batchAction),
         className: cx({
-          [`${settings.carbon.prefix}--noLabel`]: !batchAction.label || batchAction.label === ''
+          [`${carbonPrefix}--noLabel`]: !batchAction.label || batchAction.label === ''
         }),
         iconDescription: batchAction.label,
         tabIndex: totalSelected > 0 ? 0 : -1

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.d.ts

@@ -1,4 +1,4 @@
-export function handleGridKeyPress({ event, dispatch, state, instance, keysPressedList, usingMac, ref, }: {
+export function handleGridKeyPress({ event, dispatch, state, instance, keysPressedList, usingMac, ref, carbonPrefix, }: {
     event: any;
     dispatch: any;
     state: any;
@@ -6,4 +6,5 @@ export function handleGridKeyPress({ event, dispatch, state, instance, keysPress
     keysPressedList: any;
     usingMac: any;
     ref: any;
+    carbonPrefix: any;
 }): void;

package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js

@@ -20,7 +20,8 @@ const handleGridKeyPress = _ref => {
     instance,
     keysPressedList,
     usingMac,
-    ref
+    ref,
+    carbonPrefix
   } = _ref;
   const {
     key
@@ -75,7 +76,7 @@ const handleGridKeyPress = _ref => {
 
   // Checks if the date picker is open
   const datePickerIsActive = () => {
-    const focusedCalendarElement = document.querySelector(`.${settings.carbon.prefix}--date-picker__input.flatpickr-input.active`);
+    const focusedCalendarElement = document.querySelector(`.${carbonPrefix}--date-picker__input.flatpickr-input.active`);
     if (focusedCalendarElement || document.activeElement.classList.contains(`flatpickr-day`)) {
       return true;
     }

package/lib/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -29,6 +29,7 @@ const RowSizeDropdown = _ref => {
   } = _ref;
   const radioGroupRef = React.useRef(undefined);
   const [isOpen, setIsOpen] = React.useState(false);
+  const carbonPrefix = react.usePrefix();
   const onCloseHandler = () => {
     setIsOpen(false);
   };
@@ -45,7 +46,7 @@ const RowSizeDropdown = _ref => {
   React.useEffect(() => {
     if (isOpen) {
       const radioGroupParentElement = radioGroupRef?.current;
-      const checkedRadioChild = radioGroupParentElement?.querySelector(`.${settings.carbon.prefix}--radio-button:checked`);
+      const checkedRadioChild = radioGroupParentElement?.querySelector(`.${carbonPrefix}--radio-button:checked`);
       checkedRadioChild?.focus();
     }
   }, [isOpen]);

package/lib/components/Datagrid/useNestedRowExpander.js

@@ -16,9 +16,11 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
 var stateReducer = require('./Datagrid/addons/stateReducer.js');
+var react = require('@carbon/react');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const useNestedRowExpander = hooks => {
+  const carbonPrefix = react.usePrefix();
   const tempState = React.useRef(undefined);
   const lastExpandedRowIndex = React.useRef(undefined);
   const useInstance = instance => {
@@ -84,7 +86,7 @@ const useNestedRowExpander = hooks => {
         return row.canExpand || getAsyncSubRows ? /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
           type: "button",
           "aria-label": expanderTitle,
-          className: cx(`${blockClass}__row-expander`, `${settings.carbon.prefix}--btn`, `${settings.carbon.prefix}--btn--ghost`)
+          className: cx(`${blockClass}__row-expander`, `${carbonPrefix}--btn`, `${carbonPrefix}--btn--ghost`)
         }, expanderButtonProps), /*#__PURE__*/React.createElement(icons.ChevronRight, {
           className: cx(`${blockClass}__expander-icon`, {
             [`${blockClass}__expander-icon--not-open`]: !row.isExpanded,

package/lib/components/Datagrid/useOnRowClick.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * 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.

package/lib/components/Datagrid/useOnRowClick.js

@@ -10,9 +10,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var settings = require('../../settings.js');
+var react = require('@carbon/react');
 
 const useOnRowClick = hooks => {
   const useInstance = rowInstance => {
+    const carbonPrefix = react.usePrefix();
     const {
       onRowClick
     } = rowInstance;
@@ -36,14 +38,14 @@ const useOnRowClick = hooks => {
           // We do not want to change the list of selected rows if using the useSelectedRows hook, otherwise clicking on an entire row will mark the row as checked
 
           // Remove selected class from all other clickable rows as only one clickable row can be selected at a time
-          const clickableSelectedRows = document.querySelectorAll(`#${tableId}.${settings.pkg.prefix}--datagrid .${settings.carbon.prefix}--data-table--selected:not(.${settings.pkg.prefix}--datagrid__active-row)`);
+          const clickableSelectedRows = document.querySelectorAll(`#${tableId}.${settings.pkg.prefix}--datagrid .${carbonPrefix}--data-table--selected:not(.${settings.pkg.prefix}--datagrid__active-row)`);
           if (clickableSelectedRows.length) {
             Array.from(clickableSelectedRows).forEach(row => {
-              row.classList.remove(`${settings.carbon.prefix}--data-table--selected`);
+              row.classList.remove(`${carbonPrefix}--data-table--selected`);
             });
           }
           const closestRow = event.currentTarget.closest('tr');
-          closestRow.classList.add(`${settings.carbon.prefix}--data-table--selected`);
+          closestRow.classList.add(`${carbonPrefix}--data-table--selected`);
           if (!withSelectRows) {
             if (instance.selectedFlatRows) {
               instance.selectedFlatRows.map(toggleRow => toggleRow.toggleRowSelected?.(false));

package/lib/components/Datagrid/useRowExpander.js

@@ -15,6 +15,7 @@ var icons = require('@carbon/react/icons');
 var settings = require('../../settings.js');
 var cx = require('classnames');
 var useFocusRowExpander = require('./useFocusRowExpander.js');
+var react = require('@carbon/react');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const useRowExpander = hooks => {
@@ -23,6 +24,7 @@ const useRowExpander = hooks => {
   const useInstance = instance => {
     tempState.current = instance;
   };
+  const carbonPrefix = react.usePrefix();
   useFocusRowExpander.useFocusRowExpander({
     instance: tempState?.current,
     lastExpandedRowIndex: lastExpandedRowIndex?.current,
@@ -55,7 +57,7 @@ const useRowExpander = hooks => {
         return row.canExpand && /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
           type: "button",
           "aria-label": expanderTitle,
-          className: cx(`${blockClass}__row-expander`, `${settings.carbon.prefix}--btn`, `${settings.carbon.prefix}--btn--ghost`)
+          className: cx(`${blockClass}__row-expander`, `${carbonPrefix}--btn`, `${carbonPrefix}--btn--ghost`)
         }, expanderButtonProps), row.isExpanded ? /*#__PURE__*/React.createElement(icons.ChevronUp, {
           className: `${blockClass}__row-expander--icon`
         }) : /*#__PURE__*/React.createElement(icons.ChevronDown, {

package/lib/components/Datagrid/useSelectRows.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2023
+ * 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.

package/lib/components/Datagrid/useSelectRows.js

@@ -56,6 +56,7 @@ const useSelectRows = hooks => {
   });
 };
 const useHighlightSelection = hooks => {
+  const carbonPrefix = react.usePrefix();
   const getRowProps = (props, _ref) => {
     let {
       row
@@ -65,7 +66,7 @@ const useHighlightSelection = hooks => {
     } = row.getToggleRowSelectedProps();
     return [props, {
       className: cx([`${blockClass}__carbon-row`, {
-        [`${settings.carbon.prefix}--data-table--selected`]: checked,
+        [`${carbonPrefix}--data-table--selected`]: checked,
         [`${blockClass}__active-row`]: checked
       }])
     }];

package/lib/components/Datagrid/useSortableColumns.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2024
+ * 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.