@carbon/ibm-products 2.68.0 → 2.69.0-rc.0

package/es/_virtual/index2.js

@@ -5,6 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var propTypes = {exports: {}};
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requireLodash_debounce } from '../node_modules/lodash.debounce/index.js';
 
-export { propTypes as __module };
+var lodash_debounceExports = requireLodash_debounce();
+var debounce = /*@__PURE__*/getDefaultExportFromCjs(lodash_debounceExports);
+
+export { debounce as default };

package/es/_virtual/index3.js

@@ -0,0 +1,10 @@
+/**
+ * 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.
+ */
+
+var propTypes = {exports: {}};
+
+export { propTypes as __module };

package/es/components/AddSelect/AddSelectColumn.js

@@ -8,16 +8,17 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
 import PropTypes from '../../_virtual/index.js';
-import { usePrefix, Search, OverflowMenu, Checkbox, Tag } from '@carbon/react';
+import { Search, unstable_FeatureFlags, Popover, IconButton, PopoverContent, Checkbox, Tag } from '@carbon/react';
 import { Filter } from '@carbon/react/icons';
 import { pkg } from '../../settings.js';
 import { AddSelectList } from './AddSelectList.js';
 import { AddSelectSort } from './AddSelectSort.js';
 import { sortItems } from './add-select-utils.js';
 import { useItemSort } from './hooks/useItemSort.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
+import { useId } from '../../global/js/utils/useId.js';
 import useParentSelect from './hooks/useParentSelect.js';
 
+var _Filter;
 const blockClass = `${pkg.prefix}--add-select`;
 const colClass = `${blockClass}__column`;
 const componentName = 'AddSelectColumn';
@@ -35,11 +36,13 @@ let AddSelectColumn = _ref => {
     sortByLabel,
     ...props
   } = _ref;
-  const carbonPrefix = usePrefix();
   const {
     parentSelected,
     setParentSelected
   } = useParentSelect();
