@elastic/eui 95.4.0 → 95.6.0

package/optimize/es/components/icon/assets/single_metric_viewer.js

@@ -26,17 +26,11 @@ var EuiIconSingleMetricViewer = function EuiIconSingleMetricViewer(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M1.5 1a.5.5 0 0 1 .5.5V14h12.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 .5-.5Z",
-    clipRule: "evenodd"
+    d: "M1.5 1a.5.5 0 0 1 .5.5V14h12.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 .5-.5Z"
   }), ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M12.935 6.652a.6.6 0 0 0-.951-.062L9 10l-2.747-.916a.6.6 0 0 0-.485.047L3 10.69v1.81a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V9.75l-2.065-3.098Z",
-    clipRule: "evenodd"
+    d: "M12.935 6.652a.6.6 0 0 0-.951-.062L9 10l-2.747-.916a.6.6 0 0 0-.485.047L3 10.69v1.81a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5V9.75l-2.065-3.098Z"
   }), ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M13.023 2.758a.6.6 0 0 0-.987-.077L8.388 7.203l-2.093-.83a.6.6 0 0 0-.552.058L3.221 8.098a.49.49 0 0 0-.138.683.5.5 0 0 0 .689.136l2.349-1.552 2.582 1.024 3.746-4.643 1.623 2.817c.136.237.44.319.678.184a.49.49 0 0 0 .184-.672l-1.91-3.317Z",
-    clipRule: "evenodd"
+    d: "M13.023 2.758a.6.6 0 0 0-.987-.077L8.388 7.203l-2.093-.83a.6.6 0 0 0-.552.058L3.221 8.098a.49.49 0 0 0-.138.683.5.5 0 0 0 .689.136l2.349-1.552 2.582 1.024 3.746-4.643 1.623 2.817c.136.237.44.319.678.184a.49.49 0 0 0 .184-.672l-1.91-3.317Z"
   }));
 };
 export var icon = EuiIconSingleMetricViewer;

package/optimize/es/components/icon/icon_map.js

@@ -79,6 +79,7 @@ export var typeToPathMap = {
   createSingleMetricJob: 'ml_create_single_metric_job',
   cross: 'cross',
   crossClusterReplicationApp: 'app_cross_cluster_replication',
+  crossInCircle: 'cross_in_circle',
   crosshairs: 'crosshairs',
   currency: 'currency',
   cut: 'cut',
@@ -308,6 +309,7 @@ export var typeToPathMap = {
   minus: 'minus',
   minusInCircle: 'minus_in_circle',
   minusInCircleFilled: 'minus_in_circle_filled',
+  minusInSquare: 'minus_in_square',
   mobile: 'mobile',
   monitoringApp: 'app_monitoring',
   moon: 'moon',
@@ -343,6 +345,7 @@ export var typeToPathMap = {
   plus: 'plus',
   plusInCircle: 'plus_in_circle',
   plusInCircleFilled: 'plus_in_circle_filled',
+  plusInSquare: 'plus_in_square',
   popout: 'popout',
   push: 'push',
   questionInCircle: 'question_in_circle',

package/optimize/es/components/modal/modal.js

@@ -15,6 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 import classnames from 'classnames';
 import { keys, useEuiTheme } from '../../services';
+import { isDOMNode } from '../../utils';
 import { EuiButtonIcon } from '../button';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
@@ -34,9 +35,11 @@ export var EuiModal = function EuiModal(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      onClose(event);
+      if (isDOMNode(event.target) && event.currentTarget.contains(event.target)) {
+        event.preventDefault();
+        event.stopPropagation();
+        onClose(event);
+      }
     }
   };
   var newStyle = style;

package/optimize/es/utils/index.js

@@ -7,4 +7,5 @@
  */
 
 export * from './prop_types';
-export * from './is_jest';
+export * from './is_jest';
+export * from './type_guards';

package/optimize/es/utils/type_guards.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export var isDOMNode = function isDOMNode(el) {
+  return el instanceof Node;
+};

package/optimize/lib/components/date_picker/auto_refresh/refresh_interval.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRefreshInterval = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -13,12 +14,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _flex = require("../../flex");
 var _form = require("../../form");
-var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _time_options = require("../super_date_picker/time_options");
+var _quick_select_panel = require("../super_date_picker/quick_select_popover/quick_select_panel");
 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; }
@@ -85,7 +87,6 @@ var EuiRefreshInterval = exports.EuiRefreshInterval = /*#__PURE__*/function (_Co
       min: getMinInterval(_this.props.minInterval, _this.props.intervalUnits)
     }));
     (0, _defineProperty2.default)(_this, "generateId", (0, _services.htmlIdGenerator)());
