@elastic/eui 116.2.0 → 116.3.1-snapshot.1782148316870

package/es/components/date_picker/auto_refresh/refresh_interval.js

@@ -1,25 +1,15 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,14 +18,13 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
-import PropTypes from "prop-types";
-import { htmlIdGenerator } from '../../../services';
+import React, { useState } from 'react';
+import { useGeneratedHtmlId } from '../../../services';
 import { EuiI18n } from '../../i18n';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
 import { EuiScreenReaderOnly } from '../../accessibility';
-import { RenderI18nTimeOptions } from '../super_date_picker/time_options';
+import { useI18nTimeOptions } from '../super_date_picker/time_options';
 import { EuiQuickSelectPanel } from '../super_date_picker/quick_select_popover/quick_select_panel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MILLISECONDS_IN_SECOND = 1000;
@@ -79,223 +68,181 @@ var getMinInterval = function getMinInterval(minInterval, unit) {
     value = _fromMilliseconds.value;
   return Math.floor(value || 0);
 };
-export var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
-  function EuiRefreshInterval() {
-    var _this;
-    _classCallCheck(this, EuiRefreshInterval);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var EuiRefreshInterval = function EuiRefreshInterval(_ref) {
+  var _ref$isPaused = _ref.isPaused,
+    isPaused = _ref$isPaused === void 0 ? true : _ref$isPaused,
+    _ref$refreshInterval = _ref.refreshInterval,
+    refreshInterval = _ref$refreshInterval === void 0 ? 1000 : _ref$refreshInterval,
+    _ref$minInterval = _ref.minInterval,
+    minInterval = _ref$minInterval === void 0 ? 0 : _ref$minInterval,
+    intervalUnits = _ref.intervalUnits,
+    onRefreshChange = _ref.onRefreshChange;
+  var _useState = useState(function () {
+      return _objectSpread(_objectSpread({}, fromMilliseconds(refreshInterval || 0, intervalUnits)), {}, {
+        min: getMinInterval(minInterval, intervalUnits)
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var refreshSelectionId = useGeneratedHtmlId({
+    prefix: 'euiRefreshInterval'
+  });
+  var _useI18nTimeOptions = useI18nTimeOptions(),
+    refreshUnitsOptions = _useI18nTimeOptions.refreshUnitsOptions;
+  var applyRefreshInterval = function applyRefreshInterval(nextState) {
+    var units = nextState.units,
+      value = nextState.value;
+    if (value === '') {
+      return;
     }
-    _this = _callSuper(this, EuiRefreshInterval, [].concat(args));
-    _defineProperty(_this, "state", _objectSpread(_objectSpread({}, fromMilliseconds(_this.props.refreshInterval || 0, _this.props.intervalUnits)), {}, {
-      min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
-    }));
-    _defineProperty(_this, "generateId", htmlIdGenerator());
-    _defineProperty(_this, "refreshSelectionId", _this.generateId());
-    _defineProperty(_this, "onValueChange", function (event) {
-      var sanitizedValue = parseFloat(event.target.value);
-      _this.setState({
-        value: isNaN(sanitizedValue) ? '' : sanitizedValue
-      }, _this.applyRefreshInterval);
-    });
-    _defineProperty(_this, "onUnitsChange", function (event) {
-      var units = event.target.value;
-      _this.setState({
-        units: units,
-        min: getMinInterval(_this.props.minInterval, units)
-      }, _this.applyRefreshInterval);
-    });
-    _defineProperty(_this, "startRefresh", function () {
-      var onRefreshChange = _this.props.onRefreshChange;
-      var _this$state = _this.state,
-        value = _this$state.value,
-        units = _this$state.units;
-      if (value !== '' && value > 0 && onRefreshChange !== undefined) {
-        onRefreshChange({
-          refreshInterval: toMilliseconds(units, value),
-          intervalUnits: units,
-          isPaused: false
-        });
-      }
+    if (!onRefreshChange) {
+      return;
+    }
+    var refreshIntervalMs = Math.max(toMilliseconds(units, value), minInterval || 0);
+    onRefreshChange({
+      refreshInterval: refreshIntervalMs,
+      intervalUnits: units,
+      isPaused: refreshIntervalMs <= 0 ? true : !!isPaused
     });
-    _defineProperty(_this, "handleKeyDown", function (_ref) {
-      var key = _ref.key;
-      if (key === 'Enter') {
-        _this.startRefresh();
-      }
+  };
+  var onValueChange = function onValueChange(event) {
+    var sanitizedValue = parseFloat(event.target.value);
+    var newValue = isNaN(sanitizedValue) ? '' : sanitizedValue;
+    var nextState = _objectSpread(_objectSpread({}, state), {}, {
+      value: newValue
     });
-    _defineProperty(_this, "applyRefreshInterval", function () {
-      var _this$props = _this.props,
-        onRefreshChange = _this$props.onRefreshChange,
-        isPaused = _this$props.isPaused,
-        minInterval = _this$props.minInterval;
-      var _this$state2 = _this.state,
-        units = _this$state2.units,
-        value = _this$state2.value;
-      if (value === '') {
-        return;
-      }
-      if (!onRefreshChange) {
-        return;
-      }
-      var refreshInterval = Math.max(toMilliseconds(units, value), minInterval || 0);
-      onRefreshChange({
-        refreshInterval: refreshInterval,
-        intervalUnits: units,
-        isPaused: refreshInterval <= 0 ? true : !!isPaused
-      });
+    setState(nextState);
+    applyRefreshInterval(nextState);
+  };
+  var onUnitsChange = function onUnitsChange(event) {
+    var units = event.target.value;
+    var nextState = _objectSpread(_objectSpread({}, state), {}, {
+      units: units,
+      min: getMinInterval(minInterval, units)
     });
-    _defineProperty(_this, "toggleRefresh", function () {
-      var _this$props2 = _this.props,
-        onRefreshChange = _this$props2.onRefreshChange,
-        isPaused = _this$props2.isPaused;
-      var _this$state3 = _this.state,
-        units = _this$state3.units,
-        value = _this$state3.value;
-      if (!onRefreshChange || value === '') {
-        return;
-      }
+    setState(nextState);
+    applyRefreshInterval(nextState);
+  };
+  var startRefresh = function startRefresh() {
+    var value = state.value,
+      units = state.units;
+    if (value !== '' && value > 0 && onRefreshChange !== undefined) {
       onRefreshChange({
         refreshInterval: toMilliseconds(units, value),
         intervalUnits: units,
-        isPaused: !isPaused
+        isPaused: false
       });
+    }
+  };
+  var handleKeyDown = function handleKeyDown(_ref2) {
+    var key = _ref2.key;
+    if (key === 'Enter') {
+      startRefresh();
+    }
+  };
+  var toggleRefresh = function toggleRefresh() {
+    if (!onRefreshChange || state.value === '') {
+      return;
+    }
+    var units = state.units,
+      value = state.value;
+    onRefreshChange({
+      refreshInterval: toMilliseconds(units, value),
+      intervalUnits: units,
+      isPaused: !isPaused
     });
-    _defineProperty(_this, "renderScreenReaderText", function (refreshUnitsOptions) {
-      var isPaused = _this.props.isPaused;
-      var _this$state4 = _this.state,
-        value = _this$state4.value,
-        units = _this$state4.units;
-      var options = refreshUnitsOptions.find(function (_ref2) {
-        var value = _ref2.value;
-        return value === units;
-      });
-      var optionText = options ? options.text : '';
-      var fullDescription = isPaused ? ___EmotionJSX(EuiI18n, {
-        token: "euiRefreshInterval.fullDescriptionOff",
-        default: "Refresh is off, interval set to {optionValue} {optionText}.",
-        values: {
-          optionValue: value,
-          optionText: optionText
-        }
-      }) : ___EmotionJSX(EuiI18n, {
-        token: "euiRefreshInterval.fullDescriptionOn",
-        default: "Refresh is on, interval set to {optionValue} {optionText}.",
-        values: {
-          optionValue: value,
-          optionText: optionText
-        }
-      });
-      return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-        id: _this.refreshSelectionId
-      }, fullDescription));
+  };
+  var renderScreenReaderText = function renderScreenReaderText() {
+    var value = state.value,
+      units = state.units;
+    var options = refreshUnitsOptions.find(function (_ref3) {
+      var value = _ref3.value;
+      return value === units;
     });
-    return _this;
-  }
-  _inherits(EuiRefreshInterval, _Component);
-  return _createClass(EuiRefreshInterval, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var isPaused = this.props.isPaused;
-      var _this$state5 = this.state,
-        value = _this$state5.value,
-        units = _this$state5.units,
-        min = _this$state5.min;
-      return ___EmotionJSX(EuiI18n, {
-        tokens: ['euiRefreshInterval.toggleLabel', 'euiRefreshInterval.toggleAriaLabel', 'euiRefreshInterval.valueAriaLabel', 'euiRefreshInterval.unitsAriaLabel'],
-        defaults: ['Refresh every', 'Toggle refresh', 'Refresh interval value', 'Refresh interval units']
-      }, function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 4),
-          toggleLabel = _ref4[0],
-          toggleAriaLabel = _ref4[1],
-          valueAriaLabel = _ref4[2],
-          unitsAriaLabel = _ref4[3];
-        return ___EmotionJSX(RenderI18nTimeOptions, null, function (_ref5) {
-          var refreshUnitsOptions = _ref5.refreshUnitsOptions;
-          return ___EmotionJSX(EuiQuickSelectPanel, null, ___EmotionJSX(EuiFlexGroup, {
-            alignItems: "center",
-            gutterSize: "s",
-            responsive: false,
-            wrap: true
-          }, ___EmotionJSX(EuiFlexItem, {
-            grow: false
-          }, ___EmotionJSX(EuiSwitch, {
-            "data-test-subj": "superDatePickerToggleRefreshButton",
-            checked: !isPaused,
-            onChange: _this2.toggleRefresh,
-            compressed: true
-            // The IDs attached to this visible label are unused - we override with our own aria-label
-            ,
-            label: ___EmotionJSX(EuiFormLabel, null, toggleLabel),
-            "aria-label": toggleAriaLabel,
-            "aria-labelledby": undefined,
-            "aria-describedby": _this2.refreshSelectionId
-          })), ___EmotionJSX(EuiFlexItem, {
-            style: {
-              minWidth: 60
-            }
-          }, ___EmotionJSX(EuiFieldNumber, {
-            compressed: true,
-            fullWidth: true,
-            value: value,
-            min: min,
-            onChange: _this2.onValueChange,
-            onKeyDown: _this2.handleKeyDown,
-            isInvalid: !isPaused && (value === '' || value <= 0),
-            disabled: isPaused,
-            "aria-label": valueAriaLabel,
-            "aria-describedby": _this2.refreshSelectionId,
-            "data-test-subj": "superDatePickerRefreshIntervalInput"
-          })), ___EmotionJSX(EuiFlexItem, {
-            style: {
-              minWidth: 100
-            },
-            grow: 2
-          }, ___EmotionJSX(EuiSelect, {
-            compressed: true,
-            fullWidth: true,
-            "aria-label": unitsAriaLabel,
-            "aria-describedby": _this2.refreshSelectionId,
-            value: units,
-            disabled: isPaused,
-            options: refreshUnitsOptions,
-            onChange: _this2.onUnitsChange,
-            onKeyDown: _this2.handleKeyDown,
-            "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
-          }))), _this2.renderScreenReaderText(refreshUnitsOptions));
-        });
-      });
-    }
-  }]);
-}(Component);
-_defineProperty(EuiRefreshInterval, "defaultProps", {
-  isPaused: true,
-  refreshInterval: 1000,
-  minInterval: 0
-});
-EuiRefreshInterval.propTypes = {
-  /**
-     * Is refresh paused or running.
-     */
-  isPaused: PropTypes.bool,
-  /**
-     * Refresh interval in milliseconds.
-     */
-  refreshInterval: PropTypes.number,
-  /**
-     * Allows specifying a minimum interval in milliseconds
-     */
-  minInterval: PropTypes.number,
-  /**
-     * By default, refresh interval units will be rounded up to next largest unit of time
-     * (for example, 90 seconds will become 2m).
-     *
-     * If you do not want this behavior, you can manually control the rendered unit via this prop.
-     */
-  intervalUnits: PropTypes.any,
-  /**
-     * Passes back the updated state of `isPaused`, `refreshInterval`, and `intervalUnits`.
-     */
-  onRefreshChange: PropTypes.func.isRequired
-};
+    var optionText = options ? options.text : '';
+    var fullDescription = isPaused ? ___EmotionJSX(EuiI18n, {
+      token: "euiRefreshInterval.fullDescriptionOff",
+      default: "Refresh is off, interval set to {optionValue} {optionText}.",
+      values: {
+        optionValue: value,
+        optionText: optionText
+      }
+    }) : ___EmotionJSX(EuiI18n, {
+      token: "euiRefreshInterval.fullDescriptionOn",
+      default: "Refresh is on, interval set to {optionValue} {optionText}.",
+      values: {
+        optionValue: value,
+        optionText: optionText
+      }
+    });
+    return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+      id: refreshSelectionId
+    }, fullDescription));
+  };
+  var value = state.value,
+    units = state.units,
+    min = state.min;
+  return ___EmotionJSX(EuiI18n, {
+    tokens: ['euiRefreshInterval.toggleLabel', 'euiRefreshInterval.toggleAriaLabel', 'euiRefreshInterval.valueAriaLabel', 'euiRefreshInterval.unitsAriaLabel'],
+    defaults: ['Refresh every', 'Toggle refresh', 'Refresh interval value', 'Refresh interval units']
+  }, function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 4),
+      toggleLabel = _ref5[0],
+      toggleAriaLabel = _ref5[1],
+      valueAriaLabel = _ref5[2],
+      unitsAriaLabel = _ref5[3];
+    return ___EmotionJSX(EuiQuickSelectPanel, null, ___EmotionJSX(EuiFlexGroup, {
+      alignItems: "center",
+      gutterSize: "s",
+      responsive: false,
+      wrap: true
+    }, ___EmotionJSX(EuiFlexItem, {
+      grow: false
+    }, ___EmotionJSX(EuiSwitch, {
+      "data-test-subj": "superDatePickerToggleRefreshButton",
+      checked: !isPaused,
+      onChange: toggleRefresh,
+      compressed: true
+      // The IDs attached to this visible label are unused - we override with our own aria-label
+      ,
+      label: ___EmotionJSX(EuiFormLabel, null, toggleLabel),
+      "aria-label": toggleAriaLabel,
+      "aria-labelledby": undefined,
+      "aria-describedby": refreshSelectionId
+    })), ___EmotionJSX(EuiFlexItem, {
+      style: {
+        minWidth: 60
+      }
+    }, ___EmotionJSX(EuiFieldNumber, {
+      compressed: true,
+      fullWidth: true,
+      value: value,
+      min: min,
+      onChange: onValueChange,
+      onKeyDown: handleKeyDown,
+      isInvalid: !isPaused && (value === '' || value <= 0),
+      disabled: isPaused,
+      "aria-label": valueAriaLabel,
+      "aria-describedby": refreshSelectionId,
+      "data-test-subj": "superDatePickerRefreshIntervalInput"
+    })), ___EmotionJSX(EuiFlexItem, {
+      style: {
+        minWidth: 100
+      },
+      grow: 2
+    }, ___EmotionJSX(EuiSelect, {
+      compressed: true,
+      fullWidth: true,
+      "aria-label": unitsAriaLabel,
+      "aria-describedby": refreshSelectionId,
+      value: units,
+      disabled: isPaused,
+      options: refreshUnitsOptions,
+      onChange: onUnitsChange,
+      onKeyDown: handleKeyDown,
+      "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
+    }))), renderScreenReaderText());
+  });
+};
+EuiRefreshInterval.displayName = 'EuiRefreshInterval';