+  const selectAllId = useId();
+  const filterId = useId();
+  const searchId = useId();
   const [searchTerm, setSearchTerm] = useState('');
   const {
     sortDirection,
@@ -47,6 +50,7 @@ let AddSelectColumn = _ref => {
     sortAttribute,
     setSortAttribute
   } = useItemSort();
+  const [filterOpen, setFilterOpen] = useState(false);
   const [filters, setFilters] = useState([]);
   const {
     entries,
@@ -112,6 +116,7 @@ let AddSelectColumn = _ref => {
     const filterByValue = item[filterBy];
     return filters.some(filter => filter === filterByValue);
   };
+  const filterBtnId = `filter-${filterId}`;
   const sortFn = sortItems(sortAttribute, sortDirection);
   const colItems = entries.filter(filterBySearch) // first check if the item meets the search
   .filter(filterByAttribute) // then check if the item is included in the filter
@@ -130,7 +135,7 @@ let AddSelectColumn = _ref => {
     onChange: e => setSearchTerm(e.target.value),
     placeholder: columnInputPlaceholder,
     className: `${colClass}-input`,
-    id: uuidv4(),
+    id: searchId,
     labelText: columnInputPlaceholder,
     size: "md"
   }), /*#__PURE__*/React__default.createElement("div", {
@@ -143,20 +148,38 @@ let AddSelectColumn = _ref => {
     sortDirection: sortDirection,
     sortBy: sortBy,
     sortByLabel: sortByLabel
-  }), filterByOpts.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, {
-    renderIcon: props => /*#__PURE__*/React__default.createElement(Filter, _extends({
-      size: 32
-    }, props)),
-    className: `${colClass}-overflow`,
-    flipped: true,
-    "aria-label": filterByLabel,
-    iconDescription: filterByLabel
-  }, filterByOpts.map(opt => /*#__PURE__*/React__default.createElement("div", {
+  }), filterByOpts.length > 0 && /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+    enableV12DynamicFloatingStyles: true
+  }, /*#__PURE__*/React__default.createElement(Popover, {
+    align: "bottom-right",
+    isTabTip: true,
+    onKeyDown: e => {
+      if (e.key === 'Escape') {
+        setFilterOpen(false);
+        e.preventDefault(); // prevent modal close
+        e.stopPropagation();
+        const filterBtn = document.querySelector(`#${filterBtnId}`);
+        filterBtn?.focus(); // workaround to return focus, refs not possible on button inside popover for some reason
+      }
+    },
+    onRequestClose: () => setFilterOpen(false),
+    open: filterOpen
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    size: "md",
+    id: filterBtnId,
+    hasIconOnly: true,
+    "aria-expanded": filterOpen,
+    badgeCount: filters.length > 0 ? 0 : undefined // setting to 0 renders an empty dot
+    ,
+    kind: "ghost",
+    label: filterByLabel || 'Filter',
+    onClick: () => {
+      setFilterOpen(prev => !prev);
+    }
+  }, _Filter || (_Filter = /*#__PURE__*/React__default.createElement(Filter, null))), /*#__PURE__*/React__default.createElement(PopoverContent, {
+    className: `${colClass}-filter-popover`
+  }, filterByOpts.map(opt => /*#__PURE__*/React__default.createElement(Checkbox, {
     key: opt,
-    className: `${carbonPrefix}--overflow-menu-options__option`
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${carbonPrefix}--overflow-menu-options__btn`
-  }, /*#__PURE__*/React__default.createElement(Checkbox, {
     id: opt,
     labelText: opt,
     onChange: (event, _ref3) => {
@@ -169,7 +192,7 @@ let AddSelectColumn = _ref => {
   }))))))), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__tags`
   }, /*#__PURE__*/React__default.createElement(Checkbox, {
-    id: `${uuidv4()}-select-all`,
+    id: `${selectAllId}-select-all`,
     className: `${colClass}__select-all`,
     checked: allSelected,
     onChange: selectAllHandler,

package/es/components/AddSelect/AddSelectSort.js

@@ -8,11 +8,10 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
-import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
-import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/react/icons';
+import { unstable_FeatureFlags, OverflowMenu, MenuItem } from '@carbon/react';
+import { ArrowsVertical } from '@carbon/react/icons';
 import { pkg } from '../../settings.js';
 
-var _ArrowUp, _ArrowDown;
 const blockClass = `${pkg.prefix}--add-select-sort`;
 const componentName = 'AddSelectSort';
 const AddSelectSort = _ref => {
@@ -25,16 +24,12 @@ const AddSelectSort = _ref => {
   const sortByOpts = sortBy ? sortBy?.reduce((acc, cur) => {
     const opts = [{
       id: `${cur}-asc`,
-      itemText: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default.createElement(ArrowUp, {
-        size: 16
-      })), cur),
+      label: cur,
       direction: 'asc',
       attribute: cur
     }, {
       id: `${cur}-desc`,
-      itemText: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _ArrowDown || (_ArrowDown = /*#__PURE__*/React__default.createElement(ArrowDown, {
-        size: 16
-      })), cur),
+      label: cur,
       direction: 'desc',
       attribute: cur
     }];
@@ -52,22 +47,26 @@ const AddSelectSort = _ref => {
   };
   return /*#__PURE__*/React__default.createElement("div", {
     className: blockClass
-  }, sortByOpts.length > 0 && /*#__PURE__*/React__default.createElement(OverflowMenu, {
+  }, sortByOpts.length > 0 && /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+    enableV12Overflowmenu: true
+  }, /*#__PURE__*/React__default.createElement(OverflowMenu
+  // @ts-ignore // TODO: remove after carbon fixes this ts error
+  , {
+    autoAlign: true,
+    menuAlignment: "bottom-end",
     renderIcon: props => /*#__PURE__*/React__default.createElement(ArrowsVertical, _extends({
       size: 32
     }, props)),
     className: `${blockClass}_overflow`,
-    flipped: true,
-    "aria-label": sortByLabel,
-    iconDescription: sortByLabel
+    label: sortByLabel
   }, sortByOpts.map(opt => {
-    return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
+    return /*#__PURE__*/React__default.createElement(MenuItem, {
       className: `${blockClass}_overflow-item`,
       key: opt?.id,
-      itemText: opt?.itemText,
+      label: `${opt?.label} ${opt?.direction}`,
       onClick: () => sortHandler(opt)
     });
-  })));
+  }))));
 };
 AddSelectSort.propTypes = {
   setSortAttribute: PropTypes.func,

package/es/components/AddSelect/types/index.d.ts

@@ -47,5 +47,5 @@ export interface SortOption {
     id?: string;
     direction?: string;
     attribute?: string;
-    itemText?: ReactNode;
+    label?: string;
 }

package/es/components/Card/Card.d.ts

@@ -10,7 +10,7 @@ type LinkType = {
     [key: string]: unknown;
 };
 export interface ActionIcon extends Metadata {
-    onKeydown?: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /**
      * @deprecated please use the `link.href` instead
@@ -22,7 +22,7 @@ type OverflowActions = {
     id?: string;
     itemText?: string;
     onClick?: () => void;
-    onKeydown?: () => void;
+    onKeyDown?: () => void;
 };
 interface CardProp extends PropsWithChildren {
     actionIcons?: readonly ActionIcon[];

package/es/components/Card/Card.js

@@ -96,12 +96,15 @@ const Card = /*#__PURE__*/forwardRef((_ref, ref) => {
         let {
           id,
           itemText,
-          ...rest
+          onKeyDown,
+          onClick
         } = _ref2;
-        return /*#__PURE__*/React__default.createElement(MenuItem, _extends({
+        return /*#__PURE__*/React__default.createElement(MenuItem, {
           key: id,
-          label: itemText ?? ''
-        }, rest));
+          label: itemText ?? '',
+          onKeyDown: onKeyDown,
+          onClick: onClick
+        });
       }))));
     }
     const icons = getIcons().map(_ref3 => {

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

@@ -70,6 +70,10 @@ let Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
   const _overlayRef = overlayRef || overlayBackupRef;
   const portalNode = useRef(null);
   const popoverRef = useRef(null);
+  let targetName;
+  if (/*#__PURE__*/React__default.isValidElement(target) && typeof target.type !== 'string') {
+    targetName = target.type;
+  }
   useIsomorphicEffect(() => {
     portalNode.current = portalTarget ? document?.querySelector(portalTarget) ?? document?.querySelector('body') : document?.querySelector('body');
   }, [portalTarget]);
@@ -173,7 +177,9 @@ let Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(blockClass, `${blockClass}__${theme}`, className),
     ref: _coachmarkRef
-  }, rest, getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, target, isOpen && portalNode?.current && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }, rest, getDevtoolsProps(componentName)), overlayKind !== 'tooltip' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, targetName?.displayName === 'CoachmarkBeacon' ? /*#__PURE__*/React__default.cloneElement(target, {
+    buttonProps: contextValue.buttonProps
+  }) : target, isOpen && portalNode?.current && /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
@@ -189,7 +195,9 @@ let Coachmark = /*#__PURE__*/forwardRef((_ref, ref) => {
     align: align,
     autoAlign: autoAlign,
     open: isOpen
-  }, target, /*#__PURE__*/React__default.createElement(PopoverContent, null, isOpen && /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
+  }, targetName?.displayName === 'CoachmarkBeacon' ? /*#__PURE__*/React__default.cloneElement(target, {
+    buttonProps: contextValue.buttonProps
+  }) : target, /*#__PURE__*/React__default.createElement(PopoverContent, null, isOpen && /*#__PURE__*/React__default.createElement(CoachmarkOverlay, {
     ref: _overlayRef,
     fixedIsVisible: false,
     kind: overlayKind,
@@ -210,6 +218,43 @@ Coachmark = pkg.checkComponentEnabled(Coachmark, componentName);
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 Coachmark.displayName = componentName;
+const deprecatedProps = {
+  /**
+   * **Deprecated**
+   * Optional class name for the Coachmark Overlay component.
+   */
+  overlayClassName: PropTypes.string,
+  /**
+   * **Deprecated**
+   * What kind or style of Coachmark to render.
+   */
+  overlayKind: PropTypes.oneOf(['tooltip', 'floating', 'stacked']),
+  overlayRef: PropTypes.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: PropTypes.string,
+  /**
+   * **Deprecated**
+   * The optional button or beacon that the user will click to show the Coachmark.
+   */
+  target: PropTypes.node,
+  /**
+   * **Deprecated**
+   * Determines the theme of the component.
+   */
+  theme: PropTypes.oneOf(['light', 'dark'])
+};
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
@@ -244,28 +289,6 @@ Coachmark.propTypes = {
    * Function to call when the Coachmark closes.
    */
   onClose: PropTypes.func,
-  /**
-   * Optional class name for the Coachmark Overlay component.
-   */
-  overlayClassName: PropTypes.string,
-  /**
-   * What kind or style of Coachmark to render.
-   */
-  overlayKind: PropTypes.oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: PropTypes.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: PropTypes.string,
   /**
    * Fine tune the position of the target in pixels. Applies only to Beacons.
    */
@@ -274,14 +297,7 @@ Coachmark.propTypes = {
     x: PropTypes.number,
     y: PropTypes.number
   }),
-  /**
-   * The optional button or beacon that the user will click to show the Coachmark.
-   */
-  target: PropTypes.node,
-  /**
-   * Determines the theme of the component.
-   */
-  theme: PropTypes.oneOf(['light', 'dark'])
+  ...deprecatedProps
 };
 
-export { Coachmark };
+export { Coachmark, deprecatedProps };

package/es/components/Coachmark/CoachmarkOverlay.js

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

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

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

package/es/components/CoachmarkButton/CoachmarkButton.js

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

package/es/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

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

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

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

package/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -8,8 +8,8 @@
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import '../../../feature-flags.js';
 import React__default, { useContext, useRef, useEffect } from 'react';
-import { TableContainer, Table } from '@carbon/react';
-import { pkg, carbon } from '../../../settings.js';
+import { usePrefix, TableContainer, Table } from '@carbon/react';
+import { pkg } from '../../../settings.js';
 import { CLEAR_FILTERS, CLEAR_SINGLE_FILTER } from './addons/Filtering/constants.js';
 import DatagridBody from './DatagridBody.js';
 import DatagridHead from './DatagridHead.js';
@@ -82,6 +82,7 @@ const DatagridContent = _ref => {
   const contentRows = DatagridPagination && page || rows;
   const gridAreaRef = useRef(null);
   const multiKeyTrackingRef = useRef(null);
+  const carbonPrefix = usePrefix();
   const enableEditableCell = useFeatureFlag('enable-datagrid-useEditableCell');
   const enableInlineEdit = useFeatureFlag('enable-datagrid-useInlineEdit');
   const enableCustomizeCols = useFeatureFlag('enable-datagrid-useCustomizeColumns');
@@ -135,7 +136,8 @@ const DatagridContent = _ref => {
         keysPressedList,
         state: inlineEditState,
         usingMac,
-        ref: multiKeyTrackingRef
+        ref: multiKeyTrackingRef,
+        carbonPrefix
       })),
       onFocus: withInlineEdit && (() => handleGridFocus(inlineEditState, dispatch)),
       title
@@ -158,12 +160,12 @@ const DatagridContent = _ref => {
       return;
     }
     const gridElement = document.querySelector(`#${tableId}`);
-    const tableHeader = gridElement?.querySelector(`.${carbon.prefix}--data-table-header`);
+    const tableHeader = gridElement?.querySelector(`.${carbonPrefix}--data-table-header`);
     gridElement?.style?.setProperty(`--${blockClass}--grid-width`, px((totalColumnsWidth || 0) + 32));
     if (gridActive) {
       gridElement?.style.setProperty(`--${blockClass}--grid-header-height`, px(tableHeader?.clientHeight || 0));
     }
-  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive]);
+  }, [withInlineEdit, tableId, totalColumnsWidth, datagridState, gridActive, carbonPrefix]);
   useSubscribeToEventEmitter(CLEAR_SINGLE_FILTER, id => clearSingleFilter(id, setAllFilters, state, contextTableId));
   const renderFilterSummary = () => state.filters.length > 0 && /*#__PURE__*/React__default.createElement(FilterSummary, {
     className: `${blockClass}__filter-summary`,