-    (0, _defineProperty2.default)(_this, "legendId", _this.generateId());
     (0, _defineProperty2.default)(_this, "refreshSelectionId", _this.generateId());
     (0, _defineProperty2.default)(_this, "onValueChange", function (event) {
       var sanitizedValue = parseFloat(event.target.value);
@@ -197,63 +198,69 @@ var EuiRefreshInterval = exports.EuiRefreshInterval = /*#__PURE__*/function (_Co
         value = _this$state5.value,
         units = _this$state5.units,
         min = _this$state5.min;
-      return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
-        var refreshUnitsOptions = _ref3.refreshUnitsOptions;
-        return (0, _react2.jsx)("fieldset", {
-          className: "euiQuickSelectPopover__panel"
-        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-          alignItems: "center",
-          gutterSize: "s",
-          responsive: false,
-          wrap: true
-        }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-          grow: false
-        }, (0, _react2.jsx)(_form.EuiSwitch, {
-          "data-test-subj": "superDatePickerToggleRefreshButton",
-          "aria-describedby": _this2.refreshSelectionId,
-          checked: !isPaused,
-          onChange: _this2.toggleRefresh,
-          compressed: true,
-          label: (0, _react2.jsx)(_form.EuiFormLabel, {
-            type: "legend",
-            id: _this2.legendId
-          }, (0, _react2.jsx)(_i18n.EuiI18n, {
-            token: "euiRefreshInterval.legend",
-            default: "Refresh every"
-          }))
-        })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-          style: {
-            minWidth: 60
-          }
-        }, (0, _react2.jsx)(_form.EuiFieldNumber, {
-          compressed: true,
-          fullWidth: true,
-          value: value,
-          min: min,
-          onChange: _this2.onValueChange,
-          onKeyDown: _this2.handleKeyDown,
-          isInvalid: !isPaused && (value === '' || value <= 0),
-          disabled: isPaused,
-          "aria-label": "Refresh interval value",
-          "aria-describedby": "".concat(_this2.refreshSelectionId, " ").concat(_this2.legendId),
-          "data-test-subj": "superDatePickerRefreshIntervalInput"
-        })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-          style: {
-            minWidth: 100
-          },
-          grow: 2
-        }, (0, _react2.jsx)(_form.EuiSelect, {
-          compressed: true,
-          fullWidth: true,
-          "aria-label": "Refresh interval units",
-          "aria-describedby": "".concat(_this2.refreshSelectionId, " ").concat(_this2.legendId),
-          value: units,
-          disabled: isPaused,
-          options: refreshUnitsOptions,
-          onChange: _this2.onUnitsChange,
-          onKeyDown: _this2.handleKeyDown,
-          "data-test-subj": "superDatePickerRefreshIntervalUnitsSelect"
-        }))), _this2.renderScreenReaderText(refreshUnitsOptions));
+      return (0, _react2.jsx)(_i18n.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 = (0, _slicedToArray2.default)(_ref3, 4),
+          toggleLabel = _ref4[0],
+          toggleAriaLabel = _ref4[1],
+          valueAriaLabel = _ref4[2],
+          unitsAriaLabel = _ref4[3];
+        return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref5) {
+          var refreshUnitsOptions = _ref5.refreshUnitsOptions;
+          return (0, _react2.jsx)(_quick_select_panel.EuiQuickSelectPanel, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+            alignItems: "center",
+            gutterSize: "s",
+            responsive: false,
+            wrap: true
+          }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+            grow: false
+          }, (0, _react2.jsx)(_form.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: (0, _react2.jsx)(_form.EuiFormLabel, null, toggleLabel),
+            "aria-label": toggleAriaLabel,
+            "aria-labelledby": undefined,
+            "aria-describedby": _this2.refreshSelectionId
+          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+            style: {
+              minWidth: 60
+            }
+          }, (0, _react2.jsx)(_form.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"
+          })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+            style: {
+              minWidth: 100
+            },
+            grow: 2
+          }, (0, _react2.jsx)(_form.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));
+        });
       });
     }
   }]);

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

