@elastic/eui 71.1.0 → 72.1.0

package/test-env/components/color_picker/color_stops/color_stop_thumb.styles.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorStopThumbStyles = exports.euiColorStopThumbPopoverStyles = exports.euiColorStopStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("../../form/range/range.styles");
+
+var _color_picker = require("../color_picker.styles");
+
+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)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;"
+} : {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbStyles = function euiColorStopThumbStyles(euiThemeContext) {
+  return {
+    // Base
+    euiColorStopThumb: _ref2,
+    isPopoverOpen: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbFocus)(euiThemeContext), ";;label:isPopoverOpen;")
+  };
+};
+
+exports.euiColorStopThumbStyles = euiColorStopThumbStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;"
+} : {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopThumbPopoverStyles = function euiColorStopThumbPopoverStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiColorStopThumbPopover: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:50%;inline-size:", range.thumbWidth, ";block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";.euiColorStopThumbPopover__anchor{position:absolute;inline-size:100%;block-size:100%;&::before{content:'';display:block;position:absolute;inset-inline-start:0;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbWidth, ";border-radius:", range.thumbHeight, ";background:", euiTheme.colors.emptyShade, ";}};label:euiColorStopThumbPopover;"),
+    isLoadingPanel: _ref,
+    hasFocus: /*#__PURE__*/(0, _react.css)("z-index:", range.thumbZIndex, ";;label:hasFocus;")
+  };
+};
+
+exports.euiColorStopThumbPopoverStyles = euiColorStopThumbPopoverStyles;
+
+var euiColorStopStyles = function euiColorStopStyles(euiThemeContext) {
+  var colorPicker = (0, _color_picker.euiColorPickerVariables)(euiThemeContext);
+  return {
+    // Base
+    euiColorStop: /*#__PURE__*/(0, _react.css)("inline-size:", colorPicker.width, ";;label:euiColorStop;")
+  };
+};
+
+exports.euiColorStopStyles = euiColorStopStyles;

package/test-env/components/color_picker/color_stops/color_stops.js

@@ -43,6 +43,8 @@ var _range_track = require("../../form/range/range_track");
 
 var _range_wrapper = require("../../form/range/range_wrapper");
 
+var _color_stops = require("./color_stops.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["addColor", "max", "min", "mode", "colorStops", "onChange", "disabled", "readOnly", "compressed", "fullWidth", "className", "label", "stopType", "stepNumber", "swatches", "showAlpha", "valueInputProps"];
@@ -191,11 +193,16 @@ var EuiColorStops = function EuiColorStops(_ref) {
       setFocusStopOnUpdate = _useState14[1];
 
   var isNotInteractive = disabled || readOnly;
-  var classes = (0, _classnames.default)('euiColorStops', {
-    'euiColorStops-isDragging': isHoverDisabled,
-    'euiColorStops-isDisabled': disabled,
-    'euiColorStops-isReadOnly': readOnly
-  }, className);
+  var isDragging = isHoverDisabled && !isNotInteractive;
+  var addContainerIsDisabled = isHoverDisabled || isNotInteractive;
+  var classes = (0, _classnames.default)('euiColorStops', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _color_stops.euiColorStopsStyles)(euiTheme);
+  var cssPopoverStyles = [styles.euiColorStops, !disabled ? styles.isEnabled : styles.isDisabled, readOnly && styles.isReadOnly, isDragging && styles.isDragging];
+  var cssTrackStyles = [styles.euiColorStops__track];
+  var cssAddTargetStyles = [styles.euiColorStops__addTarget];
+  var addContainerStyles = (0, _color_stops.euiColorStopsAddContainerStyles)(euiTheme);
+  var cssAddContainerStyles = [addContainerStyles.euiColorStopsAddContainer, !addContainerIsDisabled ? addContainerStyles.isEnabled : addContainerStyles.isDisabled];
 
   var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
     // Guard against `null` ref in usage
@@ -395,7 +402,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         disabled: disabled,
         readOnly: readOnly,
         "aria-valuetext": "Stop: ".concat(colorStop.stop, ", Color: ").concat(colorStop.color, " (").concat(index + 1, " of ").concat(colorStops.length, ")"),
-        isPopoverOpen: colorStop.id === openedStopId,
+        isPopoverOpen: !isDragging && colorStop.id === openedStopId,
         openPopover: function openPopover() {
           setOpenedStopId(colorStop.id);
         },
@@ -405,7 +412,7 @@ var EuiColorStops = function EuiColorStops(_ref) {
         valueInputProps: valueInputProps
       });
     });
