@elastic/eui 77.1.0 → 77.2.0

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

@@ -204,6 +204,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,
@@ -213,24 +243,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
           }),
@@ -247,12 +300,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,
@@ -295,15 +348,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,
@@ -314,12 +367,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
@@ -339,52 +392,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,
@@ -405,14 +427,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/es/components/form/field_number/field_number.js

@@ -1,5 +1,11 @@
-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"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -10,13 +16,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import PropTypes from "prop-types";
 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(),
@@ -41,9 +48,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, {
@@ -65,7 +94,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;
@@ -74,7 +105,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/es/components/form/field_text/field_text.js

@@ -38,7 +38,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/es/components/form/form_control_layout/form_control_layout.js

@@ -1,4 +1,4 @@
-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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -31,36 +31,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,
@@ -74,19 +117,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;
       }
@@ -94,7 +130,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;
     }
@@ -140,6 +176,7 @@ EuiFormControlLayout.propTypes = {
     color: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
     ref: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.func.isRequired])
   }).isRequired]),
+  iconsPosition: PropTypes.oneOf(["absolute", "static"]),
   clear: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,

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

@@ -13,24 +13,31 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { cloneElement } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiI18n } from '../../i18n';
+import { EuiIcon } from '../../icon';
 import { EuiText } from '../../text';
 import { EuiFormControlLayout } from './form_control_layout';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormControlLayoutDelimited = function EuiFormControlLayoutDelimited(_ref) {
   var startControl = _ref.startControl,
     endControl = _ref.endControl,
-    _ref$delimiter = _ref.delimiter,
-    delimiter = _ref$delimiter === void 0 ? '→' : _ref$delimiter,
+    delimiter = _ref.delimiter,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiFormControlLayoutDelimited', className);
+  var isInvalid = rest.isInvalid,
+    isDisabled = rest.isDisabled,
+    readOnly = rest.readOnly;
+  var showInvalidState = isInvalid && !isDisabled && !readOnly;
+  var classes = classNames('euiFormControlLayoutDelimited', className, {
+    'euiFormControlLayoutDelimited--isInvalid': showInvalidState
+  });
   return ___EmotionJSX(EuiFormControlLayout, _extends({
-    className: classes
-  }, rest), addClassesToControl(startControl), ___EmotionJSX(EuiText, {
-    className: "euiFormControlLayoutDelimited__delimeter",
-    size: "s",
-    color: "subdued"
-  }, delimiter), addClassesToControl(endControl));
+    className: classes,
+    iconsPosition: "static"
+  }, rest), addClassesToControl(startControl), ___EmotionJSX(EuiFormControlDelimiter, {
+    delimiter: delimiter,
+    isInvalid: showInvalidState
+  }), addClassesToControl(endControl));
 };
 EuiFormControlLayoutDelimited.propTypes = {
   /**
@@ -48,8 +55,21 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: PropTypes.node,
   className: PropTypes.string
 };
-function addClassesToControl(control) {
+var addClassesToControl = function addClassesToControl(control) {
   return /*#__PURE__*/cloneElement(control, {
     className: classNames(control.props.className, 'euiFormControlLayoutDelimited__input')
   });
-}
+};
+var EuiFormControlDelimiter = function EuiFormControlDelimiter(_ref2) {
+  var delimiter = _ref2.delimiter,
+    isInvalid = _ref2.isInvalid;
+  var defaultAriaLabel = useEuiI18n('euiFormControlLayoutDelimited.delimiterLabel', 'to');
+  return ___EmotionJSX(EuiText, {
+    className: "euiFormControlLayoutDelimited__delimiter",
+    size: "s",
+    color: isInvalid ? 'danger' : 'subdued'
+  }, delimiter !== null && delimiter !== void 0 ? delimiter : ___EmotionJSX(EuiIcon, {
+    type: "sortRight",
+    "aria-label": defaultAriaLabel
+  }));
+};

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

@@ -23,8 +23,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
  * Side Public License, v 1.
  */
 
-import React, { Fragment, Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from "prop-types";
+import classNames from 'classnames';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
 import { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';
@@ -45,30 +46,19 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-        icon = _this$props.icon,
-        isInvalid = _this$props.isInvalid,
-        isDropdown = _this$props.isDropdown;
-      var iconSide = isIconShape(icon) && icon.side ? icon.side : 'left';
+        _this$props$side = _this$props.side,
+        side = _this$props$side === void 0 ? 'left' : _this$props$side,
+        _this$props$iconsPosi = _this$props.iconsPosition,
+        iconsPosition = _this$props$iconsPosi === void 0 ? 'absolute' : _this$props$iconsPosi;
       var customIcon = this.renderCustomIcon();
       var loadingSpinner = this.renderLoadingSpinner();
       var clearButton = this.renderClearButton();
       var invalidIcon = this.renderInvalidIcon();
       var dropdownIcon = this.renderDropdownIcon();
-      var leftIcons;
-      if (customIcon && iconSide === 'left') {
-        leftIcons = ___EmotionJSX("div", {
-          className: "euiFormControlLayoutIcons"
-        }, customIcon);
-      }
-      var rightIcons;
-
-      // If the icon is on the right, it should be placed after the clear button in the DOM.
-      if (clearButton || loadingSpinner || isInvalid || isDropdown || customIcon && iconSide === 'right') {
-        rightIcons = ___EmotionJSX("div", {
-          className: "euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        }, clearButton, loadingSpinner, invalidIcon, iconSide === 'right' ? customIcon : undefined, dropdownIcon);
-      }
-      return ___EmotionJSX(Fragment, null, leftIcons, rightIcons);
+      var classes = classNames('euiFormControlLayoutIcons', "euiFormControlLayoutIcons--".concat(side), "euiFormControlLayoutIcons--".concat(iconsPosition));
+      return ___EmotionJSX("div", {
+        className: classes
+      }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
     }
   }, {
     key: "renderCustomIcon",
@@ -157,6 +147,8 @@ EuiFormControlLayoutIcons.propTypes = {
     color: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.any.isRequired]),
     ref: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.func.isRequired])
   }).isRequired]),
+  side: PropTypes.any,
+  iconsPosition: PropTypes.oneOf(["absolute", "static"]),
   clear: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,

package/es/components/form/range/dual_range.js

@@ -397,7 +397,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var min = minProps;
       var max = maxProps;
       var id = this.state.id;
-      var digitTolerance = Math.max(String(min).length, String(max).length);
       var showInputOnly = showInput === 'inputWithPopover';
       var canShowDropdown = showInputOnly && !readOnly && !disabled;
       var rangeStyles = euiRangeStyles(theme);
@@ -408,7 +407,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         "aria-label": this.props['aria-label']
       }, minInputProps, {
         // Non-overridable props
-        digitTolerance: digitTolerance,
         side: "min",
         min: min,
         max: Number(this.upperValue),
@@ -437,7 +435,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         "aria-label": this.props['aria-label']
       }, maxInputProps, {
         // Non-overridable props
-        digitTolerance: digitTolerance,
         side: "max",
         min: Number(this.lowerValue),
         max: max,
@@ -589,7 +586,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           readOnly: readOnly,
           append: append,
           prepend: prepend,
-          isLoading: isLoading
+          isLoading: isLoading,
+          isInvalid: isInvalid
         }),
         fullWidth: fullWidth,
         isOpen: this.state.isPopoverOpen,