@@ -11,10 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _form = require("../form");
 var _services = require("../../services");
 var _context = require("../context");
+var _form = require("../form");
 var _reactDatepicker = require("./react-datepicker");
+var _react_date_picker = require("./react_date_picker.styles");
+var _date_picker = require("./date_picker.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
@@ -24,7 +26,6 @@ var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compre
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-// eslint-disable-line import/named
 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; }
 var euiDatePickerDefaultDateFormat = exports.euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
@@ -107,11 +108,10 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     timeFormat = _ref$timeFormat === void 0 ? euiDatePickerDefaultTimeFormat : _ref$timeFormat,
     utcOffset = _ref.utcOffset,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiDatePicker', {
-    'euiDatePicker--inline': inline,
-    'euiDatePicker--shadow': inline && shadow
-  });
-  var datePickerClasses = (0, _classnames.default)('euiDatePicker', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_date_picker.euiDatePickerStyles);
+  var cssStyles = [styles.euiDatePicker, inline && styles.inline, inline && shadow && styles.shadow];
+  var calendarStyles = (0, _services.useEuiMemoizedStyles)(_react_date_picker.euiReactDatePickerStyles);
+  var classes = (0, _classnames.default)('euiDatePicker', className);
 
   // Check for whether the passed `selected` moment date is valid
   var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
@@ -146,8 +146,8 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     var contextLocale = _ref2.locale;
     return (0, _react2.jsx)(_reactDatepicker.ReactDatePicker, (0, _extends2.default)({
       adjustDateOnChange: adjustDateOnChange,
-      calendarClassName: calendarClassName,
-      className: datePickerClasses,
+      calendarClassName: (0, _classnames.default)(calendarClassName, calendarStyles.euiReactDatePicker),
+      className: classes,
       defaultInputProps: defaultInputProps,
       customInput: customInput,
       dateFormat: fullDateFormat,
@@ -193,6 +193,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     optionalIcon = 'calendar';
   }
   return (0, _react2.jsx)("span", {
+    css: cssStyles,
     className: classes
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
     icon: optionalIcon,

package/optimize/lib/components/date_picker/date_picker.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDatePickerStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+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)."; } /*
+ * 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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "1gj9wh1-euiDatePicker",
+  styles: "display:block;label:euiDatePicker;"
+} : {
+  name: "1gj9wh1-euiDatePicker",
+  styles: "display:block;label:euiDatePicker;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiDatePicker: _ref,
+    inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " background-color:transparent;box-shadow:none;padding:0;}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:transparent;flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";};label:shadow;")
+  };
+};

package/optimize/lib/components/date_picker/date_picker_range.styles.js

@@ -26,12 +26,12 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
   // depending on whether time selection is being rendered or not
   var containerQuery = function containerQuery(datePickerWidth) {
     var delimiterWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
-    return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        & > .euiText > [data-icon-type='sortRight'] {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
+    return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", (0, _global_styling.logicalCSS)('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;}.react-datepicker__time-list{padding:0;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", (0, _global_styling.logicalCSS)('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
-    responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(350), ";;label:responsiveWithTimeSelect;"),
+    responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
   };
 };

package/optimize/lib/components/date_picker/react-datepicker/src/calendar.js

