@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -23,150 +23,132 @@ 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", "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", "showAPIKeyLabel", "helperText"];
-var componentName = 'APIKeyModal';
+const componentName = 'APIKeyModal';
 
 // Default values for props
-var defaults = {
+const defaults = {
   apiKeyName: '',
   customSteps: []
 };
-exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _customSteps$currentS3;
-  var apiKey = _ref.apiKey,
-    apiKeyLabel = _ref.apiKeyLabel,
-    _ref$apiKeyName = _ref.apiKeyName,
-    apiKeyName = _ref$apiKeyName === void 0 ? defaults.apiKeyName : _ref$apiKeyName,
-    body = _ref.body,
-    className = _ref.className,
-    closeButtonText = _ref.closeButtonText,
-    copyButtonText = _ref.copyButtonText,
-    copyErrorText = _ref.copyErrorText,
-    copyIconDescription = _ref.copyIconDescription,
-    _ref$customSteps = _ref.customSteps,
-    customSteps = _ref$customSteps === void 0 ? defaults.customSteps : _ref$customSteps,
-    downloadBodyText = _ref.downloadBodyText,
-    downloadFileName = _ref.downloadFileName,
-    downloadFileType = _ref.downloadFileType,
-    downloadLinkText = _ref.downloadLinkText,
-    _ref$downloadLinkLabe = _ref.downloadLinkLabel,
-    downloadLinkLabel = _ref$downloadLinkLabe === void 0 ? downloadLinkText : _ref$downloadLinkLabe,
-    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,
-    nameHelperText = _ref.nameHelperText,
-    nameLabel = _ref.nameLabel,
-    namePlaceholder = _ref.namePlaceholder,
-    nameRequired = _ref.nameRequired,
-    nextStepButtonText = _ref.nextStepButtonText,
-    onClose = _ref.onClose,
-    onCopy = _ref.onCopy,
-    onRequestEdit = _ref.onRequestEdit,
-    onRequestGenerate = _ref.onRequestGenerate,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    previousStepButtonText = _ref.previousStepButtonText,
-    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(null),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    successMessage = _useState4[0],
-    setSuccessMessage = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    copyError = _useState6[0],
-    setCopyError = _useState6[1];
-  var _useState7 = React.useState(apiKeyName),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    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());
-  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
-  var hasSteps = Boolean(customSteps.length);
-  var apiKeyLoaded = apiKey && !loading;
-  var hasNextStep = hasSteps && currentStep < customSteps.length - 1;
-  var hasPreviousStep = hasSteps && currentStep !== 0;
-  var copyButtonProps = {
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(icons.Copy, _rollupPluginBabelHelpers.extends({
-        size: 16
-      }, props));
-    },
+exports.APIKeyModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    apiKey,
+    apiKeyLabel,
+    apiKeyName = defaults.apiKeyName,
+    body,
+    className,
+    closeButtonText,
+    copyButtonText,
+    copyErrorText,
+    copyIconDescription,
+    customSteps = defaults.customSteps,
+    downloadBodyText,
+    downloadFileName,
+    downloadFileType,
+    downloadLinkText,
+    downloadLinkLabel = downloadLinkText,
+    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: portalTargetIn,
+    previousStepButtonText,
+    showAPIKeyLabel,
+    helperText,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [title, setTitle] = React.useState(null);
+  const [successMessage, setSuccessMessage] = React.useState(null);
+  const [copyError, setCopyError] = React.useState(false);
+  const [name, setName] = React.useState(apiKeyName);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const copyRef = React.useRef(undefined);
+  const apiKeyInputId = React.useRef(uuidv4.default());
+  const nameInputId = React.useRef(uuidv4.default());
+  const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  const hasSteps = Boolean(customSteps.length);
+  const apiKeyLoaded = apiKey && !loading;
+  const hasNextStep = hasSteps && currentStep < customSteps.length - 1;
+  const hasPreviousStep = hasSteps && currentStep !== 0;
+  const copyButtonProps = {
+    renderIcon: props => /*#__PURE__*/React.createElement(icons.Copy, _rollupPluginBabelHelpers.extends({
+      size: 16
+    }, props)),
     iconDescription: copyIconDescription,
     ref: copyRef
   };
