@elastic/eui 71.0.0 → 72.0.0

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiQuickSelectPopover = void 0;
+exports.EuiQuickSelectPopover = exports.EuiQuickSelectPanels = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -19,10 +19,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");
@@ -33,194 +33,102 @@ var _refresh_interval = require("../../auto_refresh/refresh_interval");
 
 var _react2 = require("@emotion/react");
 
+var _excluded = ["applyTime"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-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; } }
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 
-var EuiQuickSelectPopover = /*#__PURE__*/function (_Component) {
-  _inherits(EuiQuickSelectPopover, _Component);
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-  var _super = _createSuper(EuiQuickSelectPopover);
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-  function EuiQuickSelectPopover() {
-    var _this;
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
 
-    _classCallCheck(this, EuiQuickSelectPopover);
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-    _this = _super.call.apply(_super, [this].concat(args));
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      isOpen: false
-    });
+var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
+  var _applyTime = _ref.applyTime,
+      props = _objectWithoutProperties(_ref, _excluded);
 
-    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
-      _this.setState({
-        isOpen: false
-      });
-    });
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      prevQuickSelect = _useState2[0],
+      setQuickSelect = _useState2[1];
 
-    _defineProperty(_assertThisInitialized(_this), "togglePopover", function () {
-      _this.setState(function (prevState) {
-        return {
-          isOpen: !prevState.isOpen
-        };
-      });
-    });
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
 
-    _defineProperty(_assertThisInitialized(_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();
-      }
+  var closePopover = (0, _react.useCallback)(function () {
+    return setIsOpen(false);
+  }, []);
+  var togglePopover = (0, _react.useCallback)(function () {
+    return setIsOpen(function (isOpen) {
+      return !isOpen;
     });
-
-    _defineProperty(_assertThisInitialized(_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());
+  }, []);
+  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
     });
 
-    _defineProperty(_assertThisInitialized(_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;
-  }
-
-  _createClass(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 (quickSelect) {
+      setQuickSelect(quickSelect);
     }
-  }]);
 
-  return EuiQuickSelectPopover;
-}(_react.Component);
+    if (!keepPopoverOpen) {
+      closePopover();
+    }
+  }, [_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, _extends({}, props, {
+    applyTime: applyTime,
+    prevQuickSelect: prevQuickSelect
+  })));
+};
 
 exports.EuiQuickSelectPopover = EuiQuickSelectPopover;
 EuiQuickSelectPopover.propTypes = {
@@ -235,6 +143,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,
@@ -261,4 +170,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
+  })
 };

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

@@ -65,10 +65,13 @@ var EuiRecentlyUsed = function EuiRecentlyUsed(_ref) {
       dateFormat: dateFormat
     })));
   });
-  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: "euiRecentlyUsed.legend",
     default: "Recently used date ranges"

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

@@ -421,6 +421,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           commonlyUsedRanges = _this$props5.commonlyUsedRanges,
           timeOptions = _this$props5.timeOptions,
           customQuickSelectPanels = _this$props5.customQuickSelectPanels,
+          customQuickSelectRender = _this$props5.customQuickSelectRender,
           dateFormat = _this$props5.dateFormat,
           end = _this$props5.end,
           isAutoRefreshOnly = _this$props5.isAutoRefreshOnly,
@@ -451,6 +452,7 @@ var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         applyTime: this.applyQuickTime,
         commonlyUsedRanges: commonlyUsedRanges,
         customQuickSelectPanels: customQuickSelectPanels,
+        customQuickSelectRender: customQuickSelectRender,
         dateFormat: dateFormat,
         end: end,
         isDisabled: isDisabled,
@@ -553,6 +555,13 @@ EuiSuperDatePickerInternal.propTypes = {
     content: _propTypes.default.element.isRequired
   }).isRequired),
 
+  /**
+     * An optional render prop function that allows customizing the display of the Quick Select menu.
+     * This function passes all default quick select panels within an object, allowing you to
+     * re-order panels, omit certain panels entirely, or pass in your own fully custom content.
+     */
+  customQuickSelectRender: _propTypes.default.func,
+
   /**
      * Specifies the formatted used when displaying dates and/or datetimes
      */
@@ -768,6 +777,13 @@ EuiSuperDatePicker.propTypes = {
     content: _propTypes.default.element.isRequired
   }).isRequired),
 
+  /**
+     * An optional render prop function that allows customizing the display of the Quick Select menu.
+     * This function passes all default quick select panels within an object, allowing you to
+     * re-order panels, omit certain panels entirely, or pass in your own fully custom content.
+     */
+  customQuickSelectRender: _propTypes.default.func,
+
   /**
      * Specifies the formatted used when displaying dates and/or datetimes
      */

package/lib/components/delay_hide/delay_hide.a11y.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _delay_hide = require("./delay_hide");
+
+var _form = require("../form");
+
+var _flex = require("../flex");
+
+var _loading = require("../loading");
+
+var _react2 = require("@emotion/react");
+
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var DelayHide = function DelayHide() {
+  var _useState = (0, _react.useState)(1000),
+      _useState2 = _slicedToArray(_useState, 2),
+      minimumDuration = _useState2[0],
+      setDuration = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hide = _useState4[0],
+      setHide = _useState4[1];
+
+  var onChangeMinimumDuration = function onChangeMinimumDuration(event) {
+    setDuration(parseInt(event.target.value, 10));
+  };
+
+  var onChangeHide = function onChangeHide(event) {
+    setHide(event.target.checked);
+  };
+
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFormRow, null, (0, _react2.jsx)(_form.EuiCheckbox, {
+    id: "dummy-id",
+    checked: hide,
+    onChange: onChangeHide,
+    label: "Hide child"
+  })), (0, _react2.jsx)(_form.EuiFormRow, {
+    label: "Minimum duration"
+  }, (0, _react2.jsx)(_form.EuiFieldNumber, {
+    value: minimumDuration,
+    onChange: onChangeMinimumDuration
+  })), (0, _react2.jsx)(_form.EuiFormRow, {
+    label: "Child to render"
+  }, (0, _react2.jsx)(_delay_hide.EuiDelayHide, {
+    hide: hide,
+    minimumDuration: minimumDuration,
+    render: function render() {
+      return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+        size: "m"
+      });
+    }
+  }))));
+};
+
+beforeEach(function () {
+  cy.realMount((0, _react2.jsx)(DelayHide, null));
+});
+describe('EuiHideRender', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is checked', function () {
+      cy.get('input.euiCheckbox__input').realClick();
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('not.exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is pressed', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('not.exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when the hide child input is toggled', function () {
+      cy.realPress('Tab');
+      cy.get('input.euiCheckbox__input').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]').should('not.exist');
+      cy.realPress('Space');
+      cy.get('div.euiFormRow__fieldWrapper').last().find('span[role="progressbar"]', {
+        timeout: 5000
+      }).should('exist');
+      cy.checkAxe();
+    });
+  });
+});