@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/lib/components/ExampleComponent/ExampleComponent.js

@@ -1,81 +1,101 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExampleComponent = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _react2 = require("@carbon/react");
-
-var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
-
+var _useExample3 = _interopRequireDefault(require("./useExample"));
+var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--example-component");
-var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
+var componentName = 'ExampleComponent';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
 var defaults = {
   primaryKind: 'primary',
   secondaryKind: 'secondary',
+  secondaryIcon: null,
   size: 'lg'
 };
+
 /**
  * This is an example component to show relevant conventions and usage.
  */
-
 var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var borderColor = _ref.borderColor,
-      boxedBorder = _ref.boxedBorder,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      onPrimaryClick = _ref.onPrimaryClick,
-      onSecondaryClick = _ref.onSecondaryClick,
-      primaryButtonLabel = _ref.primaryButtonLabel,
-      _ref$primaryKind = _ref.primaryKind,
-      primaryKind = _ref$primaryKind === void 0 ? defaults.primaryKind : _ref$primaryKind,
-      secondaryButtonLabel = _ref.secondaryButtonLabel,
-      _ref$secondaryKind = _ref.secondaryKind,
-      secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaults.size : _ref$size,
-      style = _ref.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    boxedBorder = _ref.boxedBorder,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    usesExampleHook = _ref.usesExampleHook,
+    onPrimaryClick = _ref.onPrimaryClick,
+    onSecondaryClick = _ref.onSecondaryClick,
+    primaryButtonLabel = _ref.primaryButtonLabel,
+    _ref$primaryKind = _ref.primaryKind,
+    primaryKind = _ref$primaryKind === void 0 ? defaults.primaryKind : _ref$primaryKind,
+    secondaryButtonLabel = _ref.secondaryButtonLabel,
+    _ref$secondaryKind = _ref.secondaryKind,
+    secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
+    _ref$secondaryIcon = _ref.secondaryIcon,
+    secondaryIcon = _ref$secondaryIcon === void 0 ? defaults.secondaryIcon : _ref$secondaryIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    style = _ref.style,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(primaryButtonLabel),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    thePrimaryButtonLabel = _useState2[0],
+    setThePrimaryButtonLabel = _useState2[1];
+  var _useExample = (0, _useExample3.default)(usesExampleHook),
+    _useExample2 = (0, _slicedToArray2.default)(_useExample, 1),
+    exampleUse = _useExample2[0];
   var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
-
   var handlePrimaryClick = function handlePrimaryClick(e) {
     if (onPrimaryClick) {
       onPrimaryClick(e);
     }
   };
-
   var handleSecondaryClick = function handleSecondaryClick(e) {
     if (onSecondaryClick) {
       onSecondaryClick(e);
     }
   };
-
+  var theSecondaryIcon = (0, _react.useRef)(secondaryIcon && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  (0, _react.useEffect)(function () {
+    if (usesExampleHook !== undefined && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
     "".concat(blockClass, "--").concat(size), modeClass),
     ref: ref,
@@ -85,6 +105,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/_react.default.createElement(_react2.Button, {
@@ -93,76 +114,75 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     onClick: handlePrimaryClick,
     disabled: disabled,
     size: size
-  }, primaryButtonLabel));
-}); // Return a placeholder if not released and not enabled by feature flag.
-
+  }, thePrimaryButtonLabel));
+});
 
+// Return a placeholder if not released and not enabled by feature flag.
 exports.ExampleComponent = ExampleComponent;
-exports.ExampleComponent = ExampleComponent = _settings.pkg.checkComponentEnabled(ExampleComponent, componentName); // The display name of the component, used by React. Note that displayName
+exports.ExampleComponent = ExampleComponent = _settings.pkg.checkComponentEnabled(ExampleComponent, componentName);
+
+// The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
+ExampleComponent.displayName = componentName;
 
-ExampleComponent.displayName = componentName; // The types and DocGen commentary for the component props,
+// The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-
 ExampleComponent.propTypes = {
   /**
    * What border color (HTML color value) to use.
    */
   borderColor: _propTypes.default.string,
-
   /**
    * If true, the border is a box, otherwise it is a shadow.
    */
   boxedBorder: _propTypes.default.bool,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
-
   /**
    * If true, the buttons are disabled, otherwise they can be used.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * An optional primary button click handler.
    */
   onPrimaryClick: _propTypes.default.func,
-
   /**
    * An optional secondary button click handler.
    */
   onSecondaryClick: _propTypes.default.func,
-
   /**
    * The primary button label.
    */
   primaryButtonLabel: _propTypes.default.string.isRequired,
-
   /**
    * The kind of button for the primary button ('primary' or 'danger').
    */
   primaryKind: _propTypes.default.oneOf(['primary', 'danger']),
-
   /**
    * The secondary button label.
    */
   secondaryButtonLabel: _propTypes.default.string.isRequired,
-
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
   secondaryKind: _propTypes.default.oneOf(['secondary', 'tertiary']),
-
   /**
    * The size for the buttons
    */
   size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
-
   /**
    * Optional style settings for the containing node.
    */
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: _propTypes.default.number
 };

