@elastic/eui 77.1.1 → 77.2.0

package/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -205,6 +205,36 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         _this.asyncInterval = new _async_interval.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 (0, _react2.jsx)(_quick_select_popover.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,
@@ -214,24 +244,47 @@ 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 ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
+        refreshInterval: refreshInterval,
+        isDisabled: isDisabled,
+        isPaused: isPaused,
+        onRefreshChange: _this.onRefreshChange,
+        shortHand: true
+      }) : undefined;
+      var formControlLayoutProps = {
+        className: (0, _classnames.default)('euiSuperDatePicker', className),
+        compressed: compressed,
+        isInvalid: isInvalid,
+        isLoading: isLoading && !showUpdateButton,
+        disabled: isDisabled,
+        prepend: _this.renderQuickSelect(),
+        append: autoRefreshAppend,
+        'data-test-subj': dataTestSubj
+      };
+      if (isQuickSelectOnly) {
+        return (0, _react2.jsx)(_form.EuiFormControlLayout, _extends({
+          iconsPosition: "static"
+        }, formControlLayoutProps));
+      }
       if (showPrettyDuration && !isStartDatePopoverOpen && !isEndDatePopoverOpen) {
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isCustom: true,
-          startDateControl: (0, _react2.jsx)("div", null),
-          endDateControl: (0, _react2.jsx)("div", null)
-        }, (0, _react2.jsx)("button", {
+        return (0, _react2.jsx)(_form.EuiFormControlLayout, formControlLayoutProps, (0, _react2.jsx)("button", {
           className: (0, _classnames.default)('euiSuperDatePicker__prettyFormat', {
             'euiSuperDatePicker__prettyFormat--disabled': isDisabled
           }),
@@ -248,12 +301,12 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       }
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, {
-          className: "euiDatePickerRange--inGroup",
-          iconType: false,
-          isInvalid: isInvalid,
-          disabled: isDisabled,
+        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, _extends({}, formControlLayoutProps, {
+          className: (0, _classnames.default)(formControlLayoutProps.className, {
+            'euiSuperDatePicker--needsUpdating': hasChanged && !isDisabled && !isInvalid
+          }),
           isCustom: true,
+          iconType: false,
           startDateControl: (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
             className: "euiSuperDatePicker__startPopoverButton",
             compressed: compressed,
@@ -296,15 +349,15 @@ 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,
@@ -315,12 +368,12 @@ 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 (0, _react2.jsx)(_flex.EuiFlexItem, {
         grow: false
@@ -340,52 +393,21 @@ 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 ? (0, _react2.jsx)(_auto_refresh.EuiAutoRefreshButton, {
-        className: "euiFormControlLayout__append",
-        refreshInterval: refreshInterval,
-        isDisabled: isDisabled,
-        isPaused: isPaused,
-        onRefreshChange: this.onRefreshChange,
-        shortHand: true
-      }) : undefined;
-      var quickSelect = (0, _react2.jsx)(_quick_select_popover.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 = (0, _classnames.default)('euiSuperDatePicker__flexWrapper', {
         'euiSuperDatePicker__flexWrapper--noUpdateButton': !showUpdateButton,
         'euiSuperDatePicker__flexWrapper--isAutoRefreshOnly': isAutoRefreshOnly,
@@ -406,14 +428,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         isDisabled: isDisabled,
         "data-test-subj": dataTestSubj,
         className: className
-      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFormControlLayout, {
-        className: (0, _classnames.default)('euiSuperDatePicker', className),
-        compressed: compressed,
-        isDisabled: isDisabled,
-        prepend: quickSelect,
-        append: autoRefreshAppend,
-        "data-test-subj": dataTestSubj
-      }, !isQuickSelectOnly && this.renderDatePickerRange())), this.renderUpdateButton()));
+      })) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, this.renderDatePickerRange()), this.renderUpdateButton()));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/lib/components/form/field_number/field_number.js

@@ -1,20 +1,30 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFieldNumber = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _form_control_layout = require("../form_control_layout");
+var _services = require("../../../services");
 var _validatable_control = require("../validatable_control");
-var _eui_form_context = require("../eui_form_context");
+var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
+var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _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; }
 var EuiFieldNumber = function EuiFieldNumber(props) {
@@ -40,9 +50,31 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     inputRef = props.inputRef,
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
+    _onKeyDown = props.onKeyDown,
     rest = _objectWithoutProperties(props, _excluded);
-  var numIconsClass = (0, _num_icons.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 = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isNativelyInvalid = _useState2[0],
+    setIsNativelyInvalid = _useState2[1];
+  var validityRef = (0, _react.useRef)(null);
+  var setRefs = (0, _services.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 = (0, _react.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 : (0, _num_icons.getFormControlClassNameForIconCount)({
+    isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
   });
   var classes = (0, _classnames.default)('euiFieldNumber', className, numIconsClass, {
@@ -64,7 +96,9 @@ 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;
@@ -73,7 +107,7 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     icon: icon,
     fullWidth: fullWidth,
     isLoading: isLoading,
-    isInvalid: isInvalid,
+    isInvalid: isInvalid || isNativelyInvalid,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

package/lib/components/form/field_text/field_text.js

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

package/lib/components/form/form_control_layout/form_control_layout.js

@@ -4,12 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFormControlLayout = void 0;
-Object.defineProperty(exports, "ICON_SIDES", {
-  enumerable: true,
-  get: function get() {
-    return _form_control_layout_icons.ICON_SIDES;
-  }
-});
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +11,7 @@ var _form_control_layout_icons = require("./form_control_layout_icons");
 var _form_label = require("../form_label");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,31 +36,75 @@ 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 ? (0, _react2.jsx)(_form_control_layout_icons.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 ? (0, _react2.jsx)(_form_control_layout_icons.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 = (0, _classnames.default)('euiFormControlLayout', {
         'euiFormControlLayout--fullWidth': fullWidth,
         'euiFormControlLayout--compressed': compressed,
@@ -80,19 +118,12 @@ var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
         className: classes
       }, rest), prependNodes, (0, _react2.jsx)("div", {
         className: "euiFormControlLayout__childrenWrapper"
-      }, children, (0, _react2.jsx)(_form_control_layout_icons.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;
       }
@@ -100,7 +131,7 @@ var EuiFormControlLayout = /*#__PURE__*/function (_Component) {
         return this.createFormLabel(side, nodes, inputId);
       }
       var appendNodes = _react.default.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;
     }
@@ -147,6 +178,7 @@ EuiFormControlLayout.propTypes = {
     color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
     ref: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.func.isRequired])
   }).isRequired]),
+  iconsPosition: _propTypes.default.oneOf(["absolute", "static"]),
   clear: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,

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

@@ -8,6 +8,8 @@ exports.EuiFormControlLayoutDelimited = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _i18n = require("../../i18n");
+var _icon = require("../../icon");
 var _text = require("../../text");
 var _form_control_layout = require("./form_control_layout");
 var _react2 = require("@emotion/react");
@@ -21,18 +23,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 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 = (0, _classnames.default)('euiFormControlLayoutDelimited', className);
+  var isInvalid = rest.isInvalid,
+    isDisabled = rest.isDisabled,
+    readOnly = rest.readOnly;
+  var showInvalidState = isInvalid && !isDisabled && !readOnly;
+  var classes = (0, _classnames.default)('euiFormControlLayoutDelimited', className, {
+    'euiFormControlLayoutDelimited--isInvalid': showInvalidState
+  });
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, _extends({
-    className: classes
-  }, rest), addClassesToControl(startControl), (0, _react2.jsx)(_text.EuiText, {
-    className: "euiFormControlLayoutDelimited__delimeter",
-    size: "s",
-    color: "subdued"
-  }, delimiter), addClassesToControl(endControl));
+    className: classes,
+    iconsPosition: "static"
+  }, rest), addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
+    delimiter: delimiter,
+    isInvalid: showInvalidState
+  }), addClassesToControl(endControl));
 };
 exports.EuiFormControlLayoutDelimited = EuiFormControlLayoutDelimited;
 EuiFormControlLayoutDelimited.propTypes = {
@@ -51,8 +58,21 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: _propTypes.default.node,
   className: _propTypes.default.string
 };
