@carbon/ibm-products 2.54.0-canary.6 → 2.54.0-canary.64

package/es/components/APIKeyModal/APIKeyModal.js

@@ -5,22 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.js';
 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 { ErrorFilled, InformationFilled, Copy } from '@carbon/react/icons';
+import { ErrorFilled, InformationFilled, CheckmarkFilled, Copy } from '@carbon/react/icons';
 import { APIKeyDownloader } from './APIKeyDownloader.js';
 import { pkg } from '../../settings.js';
 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';
+import { useFocus, claimFocus } 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", "editSuccessMessage", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateSuccessMessage", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "launcherButtonRef", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel", "helperText"];
 var componentName = 'APIKeyModal';
 
 // Default values for props
@@ -51,16 +52,19 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     editButtonText = _ref.editButtonText,
     editSuccess = _ref.editSuccess,
     editSuccessTitle = _ref.editSuccessTitle,
+    editSuccessMessage = _ref.editSuccessMessage,
     editing = _ref.editing,
     error = _ref.error,
     errorText = _ref.errorText,
     generateButtonText = _ref.generateButtonText,
     generateSuccessBody = _ref.generateSuccessBody,
     generateSuccessTitle = _ref.generateSuccessTitle,
+    generateSuccessMessage = _ref.generateSuccessMessage,
     generateTitle = _ref.generateTitle,
     hasAPIKeyVisibilityToggle = _ref.hasAPIKeyVisibilityToggle,
     hasDownloadLink = _ref.hasDownloadLink,
     hideAPIKeyLabel = _ref.hideAPIKeyLabel,
+    launcherButtonRef = _ref.launcherButtonRef,
     loading = _ref.loading,
     loadingText = _ref.loadingText,
     modalLabel = _ref.modalLabel,
@@ -78,23 +82,28 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     previousStepButtonText = _ref.previousStepButtonText,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
+    helperText = _ref.helperText,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     title = _useState2[0],
     setTitle = _useState2[1];
-  var _useState3 = useState(false),
+  var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    copyError = _useState4[0],
-    setCopyError = _useState4[1];
-  var _useState5 = useState(apiKeyName),
+    successMessage = _useState4[0],
+    setSuccessMessage = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    name = _useState6[0],
-    setName = _useState6[1];
-  var _useState7 = useState(0),
+    copyError = _useState6[0],
+    setCopyError = _useState6[1];
+  var _useState7 = useState(apiKeyName),
     _useState8 = _slicedToArray(_useState7, 2),
-    currentStep = _useState8[0],
-    setCurrentStep = _useState8[1];
+    name = _useState8[0],
+    setName = _useState8[1];
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentStep = _useState10[0],
+    setCurrentStep = _useState10[1];
   var copyRef = useRef(undefined);
   var apiKeyInputId = useRef(uuidv4());
   var nameInputId = useRef(uuidv4());
@@ -114,33 +123,33 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   var blockClass = "".concat(pkg.prefix, "--apikey-modal");
   var localRef = useRef(undefined);
+  var PasswordInputRef = useRef(null);
   var modalRef = ref || localRef;
   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();
     }
+    if (PasswordInputRef !== null && PasswordInputRef !== void 0 && PasswordInputRef.current) {
+      PasswordInputRef === null || PasswordInputRef === void 0 || PasswordInputRef.current.setAttribute('readOnly', 'true');
+    }
   }, [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;
-        }
-      }
+      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    }
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
-        firstElement === null || firstElement === void 0 || firstElement.focus();
+        launcherButtonRef.current.focus();
       }, 0);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [launcherButtonRef, open, prevOpen]);
   var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
     if (loading) {
       return true;
@@ -174,16 +183,18 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   };
   useEffect(function () {
     if (editing && editSuccess) {
-      setTitle(editSuccessTitle);
+      setTitle(generateTitle);
+      setSuccessMessage(editSuccessMessage !== null && editSuccessMessage !== void 0 ? editSuccessMessage : editSuccessTitle);
     } else if (apiKeyLoaded) {
-      setTitle(generateSuccessTitle);
+      setTitle(generateTitle);
+      setSuccessMessage(generateSuccessMessage !== null && generateSuccessMessage !== void 0 ? generateSuccessMessage : generateSuccessTitle);
     } else if (hasSteps) {
       var _customSteps$currentS2;
       setTitle((_customSteps$currentS2 = customSteps[currentStep]) === null || _customSteps$currentS2 === void 0 ? void 0 : _customSteps$currentS2.title);
     } else {
       setTitle(generateTitle);
     }
-  }, [apiKeyLoaded, editing, editSuccess, editSuccessTitle, hasSteps, generateSuccessTitle, generateTitle, currentStep, customSteps]);
+  }, [apiKeyLoaded, loading, editing, editSuccess, editSuccessTitle, editSuccessMessage, hasSteps, generateSuccessTitle, generateSuccessMessage, generateTitle, currentStep, customSteps]);
   var setNameHandler = function setNameHandler(evt) {
     setName(evt.target.value);
   };
