@elastic/eui 119.0.0 → 119.1.0

package/optimize/lib/components/flyout/flyout_menu/flyout_menu.js

@@ -14,6 +14,7 @@ var _services = require("../../../services");
 var _flex = require("../../flex");
 var _i18n = require("../../i18n");
 var _title = require("../../title");
+var _tool_tip = require("../../tool_tip");
 var _flyout_close_button = require("../_flyout_close_button");
 var _const = require("../const");
 var _flyout_menu_context = require("../flyout_menu_context");
@@ -45,7 +46,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @private
  */
 var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
-  var _pagination$currentIn, _pagination$total;
+  var _historyItems$0$title, _historyItems$, _pagination$currentIn, _pagination$total;
   var className = _ref.className,
     title = _ref.title,
     titleId = _ref.titleId,
@@ -81,6 +82,12 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
   // Sub-components are presentational, so all `euiFlyoutMenu.*` tokens are
   // resolved here, in the file that owns the namespace
   var backButtonLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.back', 'Back');
+  // `historyItems` is ordered most-recent-first, so index 0 is the entry the
+  // back button navigates to
+  var previousPageTitle = (_historyItems$0$title = (_historyItems$ = historyItems[0]) === null || _historyItems$ === void 0 ? void 0 : _historyItems$.title) !== null && _historyItems$0$title !== void 0 ? _historyItems$0$title : '';
+  var backTooltipLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.back.tooltip', 'Back to {previousPage}', {
+    previousPage: previousPageTitle
+  });
   var historyLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History');
   var recentlyVisitedLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.history.tooltip', 'Recently visited');
   var paginationLabels = {
@@ -122,35 +129,51 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
     labels: paginationLabels
   }) : (0, _react2.jsx)(_react.default.Fragment, null, hasBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
+  }, previousPageTitle ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: backTooltipLabel
   }, (0, _react2.jsx)(_back_button.BackButton, (0, _extends2.default)({
     label: backButtonLabel
+  }, backButtonProps))) : (0, _react2.jsx)(_back_button.BackButton, (0, _extends2.default)({
+    label: backButtonLabel
   }, backButtonProps))), showBackHistoryDivider && (0, _react2.jsx)(_divider.MenuDivider, null), hasHistory && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(_history_popover.HistoryPopover, {
     items: historyItems,
     historyLabel: historyLabel,
     recentlyVisitedLabel: recentlyVisitedLabel
-  }))), showLeadingBoundaryDivider && (0, _react2.jsx)(_divider.MenuDivider, null), leadingActions.map(function (action, actionIndex) {
+  }))), showLeadingBoundaryDivider && (0, _react2.jsx)(_divider.MenuDivider, null), leadingActions.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__actions
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s",
+    alignItems: "center",
+    responsive: false
+  }, leadingActions.map(function (action, actionIndex) {
     return (0, _react2.jsx)(_flex.EuiFlexItem, {
       key: "leading-action-".concat(actionIndex),
-      grow: false,
-      css: styles.euiFlyoutMenu__actions
+      grow: false
     }, (0, _react2.jsx)(_action_button.MenuActionButton, {
       action: action
     }));
-  }), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }))), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: true
-  }), effectiveTrailingActions.map(function (action, actionIndex) {
+  }), effectiveTrailingActions.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__actions
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s",
+    alignItems: "center",
+    responsive: false
+  }, effectiveTrailingActions.map(function (action, actionIndex) {
     return (0, _react2.jsx)(_flex.EuiFlexItem, {
       key: "trailing-action-".concat(actionIndex),
-      grow: false,
-      css: styles.euiFlyoutMenu__actions
+      grow: false
     }, (0, _react2.jsx)(_action_button.MenuActionButton, {
       action: action
     }));
-  }), !hideCloseButton && (0, _react2.jsx)(_close_spacer.CloseButtonSpacer, {
+  }))), !hideCloseButton && (0, _react2.jsx)(_close_spacer.CloseButtonSpacer, {
     showDivider: showTrailingCloseDivider
   })), !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
     onClose: handleClose,

package/optimize/lib/components/form/file_picker/file_picker.js