-  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),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener,
-    claimFocus = _useFocus.claimFocus;
-  var prevOpen = usePreviousValue.usePreviousValue(open);
-  React.useEffect(function () {
+  const blockClass = `${settings.pkg.prefix}--apikey-modal`;
+  const localRef = React.useRef(undefined);
+  const PasswordInputRef = React.useRef(null);
+  const modalRef = ref || localRef;
+  const {
+    firstElement,
+    keyDownListener,
+    claimFocus
+  } = useFocus.useFocus(modalRef);
+  const prevOpen = usePreviousValue.usePreviousValue(open);
+  React.useEffect(() => {
     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');
+    if (PasswordInputRef?.current) {
+      PasswordInputRef?.current.setAttribute('readOnly', 'true');
     }
   }, [open, apiKeyLoaded]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (open) {
       // Focusing the first element or selectorPrimaryFocus element
       claimFocus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [modalRef, open, firstElement]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (prevOpen && !open && launcherButtonRef) {
-      setTimeout(function () {
+      setTimeout(() => {
         launcherButtonRef.current.focus();
       }, 0);
     }
   }, [launcherButtonRef, open, prevOpen]);
-  var isPrimaryButtonDisabled = function isPrimaryButtonDisabled() {
+  const isPrimaryButtonDisabled = () => {
     if (loading) {
       return true;
     }
-    if (hasSteps && 'valid' in ((customSteps === null || customSteps === void 0 ? void 0 : customSteps[currentStep]) || [])) {
-      var _customSteps$currentS;
-      return !((_customSteps$currentS = customSteps[currentStep]) !== null && _customSteps$currentS !== void 0 && _customSteps$currentS.valid);
+    if (hasSteps && 'valid' in (customSteps?.[currentStep] || [])) {
+      return !customSteps[currentStep]?.valid;
     }
     if (!hasSteps && nameRequired && !name) {
       return true;
     }
     return false;
   };
-  var getPrimaryButtonText = function getPrimaryButtonText() {
+  const getPrimaryButtonText = () => {
     if (hasNextStep) {
       return nextStepButtonText;
     }
@@ -178,91 +160,55 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     return generateButtonText;
   };
-  var getSecondaryButtonText = function getSecondaryButtonText() {
+  const getSecondaryButtonText = () => {
     if (hasPreviousStep && !apiKeyLoaded) {
       return previousStepButtonText;
     }
     return closeButtonText;
   };
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (editing && editSuccess) {
       setTitle(generateTitle);
-      setSuccessMessage(editSuccessMessage !== null && editSuccessMessage !== void 0 ? editSuccessMessage : editSuccessTitle);
+      setSuccessMessage(editSuccessMessage ?? editSuccessTitle);
     } else if (apiKeyLoaded) {
       setTitle(generateTitle);
-      setSuccessMessage(generateSuccessMessage !== null && generateSuccessMessage !== void 0 ? generateSuccessMessage : generateSuccessTitle);
+      setSuccessMessage(generateSuccessMessage ?? generateSuccessTitle);
     } else if (hasSteps) {
-      var _customSteps$currentS2;
-      setTitle((_customSteps$currentS2 = customSteps[currentStep]) === null || _customSteps$currentS2 === void 0 ? void 0 : _customSteps$currentS2.title);
+      setTitle(customSteps[currentStep]?.title);
     } else {
       setTitle(generateTitle);
     }
   }, [apiKeyLoaded, loading, editing, editSuccess, editSuccessTitle, editSuccessMessage, hasSteps, generateSuccessTitle, generateSuccessMessage, generateTitle, currentStep, customSteps]);
-  var setNameHandler = function setNameHandler(evt) {
+  const setNameHandler = evt => {
     setName(evt.target.value);
   };
-  var onCloseHandler = function onCloseHandler() {
+  const onCloseHandler = () => {
     setName('');
     setCurrentStep(0);
-    onClose === null || onClose === void 0 || onClose();
+    onClose?.();
   };
-  var submitHandler = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(e) {
-      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            e.preventDefault();
-            if (!hasNextStep) {
-              _context.next = 5;
-              break;
-            }
-            setCurrentStep(currentStep + 1);
-            _context.next = 22;
-            break;
-          case 5:
-            if (!apiKeyLoaded) {
-              _context.next = 21;
-              break;
-            }
-            if (!onCopy) {
-              _context.next = 10;
-              break;
-            }
-            onCopy(apiKey);
-            _context.next = 19;
-            break;
-          case 10:
-            _context.prev = 10;
-            _context.next = 13;
-            return navigator.clipboard.writeText(apiKey);
-          case 13:
-            _context.next = 19;
-            break;
-          case 15:
-            _context.prev = 15;
-            _context.t0 = _context["catch"](10);
-            console.error(_context.t0);
-            setCopyError(true);
-          case 19:
-            _context.next = 22;
-            break;
-          case 21:
-            if (editing) {
-              onRequestEdit === null || onRequestEdit === void 0 || onRequestEdit(name);
-            } else {
-              onRequestGenerate === null || onRequestGenerate === void 0 || onRequestGenerate(name);
-            }
-          case 22:
-          case "end":
-            return _context.stop();
+  const submitHandler = async e => {
+    e.preventDefault();
+    if (hasNextStep) {
+      setCurrentStep(currentStep + 1);
+    } else if (apiKeyLoaded) {
+      if (onCopy) {
+        onCopy(apiKey);
+      } else {
+        try {
+          await navigator.clipboard.writeText(apiKey);
+        } catch (e) {
+          console.error(e);
+          setCopyError(true);
         }
-      }, _callee, null, [[10, 15]]);
-    }));
-    return function submitHandler(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-  var onBackHandler = function onBackHandler() {
+      }
+    } else if (editing) {
+      onRequestEdit?.(name);
+    } else {
+      onRequestGenerate?.(name);
+    }
+  };
+  const onBackHandler = () => {
     if (hasPreviousStep && !apiKeyLoaded) {
       setCurrentStep(currentStep - 1);
     } else {
@@ -271,9 +217,9 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return renderPortalUse(/*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
-  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, _rollupPluginBabelHelpers.objectSpread2({
-    open: open
-  }, devtools.getDevtoolsProps(componentName)), {
+  }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
+    open
+  }, devtools.getDevtoolsProps(componentName), {
     ref: modalRef,
     onKeyDown: keyDownListener,
     className: cx(className, blockClass),
@@ -282,13 +228,13 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": modalLabel,
     preventCloseOnClickOutside: true
   }), /*#__PURE__*/React.createElement(react.ModalHeader, {
-    className: "".concat(blockClass, "__header"),
+    className: `${blockClass}__header`,
     title: title,
     label: modalLabel
   }), /*#__PURE__*/React.createElement(react.ModalBody, {
-    className: "".concat(blockClass, "__body-container")
-  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === void 0 ? void 0 : _customSteps$currentS3.content : /*#__PURE__*/React.createElement(React.Fragment, null, body && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body-container`
+  }, hasSteps && !apiKeyLoaded ? customSteps[currentStep]?.content : /*#__PURE__*/React.createElement(React.Fragment, null, body && /*#__PURE__*/React.createElement("p", {
+    className: `${blockClass}__body`
   }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/React.createElement(react.PasswordInput, {
     value: apiKey,
     labelText: apiKeyLabel,
@@ -304,7 +250,7 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/React.createElement(react.Form, {
     onSubmit: submitHandler,
-    "aria-label": title !== null && title !== void 0 ? title : undefined
+    "aria-label": title ?? undefined
   }, /*#__PURE__*/React.createElement(react.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,
@@ -317,19 +263,19 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "data-modal-primary-focus": true
   })), loading && /*#__PURE__*/React.createElement(react.InlineLoading, {
     description: loadingText,
-    className: "".concat(blockClass, "__loader")
+    className: `${blockClass}__loader`
   }), (copyError || error) && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__messaging")
+    className: `${blockClass}__messaging`
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__error-icon")
+    className: `${blockClass}__error-icon`
   }, _ErrorFilled || (_ErrorFilled = /*#__PURE__*/React.createElement(icons.ErrorFilled, {
     size: 16
   }))), /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__messaging-text"),
+    className: `${blockClass}__messaging-text`,
     role: "alert",
     "aria-live": "assertive"
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__messaging")
+    className: `${blockClass}__messaging`
   }, _InformationFilled || (_InformationFilled = /*#__PURE__*/React.createElement(icons.InformationFilled, {
     size: 16
   })), hasDownloadLink ? /*#__PURE__*/React.createElement(APIKeyDownloader.APIKeyDownloader, {
@@ -340,20 +286,20 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fileType: downloadFileType,
     downloadLinkLabel: downloadLinkLabel
   }) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__messaging-text"),
+    className: `${blockClass}__messaging-text`,
     role: "alert",
     "aria-live": "assertive"
   }, generateSuccessBody)), (editSuccess || apiKeyLoaded && successMessage) && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__messaging")
+    className: `${blockClass}__messaging`
   }, /*#__PURE__*/React.createElement(icons.CheckmarkFilled, {
     size: 16,
-    className: "".concat(blockClass, "__checkmark-icon")
+    className: `${blockClass}__checkmark-icon`
   }), /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__messaging-text"),
+    className: `${blockClass}__messaging-text`,
     role: "alert",
     "aria-live": "assertive"
   }, successMessage)))), /*#__PURE__*/React.createElement(react.ModalFooter, {
-    className: "".concat(blockClass, "__footer")
+    className: `${blockClass}__footer`
   }, /*#__PURE__*/React.createElement(react.Button, {
     type: "button",
     kind: "secondary",
@@ -365,28 +311,28 @@ exports.APIKeyModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: isPrimaryButtonDisabled()
   }), getPrimaryButtonText())))));
 });
-var customStepsRequiredProps = function customStepsRequiredProps(type) {
-  return propsHelper.isRequiredIf(type, function (_ref3) {
-    var customSteps = _ref3.customSteps;
-    return customSteps && customSteps.length > 1;
-  });
-};
-var editRequiredProps = function editRequiredProps(type) {
-  return propsHelper.isRequiredIf(type, function (_ref4) {
-    var editing = _ref4.editing;
-    return editing;
-  });
-};
-var downloadRequiredProps = function downloadRequiredProps(type) {
-  return propsHelper.isRequiredIf(type, function (_ref5) {
-    var hasDownloadLink = _ref5.hasDownloadLink;
-    return hasDownloadLink;
-  });
-};
+const customStepsRequiredProps = type => propsHelper.isRequiredIf(type, _ref2 => {
+  let {
+    customSteps
+  } = _ref2;
+  return customSteps && customSteps.length > 1;
+});
+const editRequiredProps = type => propsHelper.isRequiredIf(type, _ref3 => {
+  let {
+    editing
+  } = _ref3;
+  return editing;
+});
+const downloadRequiredProps = type => propsHelper.isRequiredIf(type, _ref4 => {
+  let {
+    hasDownloadLink
+  } = _ref4;
+  return hasDownloadLink;
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.APIKeyModal = settings.pkg.checkComponentEnabled(exports.APIKeyModal, componentName);
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    * deprecated
    * title for a successful edit
@@ -398,7 +344,7 @@ var deprecatedProps = {
    */
   generateSuccessTitle: index.default.string
 };
-exports.APIKeyModal.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+exports.APIKeyModal.propTypes = {
   /**
    * the api key that's displayed to the user when a request to create is fulfilled.
    */
@@ -600,8 +546,9 @@ exports.APIKeyModal.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */
-  showAPIKeyLabel: index.default.string
-}, deprecatedProps);
+  showAPIKeyLabel: index.default.string,
+  ...deprecatedProps
+};
 exports.APIKeyModal.displayName = componentName;
 
 exports.deprecatedProps = deprecatedProps;