@elastic/eui 119.1.0 → 120.0.0

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

@@ -1,14 +1,8 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,10 +11,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
-import { htmlIdGenerator } from '../../../../services';
+import { useGeneratedHtmlId } from '../../../../services';
 import { EuiI18n } from '../../../i18n';
 import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiButton, EuiButtonIcon } from '../../../button';
@@ -31,238 +25,239 @@ import { NEXT } from '../time_options';
 import { parseTimeParts } from './quick_select_utils';
 import { EuiQuickSelectPanel } from './quick_select_panel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-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__
 };
-export var EuiQuickSelect = /*#__PURE__*/function (_Component) {
-  function EuiQuickSelect(props) {
-    var _this;
-    _classCallCheck(this, EuiQuickSelect);
-    _this = _callSuper(this, EuiQuickSelect, [props]);
-    _defineProperty(_this, "generateId", htmlIdGenerator());
-    _defineProperty(_this, "timeSelectionId", _this.generateId());
-    _defineProperty(_this, "legendId", _this.generateId());
-    _defineProperty(_this, "onTimeTenseChange", function (event) {
-      _this.setState({
-        timeTense: event.target.value
+export var EuiQuickSelect = function EuiQuickSelect(_ref) {
+  var applyTime = _ref.applyTime,
+    start = _ref.start,
+    end = _ref.end,
+    prevQuickSelect = _ref.prevQuickSelect,
+    timeOptions = _ref.timeOptions;
+  var _useState = useState(function () {
+      var _parseTimeParts = parseTimeParts(start, end),
+        timeTenseDefault = _parseTimeParts.timeTense,
+        timeUnitsDefault = _parseTimeParts.timeUnits,
+        timeValueDefault = _parseTimeParts.timeValue;
+      return {
+        timeTense: prevQuickSelect && prevQuickSelect.timeTense ? prevQuickSelect.timeTense : timeTenseDefault,
+        timeValue: prevQuickSelect && prevQuickSelect.timeValue ? prevQuickSelect.timeValue : timeValueDefault,
+        timeUnits: prevQuickSelect && prevQuickSelect.timeUnits ? prevQuickSelect.timeUnits : timeUnitsDefault
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeSelectionId = useGeneratedHtmlId();
+  var legendId = useGeneratedHtmlId();
+  var onTimeTenseChange = function onTimeTenseChange(event) {
+    var timeTense = event.target.value;
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        timeTense: timeTense
       });
     });
-    _defineProperty(_this, "onTimeValueChange", function (event) {
-      var sanitizedValue = parseInt(event.target.value, 10);
-      _this.setState({
+  };
+  var onTimeValueChange = function onTimeValueChange(event) {
+    var sanitizedValue = parseInt(event.target.value, 10);
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
         timeValue: isNaN(sanitizedValue) ? 0 : sanitizedValue
       });
     });
-    _defineProperty(_this, "onTimeUnitsChange", function (event) {
-      _this.setState({
-        timeUnits: event.target.value
+  };
+  var onTimeUnitsChange = function onTimeUnitsChange(event) {
+    var timeUnits = event.target.value;
+    setState(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        timeUnits: timeUnits
       });
     });
-    _defineProperty(_this, "handleKeyDown", function (_ref) {
-      var key = _ref.key;
-      if (key === 'Enter') {
-        _this.applyQuickSelect();
-      }
-    });
-    _defineProperty(_this, "applyQuickSelect", function () {
-      var _this$state = _this.state,
-        timeTense = _this$state.timeTense,
-        timeValue = _this$state.timeValue,
-        timeUnits = _this$state.timeUnits;
-      if (timeTense === 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 === NEXT) {
+      applyTime({
+        start: 'now',
+        end: "now+".concat(timeValue).concat(timeUnits),
+        quickSelect: _objectSpread({}, state)
       });
+      return;
+    }
+    applyTime({
+      start: "now-".concat(timeValue).concat(timeUnits),
+      end: 'now',
+      quickSelect: _objectSpread({}, state)
     });
-    _defineProperty(_this, "getBounds", function () {
-      var startMoment = dateMath.parse(_this.props.start);
-      var endMoment = dateMath.parse(_this.props.end, {
-        roundUp: true
-      });
-      return {
-        min: startMoment && startMoment.isValid() ? startMoment : moment().subtract(15, 'minute'),
-        max: endMoment && endMoment.isValid() ? endMoment : moment()
-      };
+  };
+  var handleKeyDown = function handleKeyDown(_ref2) {
+    var key = _ref2.key;
+    if (key === 'Enter') {
+      applyQuickSelect();
+    }
+  };
+  var getBounds = function getBounds() {
+    var startMoment = dateMath.parse(start);
+    var endMoment = dateMath.parse(end, {
+      roundUp: true
     });
-    _defineProperty(_this, "stepForward", function () {
-      var _this$getBounds = _this.getBounds(),
-        min = _this$getBounds.min,
-        max = _this$getBounds.max;
-      var diff = max.diff(min);
-      _this.props.applyTime({
-        start: moment(max).toISOString(),
-        end: moment(max).add(diff, 'ms').toISOString(),
-        keepPopoverOpen: true
-      });
+    return {
+      min: startMoment && startMoment.isValid() ? startMoment : moment().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : moment()
+    };
+  };
+  var stepForward = function stepForward() {
+    var _getBounds = getBounds(),
+      min = _getBounds.min,
+      max = _getBounds.max;
+    var diff = max.diff(min);
+    applyTime({
+      start: moment(max).toISOString(),
+      end: moment(max).add(diff, 'ms').toISOString(),
+      keepPopoverOpen: true
     });
-    _defineProperty(_this, "stepBackward", function () {
-      var _this$getBounds2 = _this.getBounds(),
-        min = _this$getBounds2.min,
-        max = _this$getBounds2.max;
-      var diff = max.diff(min);
-      _this.props.applyTime({
-        start: moment(min).subtract(diff, 'ms').toISOString(),
-        end: moment(min).toISOString(),
-        keepPopoverOpen: true
-      });
+  };
+  var stepBackward = function stepBackward() {
+    var _getBounds2 = getBounds(),
+      min = _getBounds2.min,
+      max = _getBounds2.max;
+    var diff = max.diff(min);
+    applyTime({
+      start: moment(min).subtract(diff, 'ms').toISOString(),
+      end: moment(min).toISOString(),
+      keepPopoverOpen: true
     });
-    var _parseTimeParts = parseTimeParts(props.start, props.end),
-      timeTenseDefault = _parseTimeParts.timeTense,
-      timeUnitsDefault = _parseTimeParts.timeUnits,
-      timeValueDefault = _parseTimeParts.timeValue;
-    _this.state = {
-      timeTense: props.prevQuickSelect && props.prevQuickSelect.timeTense ? props.prevQuickSelect.timeTense : timeTenseDefault,
-      timeValue: props.prevQuickSelect && props.prevQuickSelect.timeValue ? props.prevQuickSelect.timeValue : timeValueDefault,
-      timeUnits: props.prevQuickSelect && props.prevQuickSelect.timeUnits ? props.prevQuickSelect.timeUnits : timeUnitsDefault
-    };
-    return _this;
-  }
-  _inherits(EuiQuickSelect, _Component);
-  return _createClass(EuiQuickSelect, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$state2 = this.state,
-        timeTense = _this$state2.timeTense,
-        timeValue = _this$state2.timeValue,
-        timeUnits = _this$state2.timeUnits;
-      var _this$props$timeOptio = this.props.timeOptions,
-        timeTenseOptions = _this$props$timeOptio.timeTenseOptions,
-        timeUnitsOptions = _this$props$timeOptio.timeUnitsOptions;
-      var matchedTimeUnit = timeUnitsOptions.find(function (_ref2) {
-        var value = _ref2.value;
-        return value === timeUnits;
-      });
-      var timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
-      return ___EmotionJSX(EuiQuickSelectPanel, {
-        component: "fieldset",
-        title: ___EmotionJSX(EuiI18n, {
-          token: "euiQuickSelect.quickSelectTitle",
-          default: "Quick select"
-        }),
-        titleId: this.legendId,
-        "aria-describedby": this.timeSelectionId,
-        css: _ref3
-      }, ___EmotionJSX(EuiFlexGroup, {
-        css: _ref4,
-        alignItems: "center",
-        gutterSize: "s",
-        responsive: false
-      }, ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.previousLabel",
-        default: "Previous time window"
-      }, function (previousLabel) {
-        return ___EmotionJSX(EuiToolTip, {
-          content: previousLabel,
-          disableScreenReaderOutput: true
-        }, ___EmotionJSX(EuiButtonIcon, {
-          "aria-label": previousLabel,
-          iconType: "chevronSingleLeft",
-          onClick: _this2.stepBackward
-        }));
-      })), ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.nextLabel",
-        default: "Next time window"
-      }, function (nextLabel) {
-        return ___EmotionJSX(EuiToolTip, {
-          content: nextLabel,
-          disableScreenReaderOutput: true
-        }, ___EmotionJSX(EuiButtonIcon, {
-          "aria-label": nextLabel,
-          iconType: "chevronSingleRight",
-          onClick: _this2.stepForward
-        }));
-      }))), ___EmotionJSX(EuiFlexGroup, {
-        gutterSize: "s",
-        responsive: false
-      }, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.tenseLabel",
-        default: "Time tense"
-      }, function (tenseLabel) {
-        return ___EmotionJSX(EuiSelect, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-label": tenseLabel,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          value: timeTense,
-          options: timeTenseOptions,
-          onChange: _this2.onTimeTenseChange
-        });
-      })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.valueLabel",
-        default: "Time value"
-      }, function (valueLabel) {
-        return ___EmotionJSX(EuiFieldNumber, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          "aria-label": valueLabel,
-          value: timeValue,
-          onChange: _this2.onTimeValueChange
-        });
-      })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.unitLabel",
-        default: "Time unit"
-      }, function (unitLabel) {
-        return ___EmotionJSX(EuiSelect, {
-          compressed: true,
-          onKeyDown: _this2.handleKeyDown,
-          "aria-label": unitLabel,
-          "aria-describedby": "".concat(_this2.timeSelectionId, " ").concat(_this2.legendId),
-          value: timeUnits,
-          options: timeUnitsOptions,
-          onChange: _this2.onTimeUnitsChange
-        });
-      })), ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(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
-      }, ___EmotionJSX(EuiI18n, {
-        token: "euiQuickSelect.applyButton",
-        default: "Apply"
-      })))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-        id: this.timeSelectionId
-      }, ___EmotionJSX(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 ___EmotionJSX(EuiQuickSelectPanel, {
+    component: "fieldset",
+    title: ___EmotionJSX(EuiI18n, {
+      token: "euiQuickSelect.quickSelectTitle",
+      default: "Quick select"
+    }),
+    titleId: legendId,
+    "aria-describedby": timeSelectionId,
+    css: _ref4
+  }, ___EmotionJSX(EuiFlexGroup, {
+    css: _ref5,
+    alignItems: "center",
+    gutterSize: "s",
+    responsive: false
+  }, ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.previousLabel",
+    default: "Previous time window"
+  }, function (previousLabel) {
+    return ___EmotionJSX(EuiToolTip, {
+      content: previousLabel,
+      disableScreenReaderOutput: true
+    }, ___EmotionJSX(EuiButtonIcon, {
+      "aria-label": previousLabel,
+      iconType: "chevronSingleLeft",
+      onClick: stepBackward
+    }));
+  })), ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.nextLabel",
+    default: "Next time window"
+  }, function (nextLabel) {
+    return ___EmotionJSX(EuiToolTip, {
+      content: nextLabel,
+      disableScreenReaderOutput: true
+    }, ___EmotionJSX(EuiButtonIcon, {
+      "aria-label": nextLabel,
+      iconType: "chevronSingleRight",
+      onClick: stepForward
+    }));
+  }))), ___EmotionJSX(EuiFlexGroup, {
+    gutterSize: "s",
+    responsive: false
+  }, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.tenseLabel",
+    default: "Time tense"
+  }, function (tenseLabel) {
+    return ___EmotionJSX(EuiSelect, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-label": tenseLabel,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      value: timeTense,
+      options: timeTenseOptions,
+      onChange: onTimeTenseChange
+    });
+  })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.valueLabel",
+    default: "Time value"
+  }, function (valueLabel) {
+    return ___EmotionJSX(EuiFieldNumber, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      "aria-label": valueLabel,
+      value: timeValue,
+      onChange: onTimeValueChange
+    });
+  })), ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.unitLabel",
+    default: "Time unit"
+  }, function (unitLabel) {
+    return ___EmotionJSX(EuiSelect, {
+      compressed: true,
+      onKeyDown: handleKeyDown,
+      "aria-label": unitLabel,
+      "aria-describedby": "".concat(timeSelectionId, " ").concat(legendId),
+      value: timeUnits,
+      options: timeUnitsOptions,
+      onChange: onTimeUnitsChange
+    });
+  })), ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(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
+  }, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.applyButton",
+    default: "Apply"
+  })))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    id: timeSelectionId
+  }, ___EmotionJSX(EuiI18n, {
+    token: "euiQuickSelect.fullDescription",
+    default: "Currently set to {timeTense} {timeValue} {timeUnit}.",
+    values: {
+      timeTense: timeTense,
+      timeValue: timeValue,
+      timeUnit: timeUnit
     }
-  }]);
-}(Component);
+  }))));
+};

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