@@ -5,16 +5,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFilePickerClass = exports.EuiFilePicker = void 0;
+exports.EuiFilePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
@@ -28,224 +23,197 @@ var _validatable_control = require("../validatable_control");
 var _form_control_layout_clear_button = require("../form_control_layout/form_control_layout_clear_button");
 var _file_picker = require("./file_picker.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display", "files"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+var _excluded = ["id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display", "files"];
+/*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Component) {
-  function EuiFilePickerClass() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiFilePickerClass);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
-    (0, _defineProperty2.default)(_this, "fileInput", null);
-    (0, _defineProperty2.default)(_this, "generatedId", (0, _services.htmlIdGenerator)()());
-    (0, _defineProperty2.default)(_this, "getPromptTextFromFileList", function (files) {
-      if (!files || files.length === 0) {
-        return null;
-      }
-      if (files.length > 1) {
-        return (0, _react2.jsx)(_i18n.EuiI18n, {
-          token: "euiFilePicker.filesSelected",
-          default: "{fileCount} files selected",
-          values: {
-            fileCount: files.length
-          }
-        });
-      }
-      return files[0].name;
-    });
-    (0, _defineProperty2.default)(_this, "state", {
-      promptText: _this.props.files ? _this.getPromptTextFromFileList(_this.props.files) : null,
-      isHoveringDrop: false
-    });
-    (0, _defineProperty2.default)(_this, "handleChange", function () {
-      if (!_this.fileInput) return;
-      if (_this.fileInput.files && _this.fileInput.files.length === 1) {
-        _this.setState({
-          promptText: _this.fileInput.value.split('\\').pop()
-        });
-      } else {
-        _this.setState({
-          promptText: _this.getPromptTextFromFileList(_this.fileInput.files ? Array.from(_this.fileInput.files) : null)
-        });
-      }
-      var onChange = _this.props.onChange;
-      if (onChange) {
-        onChange(_this.fileInput.files && _this.fileInput.files.length > 0 ? _this.fileInput.files : null);
-      }
-    });
-    (0, _defineProperty2.default)(_this, "removeFiles", function (e) {
-      if (e) {
-        e.stopPropagation();
-        e.preventDefault();
-      }
-      if (!_this.fileInput) return;
-      _this.fileInput.value = '';
-      _this.handleChange();
-    });
-    (0, _defineProperty2.default)(_this, "showDrop", function () {
-      if (!_this.props.disabled) {
-        _this.setState({
-          isHoveringDrop: true
-        });
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var getPromptTextFromFileList = function getPromptTextFromFileList(files) {
+  if (!files || files.length === 0) {
+    return null;
+  }
+  if (files.length > 1) {
+    return (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiFilePicker.filesSelected",
+      default: "{fileCount} files selected",
+      values: {
+        fileCount: files.length
       }
     });
-    (0, _defineProperty2.default)(_this, "hideDrop", function () {
-      _this.setState({
-        isHoveringDrop: false
-      });
-    });
-    return _this;
   }
-  (0, _inherits2.default)(EuiFilePickerClass, _Component);
-  return (0, _createClass2.default)(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;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
-      return (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiFilePicker.removeSelectedAriaLabel",
-        default: "Remove selected files"
-      }, function (removeSelectedAriaLabel) {
-        var _this2$props = _this2.props,
-          stylesMemoizer = _this2$props.stylesMemoizer,
-          id = _this2$props.id,
-          name = _this2$props.name,
-          initialPromptText = _this2$props.initialPromptText,
-          className = _this2$props.className,
-          disabled = _this2$props.disabled,
-          compressed = _this2$props.compressed,
-          onChange = _this2$props.onChange,
-          isInvalid = _this2$props.isInvalid,
-          _this2$props$fullWidt = _this2$props.fullWidth,
-          fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
-          isLoading = _this2$props.isLoading,
-          display = _this2$props.display,
-          files = _this2$props.files,
-          rest = (0, _objectWithoutProperties2.default)(_this2$props, _excluded);
-        var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
-        var isOverridingInitialPrompt = _this2.state.promptText != null;
-        var normalFormControl = display === 'default';
-        var classes = (0, _classnames.default)('euiFilePicker', {
-          'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
-          'euiFilePicker-isInvalid': isInvalid,
-          'euiFilePicker-isLoading': isLoading,
-          'euiFilePicker-hasFiles': isOverridingInitialPrompt
-        }, className);
-        var styles = stylesMemoizer(_file_picker.euiFilePickerStyles);
-        var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, _this2.state.isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
-        var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
-        var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat((0, _toConsumableArray2.default)(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
-        var iconStyles = [styles.icon.euiFilePicker__icon].concat((0, _toConsumableArray2.default)(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
-        var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
-        var clearButton;
-        if (isLoading && normalFormControl) {
-          // Override clear button with loading spinner if it is in loading state
-          clearButton = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-            css: rightIconStyles,
-            className: "euiFilePicker__loadingSpinner",
-            size: compressed ? 's' : 'm'
-          });
-        } else if (isOverridingInitialPrompt && !disabled) {
-          if (normalFormControl) {
-            clearButton = (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, {
-              "aria-label": removeSelectedAriaLabel,
-              css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
-              className: "euiFilePicker__clearButton",
-              onClick: _this2.removeFiles,
-              size: compressed ? 's' : 'm'
-            });
-          } else {
-            clearButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
-              "aria-label": removeSelectedAriaLabel,
-              css: styles.euiFilePicker__clearButton,
-              className: "euiFilePicker__clearButton",
-              size: "xs",
-              onClick: _this2.removeFiles
-            }, (0, _react2.jsx)(_i18n.EuiI18n, {
-              token: "euiFilePicker.removeSelected",
-              default: "Remove"
-            }));
-          }
-        } else {
-          clearButton = null;
-        }
-        var loader = !normalFormControl && isLoading && (0, _react2.jsx)(_progress.EuiProgress, {
-          size: "xs",
-          color: "accent",
-          position: "absolute"
-        });
-        var iconColor = isInvalid ? 'danger' : disabled ? 'disabled' : 'text';
-        return (0, _react2.jsx)("div", {
-          css: cssStyles,
-          className: classes
-        }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
-          isInvalid: isInvalid
-        }, (0, _react2.jsx)("input", (0, _extends2.default)({
-          type: "file",
-          id: id,
-          name: name,
-          css: inputStyles,
-          className: "euiFilePicker__input",
-          onChange: _this2.handleChange,
-          ref: function ref(input) {
-            _this2.fileInput = input;
-          },
-          onDragOver: _this2.showDrop,
-          onDragLeave: _this2.hideDrop,
-          onDrop: _this2.hideDrop,
-          disabled: disabled,
-          "aria-describedby": promptId
-        }, rest))), (0, _react2.jsx)("div", {
-          css: promptStyles,
-          className: "euiFilePicker__prompt",
-          id: promptId
-        }, (0, _react2.jsx)(_icon.EuiIcon, {
-          css: iconStyles,
-          className: "euiFilePicker__icon",
-          color: iconColor,
-          type: isInvalid ? 'warning' : disabled ? 'minusCircle' : 'upload',
-          size: normalFormControl ? 'm' : 'l',
-          "aria-hidden": "true"
-        }), (0, _react2.jsx)("span", {
-          className: "euiFilePicker__promptText"
-        }, _this2.state.promptText || initialPromptText), clearButton, loader));
-      });
-    }
-  }]);
-}(_react.Component);
+  return files[0].name;
+};
+
 /**
  * @see {@link https://eui.elastic.co/docs/components/forms/other/file-picker/|EuiFilePicker documentation}
  */
-(0, _defineProperty2.default)(EuiFilePickerClass, "contextType", _eui_form_context.FormContext);
-(0, _defineProperty2.default)(EuiFilePickerClass, "defaultProps", {
-  initialPromptText: (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiFilePicker.promptText",
-    default: "Select or drag and drop a file"
-  }),
-  compressed: false,
-  display: 'large'
+var EuiFilePicker = exports.EuiFilePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useFormContext = (0, _eui_form_context.useFormContext)(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var id = props.id,
+    name = props.name,
+    _props$initialPromptT = props.initialPromptText,
+    initialPromptText = _props$initialPromptT === void 0 ? (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiFilePicker.promptText",
+      default: "Select or drag and drop a file"
+    }) : _props$initialPromptT,
+    className = props.className,
+    disabled = props.disabled,
+    _props$compressed = props.compressed,
+    compressed = _props$compressed === void 0 ? false : _props$compressed,
+    onChange = props.onChange,
+    isInvalid = props.isInvalid,
+    _props$fullWidth = props.fullWidth,
+    fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
+    isLoading = props.isLoading,
+    _props$display = props.display,
+    display = _props$display === void 0 ? 'large' : _props$display,
+    files = props.files,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var removeSelectedAriaLabel = (0, _i18n.useEuiI18n)('euiFilePicker.removeSelectedAriaLabel', 'Remove selected files');
+  var fileInput = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(function () {
+      return files ? getPromptTextFromFileList(files) : null;
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    promptText = _useState2[0],
+    setPromptText = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHoveringDrop = _useState4[0],
+    setIsHoveringDrop = _useState4[1];
+
+  // Update prompt text when the `files` prop changes. The ref guard keeps this
+  // from re-running on mount, where the initial state is already derived above.
+  var prevFiles = (0, _react.useRef)(files);
+  (0, _react.useEffect)(function () {
+    if (prevFiles.current !== files) {
+      prevFiles.current = files;
+      setPromptText(getPromptTextFromFileList(files !== null && files !== void 0 ? files : null));
+    }
+  }, [files]);
+  var handleChange = (0, _react.useCallback)(function () {
+    if (!fileInput.current) return;
+    if (fileInput.current.files && fileInput.current.files.length === 1) {
+      setPromptText(fileInput.current.value.split('\\').pop());
+    } else {
+      setPromptText(getPromptTextFromFileList(fileInput.current.files ? Array.from(fileInput.current.files) : null));
+    }
+    if (onChange) {
+      onChange(fileInput.current.files && fileInput.current.files.length > 0 ? fileInput.current.files : null);
+    }
+  }, [onChange]);
+  var removeFiles = (0, _react.useCallback)(function (e) {
+    if (e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    if (!fileInput.current) return;
+    fileInput.current.value = '';
+    handleChange();
+  }, [handleChange]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      removeFiles: removeFiles,
+      input: fileInput.current
+    };
+  }, [removeFiles]);
+  var showDrop = function showDrop() {
+    return !disabled && setIsHoveringDrop(true);
+  };
+  var hideDrop = function hideDrop() {
+    return setIsHoveringDrop(false);
+  };
+  var generatedId = (0, _services.useGeneratedHtmlId)();
+  var promptId = "".concat(id || generatedId, "-filePicker__prompt");
+  var isOverridingInitialPrompt = promptText != null;
+  var normalFormControl = display === 'default';
+  var classes = (0, _classnames.default)('euiFilePicker', {
+    'euiFilePicker-isDroppingFile': isHoveringDrop,
+    'euiFilePicker-isInvalid': isInvalid,
+    'euiFilePicker-isLoading': isLoading,
+    'euiFilePicker-hasFiles': isOverridingInitialPrompt
+  }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_file_picker.euiFilePickerStyles);
+  var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
+  var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
+  var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat((0, _toConsumableArray2.default)(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
+  var iconStyles = [styles.icon.euiFilePicker__icon].concat((0, _toConsumableArray2.default)(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compressed : styles.icon.uncompressed] : [styles.icon.large]));
+  var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
+  var clearButton;
+  if (isLoading && normalFormControl) {
+    // Override clear button with loading spinner if it is in loading state
+    clearButton = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+      css: rightIconStyles,
+      className: "euiFilePicker__loadingSpinner",
+      size: compressed ? 's' : 'm'
+    });
+  } else if (isOverridingInitialPrompt && !disabled) {
+    if (normalFormControl) {
+      clearButton = (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, {
+        "aria-label": removeSelectedAriaLabel,
+        css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
+        className: "euiFilePicker__clearButton",
+        onClick: removeFiles,
+        size: compressed ? 's' : 'm'
+      });
+    } else {
+      clearButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+        "aria-label": removeSelectedAriaLabel,
+        css: styles.euiFilePicker__clearButton,
+        className: "euiFilePicker__clearButton",
+        size: "xs",
+        onClick: removeFiles
+      }, (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiFilePicker.removeSelected",
+        default: "Remove"
+      }));
+    }
+  } else {
+    clearButton = null;
+  }
+  var loader = !normalFormControl && isLoading && (0, _react2.jsx)(_progress.EuiProgress, {
+    size: "xs",
+    color: "accent",
+    position: "absolute"
+  });
+  var iconColor = isInvalid ? 'danger' : disabled ? 'disabled' : 'text';
+  return (0, _react2.jsx)("div", {
+    css: cssStyles,
+    className: classes
+  }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+    isInvalid: isInvalid
+  }, (0, _react2.jsx)("input", (0, _extends2.default)({
+    type: "file",
+    id: id,
+    name: name,
+    css: inputStyles,
+    className: "euiFilePicker__input",
+    onChange: handleChange,
+    ref: fileInput,
+    onDragOver: showDrop,
+    onDragLeave: hideDrop,
+    onDrop: hideDrop,
+    disabled: disabled,
+    "aria-describedby": promptId
+  }, rest))), (0, _react2.jsx)("div", {
+    css: promptStyles,
+    className: "euiFilePicker__prompt",
+    id: promptId
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    css: iconStyles,
+    className: "euiFilePicker__icon",
+    color: iconColor,
+    type: isInvalid ? 'warning' : disabled ? 'minusCircle' : 'upload',
+    size: normalFormControl ? 'm' : 'l',
+    "aria-hidden": "true"
+  }), (0, _react2.jsx)("span", {
+    className: "euiFilePicker__promptText"
+  }, promptText || initialPromptText), clearButton, loader));
 });
