@elastic/eui 77.1.0 → 77.2.0

package/optimize/es/components/date_picker/date_picker.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,6 +54,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
     calendarClassName = _ref.calendarClassName,
     className = _ref.className,
+    controlOnly = _ref.controlOnly,
     customInput = _ref.customInput,
     _ref$dateFormat = _ref.dateFormat,
     dateFormat = _ref$dateFormat === void 0 ? euiDatePickerDefaultDateFormat : _ref$dateFormat,
@@ -99,7 +100,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     'euiDatePicker--shadow': shadow,
     'euiDatePicker--inline': inline
   });
-  var numIconsClass = getFormControlClassNameForIconCount({
+  var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid,
     isLoading: isLoading
   });
@@ -140,17 +141,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     controlEl: inputValidityRef
   });
   var inputRefs = useCombinedRefs([inputRef, setInputValidityRef]);
-  return ___EmotionJSX("span", {
-    className: classes
-  }, ___EmotionJSX(EuiFormControlLayout, {
-    icon: optionalIcon,
-    fullWidth: fullWidth,
-    clear: selected && onClear ? {
-      onClick: onClear
-    } : undefined,
-    isLoading: isLoading,
-    isInvalid: isInvalid
-  }, ___EmotionJSX(EuiI18nConsumer, null, function (_ref2) {
+  var control = ___EmotionJSX(EuiI18nConsumer, null, function (_ref2) {
     var contextLocale = _ref2.locale;
     return ___EmotionJSX(ReactDatePicker, _extends({
       adjustDateOnChange: adjustDateOnChange,
@@ -186,5 +177,17 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       accessibleMode: true,
       popperPlacement: popoverPlacement
     }, rest));
-  })));
+  });
+  if (controlOnly) return control;
+  return ___EmotionJSX("span", {
+    className: classes
+  }, ___EmotionJSX(EuiFormControlLayout, {
+    icon: optionalIcon,
+    fullWidth: fullWidth,
+    clear: selected && onClear ? {
+      onClick: onClear
+    } : undefined,
+    isLoading: isLoading,
+    isInvalid: isInvalid
+  }, control));
 };

package/optimize/es/components/date_picker/date_picker_range.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,9 +9,9 @@ var _excluded = ["children", "className", "startDateControl", "endDateControl",
  * Side Public License, v 1.
  */
 
-import React, { Fragment, cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import classNames from 'classnames';
-import { EuiIcon } from '../icon';
+import { EuiFormControlLayoutDelimited } from '../form';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var children = _ref.children,
@@ -27,6 +27,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     disabled = _ref.disabled,
     _onFocus = _ref.onFocus,
     _onBlur = _ref.onBlur,
+    append = _ref.append,
+    prepend = _ref.prepend,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiDatePickerRange', {
     'euiDatePickerRange--fullWidth': fullWidth,
@@ -38,8 +40,8 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var endControl = endDateControl;
   if (!isCustom) {
     startControl = /*#__PURE__*/cloneElement(startDateControl, {
-      iconType: typeof iconType === 'boolean' ? undefined : iconType,
-      showIcon: !!iconType,
+      controlOnly: true,
+      showIcon: false,
       fullWidth: fullWidth,
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
@@ -57,6 +59,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       }
     });
     endControl = /*#__PURE__*/cloneElement(endDateControl, {
+      controlOnly: true,
       showIcon: false,
       fullWidth: fullWidth,
       readOnly: readOnly,
@@ -76,13 +79,16 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       }
     });
   }
