@elastic/eui 89.1.0 → 91.0.0

package/optimize/es/components/datagrid/body/data_grid_row_manager.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,7 +7,8 @@
  * Side Public License, v 1.
  */
 
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback } from 'react';
+import { useUpdateEffect } from '../../../services';
 export var useRowManager = function useRowManager(_ref) {
   var innerGridRef = _ref.innerGridRef,
     rowClasses = _ref.rowClasses;
@@ -20,14 +22,12 @@ export var useRowManager = function useRowManager(_ref) {
     if (rowElement == null) {
       rowElement = document.createElement('div');
       rowElement.setAttribute('role', 'row');
-      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, affected by sorting/pagination
-      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex); // Affected by sorting/pagination
+      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, not affected by sorting/pagination
       rowElement.classList.add('euiDataGridRow');
       if (rowClasses !== null && rowClasses !== void 0 && rowClasses[rowIndex]) {
-        rowElement.classList.add(rowClasses[rowIndex]);
+        var _rowElement$classList;
+        (_rowElement$classList = rowElement.classList).add.apply(_rowElement$classList, _toConsumableArray(rowClasses[rowIndex].split(' ')));
       }
-      var isOddRow = visibleRowIndex % 2 !== 0;
-      if (isOddRow) rowElement.classList.add('euiDataGridRow--striped');
       rowElement.style.position = 'absolute';
       rowElement.style.left = '0';
       rowElement.style.right = '0';
@@ -56,6 +56,17 @@ export var useRowManager = function useRowManager(_ref) {
       });
     }
 
+    // Ensure the row's visible row index & striping update correctly on sort & pagination
+    if (rowElement.dataset.gridVisibleRowIndex !== String(visibleRowIndex)) {
+      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex);
+      var isOddRow = visibleRowIndex % 2 !== 0;
+      if (isOddRow) {
+        rowElement.classList.add('euiDataGridRow--striped');
+      } else {
+        rowElement.classList.remove('euiDataGridRow--striped');
+      }
+    }
+
     // Ensure that the row's dimensions are always correct by having each cell update position styles
     rowElement.style.top = top;
     rowElement.style.height = "".concat(height, "px");
@@ -63,13 +74,16 @@ export var useRowManager = function useRowManager(_ref) {
   }, [rowClasses, innerGridRef]);
 
   // Update row classes dynamically whenever a new prop is passed in
-  useEffect(function () {
+  useUpdateEffect(function () {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
+        var euiClasses = Array.from(rowElement.classList).filter(function (className) {
+          return className.startsWith('euiDataGridRow');
+        }).join(' ');
         if (rowClasses[rowIndex]) {
-          rowElement.classList.value = "euiDataGridRow ".concat(rowClasses[rowIndex]);
+          rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);
         } else {
-          rowElement.classList.value = 'euiDataGridRow'; // Clear any added classes
+          rowElement.classList.value = euiClasses; // Clear any added classes
         }
       });
     }

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -99,7 +99,7 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     title: displayAsText || id
   }, display || displayAsText || id), sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiPopover, _extends({
     className: "eui-fullWidth",
-    anchorClassName: "eui-fullWidth",
+    display: "block",
     panelPaddingSize: "none",
     offset: 7,
     button: ___EmotionJSX("button", {

package/optimize/es/components/datagrid/controls/column_selector.js

@@ -113,7 +113,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         return setIsOpen(!isOpen);
       }
     }, buttonText)
-  }, ___EmotionJSX("div", null, allowColumnHiding && ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
+  }, allowColumnHiding && ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
     tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
     defaults: ['Search', 'Search columns']
   }, function (_ref3) {
@@ -130,13 +130,12 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       },
       "data-test-subj": "dataGridColumnSelectorSearch"
     });