package/es/components/date_picker/date_picker.js

@@ -134,7 +134,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     inputValidityRef = _useState2[0],

package/es/components/date_picker/react-datepicker/src/index.js

@@ -42,7 +42,7 @@ import Calendar from "./calendar";
 import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import { newDate, now, cloneDate, isMoment, isDate, isBefore, isAfter, equals, setTime, getMillisecond, getSecond, getMinute, getHour, addDays, addMonths, addWeeks, addYears, subtractDays, subtractMonths, subtractWeeks, subtractYears, isSameTime, isDayDisabled, isOutOfBounds, isDayInRange, getEffectiveMinDate, getEffectiveMaxDate, parseDate, safeDateFormat, getHightLightDaysMap, getYear, getMonth } from "./date_utils";
+import { newDate, now, cloneDate, isMoment, isDate, isBefore, isAfter, equals, setTime, getMillisecond, getSecond, getMinute, getHour, addDays, addMonths, addWeeks, addYears, subtractDays, subtractMonths, subtractWeeks, subtractYears, isSameTime, isDayDisabled, isDayInRange, getEffectiveMinDate, getEffectiveMaxDate, parseDate, safeDateFormat, getHightLightDaysMap, getYear, getMonth } from "./date_utils";
 import { EuiPopover, popoverAnchorPosition } from '../../../popover/popover';
 import { EuiFieldText } from '../../../form/field_text';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -254,10 +254,6 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_this, "setSelected", function (date, event, keepInput) {
       var changedDate = date;
       if (changedDate !== null && isDayDisabled(changedDate, _this.props)) {
-        if (isOutOfBounds(changedDate, _this.props)) {
-          _this.props.onChange(date, event);
-          _this.props.onSelect(changedDate, event);
-        }
         return;
       }
       if (changedDate !== null && _this.props.selected) {

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

@@ -22,6 +22,7 @@ import { useEuiI18n } from '../../../i18n';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
 import { EuiFlexGroup } from '../../../flex';
 import { EuiButtonIcon } from '../../../button';
+import { EuiToolTip } from '../../../tool_tip';
 import { EuiCode } from '../../../code';
 import { EuiDatePicker } from '../../date_picker';
 import { EuiTimeZoneDisplay } from './timezone_display';
@@ -180,16 +181,18 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     prepend: ___EmotionJSX(EuiFormLabel, {
       id: textInputLabelId
     }, labelPrefix)
-  })), hasUnparsedText && ___EmotionJSX(EuiButtonIcon, {
+  })), hasUnparsedText && ___EmotionJSX(EuiToolTip, {
+    content: submitButtonLabel,
+    disableScreenReaderOutput: true
+  }, ___EmotionJSX(EuiButtonIcon, {
     type: "submit",
     css: styles.euiAbsoluteTabDateForm__submit,
     size: "s",
     display: "base",
     iconType: "check",
     "aria-label": submitButtonLabel,
-    title: submitButtonLabel,
     "data-test-subj": "parseAbsoluteDateFormat"
-  })), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
+  }))), ___EmotionJSX(EuiTimeZoneDisplay, _extends({
     id: timeZomeDescriptionId
   }, timeZoneDisplayProps)));
 };

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

