@elastic/eui 12.2.0 → 12.4.0

package/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -68,6 +68,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);
 
@@ -80,13 +88,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",
@@ -104,11 +124,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,
@@ -134,7 +158,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;
 
@@ -236,7 +261,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,
@@ -286,7 +311,8 @@ _defineProperty(EuiComboBoxOptionsList, "propTypes", {
   rowHeight: PropTypes.number,
   fullWidth: PropTypes.bool,
   activeOptionIndex: PropTypes.number,
-  rootId: PropTypes.func.isRequired
+  rootId: PropTypes.func.isRequired,
+  onCloseList: PropTypes.func.isRequired
 });
 
 _defineProperty(EuiComboBoxOptionsList, "defaultProps", {
@@ -303,6 +329,15 @@ EuiComboBoxOptionsList.__docgenInfo = {
     "modifiers": [],
     "params": [],
     "returns": null
+  }, {
+    "name": "closeListOnScroll",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "e",
+      "type": null
+    }],
+    "returns": null
   }, {
     "name": "listRef",
     "docblock": null,
@@ -486,6 +521,13 @@ EuiComboBoxOptionsList.__docgenInfo = {
       },
       "required": true,
       "description": ""
+    },
+    "onCloseList": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
     }
   }
 };

package/es/components/date_picker/date_picker.js

@@ -30,6 +30,8 @@ import { ReactDatePicker as DatePicker } from '../../../packages';
 import { EuiFormControlLayout } from '../form/form_control_layout';
 import { EuiValidatableControl } from '../form/validatable_control';
 import { EuiErrorBoundary } from '../error_boundary';
+export var euiDatePickerDefaultDateFormat = 'MM/DD/YYYY';
+export var euiDatePickerDefaultTimeFormat = 'hh:mm A';
 export var EuiDatePicker =
 /*#__PURE__*/
 function (_Component) {
@@ -97,6 +99,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.
 
@@ -132,7 +142,7 @@ function (_Component) {
         calendarClassName: calendarClassName,
         className: datePickerClasses,
         customInput: customInput,
-        dateFormat: dateFormat,
+        dateFormat: fullDateFormat,
         dayClassName: dayClassName,
         disabled: disabled,
         excludeDates: excludeDates,
@@ -308,13 +318,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": "",
@@ -334,7 +345,7 @@ EuiDatePicker.__docgenInfo = {
     },
     "dateFormat": {
       "defaultValue": {
-        "value": "'MM/DD/YYYY hh:mm A'",
+        "value": "'MM/DD/YYYY'",
         "computed": false
       },
       "type": {
@@ -398,6 +409,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'",
@@ -541,13 +563,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/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -44,12 +44,11 @@ export function EuiDatePopoverButton(props) {
     "data-test-subj": "superDatePicker".concat(position, "DatePopoverButton")
   }, buttonProps), formatTimeString(value, dateFormat, roundUp));
   return React.createElement(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.createElement(EuiDatePopoverContent, {

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

@@ -39,6 +39,7 @@ export function EuiCommonlyUsedTimeRanges(_ref) {
   }, React.createElement(EuiFlexGrid, {
     gutterSize: "s",
     columns: 2,
+    direction: "column",
     responsive: false
   }, links)), React.createElement(EuiHorizontalRule, {
     margin: "s"

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

@@ -462,30 +462,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',
@@ -686,7 +686,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/es/components/delay_hide/delay_hide.test.js

@@ -53,6 +53,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 () {
@@ -174,9 +175,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();
         }
@@ -228,6 +230,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);
   });
 });
@@ -256,6 +259,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/es/components/filter_group/filter_button.js

@@ -4,6 +4,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; }
@@ -15,6 +23,7 @@ import { EuiI18n } from '../i18n';
 import { EuiNotificationBadge } from '../badge/notification_badge';
 import { COLORS, ICON_SIDES, EuiButtonEmpty } from '../button/button_empty';
 import { IconPropType } from '../icon';
+import { useInnerText } from '../inner_text';
 export var EuiFilterButton = function EuiFilterButton(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -53,10 +62,16 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     dataText = children;
   }
 
+  var _useInnerText = useInnerText(),
+      _useInnerText2 = _slicedToArray(_useInnerText, 2),
+      ref = _useInnerText2[0],
+      innerText = _useInnerText2[1];
+
   var buttonContents = React.createElement(Fragment, null, React.createElement("span", {
+    ref: ref,
     className: "euiFilterButton__textShift",
-    "data-text": dataText,
-    title: dataText
+    "data-text": dataText || innerText,
+    title: dataText || innerText
   }, children), numFiltersDefined && React.createElement(EuiI18n, {
     token: "euiFilterButton.filterBadge",
     values: {

package/es/components/flex/flex_grid.js

@@ -8,6 +8,11 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keysOf } from '../common';
+var directionToClassNameMap = {
+  row: null,
+  column: 'euiFlexGrid--directionColumn'
+};
+export var DIRECTIONS = keysOf(directionToClassNameMap);
 var gutterSizeToClassNameMap = {
   none: 'euiFlexGrid--gutterNone',
   s: 'euiFlexGrid--gutterSmall',
@@ -31,13 +36,15 @@ export 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 = classNames('euiFlexGrid', gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, columns != null ? columnsToClassNameMap[columns] : undefined, {
+  var classes = classNames('euiFlexGrid', gutterSize ? gutterSizeToClassNameMap[gutterSize] : undefined, columns != null ? columnsToClassNameMap[columns] : undefined, direction ? directionToClassNameMap[direction] : undefined, {
     'euiFlexGrid--responsive': responsive
   }, className);
   return React.createElement("div", _extends({
@@ -49,8 +56,27 @@ EuiFlexGrid.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   children: PropTypes.node,
+
+  /**
+     * Number of columns `1-4`, pass `0` for normal display
+     */
   columns: PropTypes.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.oneOf(["row", "column"]),
+
+  /**
+     * Space between flex items
+     */
   gutterSize: PropTypes.oneOf(["none", "s", "m", "l", "xl"]),
+
+  /**
+     * Force each item to be display block on smaller screens
+     */
   responsive: PropTypes.bool
 };
 EuiFlexGrid.__docgenInfo = {
@@ -83,7 +109,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": {
@@ -94,7 +138,7 @@ EuiFlexGrid.__docgenInfo = {
         "name": "bool"
       },
       "required": false,
-      "description": ""
+      "description": "Force each item to be display block on smaller screens"
     },
     "columns": {
       "defaultValue": {
@@ -121,7 +165,7 @@ EuiFlexGrid.__docgenInfo = {
         }]
       },
       "required": false,
-      "description": ""
+      "description": "Number of columns `1-4`, pass `0` for normal display"
     },
     "className": {
       "type": {

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-import { EuiFlexGrid, GUTTER_SIZES, COLUMNS } from './flex_grid';
+import { EuiFlexGrid, GUTTER_SIZES, COLUMNS, DIRECTIONS } from './flex_grid';
 describe('EuiFlexGrid', function () {
   test('is rendered', function () {
     var component = render(React.createElement(EuiFlexGrid, _extends({
@@ -32,6 +32,16 @@ describe('EuiFlexGrid', function () {
         });
       });
     });
+    describe('direction', function () {
+      DIRECTIONS.forEach(function (value) {
+        test("".concat(value, " is rendered"), function () {
+          var component = render(React.createElement(EuiFlexGrid, {
+            direction: value
+          }));
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
     describe('responsive', function () {
       test('is rendered', function () {
         var component = render(React.createElement(EuiFlexGrid, {