@carbon/ibm-products 2.54.0-canary.7 → 2.54.0-canary.71

package/es/components/Tearsheet/TearsheetShell.js

@@ -18,10 +18,10 @@ import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, L
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.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 _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -68,6 +68,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     children = _ref.children,
     className = _ref.className,
     closeIconDescription = _ref.closeIconDescription,
+    currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
     headerActions = _ref.headerActions,
@@ -100,8 +101,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var prevOpen = usePreviousValue(open);
   var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener,
-    specifiedElement = _useFocus.specifiedElement;
+    keyDownListener = _useFocus.keyDownListener;
   var modalRefValue = modalRef.current;
 
   // Function to strip html tags out of a string.
@@ -137,44 +137,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setDepth(newDepth);
     setPosition(newPosition);
   }
-  handleStackChange.checkFocus = function () {
-    // if we are now the topmost tearsheet, ensure we have focus
-    if (open && position === depth && modalRefValue && !modalRefValue.contains(document.activeElement)) {
-      handleStackChange.claimFocus();
-    }
-  };
-
-  // Callback to give the tearsheet the opportunity to claim focus
-  handleStackChange.claimFocus = function () {
-    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') {
-        return specifiedEl.focus();
-      }
-    }
-    setTimeout(function () {
-      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-    }, 0);
-  };
   useEffect(function () {
-    if (open) {
+    if (open && position === depth) {
       // Focusing the first element or selectorPrimaryFocus element
-      if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-        var _window2;
-        var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-        if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-          setTimeout(function () {
-            return specifiedEl.focus();
-          }, 0);
-          return;
-        }
-      }
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -182,22 +150,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }, 0);
     }
   }, [launcherButtonRef, open, prevOpen]);
-  useEffect(function () {
-    if (open && position !== depth) {
-      setTimeout(function () {
-        if (selectorPrimaryFocus) {
-          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
-        }
-        firstElement === null || firstElement === void 0 || firstElement.focus();
-      }, 0);
-    }
-  }, [position, depth, firstElement, open, specifiedElement, selectorPrimaryFocus]);
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
-        var _handler$checkFocus;
         handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
-        (_handler$checkFocus = handler.checkFocus) === null || _handler$checkFocus === void 0 || _handler$checkFocus.call(handler);
       });
     };
 
@@ -232,14 +188,6 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     };
   }, [open, size]);
-  function handleFocus() {
-    // If something within us is receiving focus but we are not the topmost
-    // stacked tearsheet, transfer focus to the topmost tearsheet instead
-    if (position < depth) {
-      var _stack$open$claimFocu, _stack$open;
-      (_stack$open$claimFocu = (_stack$open = stack.open[stack.open.length - 1]).claimFocus) === null || _stack$open$claimFocu === void 0 || _stack$open$claimFocu.call(_stack$open);
-    }
-  }
   if (position <= depth) {
     var _prevDepth$current;
     // Include a modal header if and only if one or more of these is given.
@@ -271,7 +219,6 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       onClose: onClose,
       open: open,
       selectorPrimaryFocus: selectorPrimaryFocus,
-      onFocus: handleFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,

package/es/global/js/hooks/useFocus.d.ts

@@ -12,3 +12,4 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         specified: any;
     };
 };
+export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;

package/es/global/js/hooks/useFocus.js

@@ -104,4 +104,27 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   };
 };
 
-export { getSpecificElement, useFocus };
+/**
+ *
+ * @param {*} firstElement
+ * @param {*} modalRef
+ * @param {string | undefined} selectorPrimaryFocus
+ */
+var claimFocus = function claimFocus(firstElement, modalRef) {
+  var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
+    var _window2;
+    var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+    if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
+      setTimeout(function () {
+        return specifiedEl.focus();
+      }, 0);
+    }
+  } else {
+    setTimeout(function () {
+      return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
+    }, 0);
+  }
+};
+
+export { claimFocus, getSpecificElement, useFocus };

package/es/global/js/hooks/usePrefersReducedMotion.js

@@ -29,6 +29,5 @@ var usePrefersReducedMotion = function usePrefersReducedMotion() {
   }, []);
   return prefersReducedMotion;
 };
-var usePrefersReducedMotion$1 = usePrefersReducedMotion;
 
-export { usePrefersReducedMotion$1 as default };
+export { usePrefersReducedMotion as default };

package/es/global/js/package-settings.d.ts