@@ -98,7 +98,7 @@ export var EuiSuperUpdateButton = /*#__PURE__*/function (_Component) {
       var classes = classNames('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

package/optimize/es/components/delay_hide/delay_hide.js

@@ -1,11 +1,4 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,85 +7,42 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import { Component } from 'react';
+import { useEffect, useState } from 'react';
 function isComponentBecomingVisible() {
   var prevHide = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var nextHide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return prevHide === true && nextHide === false;
 }
-export var EuiDelayHide = /*#__PURE__*/function (_Component) {
-  function EuiDelayHide() {
-    var _this;
-    _classCallCheck(this, EuiDelayHide);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+export var EuiDelayHide = function EuiDelayHide(_ref) {
+  var _ref$hide = _ref.hide,
+    hide = _ref$hide === void 0 ? false : _ref$hide,
+    _ref$minimumDuration = _ref.minimumDuration,
+    minimumDuration = _ref$minimumDuration === void 0 ? 1000 : _ref$minimumDuration,
+    render = _ref.render;
+  var _useState = useState(hide),
+    _useState2 = _slicedToArray(_useState, 2),
+    countdownExpired = _useState2[0],
+    setCountdownExpired = _useState2[1];
+  var _useState3 = useState(hide),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prevHide = _useState4[0],
+    setPrevHide = _useState4[1];
+  if (hide !== prevHide) {
+    setPrevHide(hide);
+    if (isComponentBecomingVisible(prevHide, hide)) {
+      setCountdownExpired(false);
     }
-    _this = _callSuper(this, EuiDelayHide, [].concat(args));
-    _defineProperty(_this, "state", {
-      hide: _this.props.hide,
-      countdownExpired: _this.props.hide
-    });
-    _defineProperty(_this, "timeoutId", void 0);
-    _defineProperty(_this, "startCountdown", function () {
-      // only start the countdown if there is not one in progress
-      if (_this.timeoutId == null) {
-        _this.timeoutId = setTimeout(_this.finishCountdown,
-        // even though `minimumDuration` cannot be undefined, passing a strict number type to setTimeout makes TS interpret
-        // it as a NodeJS.Timer instead of a number. The DOM lib defines the setTimeout call as taking `number | undefined`
-        // so we cast minimumDuration to this type instead to force TS's cooperation
-        _this.props.minimumDuration);
-      }
-    });
-    _defineProperty(_this, "finishCountdown", function () {
-      _this.timeoutId = undefined;
-      _this.setState({
-        countdownExpired: true
-      });
-    });
-    return _this;
   }
-  _inherits(EuiDelayHide, _Component);
-  return _createClass(EuiDelayHide, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // if the component begins visible start counting
-      if (this.props.hide === false) {
-        this.startCountdown();
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var isBecomingVisible = isComponentBecomingVisible(prevProps.hide, this.props.hide);
-      if (isBecomingVisible) {
-        this.startCountdown();
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.timeoutId != null) {
-        clearTimeout(this.timeoutId);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var shouldHideContent = this.props.hide === true && this.state.countdownExpired;
-      return shouldHideContent ? null : this.props.render();
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      var isBecomingVisible = isComponentBecomingVisible(prevState.hide, nextProps.hide);
-      return {
-        hide: nextProps.hide,
-        countdownExpired: isBecomingVisible ? false : prevState.countdownExpired
+  useEffect(function () {
+    if (countdownExpired === false) {
+      var timeoutId = window.setTimeout(function () {
+        return setCountdownExpired(true);
+      }, minimumDuration);
+      return function () {
+        return window.clearTimeout(timeoutId);
       };
     }
-  }]);
-}(Component);
-_defineProperty(EuiDelayHide, "defaultProps", {
-  hide: false,
-  minimumDuration: 1000
-});
+  }, [countdownExpired, minimumDuration]);
+  return hide === true && countdownExpired ? null : render();
+};
+EuiDelayHide.displayName = 'EuiDelayHide';