@elastic/eui 119.1.0 → 120.0.0

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

@@ -1,11 +1,11 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiQuickSelect = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
 var _services = require("../../../../services");
@@ -22,286 +22,257 @@ var _react2 = require("@emotion/react");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 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); } /*
+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; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "1bcvmj9-render",
-  styles: "> div{position:relative;overflow:visible;};label:render;"
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "7yqi2-EuiQuickSelect",
+  styles: "> div{position:relative;overflow:visible;};label:EuiQuickSelect;"
 } : {
-  name: "1bcvmj9-render",
-  styles: "> div{position:relative;overflow:visible;};label:render;",
+  name: "7yqi2-EuiQuickSelect",
+  styles: "> div{position:relative;overflow:visible;};label:EuiQuickSelect;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "12n8nux-render",
-  styles: "position:absolute;right:0;bottom:100%;transform:translateY(-33%);label:render;"
+var _ref5 = process.env.NODE_ENV === "production" ? {
+  name: "qbrd7j-EuiQuickSelect",
+  styles: "position:absolute;right:0;bottom:100%;transform:translateY(-33%);label:EuiQuickSelect;"
 } : {
-  name: "12n8nux-render",
-  styles: "position:absolute;right:0;bottom:100%;transform:translateY(-33%);label:render;",
+  name: "qbrd7j-EuiQuickSelect",
+  styles: "position:absolute;right:0;bottom:100%;transform:translateY(-33%);label:EuiQuickSelect;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component) {
-  function EuiQuickSelect(props) {
-    var _this;
-    _classCallCheck(this, EuiQuickSelect);
-    _this = _callSuper(this, EuiQuickSelect, [props]);
-    _defineProperty(_this, "generateId", (0, _services.htmlIdGenerator)());
-    _defineProperty(_this, "timeSelectionId", _this.generateId());
-    _defineProperty(_this, "legendId", _this.generateId());
-    _defineProperty(_this, "onTimeTenseChange", function (event) {
-      _this.setState({
-        timeTense: event.target.value
+var EuiQuickSelect = exports.EuiQuickSelect = function EuiQuickSelect(_ref) {
+  var applyTime = _ref.applyTime,
+    start = _ref.start,
+    end = _ref.end,
+    prevQuickSelect = _ref.prevQuickSelect,
+    timeOptions = _ref.timeOptions;
+  var _useState = (0, _react.useState)(function () {
+      var _parseTimeParts = (0, _quick_select_utils.parseTimeParts)(start, end),
+        timeTenseDefault = _parseTimeParts.timeTense,
+        timeUnitsDefault = _parseTimeParts.timeUnits,
+        timeValueDefault = _parseTimeParts.timeValue;
+      return {
+        timeTense: prevQuickSelect && prevQuickSelect.timeTense ? prevQuickSelect.timeTense : timeTenseDefault,
+        timeValue: prevQuickSelect && prevQuickSelect.timeValue ? prevQuickSelect.timeValue : timeValueDefault,
+        timeUnits: prevQuickSelect && prevQuickSelect.timeUnits ? prevQuickSelect.timeUnits : timeUnitsDefault
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeSelectionId = (0, _services.useGeneratedHtmlId)();
+  var legendId = (0, _services.useGeneratedHtmlId)();
+  var onTimeTenseChange = function onTimeTenseChange(event) {
+    var timeTense = event.target.value;
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        timeTense: timeTense
       });
     });
-    _defineProperty(_this, "onTimeValueChange", function (event) {
-      var sanitizedValue = parseInt(event.target.value, 10);
-      _this.setState({
+  };
+  var onTimeValueChange = function onTimeValueChange(event) {
+    var sanitizedValue = parseInt(event.target.value, 10);
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
         timeValue: isNaN(sanitizedValue) ? 0 : sanitizedValue
       });
     });
-    _defineProperty(_this, "onTimeUnitsChange", function (event) {
-      _this.setState({
-        timeUnits: event.target.value
+  };
+  var onTimeUnitsChange = function onTimeUnitsChange(event) {
+    var timeUnits = event.target.value;
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        timeUnits: timeUnits
       });
     });
-    _defineProperty(_this, "handleKeyDown", function (_ref) {
-      var key = _ref.key;
-      if (key === 'Enter') {
-        _this.applyQuickSelect();
-      }
-    });
-    _defineProperty(_this, "applyQuickSelect", function () {
-      var _this$state = _this.state,
-        timeTense = _this$state.timeTense,
-        timeValue = _this$state.timeValue,
-        timeUnits = _this$state.timeUnits;
-      if (timeTense === _time_options.NEXT) {
-        _this.props.applyTime({
-          start: 'now',
-          end: "now+".concat(timeValue).concat(timeUnits),
-          quickSelect: _objectSpread({}, _this.state)
-        });
-        return;
-      }
-      _this.props.applyTime({
-        start: "now-".concat(timeValue).concat(timeUnits),
-        end: 'now',
-        quickSelect: _objectSpread({}, _this.state)
+  };
+  var applyQuickSelect = function applyQuickSelect() {
+    var timeTense = state.timeTense,
+      timeValue = state.timeValue,
+      timeUnits = state.timeUnits;
+    if (timeTense === _time_options.NEXT) {
+      applyTime({
+        start: 'now',
+        end: "now+".concat(timeValue).concat(timeUnits),
+        quickSelect: _objectSpread({}, state)
       });
+      return;
+    }
+    applyTime({
+      start: "now-".concat(timeValue).concat(timeUnits),
+      end: 'now',
+      quickSelect: _objectSpread({}, state)
     });
-    _defineProperty(_this, "getBounds", function () {
-      var startMoment = _datemath.default.parse(_this.props.start);
-      var endMoment = _datemath.default.parse(_this.props.end, {
-        roundUp: true
-      });
-      return {
-        min: startMoment && startMoment.isValid() ? startMoment : (0, _moment.default)().subtract(15, 'minute'),
-        max: endMoment && endMoment.isValid() ? endMoment : (0, _moment.default)()
-      };
+  };
+  var handleKeyDown = function handleKeyDown(_ref2) {
+    var key = _ref2.key;
+    if (key === 'Enter') {
+      applyQuickSelect();
+    }
+  };
+  var getBounds = function getBounds() {
+    var startMoment = _datemath.default.parse(start);
+    var endMoment = _datemath.default.parse(end, {
+      roundUp: true
     });
-    _defineProperty(_this, "stepForward", function () {
-      var _this$getBounds = _this.getBounds(),
-        min = _this$getBounds.min,
-        max = _this$getBounds.max;
-      var diff = max.diff(min);
-      _this.props.applyTime({
-        start: (0, _moment.default)(max).toISOString(),
-        end: (0, _moment.default)(max).add(diff, 'ms').toISOString(),
-        keepPopoverOpen: true
-      });
+    return {
+      min: startMoment && startMoment.isValid() ? startMoment : (0, _moment.default)().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : (0, _moment.default)()
+    };
+  };
+  var stepForward = function stepForward() {
+    var _getBounds = getBounds(),
+      min = _getBounds.min,
+      max = _getBounds.max;
+    var diff = max.diff(min);
+    applyTime({
+      start: (0, _moment.default)(max).toISOString(),
+      end: (0, _moment.default)(max).add(diff, 'ms').toISOString(),
+      keepPopoverOpen: true
     });
-    _defineProperty(_this, "stepBackward", function () {
-      var _this$getBounds2 = _this.getBounds(),
-        min = _this$getBounds2.min,
-        max = _this$getBounds2.max;
-      var diff = max.diff(min);
-      _this.props.applyTime({
-        start: (0, _moment.default)(min).subtract(diff, 'ms').toISOString(),
-        end: (0, _moment.default)(min).toISOString(),
-        keepPopoverOpen: true
-      });
+  };
+  var stepBackward = function stepBackward() {
+    var _getBounds2 = getBounds(),
+      min = _getBounds2.min,
+      max = _getBounds2.max;
+    var diff = max.diff(min);
+    applyTime({
+      start: (0, _moment.default)(min).subtract(diff, 'ms').toISOString(),
+      end: (0, _moment.default)(min).toISOString(),
+      keepPopoverOpen: true
     });
-    var _parseTimeParts = (0, _quick_select_utils.parseTimeParts)(props.start, props.end),
-      timeTenseDefault = _parseTimeParts.timeTense,
-      timeUnitsDefault = _parseTimeParts.timeUnits,
-      timeValueDefault = _parseTimeParts.timeValue;
-    _this.state = {
-      timeTense: props.prevQuickSelect && props.prevQuickSelect.timeTense ? props.prevQuickSelect.timeTense : timeTenseDefault,
-      timeValue: props.prevQuickSelect && props.prevQuickSelect.timeValue ? props.prevQuickSelect.timeValue : timeValueDefault,
-      timeUnits: props.prevQuickSelect && props.prevQuickSelect.timeUnits ? props.prevQuickSelect.timeUnits : timeUnitsDefault
-    };
-    return _this;
-  }
-  _inherits(EuiQuickSelect, _Component);
-  return _createClass(EuiQuickSelect, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state2 = this.state,
-        timeTense = _this$state2.timeTense,
-        timeValue = _this$state2.timeValue,
-        timeUnits = _this$state2.timeUnits;
-      var _this$props$timeOptio = this.props.timeOptions,
-        timeTenseOptions = _this$props$timeOptio.timeTenseOptions,
-        timeUnitsOptions = _this$props$timeOptio.timeUnitsOptions;
-      var matchedTimeUnit = timeUnitsOptions.find(function (_ref2) {
-        var value = _ref2.value;
-        return value === timeUnits;
-      });
-      var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
-      return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, {
-        component: "fieldset",
-        title: (0, _react2.jsx)(_i18n.EuiI18n, {
-          token: "euiQuickSelect.quickSelectTitle",
-          default: "Quick select"
-        }),
-        titleId: this.legendId,
-        "aria-describedby": this.timeSelectionId,
-        css: _ref3
-      }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        css: _ref4,
-        alignItems: "center",
-        gutterSize: "s",
-        responsive: false
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.previousLabel",
-        default: "Previous time window"
-      }, function (previousLabel) {
-        return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: previousLabel,
-          disableScreenReaderOutput: true
-        }, (0, _react2.jsx)(_button.EuiButtonIcon, {
-          "aria-label": previousLabel,
-          iconType: "chevronSingleLeft",
-          onClick: _this2.stepBackward
-        }));
-      })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.nextLabel",
-        default: "Next time window"
-      }, function (nextLabel) {
-        return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: nextLabel,
-          disableScreenReaderOutput: true
-        }, (0, _react2.jsx)(_button.EuiButtonIcon, {
-          "aria-label": nextLabel,
-          iconType: "chevronSingleRight",
-          onClick: _this2.stepForward
-        }));
-      }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.tenseLabel",
-        default: "Time tense"
-      }, function (tenseLabel) {
-        return (0, _react2.jsx)(_form.EuiSelect, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-label": tenseLabel,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          value: timeTense,
-          options: timeTenseOptions,
-          onChange: _this2.onTimeTenseChange
-        });
-      })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.valueLabel",
-        default: "Time value"
-      }, function (valueLabel) {
-        return (0, _react2.jsx)(_form.EuiFieldNumber, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          "aria-label": valueLabel,
-          value: timeValue,
-          onChange: _this2.onTimeValueChange
-        });
-      })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.unitLabel",
-        default: "Time unit"
-      }, function (unitLabel) {
-        return (0, _react2.jsx)(_form.EuiSelect, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-label": unitLabel,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          value: timeUnits,
-          options: timeUnitsOptions,
-          onChange: _this2.onTimeUnitsChange
-        });
-      })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_button.EuiButton, {
-        "aria-describedby": "".concat(this.timeSelectionId, " ").concat(this.legendId),
-        "data-test-subj": "superDatePickerQuickSelectApplyButton",
-        minWidth: 0 // Allow the button to shrink
-        ,
-        size: "s",
-        onClick: this.applyQuickSelect,
-        disabled: timeValue <= 0
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.applyButton",
-        default: "Apply"
-      })))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
-        id: this.timeSelectionId
-      }, (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiQuickSelect.fullDescription",
-        default: "Currently set to {timeTense} {timeValue} {timeUnit}.",
-        values: {
-          timeTense: timeTense,
-          timeValue: timeValue,
-          timeUnit: timeUnit
-        }
-      }))));
+  };
+  var timeTense = state.timeTense,
+    timeValue = state.timeValue,
+    timeUnits = state.timeUnits;
+  var timeTenseOptions = timeOptions.timeTenseOptions,
+    timeUnitsOptions = timeOptions.timeUnitsOptions;
+  var matchedTimeUnit = timeUnitsOptions.find(function (_ref3) {
+    var value = _ref3.value;
+    return value === timeUnits;
+  });
+  var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
+  return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, {
+    component: "fieldset",
+    title: (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiQuickSelect.quickSelectTitle",
+      default: "Quick select"
+    }),
+    titleId: legendId,
+    "aria-describedby": timeSelectionId,
+    css: _ref4
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    css: _ref5,
+    alignItems: "center",
+    gutterSize: "s",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.previousLabel",
+    default: "Previous time window"
+  }, function (previousLabel) {
+    return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+      content: previousLabel,
+      disableScreenReaderOutput: true
+    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+      "aria-label": previousLabel,
+      iconType: "chevronSingleLeft",
+      onClick: stepBackward
+    }));
+  })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.nextLabel",
+    default: "Next time window"
+  }, function (nextLabel) {
+    return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+      content: nextLabel,
+      disableScreenReaderOutput: true
+    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+      "aria-label": nextLabel,
+      iconType: "chevronSingleRight",
+      onClick: stepForward
+    }));
+  }))), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.tenseLabel",
+    default: "Time tense"
+  }, function (tenseLabel) {
+    return (0, _react2.jsx)(_form.EuiSelect, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-label": tenseLabel,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      value: timeTense,
+      options: timeTenseOptions,
+      onChange: onTimeTenseChange
+    });
+  })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.valueLabel",
+    default: "Time value"
+  }, function (valueLabel) {
+    return (0, _react2.jsx)(_form.EuiFieldNumber, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      "aria-label": valueLabel,
+      value: timeValue,
+      onChange: onTimeValueChange
+    });
+  })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.unitLabel",
+    default: "Time unit"
+  }, function (unitLabel) {
+    return (0, _react2.jsx)(_form.EuiSelect, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-label": unitLabel,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      value: timeUnits,
+      options: timeUnitsOptions,
+      onChange: onTimeUnitsChange
+    });
+  })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_button.EuiButton, {
+    "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+    "data-test-subj": "superDatePickerQuickSelectApplyButton",
+    minWidth: 0 // Allow the button to shrink
+    ,
+    size: "s",
+    onClick: applyQuickSelect,
+    disabled: timeValue <= 0
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.applyButton",
+    default: "Apply"
+  })))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    id: timeSelectionId
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiQuickSelect.fullDescription",
+    default: "Currently set to {timeTense} {timeValue} {timeUnit}.",
+    values: {
+      timeTense: timeTense,
+      timeValue: timeValue,
+      timeUnit: timeUnit
     }
-  }]);
-}(_react.Component);
-EuiQuickSelect.propTypes = {
-  applyTime: _propTypes.default.func.isRequired,
-  start: _propTypes.default.string.isRequired,
-  end: _propTypes.default.string.isRequired,
-  prevQuickSelect: _propTypes.default.shape({
-    timeTense: _propTypes.default.string.isRequired,
-    timeValue: _propTypes.default.number.isRequired,
-    timeUnits: _propTypes.default.oneOf(["s", "m", "h", "d", "w", "M", "y"]).isRequired
-  }),
-  timeOptions: _propTypes.default.shape({
-    timeTenseOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
-    timeUnitsOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
-    relativeOptions: _propTypes.default.arrayOf(_propTypes.default.shape({
-      text: _propTypes.default.string.isRequired,
-      value: _propTypes.default.oneOfType([_propTypes.default.oneOf(["s", "m", "h", "d", "w", "M", "y"]).isRequired, _propTypes.default.oneOf(["s+", "m+", "h+", "d+", "w+", "M+", "y+"]).isRequired]).isRequired
-    }).isRequired).isRequired,
-    relativeRoundingLabels: _propTypes.default.any.isRequired,
-    refreshUnitsOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
-    commonDurationRanges: _propTypes.default.arrayOf(_propTypes.default.shape({
-      end: _propTypes.default.oneOfType([_propTypes.default.oneOf(["now"]), _propTypes.default.string.isRequired]).isRequired,
-      label: _propTypes.default.string,
-      start: _propTypes.default.oneOfType([_propTypes.default.oneOf(["now"]), _propTypes.default.string.isRequired]).isRequired
-    }).isRequired).isRequired
-  }).isRequired
+  }))));
 };

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

@@ -113,7 +113,7 @@ var EuiSuperUpdateButton = exports.EuiSuperUpdateButton = /*#__PURE__*/function
       var classes = (0, _classnames.default)('euiSuperUpdateButton', className);
       var sharedButtonProps = {
         color: needsUpdate || isLoading ? 'success' : 'primary',
-        iconType: needsUpdate || isLoading ? 'kqlFunction' : 'refresh',
+        iconType: needsUpdate || isLoading ? 'push' : 'refresh',
         isDisabled: isDisabled,
         onClick: onClick,
         isLoading: isLoading