@carbon/ibm-products 2.54.0-canary.0 → 2.54.0-canary.11

package/es/components/APIKeyModal/APIKeyModal.js

@@ -18,9 +18,10 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
 var _ErrorFilled, _InformationFilled;
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -61,6 +62,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     hasAPIKeyVisibilityToggle = _ref.hasAPIKeyVisibilityToggle,
     hasDownloadLink = _ref.hasDownloadLink,
     hideAPIKeyLabel = _ref.hideAPIKeyLabel,
+    launcherButtonRef = _ref.launcherButtonRef,
     loading = _ref.loading,
     loadingText = _ref.loadingText,
     modalLabel = _ref.modalLabel,
@@ -118,6 +120,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var prevOpen = usePreviousValue(open);
   useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
@@ -141,6 +144,13 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, 0);
     }
   }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -486,6 +496,11 @@ APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to hide key
    */
   hideAPIKeyLabel: PropTypes.string,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: PropTypes.any,
   /**
    * designates if the modal is in a loading state via a request or some other in progress operation
    */

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

@@ -4,7 +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 { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 interface APIKeyModalCommonProps {
     /**
      * the api key that's displayed to the user when a request to create is fulfilled.
@@ -92,6 +92,10 @@ interface APIKeyModalCommonProps {
      * label text that's displayed when hovering over visibility toggler to hide key
      */
     hideAPIKeyLabel?: string;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * designates if the modal is in a loading state via a request or some other in progress operation
      */

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Filter, Item, Theme } from './types';
 export interface AddSelectProps {
     className?: string;
@@ -36,7 +36,7 @@ export interface AddSelectProps {
     /**
      * portal target for the all tags modal
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title: string;

package/es/components/AddSelect/AddSelect.js

@@ -107,6 +107,7 @@ AddSelect.propTypes = {
   /**
    * portal target for the all tags modal
    */
+  /**@ts-ignore */
   portalTarget: PropTypes.node,
   searchResultsTitle: PropTypes.string,
   sortByLabel: PropTypes.string,

package/es/components/AddSelect/AddSelectBody.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Item, Theme } from './types';
 export interface AddSelectBodyProps {
     className?: string;
@@ -35,7 +35,7 @@ export interface AddSelectBodyProps {
     onSubmit?: (selection: any) => void;
     onSubmitButtonText?: string;
     open?: boolean;
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title?: string;

package/es/components/AddSelect/AddSelectBody.js

@@ -361,6 +361,7 @@ AddSelectBody.propTypes = {
   onSubmit: PropTypes.func,
   onSubmitButtonText: PropTypes.string,
   open: PropTypes.bool,
+  /**@ts-ignore */
   portalTarget: PropTypes.node,
   searchResultsTitle: PropTypes.string,
   sortByLabel: PropTypes.string,

package/es/components/Card/Card.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
-import { Layer, OverflowMenu, OverflowMenuItem, Button, IconButton } from '@carbon/react';
+import { Layer, unstable_FeatureFlags, OverflowMenu, MenuItem, Button, IconButton } from '@carbon/react';
 import { Incomplete, CheckmarkOutline } from '@carbon/react/icons';
 import PropTypes from '../../_virtual/index.js';
 import { CardHeader } from './CardHeader.js';
@@ -17,7 +17,7 @@ import { pkg } from '../../settings.js';
 
 var _Incomplete, _CheckmarkOutline;
 var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
-  _excluded2 = ["id"],
+  _excluded2 = ["id", "itemText"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -95,23 +95,27 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // actions can either be an overflow menu or series of icons
   var getActions = function getActions() {
     if (overflowActions.length > 0) {
-      var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
+      var pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
       return /*#__PURE__*/React__default.createElement(Layer, {
         level: 2
+      }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+        enableV12Overflowmenu: true
       }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
+        autoAlign: true,
+        menuAlignment: pos,
         size: size,
-        direction: pos,
-        flipped: true,
         "aria-label": overflowAriaLabel,
-        iconDescription: iconDescription
+        label: iconDescription
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
+          itemText = _ref2.itemText,
           rest = _objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
-          key: id
+        return /*#__PURE__*/React__default.createElement(MenuItem, _extends({
+          key: id,
+          label: itemText
         }, rest));
-      })));
+      }))));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,