-var EuiFilePicker = exports.EuiFilePicker = (0, _services.withEuiStylesMemoizer)(EuiFilePickerClass);
+EuiFilePicker.displayName = 'EuiFilePicker';

package/optimize/lib/components/form/file_picker/file_picker.styles.js

@@ -86,7 +86,7 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
       euiFilePicker__icon: /*#__PURE__*/(0, _react.css)(";label:euiFilePicker__icon;"),
       normal: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:normal;"),
       uncompressed: "\n        ".concat((0, _global_styling.logicalCSS)('left', euiTheme.size.m), "\n      "),
-      compresssed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.m), ";;label:compresssed;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('width', euiTheme.size.m), ";;label:compressed;"),
       large: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), " ", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
     },
     rightIcon: {

package/optimize/lib/components/icon/assets/cursor_default.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiIconCursorDefault = function EuiIconCursorDefault(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M2.646 2.646a.5.5 0 0 1 .497-.125l10 3a.5.5 0 0 1 .134.895l-2.493 1.66 3.069 3.07a.5.5 0 0 1 0 .707l-2 2a.5.5 0 0 1-.707 0l-3.07-3.07-1.66 2.494a.5.5 0 0 1-.895-.134l-3-10a.5.5 0 0 1 .125-.497m3.526 9.192 1.411-2.116.072-.085a.503.503 0 0 1 .698.01l3.146 3.146 1.293-1.293-3.146-3.147a.5.5 0 0 1 .076-.77l2.115-1.41-8.093-2.428z",
+    clipRule: "evenodd"
+  }));
+};
+var icon = exports.icon = EuiIconCursorDefault;

package/optimize/lib/components/icon/assets/log_in.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiIconLogIn = function EuiIconLogIn(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M13 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3v-1h10V3H3V2z"
+  }), (0, _react2.jsx)("path", {
+    d: "m11.707 8-3.353 3.354-.708-.707L9.793 8.5H2v-1h7.793L7.646 5.354l.708-.708z"
+  }));
+};
+var icon = exports.icon = EuiIconLogIn;

package/optimize/lib/components/icon/assets/route_split.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiIconRouteSplit = function EuiIconRouteSplit(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M13 3a2 2 0 1 1 0 4 2 2 0 0 1-1.934-1.5H6.903C7.524 6.105 8 7.053 8 8.5c0 1.654.47 2.372.83 2.687.093.082.187.14.273.185a2 2 0 1 1-.056 1.053 2.3 2.3 0 0 1-.876-.487C7.53 11.378 7 10.346 7 8.5c0-1.574-.657-2.284-1.252-2.63a2.8 2.8 0 0 0-.828-.313A2 2 0 1 1 4.935 4.5h6.131A2 2 0 0 1 13 3m-2 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2M3 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2m10 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+  }));
+};
+var icon = exports.icon = EuiIconRouteSplit;