package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExampleDeprecatedComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _settings = require("../../settings");
+var _ExampleComponent = require("./ExampleComponent");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var componentName = 'ExampleDeprecatedComponent';
+
+// This is NOT a full component example. It is only intended to show the deprecation of a component.
+var ExampleDeprecatedComponent = function ExampleDeprecatedComponent() {
+  return /*#__PURE__*/_react.default.createElement(_ExampleComponent.ExampleComponent, {
+    primaryButtonLabel: "primary",
+    secondaryButtonLabel: "secondary"
+  });
+};
+
+// example of a deprecation warning
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent;
+ExampleDeprecatedComponent.deprecated = {
+  level: 'warn',
+  details: "This an example component deprecation message used by 'checkComponentEnabled'."
+};
+
+// The component enable should log the deprecation
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent = _settings.pkg.checkComponentEnabled(ExampleDeprecatedComponent, componentName);

package/lib/components/ExampleComponent/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "ExampleComponent", {
     return _ExampleComponent.ExampleComponent;
   }
 });
-
 var _ExampleComponent = require("./ExampleComponent");

package/lib/components/ExampleComponent/useExample.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _settings = require("../../settings");
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+
+  var _useState = (0, _react.useState)(
+    // Disable hook in a safe way if possible, else use despite feature disabled.
+    // Either a console error or warning will be logged.
+    initialTime),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+
+  // Use of the feature flag to
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  }
+
+  // Actual hook is code is below
+  (0, _react.useEffect)(function () {
+    if (!featureEnabled) {
+      return;
+    }
+
+    // turn off all or part of the feature
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+var _default = useExample;
+exports.default = _default;

package/lib/components/ExportModal/ExportModal.js

@@ -1,50 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExportModal = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@carbon/react");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _icons = require("@carbon/react/icons");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _devtools = require("../../global/js/utils/devtools");
-
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-
 var _settings = require("../../settings");
-
-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"];
-
+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"]; //
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var componentName = 'ExportModal';
 
-var componentName = 'ExportModal'; // Default values for props
-
+// Default values for props
 var defaults = {
   inputType: 'text',
   preformattedExtensions: Object.freeze([]),
@@ -52,91 +38,76 @@ var defaults = {
 };
 var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var body = _ref.body,
-      className = _ref.className,
-      error = _ref.error,
-      errorMessage = _ref.errorMessage,
-      filename = _ref.filename,
-      hidePasswordLabel = _ref.hidePasswordLabel,
-      inputLabel = _ref.inputLabel,
-      _ref$inputType = _ref.inputType,
-      inputType = _ref$inputType === void 0 ? defaults.inputType : _ref$inputType,
-      invalidInputText = _ref.invalidInputText,
-      loading = _ref.loading,
-      loadingMessage = _ref.loadingMessage,
-      onClose = _ref.onClose,
-      onRequestSubmit = _ref.onRequestSubmit,
-      open = _ref.open,
-      _ref$preformattedExte = _ref.preformattedExtensions,
-      preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
-      preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
-      primaryButtonText = _ref.primaryButtonText,
-      secondaryButtonText = _ref.secondaryButtonText,
-      showPasswordLabel = _ref.showPasswordLabel,
-      successMessage = _ref.successMessage,
-      successful = _ref.successful,
-      title = _ref.title,
-      _ref$validExtensions = _ref.validExtensions,
-      validExtensions = _ref$validExtensions === void 0 ? defaults.validExtensions : _ref$validExtensions,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    className = _ref.className,
+    error = _ref.error,
+    errorMessage = _ref.errorMessage,
+    filename = _ref.filename,
+    hidePasswordLabel = _ref.hidePasswordLabel,
+    inputLabel = _ref.inputLabel,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? defaults.inputType : _ref$inputType,
+    invalidInputText = _ref.invalidInputText,
+    loading = _ref.loading,
+    loadingMessage = _ref.loadingMessage,
+    onClose = _ref.onClose,
+    onRequestSubmit = _ref.onRequestSubmit,
+    open = _ref.open,
+    _ref$preformattedExte = _ref.preformattedExtensions,
+    preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
+    preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
+    primaryButtonText = _ref.primaryButtonText,
+    secondaryButtonText = _ref.secondaryButtonText,
+    showPasswordLabel = _ref.showPasswordLabel,
+    successMessage = _ref.successMessage,
+    successful = _ref.successful,
+    title = _ref.title,
+    _ref$validExtensions = _ref.validExtensions,
+    validExtensions = _ref$validExtensions === void 0 ? defaults.validExtensions : _ref$validExtensions,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      name = _useState2[0],
-      setName = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    name = _useState2[0],
+    setName = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      dirtyInput = _useState4[0],
-      setDirtyInput = _useState4[1]; // by default (if it exists) use the first extension in the extension array
-
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dirtyInput = _useState4[0],
+    setDirtyInput = _useState4[1];
+  // by default (if it exists) use the first extension in the extension array
   var _useState5 = (0, _react.useState)(''),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      extension = _useState6[0],
-      setExtension = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    extension = _useState6[0],
+    setExtension = _useState6[1];
   (0, _react.useEffect)(function () {
     var _preformattedExtensio;
-
     setName(filename);
     setExtension(preformattedExtensions === null || preformattedExtensions === void 0 ? void 0 : (_preformattedExtensio = preformattedExtensions[0]) === null || _preformattedExtensio === void 0 ? void 0 : _preformattedExtensio.extension);
   }, [filename, preformattedExtensions, open]);
-
   var onNameChangeHandler = function onNameChangeHandler(evt) {
     setName(evt.target.value);
   };
-
   var onExtensionChangeHandler = function onExtensionChangeHandler(value) {
     setExtension(value);
   };
-
   var onBlurHandler = function onBlurHandler() {
     setDirtyInput(true);
   };
-
   var onSubmitHandler = function onSubmitHandler() {
     var returnName = extension ? "".concat(filename, ".").concat(extension.toLocaleLowerCase()) : name;
     onRequestSubmit(returnName);
   };
-
   var hasInvalidExtension = function hasInvalidExtension() {
     if (!dirtyInput || !validExtensions || !validExtensions.length) {
       return false;
     }
-
     if (!name.includes('.')) {
       return true;
     }
-
     var ext = name.split('.').pop();
-
     if (!validExtensions.includes(ext)) {
       return true;
     }
-
     return false;
   };
-
   var blockClass = "".concat(_settings.pkg.prefix, "--export-modal");
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
@@ -211,8 +182,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onClick: onSubmitHandler,
     disabled: primaryButtonDisabled
   }, primaryButtonText)));