-function addClassesToControl(control) {
+var addClassesToControl = function addClassesToControl(control) {
   return /*#__PURE__*/(0, _react.cloneElement)(control, {
     className: (0, _classnames.default)(control.props.className, 'euiFormControlLayoutDelimited__input')
   });
-}
+};
+var EuiFormControlDelimiter = function EuiFormControlDelimiter(_ref2) {
+  var delimiter = _ref2.delimiter,
+    isInvalid = _ref2.isInvalid;
+  var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiFormControlLayoutDelimited.delimiterLabel', 'to');
+  return (0, _react2.jsx)(_text.EuiText, {
+    className: "euiFormControlLayoutDelimited__delimiter",
+    size: "s",
+    color: isInvalid ? 'danger' : 'subdued'
+  }, delimiter !== null && delimiter !== void 0 ? delimiter : (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "sortRight",
+    "aria-label": defaultAriaLabel
+  }));
+};

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ICON_SIDES = exports.EuiFormControlLayoutIcons = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _loading = require("../../loading");
 var _form_control_layout_clear_button = require("./form_control_layout_clear_button");
 var _form_control_layout_custom_icon = require("./form_control_layout_custom_icon");
@@ -47,30 +48,19 @@ 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 = (0, _react2.jsx)("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 = (0, _react2.jsx)("div", {
-          className: "euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        }, clearButton, loadingSpinner, invalidIcon, iconSide === 'right' ? customIcon : undefined, dropdownIcon);
-      }
-      return (0, _react2.jsx)(_react.Fragment, null, leftIcons, rightIcons);
+      var classes = (0, _classnames.default)('euiFormControlLayoutIcons', "euiFormControlLayoutIcons--".concat(side), "euiFormControlLayoutIcons--".concat(iconsPosition));
+      return (0, _react2.jsx)("div", {
+        className: classes
+      }, clearButton, loadingSpinner, invalidIcon, customIcon, dropdownIcon);
     }
   }, {
     key: "renderCustomIcon",
@@ -160,6 +150,8 @@ EuiFormControlLayoutIcons.propTypes = {
     color: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.any.isRequired]),
     ref: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.func.isRequired])
   }).isRequired]),
+  side: _propTypes.default.any,
+  iconsPosition: _propTypes.default.oneOf(["absolute", "static"]),
   clear: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,