@elastic/eui 113.2.1 → 113.3.0

package/es/components/form/file_picker/file_picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
+var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display", "files"];
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
@@ -52,36 +52,41 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
       args[_key] = arguments[_key];
     }
     _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
+    _defineProperty(_this, "fileInput", null);
+    _defineProperty(_this, "generatedId", htmlIdGenerator()());
+    _defineProperty(_this, "getPromptTextFromFileList", function (files) {
+      if (!files || files.length === 0) {
+        return null;
+      }
+      if (files.length > 1) {
+        return ___EmotionJSX(EuiI18n, {
+          token: "euiFilePicker.filesSelected",
+          default: "{fileCount} files selected",
+          values: {
+            fileCount: files.length
+          }
+        });
+      }
+      return files[0].name;
+    });
     _defineProperty(_this, "state", {
-      promptText: null,
+      promptText: _this.props.files ? _this.getPromptTextFromFileList(_this.props.files) : null,
       isHoveringDrop: false
     });
-    _defineProperty(_this, "fileInput", null);
-    _defineProperty(_this, "generatedId", htmlIdGenerator()());
     _defineProperty(_this, "handleChange", function () {
       if (!_this.fileInput) return;
-      if (_this.fileInput.files && _this.fileInput.files.length > 1) {
+      if (_this.fileInput.files && _this.fileInput.files.length === 1) {
         _this.setState({
-          promptText: ___EmotionJSX(EuiI18n, {
-            token: "euiFilePicker.filesSelected",
-            default: "{fileCount} files selected",
-            values: {
-              fileCount: _this.fileInput.files.length
-            }
-          })
-        });
-      } else if (_this.fileInput.files && _this.fileInput.files.length === 0) {
-        _this.setState({
-          promptText: null
+          promptText: _this.fileInput.value.split('\\').pop()
         });
       } else {
         _this.setState({
-          promptText: _this.fileInput.value.split('\\').pop()
+          promptText: _this.getPromptTextFromFileList(_this.fileInput.files ? Array.from(_this.fileInput.files) : null)
         });
       }
       var onChange = _this.props.onChange;
       if (onChange) {
-        onChange(_this.fileInput.files);
+        onChange(_this.fileInput.files && _this.fileInput.files.length > 0 ? _this.fileInput.files : null);
       }
     });
     _defineProperty(_this, "removeFiles", function (e) {
@@ -109,6 +114,17 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
   }
   _inherits(EuiFilePickerClass, _Component);
   return _createClass(EuiFilePickerClass, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      // Update prompt text when files prop changes
+      if (this.props.files !== prevProps.files) {
+        var _this$props$files;
+        this.setState({
+          promptText: this.getPromptTextFromFileList((_this$props$files = this.props.files) !== null && _this$props$files !== void 0 ? _this$props$files : null)
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -132,6 +148,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
           isLoading = _this2$props.isLoading,
           display = _this2$props.display,
+          files = _this2$props.files,
           rest = _objectWithoutProperties(_this2$props, _excluded);
         var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
         var isOverridingInitialPrompt = _this2.state.promptText != null;
@@ -246,6 +263,17 @@ EuiFilePickerClass.propTypes = {
      * Use as a callback to access the HTML FileList API
      */
   onChange: PropTypes.func,
+  /**
+     * Optionally pass a `File[]` array to maintain the file picker's displayed
+     * state between re-renders. Useful for multi-step forms where the component
+     * may unmount and remount while the file data is still stored in context.
+     *
+     * Note: Due to browser security restrictions, the actual file input
+     * cannot be programmatically set with files. This prop only controls
+     * the displayed state (file names in the prompt). The actual file data
+     * should be stored and managed separately in your application state.
+     */
+  files: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, PropTypes.oneOf([null])]),
   /**
      * Reduces the size to a typical (compressed) input
      * @default false