@@ -66,6 +66,7 @@ declare namespace defaults {
         let WebTerminal: boolean;
         let WebTerminalContentWrapper: boolean;
         let WebTerminalProvider: boolean;
+        let UserAvatar: boolean;
         let Toolbar: boolean;
         let ToolbarButton: boolean;
         let ToolbarGroup: boolean;
@@ -115,7 +116,6 @@ declare namespace defaults {
         let DescriptionListCell: boolean;
         let DescriptionListRow: boolean;
         let SearchBar: boolean;
-        let UserAvatar: boolean;
         let EmptyStateV2: boolean;
         let Guidebanner: boolean;
         let GuidebannerElement: boolean;

package/es/global/js/package-settings.js

@@ -64,6 +64,7 @@ var defaults = {
     WebTerminal: true,
     WebTerminalContentWrapper: true,
     WebTerminalProvider: true,
+    UserAvatar: true,
     // other public components not yet reviewed and released:
     Toolbar: false,
     ToolbarButton: false,
@@ -117,7 +118,6 @@ var defaults = {
     DescriptionListCell: false,
     DescriptionListRow: false,
     SearchBar: false,
-    UserAvatar: false,
     /* new component flags here - comment used by generate CLI */
 
     // Onboarding components not yet reviewed and released:

package/es/index.js

@@ -103,12 +103,12 @@ export { SearchBar } from './components/SearchBar/SearchBar.js';
 export { TagOverflow } from './components/TagOverflow/TagOverflow.js';
 export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
+export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
 export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
 export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
 export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';
-export { default as useFilterContext } from './components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js';
 export { EditTearsheet } from './components/EditTearsheet/EditTearsheet.js';
 export { EditTearsheetForm } from './components/EditTearsheet/EditTearsheetForm.js';
 export { CoachmarkStack } from './components/CoachmarkStack/CoachmarkStack.js';

package/es/settings.d.ts

@@ -52,6 +52,7 @@ export const pkg: {
         WebTerminal: boolean;
         WebTerminalContentWrapper: boolean;
         WebTerminalProvider: boolean;
+        UserAvatar: boolean;
         Toolbar: boolean;
         ToolbarButton: boolean;
         ToolbarGroup: boolean;
@@ -101,7 +102,6 @@ export const pkg: {
         DescriptionListCell: boolean;
         DescriptionListRow: boolean;
         SearchBar: boolean;
-        UserAvatar: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/lib/_virtual/_rollupPluginBabelHelpers.js

@@ -506,7 +506,7 @@ function _nonIterableRest() {
 function _createForOfIteratorHelper(o, allowArrayLike) {
   var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   if (!it) {
-    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
       if (it) o = it;
       var i = 0;
       var F = function () {};

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

@@ -20,9 +20,10 @@ var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
+var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
 var _ErrorFilled, _InformationFilled;
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "selectorPrimaryFocus", "showAPIKeyLabel"];
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "downloadLinkLabel", "editButtonText", "editSuccess", "editSuccessTitle", "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
@@ -53,16 +54,19 @@ 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,
     hideAPIKeyLabel = _ref.hideAPIKeyLabel,
+    launcherButtonRef = _ref.launcherButtonRef,
     loading = _ref.loading,
     loadingText = _ref.loadingText,
     modalLabel = _ref.modalLabel,
@@ -80,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());
@@ -116,33 +125,33 @@ 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,
     keyDownListener = _useFocus.keyDownListener;
+  var prevOpen = usePreviousValue.usePreviousValue(open);
   React.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]);
   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;
-        }
-      }
+      useFocus.claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    }
+  }, [firstElement, modalRef, open, selectorPrimaryFocus]);
+  React.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;
@@ -176,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);
   };
@@ -283,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,
@@ -311,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, {
@@ -324,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",
@@ -359,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.
    */
@@ -417,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'
    */
@@ -445,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
    */
@@ -471,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
    */
@@ -484,10 +522,19 @@ 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
    */
   hideAPIKeyLabel: index.default.string,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: index.default.any,
   /**
    * designates if the modal is in a loading state via a request or some other in progress operation
    */
@@ -558,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

@@ -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/lib/components/AboutModal/AboutModal.js

@@ -64,12 +64,9 @@ exports.AboutModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [bodyRef]);
   React.useEffect(function () {
     if (open) {
-      setTimeout(function () {
-        return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();
-      }, 0);
+      useFocus.claimFocus(firstElement, modalRef);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [firstElement, modalRef, open]);
   return renderPortalUse( /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {

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

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

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

@@ -22,6 +22,5 @@ var useParentSelect = function useParentSelect() {
     setParentSelected: setParentSelected
   };
 };
-var useParentSelect$1 = useParentSelect;
 
-exports.default = useParentSelect$1;
+exports.default = useParentSelect;

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

@@ -70,6 +70,5 @@ var usePath = function usePath() {
     resetPath: resetPath
   };
 };
-var usePath$1 = usePath;
 
-exports.default = usePath$1;
+exports.default = usePath;