@carbon/ibm-products 2.54.0-canary.9 → 2.54.0-rc.1

package/es/components/APIKeyModal/APIKeyDownloader.js

@@ -65,7 +65,7 @@ var APIKeyDownloader = function APIKeyDownloader(_ref) {
     className: "".concat(pkg.prefix, "--apikey-modal__download-link"),
     "aria-label": downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText,
     role: "button"
-  }), downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText)));
+  }), linkText)));
 };
 APIKeyDownloader.displayName = componentName;
 APIKeyDownloader.propTypes = {

package/es/components/APIKeyModal/APIKeyModal.js

@@ -9,7 +9,7 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import React__default, { forwardRef, useState, useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { unstable_FeatureFlags, ComposedModal, ModalHeader, ModalBody, PasswordInput, TextInput, Form, InlineLoading, ModalFooter, Button } from '@carbon/react';
+import { ComposedModal, ModalHeader, ModalBody, PasswordInput, TextInput, Form, InlineLoading, ModalFooter, Button } from '@carbon/react';
 import { ErrorFilled, InformationFilled, Copy } from '@carbon/react/icons';
 import { APIKeyDownloader } from './APIKeyDownloader.js';
 import { pkg } from '../../settings.js';
@@ -17,10 +17,9 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 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';
 
 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", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "showAPIKeyLabel"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -76,7 +75,6 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
@@ -113,34 +111,11 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: copyRef
   };
   var blockClass = "".concat(pkg.prefix, "--apikey-modal");
-  var localRef = useRef(undefined);
-  var modalRef = ref || localRef;
-  var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
   useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
     }
   }, [open, apiKeyLoaded]);
-  useEffect(function () {
-    if (open) {
-      // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window;
-        var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-        if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
-          setTimeout(function () {
-            return specifiedEl.focus();
-          }, 0);
-          return;
-        }
-      }
-      setTimeout(function () {
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -255,13 +230,10 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onCloseHandler();
     }
   };
-  return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
-    enableExperimentalFocusWrapWithoutSentinels: true
-  }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, _objectSpread2({
-    open: open
+  return renderPortalUse( /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, _objectSpread2({
+    open: open,
+    ref: ref
   }, getDevtoolsProps(componentName)), {
-    ref: modalRef,
-    onKeyDown: keyDownListener,
     className: cx(className, blockClass),
     onClose: onCloseHandler,
     size: "sm",
@@ -334,7 +306,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: "primary",
     onClick: submitHandler,
     disabled: isPrimaryButtonDisabled()
-  }), getPrimaryButtonText())))));
+  }), getPrimaryButtonText()))));
 });
 var customStepsRequiredProps = function customStepsRequiredProps(type) {
   return isRequiredIf(type, function (_ref3) {
@@ -547,11 +519,6 @@ APIKeyModal.propTypes = {
    * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
    */
   previousStepButtonText: customStepsRequiredProps(PropTypes.string),
-  /**
-   * Specify a CSS selector that matches the DOM element that should be
-   * focused when the Modal opens.
-   */
-  selectorPrimaryFocus: PropTypes.string,
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */

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

@@ -145,11 +145,6 @@ interface APIKeyModalCommonProps {
      * The DOM node the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
-    /**
-     * Specify a CSS selector that matches the DOM element that should be
-     * focused when the Modal opens.
-     */
-    selectorPrimaryFocus?: string;
     /**
      * label text that's displayed when hovering over visibility toggler to show key
      */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } 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?: HTMLElement;
+    portalTarget?: ReactNode;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title: string;

package/es/components/AddSelect/AddSelect.js

@@ -107,7 +107,6 @@ 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 from 'react';
+import React, { ReactNode } 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?: HTMLElement;
+    portalTarget?: ReactNode;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title?: string;

package/es/components/AddSelect/AddSelectBody.js

@@ -361,7 +361,6 @@ 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, unstable_FeatureFlags, OverflowMenu, MenuItem, Button, IconButton } from '@carbon/react';
+import { Layer, OverflowMenu, OverflowMenuItem, 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", "itemText"],
+  _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -95,27 +95,23 @@ 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-end' : 'top-end';
+      var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       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,
-        label: iconDescription
+        iconDescription: iconDescription
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
-          itemText = _ref2.itemText,
           rest = _objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React__default.createElement(MenuItem, _extends({
-          key: id,
-          label: itemText
+        return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
+          key: id
         }, rest));
-      }))));
+      })));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,

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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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<HTMLButtonElement>>;
+export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/TooltipTrigger/TooltipTrigger.js

@@ -23,13 +23,12 @@ 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, ref) {
+var TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("button", _extends({
-    type: "button",
-    ref: ref
+    type: "button"
   }, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/es/components/UserAvatar/UserAvatar.js

@@ -96,7 +96,9 @@ 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
+      ref: ref,
+      role: "img",
+      "aria-hidden": "true"
     }, getDevtoolsProps(componentName)), getItem());
   };
   if (tooltipText) {

package/lib/components/APIKeyModal/APIKeyDownloader.js

@@ -67,7 +67,7 @@ var APIKeyDownloader = function APIKeyDownloader(_ref) {
     className: "".concat(settings.pkg.prefix, "--apikey-modal__download-link"),
     "aria-label": downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText,
     role: "button"
-  }), downloadLinkLabel !== null && downloadLinkLabel !== void 0 ? downloadLinkLabel : linkText)));
+  }), linkText)));
 };
 APIKeyDownloader.displayName = componentName;
 APIKeyDownloader.propTypes = {

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -19,10 +19,9 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 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 _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", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "showAPIKeyLabel"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -78,7 +77,6 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(null),
@@ -115,34 +113,11 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: copyRef
   };
   var blockClass = "".concat(settings.pkg.prefix, "--apikey-modal");