package/es/components/Datagrid/Datagrid/Datagrid.d.ts

@@ -19,5 +19,6 @@ export interface DatagridProps {
 }
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -21,6 +21,7 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
@@ -55,6 +56,12 @@ var Datagrid = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(DatagridContent, props)) : /*#__PURE__*/React__default.createElement(DatagridContent, props))));
 });
 
+/**@ts-ignore*/
+Datagrid.deprecated = {
+  level: 'warn',
+  details: "For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon"
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
 

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

@@ -107,7 +107,7 @@ export interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

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

@@ -63,7 +63,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

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

@@ -84,7 +84,7 @@ interface TearsheetShellProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

package/es/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -15,4 +15,4 @@ export interface TooltipTriggerProps extends PropsWithChildren {
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -23,12 +23,13 @@ var componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref) {
+var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button"
+    type: "button",
+    ref: ref
   }, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/es/components/UserAvatar/UserAvatar.js

@@ -96,9 +96,7 @@ var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         // switched classes dependant on props or state
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
-      ref: ref,
-      role: "img",
-      "aria-hidden": "true"
+      ref: ref
     }, getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -20,9 +20,10 @@ var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 var _ErrorFilled, _InformationFilled;
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -63,6 +64,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hasAPIKeyVisibilityToggle = _ref.hasAPIKeyVisibilityToggle,
     hasDownloadLink = _ref.hasDownloadLink,
     hideAPIKeyLabel = _ref.hideAPIKeyLabel,
+    launcherButtonRef = _ref.launcherButtonRef,
     loading = _ref.loading,
     loadingText = _ref.loadingText,
     modalLabel = _ref.modalLabel,
@@ -120,6 +122,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
     keyDownListener = _useFocus.keyDownListener;
+  var prevOpen = usePreviousValue.usePreviousValue(open);
   React.useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
@@ -143,6 +146,13 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, 0);
     }
   }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  React.useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -488,6 +498,11 @@ exports.APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to hide key
    */
   hideAPIKeyLabel: index.default.string,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index.default.any,
   /**
    * designates if the modal is in a loading state via a request or some other in progress operation
    */

package/lib/components/APIKeyModal/APIKeyModal.types.d.ts