-  }, [colorStops, disabled, handleOnChange, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
+  }, [colorStops, disabled, handleOnChange, isDragging, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
   var positions = wrapperRef ? sortedStops.map(function (_ref3) {
     var stop = _ref3.stop;
     return getPositionFromStopFn(stop);
@@ -413,10 +420,10 @@ var EuiColorStops = function EuiColorStops(_ref) {
 
   var gradientStop = function gradientStop(colorStop, index) {
     var color = (0, _utils2.getChromaColor)(colorStop.color, showAlpha);
-    var rgba = color ? color.css() : 'currentColor';
+    var rgba = color ? color.css() : 'transparent';
 
     if (index === 0) {
-      return "currentColor, currentColor ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
+      return "transparent, transparent ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
     }
 
     return "".concat(rgba, " ").concat(positions[index], "%");
@@ -444,13 +451,15 @@ var EuiColorStops = function EuiColorStops(_ref) {
       percentageSteps = percentageSteps + percentage;
     });
     steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = "linear-gradient(to right, currentColor ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
+    gradient = "linear-gradient(to right, transparent ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
   } else {
     var linearGradient = sortedStops.map(stopType === 'gradient' ? gradientStop : fixedStop);
     gradient = "linear-gradient(to right,".concat(linearGradient, ")");
   }
 
-  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, (0, _extends2.default)({
+    css: cssPopoverStyles
+  }, rest, {
     "data-test-subj": (0, _classnames.default)('euiColorStops', rest['data-test-subj']),
     ref: setWrapperRef,
     className: classes,
@@ -473,6 +482,8 @@ var EuiColorStops = function EuiColorStops(_ref) {
     token: "euiColorStops.screenReaderAnnouncement",
     default: "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
   }))), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+    className: "euiColorStops__track",
+    css: cssTrackStyles,
     min: min || rangeMin,
     max: max || rangeMax,
     compressed: compressed,
@@ -489,13 +500,13 @@ var EuiColorStops = function EuiColorStops(_ref) {
       trackWidth: trackWidth
     }), (0, _react2.jsx)("div", {
       "data-test-subj": "euiColorStopsAdd",
-      className: (0, _classnames.default)('euiColorStops__addContainer', {
-        'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
-      }),
+      className: "euiColorStops__addContainer",
+      css: cssAddContainerStyles,
       onClick: handleAddClick,
       onMouseMove: handleAddHover
     }, (0, _react2.jsx)("div", {
       className: "euiColorStops__addTarget",
+      css: cssAddTargetStyles,
       style: {
         left: "".concat(addTargetPosition, "%")
       }

package/test-env/components/color_picker/color_stops/color_stops.styles.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiColorStopsStyles = exports.euiColorStopsAddContainerStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _form = require("../../form/form.styles");
+
+var _range = require("../../form/range/range.styles");
+
+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)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;"
+} : {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopsStyles = function euiColorStopsStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var isDarkMode = colorMode === 'DARK';
+  var stripeColor = isDarkMode ? (0, _services.brighten)(range.trackColor, 0.5) : (0, _services.darken)(range.trackColor, 0.5);
+  var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(range.trackColor, ",\n    ").concat(range.trackColor, " 25%,\n    ").concat(stripeColor, " 25%,\n    ").concat(stripeColor, " 50%,\n    ").concat(range.trackColor, " 50%\n  )");
+  return {
+    // Base
+    euiColorStops: /*#__PURE__*/(0, _react.css)(";label:euiColorStops;"),
+    isEnabled: /*#__PURE__*/(0, _react.css)("&:focus{outline:none;}&:focus-visible{.euiColorStops__track::after{box-shadow:0 0 0 1px rgba(", (0, _services.hexToRgb)(euiTheme.colors.emptyShade).join(', '), ", 0.8),0 0 0 3px ", range.focusColor, ";}};label:isEnabled;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)(";label:isDisabled;"),
+    isHoverDisabled: /*#__PURE__*/(0, _react.css)(";label:isHoverDisabled;"),
+    isReadOnly: /*#__PURE__*/(0, _react.css)(";label:isReadOnly;"),
+    isDragging: _ref2,
+    euiColorStops__track: /*#__PURE__*/(0, _react.css)("&::after{background:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";};label:euiColorStops__track;"),
+    euiColorStops__addTarget: /*#__PURE__*/(0, _react.css)((0, _form.euiCustomControl)(euiThemeContext, {
+      type: 'round'
+    }), ";", (0, _range.euiRangeThumbStyle)(euiThemeContext), ";position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
+  };
+};
+
+exports.euiColorStopsStyles = euiColorStopsStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;"
+} : {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiColorStopsAddContainerStyles = function euiColorStopsAddContainerStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiColorStopsAddContainer: /*#__PURE__*/(0, _react.css)("display:block;position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:50%;block-size:", range.thumbHeight, ";margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";z-index:", range.thumbZIndex, ";;label:euiColorStopsAddContainer;"),
+    isEnabled: _ref,
+    isDisabled: /*#__PURE__*/(0, _react.css)(";label:isDisabled;")
+  };
+};
+
+exports.euiColorStopsAddContainerStyles = euiColorStopsAddContainerStyles;

package/test-env/components/date_picker/auto_refresh/refresh_interval.js

@@ -225,7 +225,9 @@ var EuiRefreshInterval = /*#__PURE__*/function (_Component) {
           units = _this$state5.units;
       return (0, _react2.jsx)(_time_options.RenderI18nTimeOptions, null, function (_ref3) {
         var refreshUnitsOptions = _ref3.refreshUnitsOptions;
-        return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+        return (0, _react2.jsx)("fieldset", {
+          className: "euiQuickSelectPopover__panel"
+        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
           alignItems: "center",
           gutterSize: "s",
           responsive: false,

package/test-env/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.js

@@ -56,10 +56,13 @@ var EuiCommonlyUsedTimeRanges = function EuiCommonlyUsedTimeRanges(_ref) {
       "data-test-subj": dataTestSubj
     }, label));
   });
-  return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_title.EuiTitle, {
+  return (0, _react2.jsx)("fieldset", {
+    className: "euiQuickSelectPopover__panel"
+  }, (0, _react2.jsx)(_title.EuiTitle, {
     size: "xxxs"
   }, (0, _react2.jsx)("legend", {
-    id: legendId
+    id: legendId,
+    className: "euiQuickSelectPopover__panelTitle"
   }, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiCommonlyUsedTimeRanges.legend",
     default: "Commonly used"

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select.js

@@ -193,7 +193,9 @@ var EuiQuickSelect = /*#__PURE__*/function (_Component) {
         return value === timeUnits;
       });
       var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
-      return (0, _react2.jsx)("fieldset", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+      return (0, _react2.jsx)("fieldset", {
+        className: "euiQuickSelectPopover__panel"
+      }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiQuickSelect.legendText",
         default: "Quick select a time range"
       }, function (legendText) {

package/test-env/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -7,21 +7,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiQuickSelectPopover = void 0;
+exports.EuiQuickSelectPopover = exports.EuiQuickSelectPanels = void 0;
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -35,10 +27,10 @@ var _popover = require("../../../popover");
 
 var _title = require("../../../title");
 
-var _horizontal_rule = require("../../../horizontal_rule");
-
 var _text = require("../../../text");
 
+var _i18n = require("../../../i18n");
+
 var _quick_select = require("./quick_select");
 
 var _commonly_used_time_ranges = require("./commonly_used_time_ranges");
@@ -49,166 +41,82 @@ var _refresh_interval = require("../../auto_refresh/refresh_interval");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["applyTime"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiQuickSelectPopover, _Component);
-
-  var _super = _createSuper(EuiQuickSelectPopover);
-
-  function EuiQuickSelectPopover() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, EuiQuickSelectPopover);
+var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
+  var _applyTime = _ref.applyTime,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      prevQuickSelect = _useState2[0],
+      setQuickSelect = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var closePopover = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  var togglePopover = (0, _react.useCallback)(function () {
+    return setIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var applyTime = (0, _react.useCallback)(function (_ref2) {
+    var start = _ref2.start,
+        end = _ref2.end,
+        quickSelect = _ref2.quickSelect,
+        _ref2$keepPopoverOpen = _ref2.keepPopoverOpen,
+        keepPopoverOpen = _ref2$keepPopoverOpen === void 0 ? false : _ref2$keepPopoverOpen;
+
+    _applyTime({
+      start: start,
+      end: end
+    });
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (quickSelect) {
+      setQuickSelect(quickSelect);
     }
 
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isOpen: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "closePopover", function () {
-      _this.setState({
-        isOpen: false
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "togglePopover", function () {
-      _this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "applyTime", function (_ref) {
-      var start = _ref.start,
-          end = _ref.end,
-          quickSelect = _ref.quickSelect,
-          _ref$keepPopoverOpen = _ref.keepPopoverOpen,
-          keepPopoverOpen = _ref$keepPopoverOpen === void 0 ? false : _ref$keepPopoverOpen;
-
-      _this.props.applyTime({
-        start: start,
-        end: end
-      });
-
-      if (quickSelect) {
-        _this.setState({
-          prevQuickSelect: quickSelect
-        });
-      }
-
-      if (!keepPopoverOpen) {
-        _this.closePopover();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDateTimeSections", function () {
-      var _this$props = _this.props,
-          commonlyUsedRanges = _this$props.commonlyUsedRanges,
-          dateFormat = _this$props.dateFormat,
-          end = _this$props.end,
-          recentlyUsedRanges = _this$props.recentlyUsedRanges,
-          start = _this$props.start,
-          timeOptions = _this$props.timeOptions;
-      var prevQuickSelect = _this.state.prevQuickSelect;
-      return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_quick_select.EuiQuickSelect, {
-        applyTime: _this.applyTime,
-        start: start,
-        end: end,
-        prevQuickSelect: prevQuickSelect,
-        timeOptions: timeOptions
-      }), commonlyUsedRanges.length > 0 && (0, _react2.jsx)(_horizontal_rule.EuiHorizontalRule, {
-        margin: "s"
-      }), (0, _react2.jsx)(_commonly_used_time_ranges.EuiCommonlyUsedTimeRanges, {
-        applyTime: _this.applyTime,
-        commonlyUsedRanges: commonlyUsedRanges
-      }), recentlyUsedRanges.length > 0 && (0, _react2.jsx)(_horizontal_rule.EuiHorizontalRule, {
-        margin: "s"
-      }), (0, _react2.jsx)(_recently_used.EuiRecentlyUsed, {
-        applyTime: _this.applyTime,
-        commonlyUsedRanges: commonlyUsedRanges,
-        dateFormat: dateFormat,
-        recentlyUsedRanges: recentlyUsedRanges
-      }), _this.renderCustomQuickSelectPanels());
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderCustomQuickSelectPanels", function () {
-      var customQuickSelectPanels = _this.props.customQuickSelectPanels;
-
-      if (!customQuickSelectPanels) {
-        return null;
-      }
-
-      return customQuickSelectPanels.map(function (_ref2) {
-        var title = _ref2.title,
-            content = _ref2.content;
-        return (0, _react2.jsx)(_react.Fragment, {
-          key: title
-        }, (0, _react2.jsx)(_horizontal_rule.EuiHorizontalRule, {
-          margin: "s"
-        }), (0, _react2.jsx)(_title.EuiTitle, {
-          size: "xxxs"
-        }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_text.EuiText, {
-          size: "s",
-          className: "euiQuickSelectPopover__section"
-        }, /*#__PURE__*/_react.default.cloneElement(content, {
-          applyTime: _this.applyTime
-        })));
-      });
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(EuiQuickSelectPopover, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          applyRefreshInterval = _this$props2.applyRefreshInterval,
-          isDisabled = _this$props2.isDisabled,
-          isPaused = _this$props2.isPaused,
-          refreshInterval = _this$props2.refreshInterval;
-      var isOpen = this.state.isOpen;
-      var quickSelectButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
-        className: "euiFormControlLayout__prepend",
-        textProps: {
-          className: 'euiQuickSelectPopover__buttonText'
-        },
-        onClick: this.togglePopover,
-        "aria-label": "Date quick select",
-        size: "xs",
-        iconType: "arrowDown",
-        iconSide: "right",
-        isDisabled: isDisabled,
-        "data-test-subj": "superDatePickerToggleQuickMenuButton"
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "calendar"
-      }));
-      return (0, _react2.jsx)(_popover.EuiPopover, {
-        button: quickSelectButton,
-        isOpen: isOpen,
-        closePopover: this.closePopover,
-        anchorPosition: "downLeft",
-        anchorClassName: "euiQuickSelectPopover__anchor"
-      }, (0, _react2.jsx)("div", {
-        className: "euiQuickSelectPopover__content",
-        "data-test-subj": "superDatePickerQuickMenu"
-      }, this.renderDateTimeSections(), applyRefreshInterval && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_horizontal_rule.EuiHorizontalRule, {
-        margin: "s"
-      }), (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
-        onRefreshChange: applyRefreshInterval,
-        isPaused: isPaused,
-        refreshInterval: refreshInterval
-      }))));
+    if (!keepPopoverOpen) {
+      closePopover();
     }
-  }]);
-  return EuiQuickSelectPopover;
-}(_react.Component);
+  }, [_applyTime, closePopover]);
+  var buttonlabel = (0, _i18n.useEuiI18n)('euiQuickSelectPopover.buttonLabel', 'Date quick select');
+  var quickSelectButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    className: "euiFormControlLayout__prepend",
+    textProps: {
+      className: 'euiQuickSelectPopover__buttonText'
+    },
+    onClick: togglePopover,
+    "aria-label": buttonlabel,
+    title: buttonlabel,
+    size: "xs",
+    iconType: "arrowDown",
+    iconSide: "right",
+    isDisabled: props.isDisabled,
+    "data-test-subj": "superDatePickerToggleQuickMenuButton"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "calendar"
+  }));
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    button: quickSelectButton,
+    isOpen: isOpen,
+    closePopover: closePopover,
+    anchorPosition: "downLeft",
+    anchorClassName: "euiQuickSelectPopover__anchor"
+  }, (0, _react2.jsx)(EuiQuickSelectPanels, (0, _extends2.default)({}, props, {
+    applyTime: applyTime,
+    prevQuickSelect: prevQuickSelect
+  })));
+};
 
 exports.EuiQuickSelectPopover = EuiQuickSelectPopover;
 EuiQuickSelectPopover.propTypes = {
@@ -223,6 +131,7 @@ EuiQuickSelectPopover.propTypes = {
     title: _propTypes.default.string.isRequired,
     content: _propTypes.default.element.isRequired
   }).isRequired),