-  var localRef = React.useRef(undefined);
-  var modalRef = ref || localRef;
-  var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
   React.useEffect(function () {
     if (copyRef.current && open && apiKeyLoaded) {
       copyRef.current.focus();
     }
   }, [open, apiKeyLoaded]);
-  React.useEffect(function () {
-    if (open) {
-      // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window;
-        var specifiedEl = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-        if (specifiedEl && ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(specifiedEl)) === null || _window === void 0 ? void 0 : _window.display) !== 'none') {
-          setTimeout(function () {
-            return specifiedEl.focus();
-          }, 0);
-          return;
-        }
-      }
-      setTimeout(function () {
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -257,13 +232,10 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onCloseHandler();
     }
   };
-  return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
-    enableExperimentalFocusWrapWithoutSentinels: true
-  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, _rollupPluginBabelHelpers.objectSpread2({
-    open: open
+  return renderPortalUse( /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, _rollupPluginBabelHelpers.objectSpread2({
+    open: open,
+    ref: ref
   }, devtools.getDevtoolsProps(componentName)), {
-    ref: modalRef,
-    onKeyDown: keyDownListener,
     className: cx(className, blockClass),
     onClose: onCloseHandler,
     size: "sm",
@@ -336,7 +308,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     kind: "primary",
     onClick: submitHandler,
     disabled: isPrimaryButtonDisabled()
-  }), getPrimaryButtonText())))));
+  }), getPrimaryButtonText()))));
 });
 var customStepsRequiredProps = function customStepsRequiredProps(type) {
   return propsHelper.isRequiredIf(type, function (_ref3) {
@@ -549,11 +521,6 @@ exports.APIKeyModal.propTypes = {
    * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
    */
   previousStepButtonText: customStepsRequiredProps(index.default.string),
-  /**
-   * Specify a CSS selector that matches the DOM element that should be
-   * focused when the Modal opens.
-   */
-  selectorPrimaryFocus: index.default.string,
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */

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

@@ -145,11 +145,6 @@ interface APIKeyModalCommonProps {
      * The DOM node the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
-    /**
-     * Specify a CSS selector that matches the DOM element that should be
-     * focused when the Modal opens.
-     */
-    selectorPrimaryFocus?: string;
     /**
      * label text that's displayed when hovering over visibility toggler to show key
      */

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } 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?: HTMLElement;
+    portalTarget?: ReactNode;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title: string;

package/lib/components/AddSelect/AddSelect.js

@@ -109,7 +109,6 @@ 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 from 'react';
+import React, { ReactNode } 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?: HTMLElement;
+    portalTarget?: ReactNode;
     searchResultsTitle?: string;
     sortByLabel?: string;
     title?: string;

package/lib/components/AddSelect/AddSelectBody.js

@@ -363,7 +363,6 @@ 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", "itemText"],
+  _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -97,27 +97,23 @@ 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-end' : 'top-end';
+      var pos = actionsPlacement === 'top' ? 'bottom' : 'top';
       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,
-        label: iconDescription
+        iconDescription: iconDescription
       }, overflowActions.map(function (_ref2) {
         var id = _ref2.id,
-          itemText = _ref2.itemText,
           rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
-        return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({
-          key: id,
-          label: itemText
+        return /*#__PURE__*/React.createElement(react.OverflowMenuItem, _rollupPluginBabelHelpers.extends({
+          key: id
         }, rest));
-      }))));
+      })));
     }
     var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,

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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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?: HTMLElement;
+    portalTarget?: ReactNode;
     /**
      * 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<HTMLButtonElement>>;
+export declare let TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/TooltipTrigger/TooltipTrigger.js

@@ -25,13 +25,12 @@ 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, ref) {
+exports.TooltipTrigger = /*#__PURE__*/React.forwardRef(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({
-    type: "button",
-    ref: ref
+    type: "button"
   }, rest, {
     className: cx(blockClass,
     // Apply the block class to the main HTML element

package/lib/components/UserAvatar/UserAvatar.js

@@ -98,7 +98,9 @@ exports.UserAvatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         // switched classes dependant on props or state
         // example: [`${blockClass}__here-if-small`]: size === 'sm',
       }),
-      ref: ref
+      ref: ref,
+      role: "img",
+      "aria-hidden": "true"
     }, 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.9+53e5fd123",
+  "version": "2.54.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -81,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.13.0-rc.0",
+    "jest-config-ibm-cloud-cognitive": "^1.13.0-rc.1",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -89,14 +89,14 @@
     "rimraf": "^5.0.5",
     "rollup": "^3.29.5",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.80.6",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.3.0",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.50.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.50.0-rc.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -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": "53e5fd123fe2f238a3a66bd407d83ebde029029a"
+  "gitHead": "9bdef903b3824229bdaf67f77ee4a7f37e2d8cb1"
 }