@@ -281,7 +292,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current,
     showPasswordLabel: showAPIKeyLabel,
     hidePasswordLabel: hideAPIKeyLabel,
-    tooltipPosition: "left"
+    tooltipPosition: "left",
+    helperText: helperText,
+    ref: PasswordInputRef
   }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/React__default.createElement(TextInput, {
     value: apiKey,
     labelText: apiKeyLabel,
@@ -309,7 +322,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React__default.createElement(ErrorFilled, {
     size: 16
   }))), /*#__PURE__*/React__default.createElement("p", {
-    className: "".concat(blockClass, "__messaging-text")
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, _InformationFilled || (_InformationFilled = /*#__PURE__*/React__default.createElement(InformationFilled, {
@@ -322,8 +337,19 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     fileType: downloadFileType,
     downloadLinkLabel: downloadLinkLabel
   }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__messaging-text")
-  }, generateSuccessBody)))), /*#__PURE__*/React__default.createElement(ModalFooter, {
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
+  }, generateSuccessBody)), (editSuccess || apiKeyLoaded && successMessage) && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__messaging")
+  }, /*#__PURE__*/React__default.createElement(CheckmarkFilled, {
+    size: 16,
+    className: "".concat(blockClass, "__checkmark-icon")
+  }), /*#__PURE__*/React__default.createElement("p", {
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
+  }, successMessage)))), /*#__PURE__*/React__default.createElement(ModalFooter, {
     className: "".concat(blockClass, "__footer")
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: "button",
@@ -357,7 +383,19 @@ var downloadRequiredProps = function downloadRequiredProps(type) {
 
 // Return a placeholder if not released and not enabled by feature flag
 APIKeyModal = pkg.checkComponentEnabled(APIKeyModal, componentName);
-APIKeyModal.propTypes = {
+var deprecatedProps = {
+  /**
+   * deprecated
+   * title for a successful edit
+   */
+  editSuccessTitle: PropTypes.string,
+  /**
+   * deprecated
+   * title for a successful key generation
+   */
+  generateSuccessTitle: PropTypes.string
+};
+APIKeyModal.propTypes = _objectSpread2({
   /**
    * the api key that's displayed to the user when a request to create is fulfilled.
    */
@@ -415,7 +453,7 @@ APIKeyModal.propTypes = {
   /**
    * the content that appears that indicates the key is downloadable
    */
-  downloadBodyText: downloadRequiredProps(PropTypes.string),
+  downloadBodyText: PropTypes.string,
   /**
    * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
    */
@@ -443,7 +481,7 @@ APIKeyModal.propTypes = {
   /**
    * title for a successful edit
    */
-  editSuccessTitle: editRequiredProps(PropTypes.string),
+  editSuccessMessage: editRequiredProps(PropTypes.string),
   /**
    * designates if the modal is in the edit mode
    */
@@ -469,7 +507,7 @@ APIKeyModal.propTypes = {
   /**
    * title for a successful key generation
    */
-  generateSuccessTitle: PropTypes.string,
+  generateSuccessMessage: PropTypes.string,
   /**
    * default title for the modal in generate key mode
    */
@@ -482,10 +520,19 @@ APIKeyModal.propTypes = {
    * designates if user is able to download the api key
    */
   hasDownloadLink: PropTypes.bool,
+  /**
+   * helper text for password input
+   */
+  helperText: PropTypes.string,
   /**
    * 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
    */
@@ -556,7 +603,7 @@ APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to show key
    */
   showAPIKeyLabel: PropTypes.string
-};
+}, deprecatedProps);
 APIKeyModal.displayName = componentName;
 
-export { APIKeyModal };
+export { APIKeyModal, deprecatedProps };

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.
@@ -73,9 +73,14 @@ interface APIKeyModalCommonProps {
      */
     generateSuccessBody?: ReactNode;
     /**
+     * * @deprecated use `generateSuccessMessage` instead
      * title for a successful key generation
      */
     generateSuccessTitle?: string;
+    /**
+     * success message for a successful key generation
+     */
+    generateSuccessMessage?: string;
     /**
      * default title for the modal in generate key mode
      */
@@ -92,6 +97,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
      */
@@ -154,6 +163,10 @@ interface APIKeyModalCommonProps {
      * label text that's displayed when hovering over visibility toggler to show key
      */
     showAPIKeyLabel?: string;
+    /**
+     * helper text for password input
+     */
+    helperText?: string;
 }
 type CustomStepConditionalProps = {
     /**
@@ -187,9 +200,14 @@ type EditingConditionalProps = {
      */
     editSuccess: boolean;
     /**
+     * * @deprecated use `editSuccessMessage` instead
      * title for a successful edit
      */
-    editSuccessTitle: string;
+    editSuccessTitle?: string;
+    /**
+     * success message for edit
+     */
+    editSuccessMessage: string;
 };
 type HasDownloadLinkProps = {
     /**
@@ -199,7 +217,7 @@ type HasDownloadLinkProps = {
     /**
      * the content that appears that indicates the key is downloadable
      */
-    downloadBodyText: string;
+    downloadBodyText?: string;
     /**
      * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
      */

package/es/components/AboutModal/AboutModal.js

@@ -11,7 +11,7 @@ import React__default, { useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { useFocus } from '../../global/js/hooks/useFocus.js';
+import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -62,12 +62,9 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
   useEffect(function () {
     if (open) {
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      claimFocus(firstElement, modalRef);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open]);
   return renderPortalUse( /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {

package/es/components/AddSelect/hooks/useFocus.js

@@ -36,6 +36,5 @@ var useFocus = function useFocus(size) {
   }, [handleKeyDown]);
   return [currentFocus, setCurrentFocus];
 };
-var useFocus$1 = useFocus;
 
-export { useFocus$1 as default };
+export { useFocus as default };

package/es/components/AddSelect/hooks/useParentSelect.js

@@ -18,6 +18,5 @@ var useParentSelect = function useParentSelect() {
     setParentSelected: setParentSelected
   };
 };
-var useParentSelect$1 = useParentSelect;
 
-export { useParentSelect$1 as default };
+export { useParentSelect as default };

package/es/components/AddSelect/hooks/usePath.js

@@ -66,6 +66,5 @@ var usePath = function usePath() {
     resetPath: resetPath
   };
 };
-var usePath$1 = usePath;
 
-export { usePath$1 as default };
+export { usePath as default };

package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -10,7 +10,7 @@ import React__default, { useState, useRef, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, OverflowMenuItem } from '@carbon/react';
+import { usePrefix, Breadcrumb, BreadcrumbItem, OverflowMenu, Link, Tooltip, unstable_FeatureFlags, MenuItem } from '@carbon/react';
 import { pkg } from '../../settings.js';
 import { OverflowMenuHorizontal, ArrowLeft } from '@carbon/react/icons';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
@@ -61,12 +61,20 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
   // eslint-disable-next-line react/prop-types
   var BreadcrumbOverflowMenu = function BreadcrumbOverflowMenu(_ref2) {
     var overflowItems = _ref2.overflowItems;
+    var handleClick = function handleClick(evt, item) {
+      var _item$props, _item$props2, _item$props2$onClick;
+      if (item !== null && item !== void 0 && (_item$props = item.props) !== null && _item$props !== void 0 && _item$props.href) {
+        window.location.href = item.props.href;
+      }
+      item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 || (_item$props2$onClick = _item$props2.onClick) === null || _item$props2$onClick === void 0 || _item$props2$onClick.call(_item$props2, evt);
+    };
     return /*#__PURE__*/React__default.createElement(BreadcrumbItem, {
       key: "breadcrumb-overflow-".concat(internalId.current)
+    }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      enableV12Overflowmenu: true
     }, /*#__PURE__*/React__default.createElement(OverflowMenu, {
-      align: overflowTooltipAlign,
       "aria-label": overflowAriaLabel,
-      iconDescription: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
+      label: overflowAriaLabel // also needs setting to avoid a11y "Accessible name does not match or contain the visible label text"
       ,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, _extends({
@@ -74,17 +82,18 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
         }, props));
       },
       className: "".concat(blockClass, "__overflow-menu"),
-      menuOptionsClass: "".concat(blockClass, "__overflow-menu-options")
+      tooltipAlignment: overflowTooltipAlign
     },
     // eslint-disable-next-line react/prop-types
     overflowItems.map(function (item, index) {
-      return /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
+      return /*#__PURE__*/React__default.createElement(MenuItem, {
         key: "breadcrumb-overflow-menu-item-".concat(internalId.current, "-").concat(index),
-        href: item.props.href,
-        onClick: item.props.onClick,
-        itemText: item.props.children
+        onClick: function onClick(evt) {
+          return handleClick(evt, item);
+        },
+        label: item.props.children
       });
-    })));
+    }))));
   };
 
   // create hidden sizing items

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

@@ -58,13 +58,13 @@ interface CardProp extends PropsWithChildren {
     iconDescription?: string;
     /**
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode | boolean;
     /**
-     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     * Optional prop that allows you to pass any component.
      */
-    aiLabel?: ReactNode | boolean;
+    decorator?: ReactNode | boolean;
     status?: 'complete' | 'incomplete';
     title?: ReactNode;
     titleSize?: 'default' | 'large';

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';
@@ -16,8 +16,8 @@ import { CardFooter } from './CardFooter.js';
 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"],
+var _excluded = ["actionIcons", "actionsPlacement", "decorator", "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"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
 var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -25,7 +25,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? Object.freeze([]) : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? 'bottom' : _ref$actionsPlacement,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? Object.freeze([]) : _ref$metadata,
     children = _ref.children,
@@ -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,
@@ -164,10 +168,11 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return icons;
   };
   var getCardProps = function getCardProps() {
+    var _decorator$type, _decorator$type2;
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-ai-label"), !!aiLabel), className)
+      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), "".concat(blockClass, "--has-decorator"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) !== 'AILabel'), "".concat(blockClass, "--has-ai-label"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) === 'AILabel'), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -183,7 +188,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      aiLabel: aiLabel,
+      decorator: decorator,
       noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -267,13 +272,13 @@ Card.propTypes = {
     href: PropTypes.string
   })),
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
-   */
-  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   children: PropTypes.node,
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**@ts-ignore */
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   disabled: PropTypes.bool,
@@ -322,7 +327,7 @@ Card.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
-   * @deprecated please use the `aiLabel` prop
+   * @deprecated please use the `decorator` prop
    */
   slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   status: PropTypes.oneOf(['complete', 'incomplete']),

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 interface CardHeaderProps {
     actions?: ReactNode;
     /**
-     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+     * Optional prop that allows you to pass any component.
      */
-    aiLabel?: ReactNode | boolean;
+    decorator?: ReactNode | boolean;
     description?: ReactNode;
     hasActions?: boolean;
     /**
@@ -29,21 +29,21 @@ interface CardHeaderProps {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
-     * @deprecated please use the `aiLabel` prop
+     * @deprecated please use the `decorator` prop
      */
     slug?: ReactNode;
     title?: ReactNode;
     titleSize?: 'default' | 'large';
 }
 export declare const CardHeader: {
-    ({ actions, aiLabel, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
+    ({ actions, decorator, noActionIcons, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonIcon, primaryButtonPlacement, primaryButtonText, primaryButtonDisabled, description, hasActions, inClickableCard, label, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonPlacement, secondaryButtonText, slug, title, titleSize, }: CardHeaderProps): React.JSX.Element;
     /**@ts-ignore */
     propTypes: {
         actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
         /**
-         * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level.
+         * Optional prop that allows you to pass any component.
          */
-        aiLabel: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        decorator: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         description: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;
         hasActions: PropTypes.Requireable<boolean>;
         /**
@@ -67,7 +67,7 @@ export declare const CardHeader: {
         /**
          * **Experimental:** For all cases a `Slug` component can be provided.
          * Clickable tiles only accept a boolean value of true and display a hollow slug.
-         * @deprecated please use the `aiLabel` prop
+         * @deprecated please use the `decorator` prop
          */
         slug: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         title: PropTypes.Requireable<NonNullable<object | PropTypes.ReactNodeLike>>;