-}); // Return a placeholder if not released and not enabled by feature flag
+});
 
+// Return a placeholder if not released and not enabled by feature flag
 exports.ExportModal = ExportModal;
 exports.ExportModal = ExportModal = _settings.pkg.checkComponentEnabled(ExportModal, componentName);
 ExportModal.propTypes = {
@@ -220,72 +192,58 @@ ExportModal.propTypes = {
    * Body content for the modal
    */
   body: _propTypes.default.string,
-
   /**
    * Optional class name
    */
   className: _propTypes.default.string,
-
   /**
    * specify if an error occurred
    */
   error: _propTypes.default.bool,
-
   /**
    * messaging to display in the event of an error
    */
   errorMessage: _propTypes.default.string,
-
   /**
    * name of the file being exported
    */
   filename: _propTypes.default.string.isRequired,
-
   /**
    * label text that's displayed when hovering over visibility toggler to hide key
    */
   hidePasswordLabel: _propTypes.default.string,
-
   /**
    * label for the text input
    */
   inputLabel: _propTypes.default.string,
-
   /**
    * specify the type of text input
    */
   inputType: _propTypes.default.oneOf(['text', 'password']),
-
   /**
    * text for an invalid input
    */
   invalidInputText: _propTypes.default.string,
-
   /**
    * specify if the modal is in a loading state
    */
   loading: _propTypes.default.bool,
-
   /**
    * message to display during the loading state
    */
   loadingMessage: _propTypes.default.string,
-
   /**
    * Specify a handler for closing modal
    */
   onClose: _propTypes.default.func,
-
   /**
    * Specify a handler for "submitting" modal. Returns the file name
    */
   onRequestSubmit: _propTypes.default.func,
-
   /**
    * Specify whether the Modal is currently open
    */
   open: _propTypes.default.bool,
-
   /**
    * Array of extensions to display as radio buttons
    */
@@ -293,42 +251,34 @@ ExportModal.propTypes = {
     extension: _propTypes.default.string,
     description: _propTypes.default.string
   })),
-
   /**
    * Label for the preformatted label form group
    */
   preformattedExtensionsLabel: _propTypes.default.string,
-
   /**
    * Specify the text for the primary button
    */
   primaryButtonText: _propTypes.default.string.isRequired,
-
   /**
    * Specify the text for the secondary button
    */
   secondaryButtonText: _propTypes.default.string.isRequired,
-
   /**
    * label text that's displayed when hovering over visibility toggler to show key
    */
   showPasswordLabel: _propTypes.default.string,
-
   /**
    * messaging to display if the export was successful
    */
   successMessage: _propTypes.default.string,
-
   /**
    * specify if the export was successful
    */
   successful: _propTypes.default.bool,
-
   /**
    * The text displayed at the top of the modal
    */
   title: _propTypes.default.string.isRequired,
-
   /**
    * array of valid extensions the file can have
    */

package/lib/components/ExportModal/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "ExportModal", {
     return _ExportModal.ExportModal;
   }
 });
-
 var _ExportModal = require("./ExportModal");