+  customQuickSelectRender: _propTypes.default.func,
   dateFormat: _propTypes.default.string.isRequired,
   end: _propTypes.default.string.isRequired,
   isDisabled: _propTypes.default.bool.isRequired,
@@ -249,4 +158,82 @@ EuiQuickSelectPopover.propTypes = {
       start: _propTypes.default.oneOfType([_propTypes.default.oneOf(["now"]), _propTypes.default.string.isRequired]).isRequired
     }).isRequired).isRequired
   }).isRequired
+};
+
+var EuiQuickSelectPanels = function EuiQuickSelectPanels(_ref3) {
+  var start = _ref3.start,
+      end = _ref3.end,
+      dateFormat = _ref3.dateFormat,
+      timeOptions = _ref3.timeOptions,
+      commonlyUsedRanges = _ref3.commonlyUsedRanges,
+      recentlyUsedRanges = _ref3.recentlyUsedRanges,
+      customQuickSelectPanels = _ref3.customQuickSelectPanels,
+      customQuickSelectRender = _ref3.customQuickSelectRender,
+      isPaused = _ref3.isPaused,
+      refreshInterval = _ref3.refreshInterval,
+      applyRefreshInterval = _ref3.applyRefreshInterval,
+      applyTime = _ref3.applyTime,
+      prevQuickSelect = _ref3.prevQuickSelect;
+  var quickSelectElement = (0, _react2.jsx)(_quick_select.EuiQuickSelect, {
+    applyTime: applyTime,
+    start: start,
+    end: end,
+    prevQuickSelect: prevQuickSelect,
+    timeOptions: timeOptions
+  });
+  var commonlyUsedElement = (0, _react2.jsx)(_commonly_used_time_ranges.EuiCommonlyUsedTimeRanges, {
+    applyTime: applyTime,
+    commonlyUsedRanges: commonlyUsedRanges
+  });
+  var recentlyUsedElement = (0, _react2.jsx)(_recently_used.EuiRecentlyUsed, {
+    applyTime: applyTime,
+    commonlyUsedRanges: commonlyUsedRanges,
+    dateFormat: dateFormat,
+    recentlyUsedRanges: recentlyUsedRanges
+  });
+  var refreshIntervalElement = applyRefreshInterval && (0, _react2.jsx)(_refresh_interval.EuiRefreshInterval, {
+    onRefreshChange: applyRefreshInterval,
+    isPaused: isPaused,
+    refreshInterval: refreshInterval
+  });
+  var customQuickSelectPanelsElement = (0, _react.useMemo)(function () {
+    if (!customQuickSelectPanels) {
+      return null;
+    }
+
+    return customQuickSelectPanels.map(function (_ref4) {
+      var title = _ref4.title,
+          content = _ref4.content;
+      return (0, _react2.jsx)("div", {
+        key: title,
+        className: "euiQuickSelectPopover__panel"
+      }, (0, _react2.jsx)(_title.EuiTitle, {
+        size: "xxxs"
+      }, (0, _react2.jsx)("span", null, title)), (0, _react2.jsx)(_text.EuiText, {
+        size: "s",
+        className: "euiQuickSelectPopover__section"
+      }, /*#__PURE__*/_react.default.cloneElement(content, {
+        applyTime: applyTime
+      })));
+    });
+  }, [customQuickSelectPanels, applyTime]);
+  return (0, _react2.jsx)("div", {
+    className: "euiQuickSelectPopover__content",
+    "data-test-subj": "superDatePickerQuickMenu"
+  }, customQuickSelectRender ? customQuickSelectRender({
+    quickSelect: quickSelectElement,
+    commonlyUsedRanges: commonlyUsedElement,
+    recentlyUsedRanges: recentlyUsedElement,
+    refreshInterval: refreshIntervalElement,
+    customQuickSelectPanels: customQuickSelectPanelsElement
+  }) : (0, _react2.jsx)(_react.default.Fragment, null, quickSelectElement, commonlyUsedElement, recentlyUsedElement, refreshIntervalElement, customQuickSelectPanelsElement));
+};
+
+exports.EuiQuickSelectPanels = EuiQuickSelectPanels;
+EuiQuickSelectPanels.propTypes = {
+  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
+  })
 };