@elastic/eui 12.2.0 → 12.4.0

package/lib/components/combo_box/combo_box.js

@@ -705,7 +705,8 @@ function (_Component) {
           rowHeight: rowHeight,
           "data-test-subj": optionsListDataTestSubj,
           fullWidth: fullWidth,
-          rootId: this.rootId
+          rootId: this.rootId,
+          onCloseList: this.closeList
         }));
       }
 

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -93,6 +93,14 @@ function (_Component) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "closeListOnScroll", function (e) {
+      // close the list when a scroll event happens, but not if the scroll happened in the options list
+      // this mirrors Firefox's approach of auto-closing `select` elements onscroll
+      if (_this.list && _this.list.contains(e.target) === false) {
+        _this.props.onCloseList();
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "listRef", function (node) {
       _this.props.listRef(node);
 
@@ -105,13 +113,25 @@ function (_Component) {
   _createClass(EuiComboBoxOptionsList, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+
       // Wait a frame, otherwise moving focus from one combo box to another will result in the class
       // being removed from the body.
       requestAnimationFrame(function () {
         document.body.classList.add('euiBody-hasPortalContent');
       });
       this.updatePosition();
-      window.addEventListener('resize', this.updatePosition);
+      window.addEventListener('resize', this.updatePosition); // Firefox will trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+
+      setTimeout(function () {
+        window.addEventListener('scroll', _this2.closeListOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+
+        });
+      }, 500);
     }
   }, {
     key: "componentDidUpdate",
@@ -129,11 +149,15 @@ function (_Component) {
     value: function componentWillUnmount() {
       document.body.classList.remove('euiBody-hasPortalContent');
       window.removeEventListener('resize', this.updatePosition);
+      window.removeEventListener('scroll', this.closeListOnScroll, {
+        passive: true,
+        capture: true
+      });
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
       var _this$props = this.props,
           options = _this$props.options,
@@ -159,7 +183,8 @@ function (_Component) {
           dataTestSubj = _this$props['data-test-subj'],
           activeOptionIndex = _this$props.activeOptionIndex,
           rootId = _this$props.rootId,
-          rest = _objectWithoutProperties(_this$props, ["options", "isLoading", "selectedOptions", "onCreateOption", "searchValue", "matchingOptions", "optionRef", "onOptionClick", "onOptionEnterKey", "areAllOptionsSelected", "getSelectedOptionForSearchValue", "position", "renderOption", "listRef", "updatePosition", "width", "scrollToIndex", "onScroll", "rowHeight", "fullWidth", "data-test-subj", "activeOptionIndex", "rootId"]);
+          onCloseList = _this$props.onCloseList,
+          rest = _objectWithoutProperties(_this$props, ["options", "isLoading", "selectedOptions", "onCreateOption", "searchValue", "matchingOptions", "optionRef", "onOptionClick", "onOptionEnterKey", "areAllOptionsSelected", "getSelectedOptionForSearchValue", "position", "renderOption", "listRef", "updatePosition", "width", "scrollToIndex", "onScroll", "rowHeight", "fullWidth", "data-test-subj", "activeOptionIndex", "rootId", "onCloseList"]);
 
       var emptyStateContent;
 
@@ -262,7 +287,7 @@ function (_Component) {
               return onOptionClick(option);
             } // onEnterKey={onOptionEnterKey}
             ,
-            ref: optionRef.bind(_this2, index),
+            ref: optionRef.bind(_this3, index),
             isFocused: activeOptionIndex === index,
             id: rootId("_option-".concat(index)),
             title: label,
@@ -315,7 +340,8 @@ _defineProperty(EuiComboBoxOptionsList, "propTypes", {
   rowHeight: _propTypes.default.number,
   fullWidth: _propTypes.default.bool,
   activeOptionIndex: _propTypes.default.number,
-  rootId: _propTypes.default.func.isRequired
+  rootId: _propTypes.default.func.isRequired,
+  onCloseList: _propTypes.default.func.isRequired
 });
 
 _defineProperty(EuiComboBoxOptionsList, "defaultProps", {
@@ -332,6 +358,15 @@ EuiComboBoxOptionsList.__docgenInfo = {
     "modifiers": [],
     "params": [],
     "returns": null
+  }, {
+    "name": "closeListOnScroll",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "e",
+      "type": null
+    }],
+    "returns": null
   }, {
     "name": "listRef",
     "docblock": null,
@@ -515,6 +550,13 @@ EuiComboBoxOptionsList.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "onCloseList": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
     }
   }
 };

package/lib/components/date_picker/date_picker.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiDatePicker = void 0;
+exports.EuiDatePicker = exports.euiDatePickerDefaultTimeFormat = exports.euiDatePickerDefaultDateFormat = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -49,6 +49,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
+var euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
+exports.euiDatePickerDefaultDateFormat = euiDatePickerDefaultDateFormat;
+var euiDatePickerDefaultTimeFormat = 'hh:mm A';
+exports.euiDatePickerDefaultTimeFormat = euiDatePickerDefaultTimeFormat;
+
 var EuiDatePicker =
 /*#__PURE__*/
 function (_Component) {
@@ -116,6 +121,14 @@ function (_Component) {
         optionalIcon = 'clock';
       } else {
         optionalIcon = 'calendar';
+      } // In case the consumer did not alter the default date format but wants
+      // to add the time select, we append the default time format
+
+
+      var fullDateFormat = dateFormat;
+
+      if (showTimeSelect && dateFormat === euiDatePickerDefaultDateFormat) {
+        fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
       } // EuiDatePicker only supports a subset of props from react-datepicker. Using any of
       // the unsupported props below will spit out an error.
 
@@ -151,7 +164,7 @@ function (_Component) {
         calendarClassName: calendarClassName,
         className: datePickerClasses,
         customInput: customInput,
-        dateFormat: dateFormat,
+        dateFormat: fullDateFormat,
         dayClassName: dayClassName,
         disabled: disabled,
         excludeDates: excludeDates,
@@ -329,13 +342,14 @@ EuiDatePicker.propTypes = {
 };
 EuiDatePicker.defaultProps = {
   adjustDateOnChange: true,
-  dateFormat: 'MM/DD/YYYY hh:mm A',
+  dateFormat: euiDatePickerDefaultDateFormat,
   fullWidth: false,
   isLoading: false,
   shadow: true,
   shouldCloseOnSelect: true,
   showIcon: true,
-  timeFormat: 'hh:mm A'
+  showTimeSelect: false,
+  timeFormat: euiDatePickerDefaultTimeFormat
 };
 EuiDatePicker.__docgenInfo = {
   "description": "",
@@ -355,7 +369,7 @@ EuiDatePicker.__docgenInfo = {
     },
     "dateFormat": {
       "defaultValue": {
-        "value": "'MM/DD/YYYY hh:mm A'",
+        "value": "'MM/DD/YYYY'",
         "computed": false
       },
       "type": {
@@ -419,6 +433,17 @@ EuiDatePicker.__docgenInfo = {
       "required": false,
       "description": "Show the icon in input"
     },
+    "showTimeSelect": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Show the time selection alongside the calendar"
+    },
     "timeFormat": {
       "defaultValue": {
         "value": "'hh:mm A'",
@@ -562,13 +587,6 @@ EuiDatePicker.__docgenInfo = {
       "required": false,
       "description": "The selected datetime (in moment format)"
     },
-    "showTimeSelect": {
-      "type": {
-        "name": "bool"
-      },
-      "required": false,
-      "description": "Show the time selection alongside the calendar"
-    },
     "showTimeSelectOnly": {
       "type": {
         "name": "bool"

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

@@ -60,12 +60,11 @@ function EuiDatePopoverButton(props) {
   }, buttonProps), (0, _pretty_duration.formatTimeString)(value, dateFormat, roundUp));
 
   return _react.default.createElement(_popover.EuiPopover, _extends({
-    className: "euiDatePopoverButton__popover",
     button: button,
     isOpen: isOpen,
     closePopover: onPopoverClose,
     anchorPosition: position === 'start' ? 'downLeft' : 'downRight',
-    anchorClassName: "euiDatePopoverButton__popoverAnchor",
+    display: "block",
     panelPaddingSize: "none",
     ownFocus: true
   }, rest), _react.default.createElement(_date_popover_content.EuiDatePopoverContent, {

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

@@ -59,6 +59,7 @@ function EuiCommonlyUsedTimeRanges(_ref) {
   }, _react.default.createElement(_flex.EuiFlexGrid, {
     gutterSize: "s",
     columns: 2,
+    direction: "column",
     responsive: false
   }, links)), _react.default.createElement(_horizontal_rule.EuiHorizontalRule, {
     margin: "s"

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

@@ -490,30 +490,30 @@ _defineProperty(EuiSuperDatePicker, "defaultProps", {
     start: 'now/d',
     end: 'now/d',
     label: 'Today'
-  }, {
-    start: 'now-1d/d',
-    end: 'now-1d/d',
-    label: 'Yesterday'
   }, {
     start: 'now/w',
     end: 'now/w',
     label: 'This week'
-  }, {
-    start: 'now/w',
-    end: 'now',
-    label: 'Week to date'
   }, {
     start: 'now/M',
     end: 'now/M',
     label: 'This month'
-  }, {
-    start: 'now/M',
-    end: 'now',
-    label: 'Month to date'
   }, {
     start: 'now/y',
     end: 'now/y',
     label: 'This year'
+  }, {
+    start: 'now-1d/d',
+    end: 'now-1d/d',
+    label: 'Yesterday'
+  }, {
+    start: 'now/w',
+    end: 'now',
+    label: 'Week to date'
+  }, {
+    start: 'now/M',
+    end: 'now',
+    label: 'Month to date'
   }, {
     start: 'now/y',
     end: 'now',
@@ -714,7 +714,7 @@ EuiSuperDatePicker.__docgenInfo = {
     },
     "commonlyUsedRanges": {
       "defaultValue": {
-        "value": "[\n  { start: 'now/d', end: 'now/d', label: 'Today' },\n  { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' },\n  { start: 'now/w', end: 'now/w', label: 'This week' },\n  { start: 'now/w', end: 'now', label: 'Week to date' },\n  { start: 'now/M', end: 'now/M', label: 'This month' },\n  { start: 'now/M', end: 'now', label: 'Month to date' },\n  { start: 'now/y', end: 'now/y', label: 'This year' },\n  { start: 'now/y', end: 'now', label: 'Year to date' },\n]",
+        "value": "[\n  { start: 'now/d', end: 'now/d', label: 'Today' },\n  { start: 'now/w', end: 'now/w', label: 'This week' },\n  { start: 'now/M', end: 'now/M', label: 'This month' },\n  { start: 'now/y', end: 'now/y', label: 'This year' },\n  { start: 'now-1d/d', end: 'now-1d/d', label: 'Yesterday' },\n  { start: 'now/w', end: 'now', label: 'Week to date' },\n  { start: 'now/M', end: 'now', label: 'Month to date' },\n  { start: 'now/y', end: 'now', label: 'Year to date' },\n]",
         "computed": false
       },
       "type": {

package/lib/components/delay_hide/delay_hide.test.js

@@ -60,6 +60,7 @@ describe('when EuiDelayHide is visible initially', function () {
       hide: true
     });
     jest.advanceTimersByTime(1100);
+    wrapper.setProps({});
     expect(wrapper.html()).toEqual(null);
   });
   test('it should be visible after 1100ms regardless of prop changes in-between', function () {
@@ -181,9 +182,10 @@ describe('when EuiDelayHide is hidden initially', function () {
             jest.advanceTimersByTime(900);
             expect(wrapper.html()).toEqual('<div>Hello World</div>');
             jest.advanceTimersByTime(200);
+            wrapper.setProps({});
             expect(wrapper.html()).toEqual(null);
 
-          case 7:
+          case 8:
           case "end":
             return _context4.stop();
         }
@@ -235,6 +237,7 @@ describe('when EuiDelayHide is visible initially and has a minimumDuration of 20
   test('it should be hidden after 2100ms', function () {
     var wrapper = getWrapper();
     jest.advanceTimersByTime(2100);
+    wrapper.setProps({});
     expect(wrapper.html()).toEqual(null);
   });
 });
@@ -263,6 +266,7 @@ describe('when EuiDelayHide has been visible and become hidden', function () {
     });
     expect(wrapper.html()).toEqual('<div>Hello World</div>');
     jest.advanceTimersByTime(1100);
+    wrapper.setProps({});
     expect(wrapper.html()).toEqual(null);
   });
 });

package/lib/components/filter_group/filter_button.js

@@ -19,6 +19,8 @@ var _button_empty = require("../button/button_empty");
 
 var _icon = require("../icon");
 
+var _inner_text = require("../inner_text");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -29,6 +31,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
 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; }
 
 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; }
@@ -71,10 +81,16 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     dataText = children;
   }
 
+  var _useInnerText = (0, _inner_text.useInnerText)(),
+      _useInnerText2 = _slicedToArray(_useInnerText, 2),
+      ref = _useInnerText2[0],
+      innerText = _useInnerText2[1];
+
   var buttonContents = _react.default.createElement(_react.Fragment, null, _react.default.createElement("span", {
+    ref: ref,
     className: "euiFilterButton__textShift",
-    "data-text": dataText,
-    title: dataText
+    "data-text": dataText || innerText,
+    title: dataText || innerText
   }, children), numFiltersDefined && _react.default.createElement(_i18n.EuiI18n, {
     token: "euiFilterButton.filterBadge",
     values: {

package/lib/components/flex/flex_grid.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFlexGrid = exports.COLUMNS = exports.GUTTER_SIZES = void 0;
+exports.EuiFlexGrid = exports.COLUMNS = exports.GUTTER_SIZES = exports.DIRECTIONS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -21,6 +21,12 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 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; }
 
+var directionToClassNameMap = {
+  row: null,
+  column: 'euiFlexGrid--directionColumn'
+};
+var DIRECTIONS = (0, _common.keysOf)(directionToClassNameMap);
+exports.DIRECTIONS = DIRECTIONS;
 var gutterSizeToClassNameMap = {
   none: 'euiFlexGrid--gutterNone',
   s: 'euiFlexGrid--gutterSmall',
@@ -47,13 +53,15 @@ var EuiFlexGrid = function EuiFlexGrid(_ref) {
       className = _ref.className,
       _ref$gutterSize = _ref.gutterSize,
       gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'row' : _ref$direction,
       _ref$responsive = _ref.responsive,
       responsive = _ref$responsive === void 0 ? true : _ref$responsive,
       _ref$columns = _ref.columns,
       columns = _ref$columns === void 0 ? 0 : _ref$columns,
-      rest = _objectWithoutProperties(_ref, ["children", "className", "gutterSize", "responsive", "columns"]);
+      rest = _objectWithoutProperties(_ref, ["children", "className", "gutterSize", "direction", "responsive", "columns"]);
 
-  var classes = (0, _classnames.default)('euiFlexGrid', gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, columns != null ? columnsToClassNameMap[columns] : undefined, {
+  var classes = (0, _classnames.default)('euiFlexGrid', gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, columns != null ? columnsToClassNameMap[columns] : undefined, direction ? directionToClassNameMap[direction] : undefined, {
     'euiFlexGrid--responsive': responsive
   }, className);
   return _react.default.createElement("div", _extends({
@@ -67,8 +75,27 @@ EuiFlexGrid.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   children: _propTypes.default.node,
+
+  /**
+     * Number of columns `1-4`, pass `0` for normal display
+     */
   columns: _propTypes.default.oneOf([0, 1, 2, 3, 4]),
+
+  /**
+     * Flex layouts default to left-right then top-down (`row`).
+     * Change this prop to `column` to create a top-down then left-right display.
+     * Only works with column count of `1-4`.
+     */
+  direction: _propTypes.default.oneOf(["row", "column"]),
+
+  /**
+     * Space between flex items
+     */
   gutterSize: _propTypes.default.oneOf(["none", "s", "m", "l", "xl"]),
+
+  /**
+     * Force each item to be display block on smaller screens
+     */
   responsive: _propTypes.default.bool
 };
 EuiFlexGrid.__docgenInfo = {
@@ -101,7 +128,25 @@ EuiFlexGrid.__docgenInfo = {
         }]
       },
       "required": false,
-      "description": ""
+      "description": "Space between flex items"
+    },
+    "direction": {
+      "defaultValue": {
+        "value": "'row'",
+        "computed": false
+      },
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"row\"",
+          "computed": false
+        }, {
+          "value": "\"column\"",
+          "computed": false
+        }]
+      },
+      "required": false,
+      "description": "Flex layouts default to left-right then top-down (`row`).\nChange this prop to `column` to create a top-down then left-right display.\nOnly works with column count of `1-4`."
     },
     "responsive": {
       "defaultValue": {
@@ -112,7 +157,7 @@ EuiFlexGrid.__docgenInfo = {
         "name": "bool"
       },
       "required": false,
-      "description": ""
+      "description": "Force each item to be display block on smaller screens"
     },
     "columns": {
       "defaultValue": {
@@ -139,7 +184,7 @@ EuiFlexGrid.__docgenInfo = {
         }]
       },
       "required": false,
-      "description": ""
+      "description": "Number of columns `1-4`, pass `0` for normal display"
     },
     "className": {
       "type": {

package/lib/components/flex/flex_grid.test.js

@@ -40,6 +40,16 @@ describe('EuiFlexGrid', function () {
         });
       });
     });
+    describe('direction', function () {
+      _flex_grid.DIRECTIONS.forEach(function (value) {
+        test("".concat(value, " is rendered"), function () {
+          var component = (0, _enzyme.render)(_react.default.createElement(_flex_grid.EuiFlexGrid, {
+            direction: value
+          }));
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
     describe('responsive', function () {
       test('is rendered', function () {
         var component = (0, _enzyme.render)(_react.default.createElement(_flex_grid.EuiFlexGrid, {