-  })), ___EmotionJSX("div", {
-    className: "euiDataGrid__controlScroll"
-  }, ___EmotionJSX(EuiDragDropContext, {
+  })), ___EmotionJSX(EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, ___EmotionJSX(EuiDroppable, {
     droppableId: "columnOrder",
-    isDropDisabled: !isDragEnabled
+    isDropDisabled: !isDragEnabled,
+    className: "euiDataGrid__controlScroll"
   }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
     return ___EmotionJSX(EuiDraggable, {
       key: id,
@@ -189,7 +188,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         color: "subdued"
       }))));
     });
-  })))))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
+  })))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
     gutterSize: "s",
     responsive: false,
     justifyContent: "spaceBetween"

package/optimize/es/components/datagrid/controls/column_sorting.js

@@ -9,7 +9,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import classNames from 'classnames';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { EuiButtonEmpty } from '../../button';
 import { EuiDragDropContext, euiDragDropReorder, EuiDroppable } from '../../drag_and_drop';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
@@ -120,15 +120,12 @@ export var useDataGridColumnSorting = function useDataGridColumnSorting(columns,
         return setIsOpen(!isOpen);
       }
     }, sorting.columns.length > 0 ? sortingButtonTextActive : sortingButtonText)
-  }, sorting.columns.length > 0 ? ___EmotionJSX("div", {
-    role: "region",
-    "aria-live": "assertive",
-    className: "euiDataGrid__controlScroll"
-  }, ___EmotionJSX(EuiDragDropContext, {
+  }, sorting.columns.length > 0 ? ___EmotionJSX(EuiDragDropContext, {
     onDragEnd: onDragEnd
   }, ___EmotionJSX(EuiDroppable, {
-    droppableId: "columnSorting"
-  }, ___EmotionJSX(Fragment, null, sorting.columns.map(function (_ref6, index) {
+    droppableId: "columnSorting",
+    className: "euiDataGrid__controlScroll"
+  }, ___EmotionJSX(React.Fragment, null, sorting.columns.map(function (_ref6, index) {
     var id = _ref6.id,
       direction = _ref6.direction;
     return ___EmotionJSX(EuiDataGridColumnSortingDraggable, {
@@ -141,7 +138,7 @@ export var useDataGridColumnSorting = function useDataGridColumnSorting(columns,
       schema: schema,
       schemaDetectors: schemaDetectors
     });
-  }))))) : ___EmotionJSX(EuiText, {
+  })))) : ___EmotionJSX(EuiText, {
     size: "s",
     color: "subdued"
   }, ___EmotionJSX("p", {

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -73,6 +73,7 @@ var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSel
   }
   return rowHeightButtonOptions[0];
 };
+var defaultLineCountValue = String(2);
 export var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
   var _showDisplaySelector$, _rowHeightsOptions$de2;
   var _useState = useState(false),
@@ -100,10 +101,10 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
   }, []);
 
   // Row height logic
-  var _useState7 = useState(2),
+  var _useState7 = useState(defaultLineCountValue),
     _useState8 = _slicedToArray(_useState7, 2),
-    lineCount = _useState8[0],
-    setLineCount = _useState8[1];
+    lineCountInput = _useState8[0],
+    setLineCountInput = _useState8[1];
   var setRowHeight = useCallback(function (option) {
     var rowHeightsOptions = {
       rowHeights: {} // Unset all row-specific heights
@@ -113,25 +114,27 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       rowHeightsOptions.defaultHeight = 'auto';
     } else if (option === 'lineCount') {
       rowHeightsOptions.defaultHeight = {
-        lineCount: lineCount
+        lineCount: Number(lineCountInput)
       };
     } else {
       rowHeightsOptions.defaultHeight = undefined;
     }
     setUserRowHeightsOptions(rowHeightsOptions);
-  }, [lineCount]);
+  }, [lineCountInput]);
   var setLineCountHeight = useCallback(function (event) {
+    setLineCountInput(event.currentTarget.value);
     var newLineCount = Number(event.currentTarget.value);
-    if (newLineCount < 1) return; // Don't let users set a 0 or negative line count
 
-    setLineCount(newLineCount);
-    setUserRowHeightsOptions({
-      rowHeights: {},
-      // Unset all row-specific line counts
-      defaultHeight: {
-        lineCount: newLineCount
-      }
-    });
+    // Don't let users set a 0 or negative line count
+    if (newLineCount > 0) {
+      setUserRowHeightsOptions({
+        rowHeights: {},
+        // Unset all row-specific line counts
+        defaultHeight: {
+          lineCount: newLineCount
+        }
+      });
+    }
   }, []);
 
   // Merge the developer-specified configurations with user overrides