@@ -18,6 +18,7 @@ import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
+import { EuiToolTip } from '../../../tool_tip';
 import { useFormatTimeString } from '../pretty_duration';
 import { EuiDatePopoverContent } from './date_popover_content';
 import { euiDatePopoverButtonStyles } from './date_popover_button.styles';
@@ -72,16 +73,23 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
   } else if (needsUpdating) {
     title = outdatedTitle;
   }
-  var button = ___EmotionJSX("button", _extends({
+  var rawButton = ___EmotionJSX("button", _extends({
     type: "button",
     onClick: onPopoverToggle,
     className: classes,
-    title: title,
     disabled: isDisabled,
     "data-test-subj": "superDatePicker".concat(position, "DatePopoverButton")
   }, buttonProps, {
     css: cssStyles
   }), formattedValue);
+  var button = title ? ___EmotionJSX(EuiToolTip, {
+    content: title,
+    display: "block",
+    disableScreenReaderOutput: !isInvalid && !needsUpdating,
+    anchorProps: {
+      css: styles.tooltipAnchor
+    }
+  }, rawButton) : rawButton;
   return ___EmotionJSX(EuiPopover, _extends({
     button: button,
     isOpen: isOpen,

package/es/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -21,7 +21,8 @@ var _ref = process.env.NODE_ENV === "production" ? {
 export var euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
     euiDatePopoverButton: /*#__PURE__*/css(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;"),
-    now: _ref
+    now: _ref,
+    tooltipAnchor: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", logicalCSS('width', '100%'), ";;label:tooltipAnchor;")
   };
 };
 export var _buttonStyles = function _buttonStyles(euiThemeContext) {

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

@@ -23,6 +23,7 @@ import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
 import { EuiFormPrepend } from '../../../form';
+import { EuiToolTip } from '../../../tool_tip';
 import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
 import { EuiQuickSelectPanel } from './quick_select_panel';
 import { EuiQuickSelect } from './quick_select';
@@ -70,21 +71,23 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
       closePopover();
     }
   }, [_applyTime, closePopover]);
-  var buttonlabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+  var buttonLabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
   var quickSelectButtonOnClick = function quickSelectButtonOnClick(e) {
     togglePopover();
     buttonOnClick === null || buttonOnClick === void 0 || buttonOnClick(e);
   };
-  var quickSelectButton = ___EmotionJSX(EuiFormPrepend, _extends({
+  var quickSelectButton = ___EmotionJSX(EuiToolTip, {
+    content: buttonLabel,
+    disableScreenReaderOutput: true
+  }, ___EmotionJSX(EuiFormPrepend, _extends({
     element: "button",
     iconLeft: "calendar",
     iconRight: "chevronSingleDown",
     isDisabled: props.isDisabled,
     onClick: quickSelectButtonOnClick,
-    "aria-label": buttonlabel,
-    title: buttonlabel,
+    "aria-label": buttonLabel,
     "data-test-subj": "superDatePickerToggleQuickMenuButton"
-  }, quickSelectButtonProps));
+  }, quickSelectButtonProps)));
   return ___EmotionJSX(EuiPopover, {
     button: quickSelectButton,
     isOpen: isOpen,

package/es/components/flyout/flyout.component.js

@@ -407,8 +407,10 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     // Main flyout with child flyout - don't close on ESC
     return false;
   }, [isInManagedContext, hasChildFlyout, isChildFlyout]);
-  var handleClose = useCallback(function (event) {
-    onClose(event);
+  var handleClose = useCallback(function (event, reason) {
+    onClose(event, reason ? {
+      reason: reason
+    } : undefined);
   }, [onClose]);
 
   /**
@@ -417,7 +419,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var onKeyDown = useCallback(function (event) {
     if (!isPushed && event.key === keys.ESCAPE && shouldCloseOnEscape) {
       event.preventDefault();
-      handleClose(event);
+      handleClose(event, 'escape');
     }
   }, [handleClose, isPushed, shouldCloseOnEscape]);
   var managedFlyoutIndex = currentZIndexRef.current;
@@ -651,10 +653,10 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     if (outsideClickCloses === false) return undefined;
     if (hasOverlayMask) {
       // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return handleClose(event);
+      if (event.target === maskRef.current) return handleClose(event, 'outside-click');
     } else {
       // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return handleClose(event);
+      if (outsideClickCloses === true) return handleClose(event, 'outside-click');
     }
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
@@ -706,7 +708,9 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   }), !isPushed && screenReaderDescription, shouldRenderMenu ? ___EmotionJSX(EuiFlyoutMenu, _extends({}, flyoutMenuProps, {
     titleId: flyoutMenuId
   })) : !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
-    onClose: handleClose,
+    onClose: function onClose(event) {
+      return handleClose(event, 'close-button');
+    },
     closeButtonPosition: closeButtonPosition,
     side: side
   })), resizable && ___EmotionJSX(EuiFlyoutResizeButton, {