@elastic/eui 119.1.0 → 120.0.0

package/optimize/lib/components/date_picker/react-datepicker/test/timezone_date_picker.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _index = _interopRequireDefault(require("../src/index.jsx"));
+var utils = _interopRequireWildcard(require("../src/date_utils"));
+var _react2 = require("@emotion/react");
+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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+ * The MIT License (MIT)
+ * 
+ * Copyright (c) 2018 HackerOne Inc and individual contributors
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * 
+ */
+var TimezoneDatePicker = /*#__PURE__*/function (_React$Component) {
+  function TimezoneDatePicker(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, TimezoneDatePicker);
+    _this = _callSuper(this, TimezoneDatePicker, [props]);
+    _this.state = {
+      startDate: null,
+      utcOffset: -4
+    };
+    return _this;
+  }
+  (0, _inherits2.default)(TimezoneDatePicker, _React$Component);
+  return (0, _createClass2.default)(TimezoneDatePicker, [{
+    key: "handleChange",
+    value: function handleChange(date) {
+      this.setState({
+        startDate: date
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var selected = this.state.startDate && utils.setUTCOffset(utils.cloneDate(this.state.startDate), this.state.utcOffset);
+      return (0, _react2.jsx)(_index.default, {
+        utcOffset: this.state.utcOffset,
+        dateFormat: "YYYY-MM-DD HH:mm",
+        selected: selected,
+        onChange: this.handleChange
+      });
+    }
+  }]);
+}(_react.default.Component);
+var _default = exports.default = TimezoneDatePicker;
+module.exports = exports.default;

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

@@ -6,12 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiQuickSelect = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
@@ -30,247 +26,246 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 _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) { (0, _defineProperty2.default)(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { 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) { (0, _defineProperty2.default)(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; } /*
  * 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;
-    (0, _classCallCheck2.default)(this, EuiQuickSelect);
-    _this = _callSuper(this, EuiQuickSelect, [props]);
-    (0, _defineProperty2.default)(_this, "generateId", (0, _services.htmlIdGenerator)());
-    (0, _defineProperty2.default)(_this, "timeSelectionId", _this.generateId());
-    (0, _defineProperty2.default)(_this, "legendId", _this.generateId());
-    (0, _defineProperty2.default)(_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 = (0, _slicedToArray2.default)(_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
       });
     });
-    (0, _defineProperty2.default)(_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
       });
     });
-    (0, _defineProperty2.default)(_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
       });
     });
-    (0, _defineProperty2.default)(_this, "handleKeyDown", function (_ref) {
-      var key = _ref.key;
-      if (key === 'Enter') {
-        _this.applyQuickSelect();
-      }
-    });
-    (0, _defineProperty2.default)(_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)
     });
-    (0, _defineProperty2.default)(_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
     });
-    (0, _defineProperty2.default)(_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
     });
-    (0, _defineProperty2.default)(_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;
-  }
-  (0, _inherits2.default)(EuiQuickSelect, _Component);
-  return (0, _createClass2.default)(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);
+  }))));
+};

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

@@ -106,7 +106,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