@carbon/ibm-products 2.54.0-canary.59 → 2.54.0-canary.60

package/es/components/APIKeyModal/APIKeyModal.js

@@ -5,12 +5,12 @@
  * 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';
@@ -21,7 +21,7 @@ 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", "launcherButtonRef", "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
@@ -52,12 +52,14 @@ 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,
@@ -80,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());
@@ -116,6 +123,7 @@ 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,
@@ -125,6 +133,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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) {
@@ -172,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);
   };
@@ -279,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,
@@ -307,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, {
@@ -320,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",
@@ -355,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.
    */
@@ -413,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'
    */
@@ -441,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
    */
@@ -467,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
    */
@@ -480,6 +520,10 @@ 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
    */
@@ -559,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

@@ -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
      */
@@ -158,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 = {
     /**
@@ -191,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 = {
     /**
@@ -203,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/lib/components/APIKeyModal/APIKeyDownloader.d.ts

@@ -10,7 +10,7 @@ export namespace APIKeyDownloader {
     export { componentName as displayName };
     export namespace propTypes {
         let apiKey: PropTypes.Validator<string>;
-        let body: PropTypes.Validator<string>;
+        let body: PropTypes.Requireable<string>;
         let downloadLinkLabel: PropTypes.Requireable<string>;
         let fileName: PropTypes.Validator<string>;
         let fileType: PropTypes.Validator<string>;

package/lib/components/APIKeyModal/APIKeyDownloader.js

@@ -78,7 +78,7 @@ APIKeyDownloader.propTypes = {
   /**
    * body content for the downloader
    */
-  body: index.default.string.isRequired,
+  body: index.default.string,
   /**
    * aria-label for the download link
    */

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

@@ -1,3 +1,16 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { APIKeyModalProps } from './APIKeyModal.types';
 export declare let APIKeyModal: React.FC<APIKeyModalProps>;
+export declare const deprecatedProps: {
+    /**
+     * deprecated
+     * title for a successful edit
+     */
+    editSuccessTitle: PropTypes.Requireable<string>;
+    /**
+     * deprecated
+     * title for a successful key generation
+     */
+    generateSuccessTitle: PropTypes.Requireable<string>;
+};

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -23,7 +23,7 @@ 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", "launcherButtonRef", "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
@@ -54,12 +54,14 @@ exports.APIKeyModal = /*#__PURE__*/React.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,
@@ -82,23 +84,28 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     previousStepButtonText = _ref.previousStepButtonText,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
+    helperText = _ref.helperText,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useState = React.useState(null),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     title = _useState2[0],
     setTitle = _useState2[1];
-  var _useState3 = React.useState(false),
+  var _useState3 = React.useState(null),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    copyError = _useState4[0],
-    setCopyError = _useState4[1];
-  var _useState5 = React.useState(apiKeyName),
+    successMessage = _useState4[0],
+    setSuccessMessage = _useState4[1];
+  var _useState5 = React.useState(false),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    name = _useState6[0],
-    setName = _useState6[1];
-  var _useState7 = React.useState(0),
+    copyError = _useState6[0],
+    setCopyError = _useState6[1];
+  var _useState7 = React.useState(apiKeyName),
     _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    currentStep = _useState8[0],
-    setCurrentStep = _useState8[1];
+    name = _useState8[0],
+    setName = _useState8[1];
+  var _useState9 = React.useState(0),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    currentStep = _useState10[0],
+    setCurrentStep = _useState10[1];
   var copyRef = React.useRef(undefined);
   var apiKeyInputId = React.useRef(uuidv4.default());
   var nameInputId = React.useRef(uuidv4.default());
@@ -118,6 +125,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var blockClass = "".concat(settings.pkg.prefix, "--apikey-modal");
   var localRef = React.useRef(undefined);
+  var PasswordInputRef = React.useRef(null);
   var modalRef = ref || localRef;
   var _useFocus = useFocus.useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
@@ -127,6 +135,9 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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]);
   React.useEffect(function () {
     if (open) {
@@ -174,16 +185,18 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   React.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 +294,9 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current,
     showPasswordLabel: showAPIKeyLabel,
     hidePasswordLabel: hideAPIKeyLabel,
-    tooltipPosition: "left"
+    tooltipPosition: "left",
+    helperText: helperText,
+    ref: PasswordInputRef
   }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/React.createElement(react.TextInput, {
     value: apiKey,
     labelText: apiKeyLabel,
@@ -309,7 +324,9 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React.createElement(icons.ErrorFilled, {
     size: 16
   }))), /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__messaging-text")
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, _InformationFilled || (_InformationFilled = /*#__PURE__*/React.createElement(icons.InformationFilled, {
@@ -322,8 +339,19 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fileType: downloadFileType,
     downloadLinkLabel: downloadLinkLabel
   }) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__messaging-text")
-  }, generateSuccessBody)))), /*#__PURE__*/React.createElement(react.ModalFooter, {
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
+  }, generateSuccessBody)), (editSuccess || apiKeyLoaded && successMessage) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__messaging")
+  }, /*#__PURE__*/React.createElement(icons.CheckmarkFilled, {
+    size: 16,
+    className: "".concat(blockClass, "__checkmark-icon")
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "__messaging-text"),
+    role: "alert",
+    "aria-live": "assertive"
+  }, successMessage)))), /*#__PURE__*/React.createElement(react.ModalFooter, {
     className: "".concat(blockClass, "__footer")
   }, /*#__PURE__*/React.createElement(react.Button, {
     type: "button",
@@ -357,7 +385,19 @@ var downloadRequiredProps = function downloadRequiredProps(type) {
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.APIKeyModal = settings.pkg.checkComponentEnabled(exports.APIKeyModal, componentName);
-exports.APIKeyModal.propTypes = {
+var deprecatedProps = {
+  /**
+   * deprecated
+   * title for a successful edit
+   */
+  editSuccessTitle: index.default.string,
+  /**
+   * deprecated
+   * title for a successful key generation
+   */
+  generateSuccessTitle: index.default.string
+};
+exports.APIKeyModal.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * the api key that's displayed to the user when a request to create is fulfilled.
    */
@@ -415,7 +455,7 @@ exports.APIKeyModal.propTypes = {
   /**
    * the content that appears that indicates the key is downloadable
    */
-  downloadBodyText: downloadRequiredProps(index.default.string),
+  downloadBodyText: index.default.string,
   /**
    * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
    */
@@ -443,7 +483,7 @@ exports.APIKeyModal.propTypes = {
   /**
    * title for a successful edit
    */
-  editSuccessTitle: editRequiredProps(index.default.string),
+  editSuccessMessage: editRequiredProps(index.default.string),
   /**
    * designates if the modal is in the edit mode
    */
@@ -469,7 +509,7 @@ exports.APIKeyModal.propTypes = {
   /**
    * title for a successful key generation
    */
-  generateSuccessTitle: index.default.string,
+  generateSuccessMessage: index.default.string,
   /**
    * default title for the modal in generate key mode
    */
@@ -482,6 +522,10 @@ exports.APIKeyModal.propTypes = {
    * designates if user is able to download the api key
    */
   hasDownloadLink: index.default.bool,
+  /**
+   * helper text for password input
+   */
+  helperText: index.default.string,
   /**
    * label text that's displayed when hovering over visibility toggler to hide key
    */
@@ -561,5 +605,7 @@ exports.APIKeyModal.propTypes = {
    * label text that's displayed when hovering over visibility toggler to show key
    */
   showAPIKeyLabel: index.default.string
-};
+}, deprecatedProps);
 exports.APIKeyModal.displayName = componentName;
+
+exports.deprecatedProps = deprecatedProps;

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

@@ -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
      */
@@ -158,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 = {
     /**
@@ -191,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 = {
     /**
@@ -203,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.59+6e58e9d37",
+  "version": "2.54.0-canary.60+bea9003e1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.50.0-canary.59+6e58e9d37",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.60+bea9003e1",
     "@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": "6e58e9d37d335dcadb7049db786fdd833f7e36a0"
+  "gitHead": "bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d"
 }

package/scss/components/APIKeyModal/_api-key-modal.scss

@@ -50,3 +50,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--apikey-modal;
 .#{$block-class}__error-icon svg {
   fill: $button-danger-primary;
 }
+
+.#{$block-class}__checkmark-icon {
+  fill: $button-primary;
+}