@@ -23,6 +23,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _calendar_container = _interopRequireDefault(require("./calendar_container"));
 var _focus_trap = require("../../../focus_trap");
 var _screen_reader_only = require("../../../accessibility/screen_reader_only");
+var _button = require("../../../button");
 var _date_utils = require("./date_utils");
 var _react2 = require("@emotion/react");
 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; }
@@ -244,12 +245,16 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--previous--disabled");
         clickHandler = null;
       }
-      return (0, _react2.jsx)("button", {
-        type: "button",
+      return (0, _react2.jsx)(_button.EuiButtonIcon, {
+        iconType: "sortLeft",
+        size: "s",
+        color: "text",
         className: classes.join(" "),
         onClick: clickHandler,
-        disabled: !_this.props.accessibleMode
-      }, _this.props.previousMonthButtonLabel);
+        disabled: !_this.props.accessibleMode,
+        "aria-label": _this.props.previousMonthButtonLabel,
+        title: _this.props.previousMonthButtonLabel
+      });
     });
     (0, _defineProperty2.default)(_this, "renderNextMonthButton", function () {
       if (_this.props.renderCustomHeader) {
@@ -271,28 +276,16 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         classes.push("react-datepicker__navigation--next--disabled");
         clickHandler = null;
       }
-      return (0, _react2.jsx)("button", {
-        type: "button",
+      return (0, _react2.jsx)(_button.EuiButtonIcon, {
+        iconType: "sortRight",
+        size: "s",
+        color: "text",
         className: classes.join(" "),
         onClick: clickHandler,
-        disabled: !_this.props.accessibleMode
-      }, _this.props.nextMonthButtonLabel);
-    });
-    (0, _defineProperty2.default)(_this, "renderCurrentMonth", function () {
-      var date = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.date;
-      var classes = ["react-datepicker__current-month"];
-      if (_this.props.showYearDropdown) {
-        classes.push("react-datepicker__current-month--hasYearDropdown");
-      }
-      if (_this.props.showMonthDropdown) {
-        classes.push("react-datepicker__current-month--hasMonthDropdown");
-      }
-      if (_this.props.showMonthYearDropdown) {
-        classes.push("react-datepicker__current-month--hasMonthYearDropdown");
-      }
-      return (0, _react2.jsx)("div", {
-        className: classes.join(" ")
-      }, (0, _date_utils.formatDate)(date, _this.props.dateFormat));
+        disabled: !_this.props.accessibleMode,
+        "aria-label": _this.props.nextMonthButtonLabel,
+        title: _this.props.nextMonthButtonLabel
+      });
     });
     (0, _defineProperty2.default)(_this, "renderYearDropdown", function () {
       var overrideHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
@@ -366,7 +359,7 @@ var Calendar = exports.default = /*#__PURE__*/function (_React$Component) {
         i = _ref.i;
       return (0, _react2.jsx)("div", {
         className: "react-datepicker__header"
-      }, _this.renderCurrentMonth(monthDate), (0, _react2.jsx)("div", {
+      }, (0, _react2.jsx)("div", {
         className: "react-datepicker__header__dropdown react-datepicker__header__dropdown--".concat(_this.props.dropdownMode),
         onFocus: _this.handleDropdownFocus
       }, _this.renderMonthDropdown(i !== 0), _this.renderMonthYearDropdown(i !== 0), _this.renderYearDropdown(i !== 0)), (0, _react2.jsx)("div", {

package/optimize/lib/components/date_picker/react-datepicker/src/month_dropdown.js

@@ -14,6 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = require("../../../icon");
 var _month_dropdown_options = _interopRequireDefault(require("./month_dropdown_options"));
 var utils = _interopRequireWildcard(require("./date_utils"));
 var _react2 = require("@emotion/react");
@@ -105,10 +106,13 @@ var MonthDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
         tabIndex: _this.props.accessibleMode ? "0" : undefined,
         "aria-label": "Button. Open the month selector. ".concat(monthNames[_this.props.month], " is currently selected.")
       }, (0, _react2.jsx)("span", {
-        className: "react-datepicker__month-read-view--down-arrow"
-      }), (0, _react2.jsx)("span", {
         className: "react-datepicker__month-read-view--selected-month"
-      }, monthNames[_this.props.month]));
+      }, monthNames[_this.props.month]), (0, _react2.jsx)(_icon.EuiIcon, {
+        type: "arrowDown",
+        size: "s",
+        color: "subdued",
+        className: "react-datepicker__month-read-view--down-arrow"
+      }));
     });
     (0, _defineProperty2.default)(_this, "renderDropdown", function (monthNames) {
       return (0, _react2.jsx)(_month_dropdown_options.default, {

package/optimize/lib/components/date_picker/react-datepicker/src/month_year_dropdown.js

@@ -13,6 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = require("../../../icon");
 var _month_year_dropdown_options = _interopRequireDefault(require("./month_year_dropdown_options"));
 var _date_utils = require("./date_utils");
 var _react2 = require("@emotion/react");
@@ -117,10 +118,13 @@ var MonthYearDropdown = exports.default = /*#__PURE__*/function (_React$Componen
         tabIndex: _this.props.accessibleMode ? "0" : undefined,
         "aria-label": "Button. Open the month selector. ".concat(yearMonth, " is currently selected.")
       }, (0, _react2.jsx)("span", {
-        className: "react-datepicker__month-year-read-view--down-arrow"
-      }), (0, _react2.jsx)("span", {
         className: "react-datepicker__month-year-read-view--selected-month-year"
-      }, yearMonth));
+      }, yearMonth), (0, _react2.jsx)(_icon.EuiIcon, {
+        type: "arrowDown",
+        size: "s",
+        color: "subdued",
+        className: "react-datepicker__month-year-read-view--down-arrow"
+      }));
     });
     (0, _defineProperty2.default)(_this, "renderDropdown", function () {
       return (0, _react2.jsx)(_month_year_dropdown_options.default, {

package/optimize/lib/components/date_picker/react-datepicker/src/time.js

@@ -192,9 +192,25 @@ var Time = exports.default = /*#__PURE__*/function (_React$Component) {
   return (0, _createClass2.default)(Time, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      // code to ensure selected time will always be in focus within time window when it first appears
-      var scrollParent = this.list;
-      scrollParent.scrollTop = Time.calcCenterPosition(this.props.monthRef ? this.props.monthRef.clientHeight - this.header.clientHeight : this.list.clientHeight, this.selectedLi || this.preselectedLi);
+      // ensure selected time will always be in focus within time window when it first appears
+      var scrollOptions = {
+        behavior: 'instant',
+        block: 'center'
+      };
+
+      // scrollIntoView is great but tends to hijack window scroll position - we need to manually restore it
+      var windowX = window.scrollX;
+      var windowY = window.scrollY;
+      var restoreWindowScroll = function restoreWindowScroll() {
+        return window.scroll(windowX, windowY);
+      };
+      if (this.selectedLi) {
+        this.selectedLi.scrollIntoView(scrollOptions);
+        restoreWindowScroll();
+      } else if (this.preselectedLi) {
+        this.preselectedLi.scrollIntoView(scrollOptions);
+        restoreWindowScroll();
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -236,11 +252,6 @@ var Time = exports.default = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var height = null;
-      if (this.props.monthRef && this.header) {
-        height = this.props.monthRef.clientHeight - this.header.clientHeight;
-      }
       var classNames = (0, _classnames.default)("react-datepicker__time-container", {
         "react-datepicker__time-container--with-today-button": this.props.todayButton,
         "react-datepicker__time-container--focus": this.state.isFocused
@@ -254,17 +265,11 @@ var Time = exports.default = /*#__PURE__*/function (_React$Component) {
       }
       return (0, _react2.jsx)("div", {
         className: classNames
-      }, (0, _react2.jsx)("div", {
-        className: "react-datepicker__header react-datepicker__header--time",
-        ref: function ref(header) {
-          _this2.header = header;
-        }
-      }, (0, _react2.jsx)("div", {
-        className: "react-datepicker-time__header"
-      }, this.props.timeCaption), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
+      }, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("div", {
         "aria-live": "polite",
-        "aria-atomic": "false"
-      }, screenReaderInstructions))), (0, _react2.jsx)("div", {
+        "aria-atomic": "false",
+        className: "react-datepicker__header react-datepicker__header--time"
+      }, screenReaderInstructions)), (0, _react2.jsx)("div", {
         className: "react-datepicker__time"
       }, (0, _react2.jsx)("div", {
         className: timeBoxClassNames,
@@ -274,12 +279,6 @@ var Time = exports.default = /*#__PURE__*/function (_React$Component) {
       }, (0, _react2.jsx)("ul", {
         "aria-label": this.props.timeCaption,
         className: "react-datepicker__time-list",
-        ref: function ref(list) {
-          _this2.list = list;
-        },
-        style: height ? {
-          height: height
-        } : {},
         role: "listbox",
         tabIndex: this.props.accessibleMode ? 0 : -1
       }, this.renderTimes.bind(this)()))));
@@ -311,7 +310,4 @@ var Time = exports.default = /*#__PURE__*/function (_React$Component) {
   injectTimes: _propTypes.default.array,
   accessibleMode: _propTypes.default.bool
 });
-(0, _defineProperty2.default)(Time, "calcCenterPosition", function (listHeight, centerLiRef) {
-  return centerLiRef.offsetTop - (listHeight / 2 - centerLiRef.clientHeight / 2);
-});
 module.exports = exports.default;

package/optimize/lib/components/date_picker/react-datepicker/src/year_dropdown.js

@@ -13,6 +13,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _icon = require("../../../icon");
 var _year_dropdown_options = _interopRequireDefault(require("./year_dropdown_options"));
 var _date_utils = require("./date_utils");
 var _react2 = require("@emotion/react");
@@ -115,10 +116,13 @@ var YearDropdown = exports.default = /*#__PURE__*/function (_React$Component) {
         tabIndex: _this.props.accessibleMode ? "0" : undefined,
         "aria-label": "Button. Open the year selector. ".concat(_this.props.year, " is currently selected.")
       }, (0, _react2.jsx)("span", {
-        className: "react-datepicker__year-read-view--down-arrow"
-      }), (0, _react2.jsx)("span", {
         className: "react-datepicker__year-read-view--selected-year"
-      }, _this.props.year));
+      }, _this.props.year), (0, _react2.jsx)(_icon.EuiIcon, {
+        type: "arrowDown",
+        size: "s",
+        color: "subdued",
+        className: "react-datepicker__year-read-view--down-arrow"
+      }));
     });
     (0, _defineProperty2.default)(_this, "renderDropdown", function () {
       return (0, _react2.jsx)(_year_dropdown_options.default, {

package/optimize/lib/components/date_picker/react-datepicker/src/year_dropdown_options.js

@@ -57,6 +57,9 @@ function generateYears(year, noOfYear, minDate, maxDate) {
       list.push(newYear);
     }
   }
+
+  // EUI customization: show earlier years first
+  list.reverse();
   return list;
 }
 var YearDropdownOptions = exports.default = /*#__PURE__*/function (_React$Component) {
@@ -174,8 +177,8 @@ var YearDropdownOptions = exports.default = /*#__PURE__*/function (_React$Compon
       if (selectionChange) {
         _this.setState(function (_ref) {
           var preSelection = _ref.preSelection;
-          var maxYear = _this.state.yearsList[0];
-          var minYear = _this.state.yearsList[_this.state.yearsList.length - 1];
+          var minYear = _this.state.yearsList[0];
+          var maxYear = _this.state.yearsList[_this.state.yearsList.length - 1];
           var nextSelection = preSelection + selectionChange;
           if (nextSelection < minYear) nextSelection = maxYear;
           if (nextSelection > maxYear) nextSelection = minYear;