@@ -151,8 +154,9 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
   }, [rowHeightsOptions]);
   useEffect(function () {
     var _rowHeightsOptions$de;
+    setLineCountInput(
     // @ts-ignore - optional chaining operator handles types & cases that aren't lineCount
-    setLineCount((rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : (_rowHeightsOptions$de = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de === void 0 ? void 0 : _rowHeightsOptions$de.lineCount) || 2);
+    (rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : (_rowHeightsOptions$de = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de === void 0 ? void 0 : _rowHeightsOptions$de.lineCount) || defaultLineCountValue);
     // @ts-ignore - same as above
   }, [rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : (_rowHeightsOptions$de2 = rowHeightsOptions.defaultHeight) === null || _rowHeightsOptions$de2 === void 0 ? void 0 : _rowHeightsOptions$de2.lineCount]);
 
@@ -284,7 +288,8 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       min: 1,
       max: 20,
       step: 1,
-      value: lineCount,
+      required: true,
+      value: lineCountInput,
       onChange: setLineCountHeight,
       "data-test-subj": "lineCountNumber"
     })));

package/optimize/es/components/datagrid/data_grid.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import classNames from 'classnames';
-import React, { forwardRef, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useMemo, useRef, useState, memo } from 'react';
 import { useGeneratedHtmlId } from '../../services';
 import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
@@ -66,7 +66,7 @@ var cellPaddingsToClassMap = {
   m: '',
   l: 'euiDataGrid--paddingLarge'
 };
-export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
+export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var _gridItemsRendered$cu;
   var _props$leadingControl = props.leadingControlColumns,
     leadingControlColumns = _props$leadingControl === void 0 ? emptyControlColumns : _props$leadingControl,
@@ -383,5 +383,5 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
     token: "euiDataGrid.screenReaderNotice",
     default: "Cell contains interactive content."
   }))))), cellPopover));
-});
+}));
 EuiDataGrid.displayName = 'EuiDataGrid';

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -19,52 +20,99 @@ import React, { Component } from 'react';
 import moment from 'moment'; // eslint-disable-line import/named
 
 import dateMath from '@elastic/datemath';
-import { EuiDatePicker } from '../../date_picker';
+import { keys } from '../../../../services';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { EuiCode } from '../../../code';
 import { EuiI18n } from '../../../i18n';
+import { EuiDatePicker } from '../../date_picker';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// Allow users to paste in and have the datepicker parse multiple common date formats,
+// in addition to the configured displayed `dateFormat` prop
+var ALLOWED_USER_DATE_FORMATS = [moment.ISO_8601, moment.RFC_2822, 'X' // Unix timestamp in seconds
+];
+
 export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
   _inherits(EuiAbsoluteTab, _Component);
   var _super = _createSuper(EuiAbsoluteTab);
