@carbon/ibm-products 1.3.0 → 1.6.1

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -1,44 +1,94 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * 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 React, { forwardRef } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Column, FormGroup, Row } from 'carbon-components-react';
+import { StepsContext, StepNumberContext } from './CreateTearsheet';
 import { pkg } from '../../settings';
-import { CREATE_TEARSHEET_STEP } from './constants';
+import pconsole from '../../global/js/utils/pconsole';
+import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create__step");
 export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _cx;
+
   var children = _ref.children,
       className = _ref.className,
-      subtitle = _ref.subtitle,
       description = _ref.description,
-      title = _ref.title,
-      hasFieldset = _ref.hasFieldset,
+      disableSubmit = _ref.disableSubmit,
       fieldsetLegendText = _ref.fieldsetLegendText,
-      isViewingAllStepsTogether = _ref.isViewingAllStepsTogether;
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className),
+      hasFieldset = _ref.hasFieldset,
+      includeStep = _ref.includeStep,
+      introStep = _ref.introStep,
+      onNext = _ref.onNext,
+      onMount = _ref.onMount,
+      secondaryLabel = _ref.secondaryLabel,
+      subtitle = _ref.subtitle,
+      title = _ref.title;
+  var stepsContext = useContext(StepsContext);
+  var stepNumber = useContext(StepNumberContext);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldIncludeStep = _useState2[0],
+      setShouldIncludeStep = _useState2[1];
+
+  var previousState = usePreviousValue({
+    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+  });
+  useRetrieveStepData({
+    stepsContext: stepsContext,
+    stepNumber: stepNumber,
+    introStep: introStep,
+    shouldIncludeStep: shouldIncludeStep,
+    secondaryLabel: secondaryLabel,
+    title: title
+  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  // in the appropriate custom hooks.
+
+  useEffect(function () {
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
+    }
+  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
+
+  useEffect(function () {
+    setShouldIncludeStep(includeStep);
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
+  // steps container context so that it can manage the 'Next' button appropriately.
+
+  useEffect(function () {
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
+    }
+  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  return stepsContext ? /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,
     lg: 12,
     md: 8,
     sm: 8
-  }, !isViewingAllStepsTogether && /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "".concat(blockClass, "--title")
-  }, title), !isViewingAllStepsTogether && subtitle && /*#__PURE__*/React.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
-  }, subtitle), !isViewingAllStepsTogether && description && /*#__PURE__*/React.createElement("p", {
+  }, subtitle), description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "--description")
   }, description))), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
-  }, children) : children);
+  }, children) : children) : pconsole.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 CreateTearsheetStep = pkg.checkComponentEnabled(CreateTearsheetStep, componentName);
@@ -81,15 +131,15 @@ CreateTearsheetStep.propTypes = {
   hasFieldset: PropTypes.bool,
 
   /**
-   * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
+   * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+   * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
    */
-  introStep: PropTypes.bool,
+  includeStep: PropTypes.bool,
 
   /**
-   * @ignore
-   * The is an internal prop set in CreateTearsheet so the step knows when to render it's title
+   * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
-  isViewingAllStepsTogether: PropTypes.bool,
+  introStep: PropTypes.bool,
 
   /**
    * Optional function to be called on initial mount of a step.
@@ -124,6 +174,6 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  type: CREATE_TEARSHEET_STEP,
-  hasFieldset: true
+  hasFieldset: true,
+  includeStep: true
 };

package/es/components/CreateTearsheet/index.js

@@ -6,5 +6,4 @@
  */
 export { CreateTearsheet } from './CreateTearsheet';
 export { CreateTearsheetStep } from './CreateTearsheetStep';
-export { CreateTearsheetSection } from './CreateTearsheetSection';
 export { CreateTearsheetDivider } from './CreateTearsheetDivider';

package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -1,30 +1,57 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value1", "setValue1"];
 
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * 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 React, { useState } from 'react';
-import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput, Checkbox } from 'carbon-components-react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
 import { CreateTearsheetStep } from '../CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create-multi-step");