-  var delimiter = ___EmotionJSX("span", {
-    className: "euiDatePickerRange__delimeter"
-  }, ___EmotionJSX(EuiIcon, {
-    color: isInvalid ? 'danger' : 'subdued',
-    type: "sortRight"
-  }));
-  return ___EmotionJSX("div", _extends({
-    className: classes
-  }, rest), children ? children : ___EmotionJSX(Fragment, null, startControl, delimiter, endControl));
+  return ___EmotionJSX(EuiFormControlLayoutDelimited, _extends({
+    icon: iconType === true ? 'calendar' : iconType || undefined,
+    className: classes,
+    startControl: startControl,
+    endControl: endControl,
+    fullWidth: fullWidth,
+    readOnly: readOnly,
+    isDisabled: disabled,
+    isInvalid: isInvalid,
+    append: append,
+    prepend: prepend
+  }, rest));
 };

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -198,6 +198,36 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         _this.asyncInterval = new AsyncInterval(handler, refreshInterval);
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "renderQuickSelect", function () {
+      var _this$props2 = _this.props,
+        start = _this$props2.start,
+        end = _this$props2.end,
+        customQuickSelectPanels = _this$props2.customQuickSelectPanels,
+        customQuickSelectRender = _this$props2.customQuickSelectRender,
+        commonlyUsedRanges = _this$props2.commonlyUsedRanges,
+        timeOptions = _this$props2.timeOptions,
+        dateFormat = _this$props2.dateFormat,
+        onRefreshChange = _this$props2.onRefreshChange,
+        recentlyUsedRanges = _this$props2.recentlyUsedRanges,
+        refreshInterval = _this$props2.refreshInterval,
+        isPaused = _this$props2.isPaused,
+        isDisabled = _this$props2.isDisabled;
+      return ___EmotionJSX(EuiQuickSelectPopover, {
+        applyRefreshInterval: onRefreshChange ? _this.onRefreshChange : undefined,
+        applyTime: _this.applyQuickTime,
+        commonlyUsedRanges: commonlyUsedRanges,
+        customQuickSelectPanels: customQuickSelectPanels,
+        customQuickSelectRender: customQuickSelectRender,
+        dateFormat: dateFormat,
+        end: end,
+        isDisabled: isDisabled,
+        isPaused: isPaused,
+        recentlyUsedRanges: recentlyUsedRanges,
+        refreshInterval: refreshInterval,
+        start: start,
+        timeOptions: timeOptions
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "renderDatePickerRange", function () {
       var _this$state = _this.state,
         end = _this$state.end,
@@ -207,24 +237,47 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isStartDatePopoverOpen = _this$state.isStartDatePopoverOpen,
         showPrettyDuration = _this$state.showPrettyDuration,
         start = _this$state.start;
-      var _this$props2 = _this.props,
-        commonlyUsedRanges = _this$props2.commonlyUsedRanges,
-        timeOptions = _this$props2.timeOptions,
-        dateFormat = _this$props2.dateFormat,
-        isDisabled = _this$props2.isDisabled,
-        locale = _this$props2.locale,
-        timeFormat = _this$props2.timeFormat,
-        utcOffset = _this$props2.utcOffset,
-        compressed = _this$props2.compressed,
-        onFocus = _this$props2.onFocus;
+      var _this$props3 = _this.props,
+        isQuickSelectOnly = _this$props3.isQuickSelectOnly,
+        showUpdateButton = _this$props3.showUpdateButton,
+        commonlyUsedRanges = _this$props3.commonlyUsedRanges,
+        timeOptions = _this$props3.timeOptions,
+        dateFormat = _this$props3.dateFormat,
+        refreshInterval = _this$props3.refreshInterval,
+        isPaused = _this$props3.isPaused,
+        isDisabled = _this$props3.isDisabled,
+        isLoading = _this$props3.isLoading,
+        locale = _this$props3.locale,
+        timeFormat = _this$props3.timeFormat,
+        utcOffset = _this$props3.utcOffset,
+        compressed = _this$props3.compressed,
+        onFocus = _this$props3.onFocus,
+        className = _this$props3.className,
+        dataTestSubj = _this$props3['data-test-subj'];
+      var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
+        refreshInterval: refreshInterval,
+        isDisabled: isDisabled,
+        isPaused: isPaused,
+        onRefreshChange: _this.onRefreshChange,
+        shortHand: true
+      }) : undefined;
+      var formControlLayoutProps = {
+        className: classNames('euiSuperDatePicker', className),
+        compressed: compressed,
+        isInvalid: isInvalid,
+        isLoading: isLoading && !showUpdateButton,
+        disabled: isDisabled,
+        prepend: _this.renderQuickSelect(),
+        append: autoRefreshAppend,
+        'data-test-subj': dataTestSubj
+      };
+      if (isQuickSelectOnly) {
+        return ___EmotionJSX(EuiFormControlLayout, _extends({
+          iconsPosition: "static"
+        }, formControlLayoutProps));
+      }
       if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return ___EmotionJSX(EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isCustom: true,
-          startDateControl: ___EmotionJSX("div", null),
-          endDateControl: ___EmotionJSX("div", null)
-        }, ___EmotionJSX("button", {
+        return ___EmotionJSX(EuiFormControlLayout, formControlLayoutProps, ___EmotionJSX("button", {
           className: classNames('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -241,12 +294,12 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }
       return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return ___EmotionJSX(EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isInvalid: isInvalid,
-          disabled: isDisabled,
+        return ___EmotionJSX(EuiDatePickerRange, _extends({}, formControlLayoutProps, {
+          className: classNames(formControlLayoutProps.className, {
+            'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
+          }),
           isCustom: true,
+          iconType: false,
           startDateControl: ___EmotionJSX(EuiDatePopoverButton, {
             className: "euiSuperDatePicker__startPopoverButton",
             compressed: compressed,
@@ -289,15 +342,15 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
               onFocus: onFocus
             }
           })
-        });
+        }));
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleClickUpdateButton", function () {
       if (!_this.state.hasChanged && _this.props.onRefresh) {
-        var _this$props3 = _this.props,
-          start = _this$props3.start,
-          end = _this$props3.end,
-          refreshInterval = _this$props3.refreshInterval;
+        var _this$props4 = _this.props,
+          start = _this$props4.start,
+          end = _this$props4.end,
+          refreshInterval = _this$props4.refreshInterval;
         _this.props.onRefresh({
           start: start,
           end: end,
@@ -308,12 +361,12 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "renderUpdateButton", function () {
-      var _this$props4 = _this.props,
-        isLoading = _this$props4.isLoading,
-        isDisabled = _this$props4.isDisabled,
-        updateButtonProps = _this$props4.updateButtonProps,
-        showUpdateButton = _this$props4.showUpdateButton,
-        compressed = _this$props4.compressed;
+      var _this$props5 = _this.props,
+        isLoading = _this$props5.isLoading,
+        isDisabled = _this$props5.isDisabled,
+        updateButtonProps = _this$props5.updateButtonProps,
+        showUpdateButton = _this$props5.showUpdateButton,
+        compressed = _this$props5.compressed;
       if (!showUpdateButton) return null;
       return ___EmotionJSX(EuiFlexItem, {
         grow: false
@@ -333,52 +386,21 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
   _createClass(EuiSuperDatePickerInternal, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-        commonlyUsedRanges = _this$props5.commonlyUsedRanges,
-        timeOptions = _this$props5.timeOptions,
-        customQuickSelectPanels = _this$props5.customQuickSelectPanels,
-        customQuickSelectRender = _this$props5.customQuickSelectRender,
-        dateFormat = _this$props5.dateFormat,
-        end = _this$props5.end,
-        isAutoRefreshOnly = _this$props5.isAutoRefreshOnly,
-        isDisabled = _this$props5.isDisabled,
-        isPaused = _this$props5.isPaused,
-        onRefreshChange = _this$props5.onRefreshChange,
-        recentlyUsedRanges = _this$props5.recentlyUsedRanges,
-        refreshInterval = _this$props5.refreshInterval,
-        showUpdateButton = _this$props5.showUpdateButton,
-        start = _this$props5.start,
-        dataTestSubj = _this$props5['data-test-subj'],
-        _width = _this$props5.width,
-        isQuickSelectOnly = _this$props5.isQuickSelectOnly,
-        compressed = _this$props5.compressed,
-        className = _this$props5.className;
+      var _this$props6 = this.props,
+        isAutoRefreshOnly = _this$props6.isAutoRefreshOnly,
+        isDisabled = _this$props6.isDisabled,
+        isPaused = _this$props6.isPaused,
+        onRefreshChange = _this$props6.onRefreshChange,
+        refreshInterval = _this$props6.refreshInterval,
+        showUpdateButton = _this$props6.showUpdateButton,
+        dataTestSubj = _this$props6['data-test-subj'],
+        _width = _this$props6.width,
+        isQuickSelectOnly = _this$props6.isQuickSelectOnly,
+        compressed = _this$props6.compressed,
+        className = _this$props6.className;
 
       // Force reduction in width if showing quick select only
       var width = isQuickSelectOnly ? 'auto' : _width;
-      var autoRefreshAppend = !isPaused ? ___EmotionJSX(EuiAutoRefreshButton, {
-        className: "euiFormControlLayout__append",
-        refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
-        isPaused: isPaused,
-        onRefreshChange: this.onRefreshChange,
-        shortHand: true
-      }) : undefined;
-      var quickSelect = ___EmotionJSX(EuiQuickSelectPopover, {
-        applyRefreshInterval: onRefreshChange ? this.onRefreshChange : undefined,
-        applyTime: this.applyQuickTime,
-        commonlyUsedRanges: commonlyUsedRanges,
-        customQuickSelectPanels: customQuickSelectPanels,
-        customQuickSelectRender: customQuickSelectRender,
-        dateFormat: dateFormat,
-        end: end,
-        isDisabled: isDisabled,
-        isPaused: isPaused,
-        recentlyUsedRanges: recentlyUsedRanges,
-        refreshInterval: refreshInterval,
-        start: start,
-        timeOptions: timeOptions
-      });
       var flexWrapperClasses = classNames('euiSuperDatePicker__flexWrapper', {
         'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
         'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
@@ -399,14 +421,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         "data-test-subj": dataTestSubj,
         className: className
-      })) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFormControlLayout, {
-        className: classNames('euiSuperDatePicker', className),
-        compressed: compressed,
-        isDisabled: isDisabled,
-        prepend: quickSelect,
-        append: autoRefreshAppend,
-        "data-test-subj": dataTestSubj
-      }, !isQuickSelectOnly && this.renderDatePickerRange())), this.renderUpdateButton()));
+      })) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/optimize/es/components/form/field_number/field_number.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyDown"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,12 +10,13 @@ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max",
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import classNames from 'classnames';
-import { EuiFormControlLayout } from '../form_control_layout';
+import { useCombinedRefs } from '../../../services';
 import { EuiValidatableControl } from '../validatable_control';
-import { useFormContext } from '../eui_form_context';
+import { EuiFormControlLayout } from '../form_control_layout';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
+import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFieldNumber = function EuiFieldNumber(props) {
   var _useFormContext = useFormContext(),
@@ -39,9 +41,31 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
+    _onKeyDown = props.onKeyDown,
     rest = _objectWithoutProperties(props, _excluded);
-  var numIconsClass = getFormControlClassNameForIconCount({
-    isInvalid: isInvalid,
+
+  // Attempt to determine additional invalid state. The native number input
+  // will set :invalid state automatically, but we need to also set
+  // `aria-invalid` as well as display an icon. We also want to *not* set this on
+  // EuiValidatableControl, in order to not override custom validity messages
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNativelyInvalid = _useState2[0],
+    setIsNativelyInvalid = _useState2[1];
+  var validityRef = useRef(null);
+  var setRefs = useCombinedRefs([validityRef, inputRef]);
+
+  // Note that we can't use hook into `onChange` because browsers don't emit change events
+  // for invalid values - see https://github.com/facebook/react/issues/16554
+  var onKeyDown = useCallback(function (e) {
+    _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
+    // Wait a beat before checking validity - we can't use `e.target` as it's stale
+    requestAnimationFrame(function () {
+      setIsNativelyInvalid(!validityRef.current.validity.valid);
+    });
+  }, [_onKeyDown]);
+  var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
+    isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
   });
   var classes = classNames('euiFieldNumber', className, numIconsClass, {
@@ -63,7 +87,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: inputRef
+    ref: setRefs,
+    onKeyDown: onKeyDown,
+    "aria-invalid": isInvalid || isNativelyInvalid
   }, rest)));
   if (controlOnly) {
     return control;
@@ -72,7 +98,7 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     icon: icon,
     fullWidth: fullWidth,
     isLoading: isLoading,
-    isInvalid: isInvalid,
+    isInvalid: isInvalid || isNativelyInvalid,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

package/optimize/es/components/form/field_text/field_text.js

@@ -36,7 +36,7 @@ export var EuiFieldText = function EuiFieldText(props) {
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
     rest = _objectWithoutProperties(props, _excluded);
-  var numIconsClass = getFormControlClassNameForIconCount({
+  var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid,
     isLoading: isLoading
   });

package/optimize/es/components/form/form_control_layout/form_control_layout.js

@@ -2,11 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "icon", "clear", "fullWidth", "isLoading", "isDisabled", "compressed", "className", "prepend", "append", "readOnly", "isInvalid", "isDropdown", "inputId"];
+var _excluded = ["children", "icon", "iconsPosition", "clear", "fullWidth", "isLoading", "isDisabled", "compressed", "className", "prepend", "append", "readOnly", "isInvalid", "isDropdown", "inputId"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -23,36 +24,79 @@ import { EuiFormControlLayoutIcons } from './form_control_layout_icons';
 import { EuiFormLabel } from '../form_label';
 import { FormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export { ICON_SIDES } from './form_control_layout_icons';
 export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
   _inherits(EuiFormControlLayout, _Component);
   var _super = _createSuper(EuiFormControlLayout);
   function EuiFormControlLayout() {
+    var _this;
     _classCallCheck(this, EuiFormControlLayout);
-    return _super.apply(this, arguments);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "renderLeftIcons", function () {
+      var _this$props = _this.props,
+        icon = _this$props.icon,
+        iconsPosition = _this$props.iconsPosition,
+        compressed = _this$props.compressed;
+      var leftCustomIcon = icon && (icon === null || icon === void 0 ? void 0 : icon.side) !== 'right' ? icon : undefined;
+      return leftCustomIcon ? ___EmotionJSX(EuiFormControlLayoutIcons, {
+        side: "left",
+        icon: leftCustomIcon,
+        iconsPosition: iconsPosition,
+        compressed: compressed
+      }) : null;
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderRightIcons", function () {
+      var _this$props2 = _this.props,
+        icon = _this$props2.icon,
+        iconsPosition = _this$props2.iconsPosition,
+        clear = _this$props2.clear,
+        compressed = _this$props2.compressed,
+        isLoading = _this$props2.isLoading,
+        isInvalid = _this$props2.isInvalid,
+        isDisabled = _this$props2.isDisabled,
+        readOnly = _this$props2.readOnly,
+        isDropdown = _this$props2.isDropdown;
+      var hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
+      var rightCustomIcon = icon && (icon === null || icon === void 0 ? void 0 : icon.side) === 'right' ? icon : undefined;
+      var hasRightIcons = rightCustomIcon || clear || isLoading || isInvalid || hasDropdownIcon;
+      return hasRightIcons ? ___EmotionJSX(EuiFormControlLayoutIcons, {
+        side: "right",
+        icon: rightCustomIcon,
+        iconsPosition: iconsPosition,
+        compressed: compressed,
+        clear: clear,
+        isLoading: isLoading,
+        isInvalid: isInvalid,
+        isDropdown: hasDropdownIcon
+      }) : null;
+    });
+    return _this;
   }
   _createClass(EuiFormControlLayout, [{
     key: "render",
     value: function render() {
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
-      var _this$props = this.props,
-        children = _this$props.children,
-        icon = _this$props.icon,
-        clear = _this$props.clear,
-        _this$props$fullWidth = _this$props.fullWidth,
-        fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
-        isLoading = _this$props.isLoading,
-        isDisabled = _this$props.isDisabled,
-        compressed = _this$props.compressed,
-        className = _this$props.className,
-        prepend = _this$props.prepend,
-        append = _this$props.append,
-        readOnly = _this$props.readOnly,
-        invalid = _this$props.isInvalid,
-        isDropdown = _this$props.isDropdown,
-        inputId = _this$props.inputId,
-        rest = _objectWithoutProperties(_this$props, _excluded);
+      var _this$props3 = this.props,
+        children = _this$props3.children,
+        icon = _this$props3.icon,
+        iconsPosition = _this$props3.iconsPosition,
+        clear = _this$props3.clear,
+        _this$props3$fullWidt = _this$props3.fullWidth,
+        fullWidth = _this$props3$fullWidt === void 0 ? defaultFullWidth : _this$props3$fullWidt,
+        isLoading = _this$props3.isLoading,
+        isDisabled = _this$props3.isDisabled,
+        compressed = _this$props3.compressed,
+        className = _this$props3.className,
+        prepend = _this$props3.prepend,
+        append = _this$props3.append,
+        readOnly = _this$props3.readOnly,
+        isInvalid = _this$props3.isInvalid,
+        isDropdown = _this$props3.isDropdown,
+        inputId = _this$props3.inputId,
+        rest = _objectWithoutProperties(_this$props3, _excluded);
       var classes = classNames('euiFormControlLayout', {
         'euiFormControlLayout--fullWidth': fullWidth,
         'euiFormControlLayout--compressed': compressed,
@@ -66,19 +110,12 @@ export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
         className: classes
       }, rest), prependNodes, ___EmotionJSX("div", {
         className: "euiFormControlLayout__childrenWrapper"
-      }, children, ___EmotionJSX(EuiFormControlLayoutIcons, {
-        icon: icon,
-        clear: clear,
-        compressed: compressed,
-        isLoading: isLoading,
-        isInvalid: invalid,
-        isDropdown: !readOnly && !isDisabled && isDropdown
-      })), appendNodes);
+      }, this.renderLeftIcons(), children, this.renderRightIcons()), appendNodes);
     }
   }, {
     key: "renderSideNode",
     value: function renderSideNode(side, nodes, inputId) {
-      var _this = this;
+      var _this2 = this;
       if (!nodes) {
         return;
       }
@@ -86,7 +123,7 @@ export var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
         return this.createFormLabel(side, nodes, inputId);
       }
       var appendNodes = React.Children.map(nodes, function (item, index) {
-        return typeof item === 'string' ? _this.createFormLabel(side, item, inputId) : _this.createSideNode(side, item, index);
+        return typeof item === 'string' ? _this2.createFormLabel(side, item, inputId) : _this2.createSideNode(side, item, index);
       });
       return appendNodes;
     }