+  // Store outside of state as a ref for faster/unbatched updates
+
   function EuiAbsoluteTab(props) {
     var _this;
     _classCallCheck(this, EuiAbsoluteTab);
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "state", void 0);
-    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date, event) {
+    _defineProperty(_assertThisInitialized(_this), "isParsing", false);
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (date) {
       var onChange = _this.props.onChange;
       if (date === null) {
         return;
       }
-      onChange(date.toISOString(), event);
+      onChange(date.toISOString());
       var valueAsMoment = moment(date);
       _this.setState({
         valueAsMoment: valueAsMoment,
         textInputValue: valueAsMoment.format(_this.props.dateFormat),
+        hasUnparsedText: false,
         isTextInvalid: false
       });
     });
     _defineProperty(_assertThisInitialized(_this), "handleTextChange", function (event) {
-      var onChange = _this.props.onChange;
-      var valueAsMoment = moment(event.target.value, _this.props.dateFormat, true);
-      var dateIsValid = valueAsMoment.isValid();
-      if (dateIsValid) {
-        onChange(valueAsMoment.toISOString(), event);
-      }
+      if (_this.isParsing) return;
       _this.setState({
         textInputValue: event.target.value,
-        isTextInvalid: !dateIsValid,
-        valueAsMoment: dateIsValid ? valueAsMoment : null
+        hasUnparsedText: true,
+        isTextInvalid: false
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "parseUserDateInput", function (textInputValue) {
+      _this.isParsing = true;
+      // Wait a tick for state to finish updating (whatever gets returned),
+      // and then allow `onChange` user input to continue setting state
+      requestAnimationFrame(function () {
+        _this.isParsing = false;
+      });
+      var invalidDateState = {
+        textInputValue: textInputValue,
+        isTextInvalid: true,
+        valueAsMoment: null
+      };
+      if (!textInputValue) {
+        return _this.setState(invalidDateState);
+      }
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        dateFormat = _this$props.dateFormat;
+
+      // Attempt to parse with passed `dateFormat`
+      var valueAsMoment = moment(textInputValue, dateFormat, true);
+      var dateIsValid = valueAsMoment.isValid();
+
+      // If not valid, try a few other other standardized formats
+      if (!dateIsValid) {
+        valueAsMoment = moment(textInputValue, ALLOWED_USER_DATE_FORMATS, true);
+        dateIsValid = valueAsMoment.isValid();
+      }
+      if (dateIsValid) {
+        onChange(valueAsMoment.toISOString());
+        _this.setState({
+          textInputValue: valueAsMoment.format(_this.props.dateFormat),
+          valueAsMoment: valueAsMoment,
+          hasUnparsedText: false,
+          isTextInvalid: false
+        });
+      } else {
+        _this.setState(invalidDateState);
+      }
+    });
     var parsedValue = dateMath.parse(props.value, {
       roundUp: props.roundUp
     });
     var _valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : moment();
-    var textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
+    var _textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
     _this.state = {
+      hasUnparsedText: false,
       isTextInvalid: false,
-      textInputValue: textInputValue,
+      textInputValue: _textInputValue,
       valueAsMoment: _valueAsMoment
     };
     return _this;
@@ -73,17 +121,18 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        dateFormat = _this$props.dateFormat,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        utcOffset = _this$props.utcOffset,
-        labelPrefix = _this$props.labelPrefix;
+      var _this$props2 = this.props,
+        dateFormat = _this$props2.dateFormat,
+        timeFormat = _this$props2.timeFormat,
+        locale = _this$props2.locale,
+        utcOffset = _this$props2.utcOffset,
+        labelPrefix = _this$props2.labelPrefix;
       var _this$state = this.state,
         valueAsMoment = _this$state.valueAsMoment,
         isTextInvalid = _this$state.isTextInvalid,
+        hasUnparsedText = _this$state.hasUnparsedText,
         textInputValue = _this$state.textInputValue;
-      return ___EmotionJSX("div", null, ___EmotionJSX(EuiDatePicker, {
+      return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiDatePicker, {
         inline: true,
         showTimeSelect: true,
         shadow: false,
@@ -94,22 +143,34 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), ___EmotionJSX(EuiI18n, {
-        token: "euiAbsoluteTab.dateFormatError",
-        default: "Expected format: {dateFormat}",
+        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
-          dateFormat: dateFormat
+          dateFormat: ___EmotionJSX(EuiCode, null, dateFormat)
         }
-      }, function (dateFormatError) {
+      }, function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          dateFormatHint = _ref2[0],
+          dateFormatError = _ref2[1];
         return ___EmotionJSX(EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
-          error: isTextInvalid ? dateFormatError : undefined
+          error: isTextInvalid ? dateFormatError : undefined,
+          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
         }, ___EmotionJSX(EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
           value: textInputValue,
           onChange: _this2.handleTextChange,
-          "data-test-subj": 'superDatePickerAbsoluteDateInput',
+          onPaste: function onPaste(event) {
+            _this2.parseUserDateInput(event.clipboardData.getData('text'));
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === keys.ENTER) {
+              _this2.parseUserDateInput(textInputValue);
+            }
+          },
+          "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: ___EmotionJSX(EuiFormLabel, null, labelPrefix)
         }));
       }));

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