-export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
-  var backButtonText = _ref.backButtonText,
-      cancelButtonText = _ref.cancelButtonText,
-      className = _ref.className,
-      description = _ref.description,
-      influencerWidth = _ref.influencerWidth,
-      label = _ref.label,
-      nextButtonText = _ref.nextButtonText,
-      submitButtonText = _ref.submitButtonText,
-      title = _ref.title;
+
+var CustomStep = function CustomStep(_ref) {
+  var value1 = _ref.value1,
+      setValue1 = _ref.setValue1,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CreateTearsheetStep, _extends({}, rest, {
+    disableSubmit: !value1
+  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    value: value1,
+    onChange: function onChange(event) {
+      return setValue1(event.target.value);
+    },
+    id: "custom-step-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  }))));
+};
+
+export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
+  var backButtonText = _ref2.backButtonText,
+      cancelButtonText = _ref2.cancelButtonText,
+      className = _ref2.className,
+      description = _ref2.description,
+      influencerWidth = _ref2.influencerWidth,
+      label = _ref2.label,
+      nextButtonText = _ref2.nextButtonText,
+      submitButtonText = _ref2.submitButtonText,
+      title = _ref2.title;
 
   var _useState = useState(750),
       _useState2 = _slicedToArray(_useState, 1),
@@ -47,33 +74,43 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
 
   var _useState9 = useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      stepOneTextInputValue = _useState10[0],
-      setStepOneTextInputValue = _useState10[1];
+      value1 = _useState10[0],
+      setValue1 = _useState10[1];
 
   var _useState11 = useState(''),
       _useState12 = _slicedToArray(_useState11, 2),
-      topicDescriptionValue = _useState12[0],
-      setTopicDescriptionValue = _useState12[1];
+      stepOneTextInputValue = _useState12[0],
+      setStepOneTextInputValue = _useState12[1];
 
   var _useState13 = useState(''),
       _useState14 = _slicedToArray(_useState13, 2),
-      topicVersionValue = _useState14[0],
-      setTopicVersionValue = _useState14[1];
+      topicDescriptionValue = _useState14[0],
+      setTopicDescriptionValue = _useState14[1];
 
-  var _useState15 = useState(1),
+  var _useState15 = useState(''),
       _useState16 = _slicedToArray(_useState15, 2),
-      stepTwoTextInputValue = _useState16[0],
-      setStepTwoTextInputValue = _useState16[1];
+      topicVersionValue = _useState16[0],
+      setTopicVersionValue = _useState16[1];
 
-  var _useState17 = useState('one-day'),
+  var _useState17 = useState(1),
       _useState18 = _slicedToArray(_useState17, 2),
-      stepThreeTextInputValue = _useState18[0],
-      setStepThreeTextInputValue = _useState18[1];
+      stepTwoTextInputValue = _useState18[0],
+      setStepTwoTextInputValue = _useState18[1];
 
-  var _useState19 = useState(false),
+  var _useState19 = useState('one-day'),
       _useState20 = _slicedToArray(_useState19, 2),
-      isInvalid = _useState20[0],
-      setIsInvalid = _useState20[1];
+      stepThreeTextInputValue = _useState20[0],
+      setStepThreeTextInputValue = _useState20[1];
+
+  var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      isInvalid = _useState22[0],
+      setIsInvalid = _useState22[1];
+
+  var _useState23 = useState(false),
+      _useState24 = _slicedToArray(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
 
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
@@ -84,6 +121,8 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     setHasSubmitError(false);
     setIsInvalid(false);
     setOpen(false);
+    setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
@@ -138,9 +177,9 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     sm: 8
   }, /*#__PURE__*/React.createElement(TextInput, {
     labelText: "Topic name",
+    placeholder: "Enter topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
     value: stepOneTextInputValue,
-    placeholder: "Enter topic name",
     onChange: function onChange(event) {
       if (event.target.value.length) {
         setIsInvalid(false);
@@ -186,7 +225,27 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    title: "Dynamic step",
+    subtitle: "Dynamic step subtitle",
+    description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
+    hasFieldset: false,
+    includeStep: shouldIncludeAdditionalStep
+  }, "dynamic step content"), /*#__PURE__*/React.createElement(CustomStep, {
+    title: "Location",
+    subtitle: "Custom step subtitle",
+    description: "Custom step description (see storybook implementation for new custom step capability)",
+    value1: value1,
+    setValue1: setValue1,
+    hasFieldset: false
+  }), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",

package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -154,14 +154,16 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {

package/es/components/EmptyStates/EmptyState.js

@@ -107,7 +107,7 @@ EmptyState.propTypes = {
   /**
    * Empty state subtext
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state heading

package/es/components/EmptyStates/EmptyStateContent.js

@@ -30,7 +30,7 @@ export var EmptyStateContent = function EmptyStateContent(_ref) {
       title = _ref.title;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
     className: cx("".concat(blockClass, "__header"), _defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
-  }, title), /*#__PURE__*/React.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__subtitle"), _defineProperty({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
   }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/React.createElement(Button, _extends({}, action, {
     className: "".concat(blockClass, "__action-button"),
@@ -76,7 +76,7 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -99,7 +99,7 @@ ErrorEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -99,7 +99,7 @@ NoDataEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -99,7 +99,7 @@ NoTagsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -99,7 +99,7 @@ NotFoundEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -99,7 +99,7 @@ NotificationsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -99,7 +99,7 @@ UnauthorizedEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/ExportModal/ExportModal.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
+var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, useRef, forwardRef } from 'react';
-import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalFooter, ModalBody, TextInput, RadioButton, RadioButtonGroup, FormGroup, Loading, PasswordInput } from 'carbon-components-react';
 import cx from 'classnames';
 import { ErrorFilled16, CheckmarkFilled16 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
@@ -31,7 +31,9 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       error = _ref.error,
       errorMessage = _ref.errorMessage,
       filename = _ref.filename,
+      hidePasswordLabel = _ref.hidePasswordLabel,
       inputLabel = _ref.inputLabel,
+      inputType = _ref.inputType,
       invalidInputText = _ref.invalidInputText,
       loading = _ref.loading,
       loadingMessage = _ref.loadingMessage,
@@ -42,6 +44,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
       primaryButtonText = _ref.primaryButtonText,
       secondaryButtonText = _ref.secondaryButtonText,
+      showPasswordLabel = _ref.showPasswordLabel,
       successMessage = _ref.successMessage,
       successful = _ref.successful,
       title = _ref.title,
@@ -103,6 +106,17 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var internalId = useRef(uuidv4());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
   var submitted = loading || error || successful;
+
+  var commonInputProps = _defineProperty({
+    id: "text-input--".concat(internalId.current),
+    value: name,
+    onChange: onNameChangeHandler,
+    labelText: inputLabel,
+    invalid: hasInvalidExtension(),
+    invalidText: invalidInputText,
+    onBlur: onBlurHandler
+  }, 'data-modal-primary-focus', true);
+
   return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     "aria-label": title,
@@ -131,17 +145,16 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       key: o.extension,
       id: o.extension,
       value: o.extension,
-      labelText: "".concat(o.extension, " (").concat(o.description, ")")
+      labelText: "".concat(o.extension, " (").concat(o.description, ")"),
+      "data-modal-primary-focus": true
     });
-  }))) : /*#__PURE__*/React.createElement(TextInput, {
-    id: "text-input--".concat(internalId.current),
-    value: name,
-    onChange: onNameChangeHandler,
-    labelText: inputLabel,
-    invalid: hasInvalidExtension(),
-    invalidText: invalidInputText,
-    onBlur: onBlurHandler
-  })), /*#__PURE__*/React.createElement("div", {
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__input-container")
+  }, inputType === 'text' ? /*#__PURE__*/React.createElement(TextInput, commonInputProps) : /*#__PURE__*/React.createElement(PasswordInput, _extends({}, commonInputProps, {
+    showPasswordLabel: showPasswordLabel,
+    hidePasswordLabel: hidePasswordLabel,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Loading, {
     small: true,
@@ -191,11 +204,21 @@ ExportModal.propTypes = {
    */
   filename: PropTypes.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to hide key
+   */
+  hidePasswordLabel: PropTypes.string,
+
   /**
    * label for the text input
    */
   inputLabel: PropTypes.string,
 
+  /**
+   * specify the type of text input
+   */
+  inputType: PropTypes.oneOf(['text', 'password']),
+
   /**
    * text for an invalid input
    */
@@ -249,6 +272,11 @@ ExportModal.propTypes = {
    */
   secondaryButtonText: PropTypes.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to show key
+   */
+  showPasswordLabel: PropTypes.string,
+
   /**
    * messaging to display if the export was successful
    */
@@ -270,6 +298,7 @@ ExportModal.propTypes = {
   validExtensions: PropTypes.array
 };
 ExportModal.defaultProps = {
+  inputType: 'text',
   preformattedExtensions: [],
   validExtensions: []
 };

package/es/components/ImportModal/ImportModal.js

@@ -229,7 +229,8 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     accept: accept,
     labelText: fileDropLabel,
     onAddFiles: onAddFile,
-    disabled: hasFiles
+    disabled: hasFiles,
+    "data-modal-primary-focus": true
   }), inputLabel && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "__label")
   }, inputLabel), /*#__PURE__*/React.createElement("div", {