@@ -4,7 +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 { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 interface APIKeyModalCommonProps {
     /**
      * the api key that's displayed to the user when a request to create is fulfilled.
@@ -92,6 +92,10 @@ interface APIKeyModalCommonProps {
      * label text that's displayed when hovering over visibility toggler to hide key
      */
     hideAPIKeyLabel?: string;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * designates if the modal is in a loading state via a request or some other in progress operation
      */

package/lib/components/AddSelect/AddSelect.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Filter, Item, Theme } from './types';
 export interface AddSelectProps {
     className?: string;
@@ -36,7 +36,7 @@ export interface AddSelectProps {
     /**
      * portal target for the all tags modal
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title: string;

package/lib/components/AddSelect/AddSelect.js

@@ -109,6 +109,7 @@ AddSelect.propTypes = {
   /**
    * portal target for the all tags modal
    */
+  /**@ts-ignore */
   portalTarget: index.default.node,
   searchResultsTitle: index.default.string,
   sortByLabel: index.default.string,

package/lib/components/AddSelect/AddSelectBody.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { Item, Theme } from './types';
 export interface AddSelectBodyProps {
     className?: string;
@@ -35,7 +35,7 @@ export interface AddSelectBodyProps {
     onSubmit?: (selection: any) => void;
     onSubmitButtonText?: string;
     open?: boolean;
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title?: string;

package/lib/components/AddSelect/AddSelectBody.js

@@ -363,6 +363,7 @@ AddSelectBody.propTypes = {
   onSubmit: index.default.func,
   onSubmitButtonText: index.default.string,
   open: index.default.bool,
+  /**@ts-ignore */
   portalTarget: index.default.node,
   searchResultsTitle: index.default.string,
   sortByLabel: index.default.string,

package/lib/components/Card/Card.js

@@ -19,7 +19,7 @@ var settings = require('../../settings.js');
 
 var _Incomplete, _CheckmarkOutline;
 var _excluded = ["actionIcons", "actionsPlacement", "aiLabel", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize", "iconDescription"],
-  _excluded2 = ["id"],
+  _excluded2 = ["id", "itemText"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -97,23 +97,27 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   // actions can either be an overflow menu or series of icons
   var getActions = function getActions() {
     if (overflowActions.length > 0) {
-      var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
+      var pos = actionsPlacement === 'top' ? 'bottom-end' : 'top-end';
       var size = actionsPlacement === 'top' ? 'sm' : 'md';
       return /*#__PURE__*/React.createElement(react.Layer, {
         level: 2
+      }, /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+        enableV12Overflowmenu: true
       }, /*#__PURE__*/React.createElement(react.OverflowMenu, {
+        autoAlign: true,
+        menuAlignment: pos,
         size: size,
-        direction: pos,
-        flipped: true,
         "aria-label": overflowAriaLabel,
-        iconDescription: iconDescription
+        label: iconDescription
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
+          itemText = _ref2.itemText,
           rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({
-          key: id
+        return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({
+          key: id,
+          label: itemText
         }, rest));
-      })));
+      }))));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,

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

@@ -19,5 +19,6 @@ export interface DatagridProps {
 }
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 export declare let Datagrid: React.ForwardRefExoticComponent<DatagridProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -23,6 +23,7 @@ var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
 /**
  * The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/carbon/ibm-products/components/datagrid/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
+ * @deprecated
  */
 exports.Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var datagridState = _ref.datagridState,
@@ -57,6 +58,12 @@ exports.Datagrid = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement(DatagridContent.DatagridContent, props)) : /*#__PURE__*/React.createElement(DatagridContent.DatagridContent, props))));
 });
 
+/**@ts-ignore*/
+exports.Datagrid.deprecated = {
+  level: 'warn',
+  details: "For more information, please refer to the migration docs https://github.com/carbon-design-system/tanstack-carbon"
+};
+
 // Return a placeholder if not released and not enabled by feature flag
 exports.Datagrid = settings.pkg.checkComponentEnabled(exports.Datagrid, componentName);
 

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

@@ -107,7 +107,7 @@ export interface TearsheetProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

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

@@ -63,7 +63,7 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

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

@@ -84,7 +84,7 @@ interface TearsheetShellProps extends PropsWithChildren {
     /**
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
-    portalTarget?: ReactNode;
+    portalTarget?: HTMLElement;
     /**
      * Specify a CSS selector that matches the DOM element that should be
      * focused when the Modal opens.

package/lib/components/TooltipTrigger/TooltipTrigger.d.ts

@@ -15,4 +15,4 @@ export interface TooltipTriggerProps extends PropsWithChildren {
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLDivElement>>;
+export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -25,12 +25,13 @@ var componentName = 'TooltipTrigger';
  * This is an tooltip trigger as Carbon Tooltip requires an active element to work but provides
  * no blanked button.
  */
-exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(function (_ref) {
+exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
-    type: "button"
+    type: "button",
+    ref: ref
   }, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/lib/components/UserAvatar/UserAvatar.js

@@ -98,9 +98,7 @@ exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // switched classes dependant on props or state
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
-      ref: ref,
-      role: "img",
-      "aria-hidden": "true"
+      ref: ref
     }, devtools.getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.0+4a92770d9",
+  "version": "2.54.0-canary.11+535e87142",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -89,7 +89,7 @@
     "rimraf": "^5.0.5",
     "rollup": "^3.29.5",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.77.2",
+    "sass": "^1.80.6",
     "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "4a92770d9179f6b59bfe18e53c998fdb51bd794a"
+  "gitHead": "535e87142413695c530952f7b314201c8a35becc"
 }