@@ -79,8 +79,7 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     button: quickSelectButton,
     isOpen: isOpen,
     closePopover: closePopover,
-    anchorPosition: "downLeft",
-    anchorClassName: "euiQuickSelectPopover__anchor"
+    anchorPosition: "downLeft"
   }, ___EmotionJSX(EuiQuickSelectPanels, _extends({}, props, {
     applyTime: applyTime,
     prevQuickSelect: prevQuickSelect

package/optimize/es/components/filter_group/filter_group.styles.js

@@ -28,7 +28,7 @@ export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext)
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),

package/optimize/es/components/form/field_number/field_number.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 = ["className", "icon", "id", "placeholder", "name", "min", "max", "step", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp", "onBlur"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "step", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,8 +10,9 @@ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max",
  * Side Public License, v 1.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import classNames from 'classnames';
+import { useCombinedRefs } from '../../../services';
 import { EuiValidatableControl } from '../validatable_control';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -43,8 +44,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
     _onKeyUp = props.onKeyUp,
-    _onBlur = props.onBlur,
     rest = _objectWithoutProperties(props, _excluded);
+  var _inputRef = useRef(null);
+  var combinedRefs = useCombinedRefs([_inputRef, inputRef]);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
@@ -59,6 +61,13 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     var isInvalid = !inputEl.validity.valid || undefined;
     setIsNativelyInvalid(isInvalid);
   }, []);
+
+  // Re-check validity whenever props that might affect validity are updated
+  useEffect(function () {
+    if (_inputRef.current) {
+      checkNativeValidity(_inputRef.current);
+    }
+  }, [value, min, max, step, checkNativeValidity]);
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -83,18 +92,13 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: inputRef,
+    ref: combinedRefs,
     "aria-invalid": isInvalid || isNativelyInvalid,
     onKeyUp: function onKeyUp(e) {
       // Note that we can't use `onChange` because browsers don't emit change events
       // for invalid text - see https://github.com/facebook/react/issues/16554
       _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
       checkNativeValidity(e.currentTarget);
-    },
-    onBlur: function onBlur(e) {
-      // Browsers can also set/determine validity (e.g. when `step` is undefined) on focus blur
-      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
-      checkNativeValidity(e.currentTarget);
     }
   }, rest)));
   if (controlOnly) {

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

@@ -32,8 +32,10 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     isInvalid = props.isInvalid,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
-    isLoading = props.isLoading,
-    compressed = props.compressed,
+    _props$isLoading = props.isLoading,
+    isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+    _props$compressed = props.compressed,
+    compressed = _props$compressed === void 0 ? false : _props$compressed,
     _inputRef = props.inputRef,
     prepend = props.prepend,
     append = props.append,
@@ -121,9 +123,4 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     value: value,
     ref: setInputRef
   }, rest))));
-};
-EuiFieldPassword.defaultProps = {
-  value: undefined,
-  isLoading: false,
-  compressed: false
 };