@elastic/eui 80.0.0 → 81.1.0

package/optimize/es/components/datagrid/body/data_grid_cell.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight", "isFocused"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -46,6 +46,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     ariaRowIndex = _ref.ariaRowIndex,
     rowHeightUtils = _ref.rowHeightUtils,
     isDefinedHeight = _ref.isDefinedHeight,
+    isFocused = _ref.isFocused,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
@@ -60,7 +61,9 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, '- ', ___EmotionJSX(EuiI18n, {
+  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    hidden: !isFocused
+  }, '- ', ___EmotionJSX(EuiI18n, {
     token: "euiDataGridCell.position",
     default: "{columnId}, column {col}, row {row}",
     values: {
@@ -311,7 +314,15 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }
     });
     return _this;
-  }
+  } // focus tracking is split between the entire grid & individual cells,
+  // the parent grid owns which cell is focused,
+  // but individual cells need to react to changes and also report that
+  // they are focused in response to user actions like clicking on the cell
+  // to avoid focus trap fighting, cells wait a tick after being clicked to allow
+  // any existing traps to disconnect before the cell reports the new focus state to the parent grid
+  // but because of this small delay, multiple cells could queue up focus and
+  // create an infinite loop as the cells activate->deactivate->...
+  // so we track the last timeout id and clear that request if superseded
   _createClass(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -526,6 +537,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
+        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
@@ -613,14 +625,5 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }]);
   return EuiDataGridCell;
 }(Component);
-// focus tracking is split between the entire grid & individual cells,
-// the parent grid owns which cell is focused,
-// but individual cells need to react to changes and also report that
-// they are focused in response to user actions like clicking on the cell
-// to avoid focus trap fighting, cells wait a tick after being clicked to allow
-// any existing traps to disconnect before the cell reports the new focus state to the parent grid
-// but because of this small delay, multiple cells could queue up focus and
-// create an infinite loop as the cells activate->deactivate->...
-// so we track the last timeout id and clear that request if superseded
 _defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
 _defineProperty(EuiDataGridCell, "contextType", DataGridFocusContext);

package/optimize/es/components/datagrid/body/data_grid_cell_popover.js

@@ -141,8 +141,7 @@ export var JsonPopoverContent = function JsonPopoverContent(_ref3) {
   var formattedText = cellText;
   try {
     formattedText = JSON.stringify(JSON.parse(formattedText), null, 2);
-  } catch (e) {} // eslint-disable-line no-empty
-
+  } catch (e) {}
   return ___EmotionJSX(EuiCodeBlock, {
     isCopyable: true,
     transparentBackground: true,

package/optimize/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -173,9 +173,7 @@ export var useSortingUtils = function useSortingUtils(_ref2) {
    * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
-  var ariaSort =
-  // eslint-disable-next-line no-nested-ternary
-  isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
 
   /**
    * Sorting status - screen reader text

package/optimize/es/components/datagrid/data_grid_types.js

@@ -8,15 +8,17 @@
 
 // since react-window doesn't export a type with the imperative api only we can
 // use this to omit the react-specific class component methods
-
 // An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
-
 // Force either aria-label or aria-labelledby to be defined
-
 /**
  * Props shared between renderCellValue and renderCellPopover
  */
-
 // The empty control column array fallbacks need to be cached, or
 // they'll cause rerendering/remount issues in memoized dependencies
-export var emptyControlColumns = [];
+export var emptyControlColumns = [];
+
+// Types for styling options, passed down through the `gridStyle` prop
+
+// ideally this would use a generic to enforce `pageSize` exists in `pageSizeOptions`,
+// but TypeScript's default understanding of an array is number[] unless `as const` is used
+// which defeats the generic's purpose & functionality as it would check for `number` in `number[]`

package/optimize/es/components/datagrid/utils/in_memory.js

@@ -33,11 +33,11 @@ export var useInMemoryValues = function useInMemoryValues(inMemory, rowCount) {
     _useState2 = _slicedToArray(_useState, 2),
     inMemoryValuesVersion = _useState2[0],
     setInMemoryValuesVersion = _useState2[1];
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   var inMemoryValues = useMemo(function () {
     return _objectSpread({}, _inMemoryValues.current);
-  }, [inMemoryValuesVersion]);
+  }, [inMemoryValuesVersion] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   var onCellRender = useCallback(function (rowIndex, columnId, value) {
     var nextInMemoryValues = _inMemoryValues.current;
     nextInMemoryValues[rowIndex] = nextInMemoryValues[rowIndex] || {};

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -82,6 +82,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     popperClassName = _ref.popperClassName,
     _ref$popoverPlacement = _ref.popoverPlacement,
     popoverPlacement = _ref$popoverPlacement === void 0 ? 'downLeft' : _ref$popoverPlacement,
+    readOnly = _ref.readOnly,
     selected = _ref.selected,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
@@ -97,8 +98,8 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     utcOffset = _ref.utcOffset,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiDatePicker', {
-    'euiDatePicker--shadow': shadow,
-    'euiDatePicker--inline': inline
+    'euiDatePicker--inline': inline,
+    'euiDatePicker--shadow': inline && shadow
   });
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid,
@@ -151,6 +152,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       dateFormat: fullDateFormat,
       dayClassName: dayClassName,
       disabled: disabled,
+      readOnly: readOnly,
       excludeDates: excludeDates,
       filterDate: filterDate,
       injectTimes: injectTimes,
@@ -174,7 +176,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       timeFormat: timeFormat,
       utcOffset: utcOffset,
       yearDropdownItemNumber: 7,
-      accessibleMode: true,
+      accessibleMode: !(disabled || readOnly),
       popperPlacement: popoverPlacement
     }, rest));
   });
@@ -188,6 +190,14 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       onClick: onClear
     } : undefined,
     isLoading: isLoading,
-    isInvalid: isInvalid
+    isInvalid: isInvalid,
+    isDisabled: disabled,
+    readOnly: readOnly,
+    className: classNames({
+      // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling
+      euiFormControlLayoutDelimited: inline,
+      'euiFormControlLayoutDelimited--isInvalid': inline && isInvalid && !disabled && !readOnly
+    }),
+    iconsPosition: inline ? 'static' : undefined
   }, control));
 };

package/optimize/es/components/date_picker/date_picker_range.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "fullWidth", "isCustom", "readOnly", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,9 +9,11 @@ var _excluded = ["children", "className", "startDateControl", "endDateControl",
  * Side Public License, v 1.
  */
 
-import React, { cloneElement } from 'react';
+import React, { useMemo, cloneElement } from 'react';
 import classNames from 'classnames';
 import { EuiFormControlLayoutDelimited } from '../form';
+import { useEuiTheme } from '../../services';
+import { euiDatePickerRangeStyles, euiDatePickerRangeInlineStyles } from './date_picker_range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var children = _ref.children,
@@ -20,9 +22,13 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     endDateControl = _ref.endDateControl,
     _ref$iconType = _ref.iconType,
     iconType = _ref$iconType === void 0 ? true : _ref$iconType,
-    fullWidth = _ref.fullWidth,
+    inline = _ref.inline,
+    _ref$shadow = _ref.shadow,
+    shadow = _ref$shadow === void 0 ? true : _ref$shadow,
+    _fullWidth = _ref.fullWidth,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
+    isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     disabled = _ref.disabled,
     _onFocus = _ref.onFocus,
@@ -30,18 +36,27 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiDatePickerRange', {
-    'euiDatePickerRange--fullWidth': fullWidth,
-    'euiDatePickerRange--readOnly': readOnly,
-    'euiDatePickerRange--isInvalid': isInvalid,
-    'euiDatePickerRange--isDisabled': disabled
-  }, className);
+  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  var fullWidth = _fullWidth && !inline;
+  var classes = classNames('euiDatePickerRange', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiDatePickerRangeStyles(euiTheme);
+  var cssStyles = [styles.euiDatePickerRange];
+  if (inline) {
+    // Determine the inline container query to use based on the width of the react-datepicker
+    var hasTimeSelect = startDateControl.props.showTimeSelect || endDateControl.props.showTimeSelect;
+    var inlineStyles = euiDatePickerRangeInlineStyles(euiTheme);
+    cssStyles.push(inlineStyles.inline);
+    cssStyles.push(hasTimeSelect ? inlineStyles.responsiveWithTimeSelect : inlineStyles.responsive);
+    if (shadow) cssStyles.push(inlineStyles.shadow);
+  }
   var startControl = startDateControl;
   var endControl = endDateControl;
   if (!isCustom) {
     startControl = /*#__PURE__*/cloneElement(startDateControl, {
       controlOnly: true,
       showIcon: false,
+      inline: inline,
       fullWidth: fullWidth,
       readOnly: readOnly,
       disabled: disabled || startDateControl.props.disabled,
@@ -61,6 +76,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     endControl = /*#__PURE__*/cloneElement(endDateControl, {
       controlOnly: true,
       showIcon: false,
+      inline: inline,
       fullWidth: fullWidth,
       readOnly: readOnly,
       disabled: disabled || endDateControl.props.disabled,
@@ -79,16 +95,25 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
       }
     });
   }
-  return ___EmotionJSX(EuiFormControlLayoutDelimited, _extends({
-    icon: iconType === true ? 'calendar' : iconType || undefined,
+  var icon = useMemo(function () {
+    if (inline) return undefined;
+    if (iconType === false) return undefined;
+    if (iconType === true) return 'calendar';
+    return iconType;
+  }, [iconType, inline]);
+  return ___EmotionJSX("span", _extends({
     className: classes,
+    css: cssStyles
+  }, rest), ___EmotionJSX(EuiFormControlLayoutDelimited, {
+    icon: icon,
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,
-    append: append,
-    prepend: prepend
-  }, rest));
+    isLoading: isLoading,
+    append: inline ? undefined : append,
+    prepend: inline ? undefined : prepend
+  }));
 };

package/optimize/es/components/date_picker/date_picker_range.styles.js

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiShadowMedium } from '../../themes/amsterdam/global_styling/mixins';
+import { euiFormVariables } from '../form/form.styles';
+export var euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlLayoutGroupInputHeight = _euiFormVariables.controlLayoutGroupInputHeight;
+  return {
+    euiDatePickerRange: /*#__PURE__*/css(".euiFieldText.euiDatePicker{", logicalCSS('height', controlLayoutGroupInputHeight), ";};label:euiDatePickerRange;")
+  };
+};
+export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Use a container query to stack date pickers vertically if the container is
+  // not wide enough to fit both. We need a fn for this to render two width queries,
+  // depending on whether time selection is being rendered or not
+  var containerQuery = function containerQuery(datePickerWidth) {
+    var delimiterWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+    return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      // Use static px widths for now, since render behavior comes from a third party library\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        // Unset grid display\n        display: block !important;\n\n        // Center and point the default delimiter arrow downwards\n        & > .euiText > [data-icon-type='sortRight'] {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
+  };
+  return {
+    inline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", logicalCSS('max-width', '100%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", logicalCSS('height', 'auto'), ";}}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;}.react-datepicker__time-list{padding:0;};label:inline;"),
+    responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
+    responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(350), ";;label:responsiveWithTimeSelect;"),
+    shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
+  };
+};

package/optimize/es/components/date_picker/react-datepicker/src/calendar.js

@@ -241,7 +241,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       return ___EmotionJSX("button", {
         type: "button",
         className: classes.join(" "),
-        onClick: clickHandler
+        onClick: clickHandler,
+        disabled: !_this.props.accessibleMode
       }, _this.props.previousMonthButtonLabel);
     });
     _defineProperty(_assertThisInitialized(_this), "renderNextMonthButton", function () {
@@ -267,7 +268,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
       return ___EmotionJSX("button", {
         type: "button",
         className: classes.join(" "),
-        onClick: clickHandler
+        onClick: clickHandler,
+        disabled: !_this.props.accessibleMode
       }, _this.props.nextMonthButtonLabel);
     });
     _defineProperty(_assertThisInitialized(_this), "renderCurrentMonth", function () {
@@ -509,13 +511,15 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var Container = this.props.container || CalendarContainer;
+      var classes = classnames("react-datepicker", this.props.className, {
+        "react-datepicker--time-only": this.props.showTimeSelectOnly,
+        "react-datepicker--non-interactive": !this.props.isCalendarInteractive
+      });
       var trapFocus = this.props.accessibleMode && !this.props.inline;
       var initialFocusTarget = this.props.showTimeSelectOnly ? ".react-datepicker__time-box--accessible" : ".react-datepicker__month--accessible";
       if (trapFocus) {
         return ___EmotionJSX(Container, {
-          className: classnames("react-datepicker", this.props.className, {
-            "react-datepicker--time-only": this.props.showTimeSelectOnly
-          })
+          className: classes
         }, ___EmotionJSX(EuiFocusTrap, {
           disabled: this.state.pauseFocusTrap || !this.props.enableFocusTrap,
           className: "react-datepicker__focusTrap",
@@ -524,9 +528,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children));
       } else {
         return ___EmotionJSX(Container, {
-          className: classnames("react-datepicker", this.props.className, {
-            "react-datepicker--time-only": this.props.showTimeSelectOnly
-          })
+          className: classes
         }, this.renderPreviousMonthButton(), this.renderNextMonthButton(), this.renderMonths(), this.renderTodayButton(), this.renderTimeSection(), this.props.children);
       }
     }

package/optimize/es/components/date_picker/react-datepicker/src/index.js

@@ -507,7 +507,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
         renderDayContents: _this.props.renderDayContents,
         updateSelection: _this.updateSelection,
         accessibleMode: _this.props.accessibleMode,
-        enableFocusTrap: _this.state.enableFocusTrap
+        enableFocusTrap: _this.state.enableFocusTrap,
+        isCalendarInteractive: !(_this.props.disabled || _this.props.readOnly)
       }, _this.props.children);
       return calendar;
     });

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -11,6 +11,8 @@ var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value"
 
 import React from 'react';
 import classNames from 'classnames';
+// eslint-disable-line import/named
+
 import { useEuiI18n } from '../../../i18n';
 import { EuiPopover } from '../../../popover';
 import { useFormatTimeString } from '../pretty_duration';

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -14,6 +14,7 @@ import { EuiButton } from '../../../button';
 import { EuiAbsoluteTab } from './absolute_tab';
 import { EuiRelativeTab } from './relative_tab';
 import { getDateMode, DATE_MODES, toAbsoluteString, toRelativeString } from '../date_modes';
+// eslint-disable-line import/named
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
   var value = _ref.value,

package/optimize/es/components/date_picker/super_date_picker/date_popover/relative_tab.js

@@ -27,6 +27,9 @@ import { EuiSpacer } from '../../../spacer';
 import { parseRelativeParts, toRelativeStringFromParts } from '../relative_utils';
 import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiI18n } from '../../../i18n';
+
+// eslint-disable-line import/named
+
 import { INVALID_DATE } from '../date_modes';
 import { EuiPopoverFooter } from '../../../popover';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/error_boundary/error_boundary.js

@@ -34,37 +34,44 @@ export var EuiErrorBoundary = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
     var errorState = {
       hasError: false,
-      error: undefined
+      errorMessage: undefined
     };
     _this.state = errorState;
     return _this;
   }
   _createClass(EuiErrorBoundary, [{
     key: "componentDidCatch",
-    value: function componentDidCatch(_ref) {
-      var message = _ref.message,
-        stack = _ref.stack;
+    value: function componentDidCatch(error) {
+      var _this$props$onError, _this$props;
       // Display fallback UI
       // Only Chrome includes the `message` property as part of `stack`.
       // For consistency, rebuild the full error text from the Error subparts.
+      var message = error.message,
+        stack = error.stack;
       var idx = (stack === null || stack === void 0 ? void 0 : stack.indexOf(message)) || -1;
       var stackStr = idx > -1 ? stack === null || stack === void 0 ? void 0 : stack.substr(idx + message.length + 1) : stack;
-      var error = "Error: ".concat(message, "\n").concat(stackStr);
+      var errorMessage = "Error: ".concat(message, "\n").concat(stackStr);
       this.setState({
         hasError: true,
-        error: error
+        errorMessage: errorMessage
       });
+
+      // Pass back the error to the consumer
+      (_this$props$onError = (_this$props = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props, error);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        children = _this$props.children,
-        rest = _objectWithoutProperties(_this$props, _excluded);
-      if (this.state.hasError) {
+      var _this$props2 = this.props,
+        children = _this$props2.children,
+        rest = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$state = this.state,
+        hasError = _this$state.hasError,
+        errorMessage = _this$state.errorMessage;
+      if (hasError) {
         // You can render any custom fallback UI
         return ___EmotionJSX(EuiErrorMessage, _extends({}, rest, {
-          errorMessage: this.state.error
+          errorMessage: errorMessage
         }));
       }
       return children;
@@ -77,11 +84,11 @@ export var EuiErrorBoundary = /*#__PURE__*/function (_Component) {
  * Split out into a separate styling-only component for easier use of hooks,
  * and also for internal re-use by EUI's docs/playgrounds
  */
-export var EuiErrorMessage = function EuiErrorMessage(_ref2) {
-  var errorMessage = _ref2.errorMessage,
-    className = _ref2.className,
-    dataTestSubj = _ref2['data-test-subj'],
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+export var EuiErrorMessage = function EuiErrorMessage(_ref) {
+  var errorMessage = _ref.errorMessage,
+    className = _ref.className,
+    dataTestSubj = _ref['data-test-subj'],
+    rest = _objectWithoutProperties(_ref, _excluded2);
   var euiTheme = useEuiTheme();
   var styles = euiErrorBoundaryStyles(euiTheme);
   return ___EmotionJSX("div", _extends({

package/optimize/es/components/filter_group/filter_group.a11y.js

@@ -233,10 +233,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Selected option. To exclude this option, press enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/optimize/es/components/focus_trap/focus_trap.js

@@ -89,7 +89,6 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.disabled === true && this.props.disabled === false) {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           hasBeenDisabledByClick: false
         });

package/optimize/es/components/form/checkbox/checkbox_group.js

@@ -14,6 +14,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { EuiFormFieldset } from '../form_fieldset';
 import { EuiCheckbox } from './checkbox';
+
+// Must omit inherit `onChange` properties or else TS complains when applying to the EuiRadio
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCheckboxGroup = function EuiCheckboxGroup(_ref) {
   var _ref$options = _ref.options,

package/optimize/es/components/form/file_picker/file_picker.js

@@ -196,9 +196,7 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
           id: promptId
         }, ___EmotionJSX(EuiIcon, {
           className: "euiFilePicker__icon",
-          color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary' // eslint-disable-line no-nested-ternary
-          ,
-
+          color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary',
           type: isInvalid ? 'alert' : 'importAction',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"

package/optimize/es/components/form/radio/radio_group.js

@@ -14,6 +14,8 @@ import React from 'react';
 import classNames from 'classnames';
 import { EuiFormFieldset } from '../form_fieldset';
 import { EuiRadio } from './radio';
+
+// Must omit inherit `onChange` properties or else TS complains when applying to the EuiRadio
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRadioGroup = function EuiRadioGroup(_ref) {
   var _ref$options = _ref.options,

package/optimize/es/components/form/range/dual_range.js

@@ -327,9 +327,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
-        // Safe to call `setState` inside conditional
-        // https://reactjs.org/docs/react-component.html#componentdidmount
-        // eslint-disable-next-line react/no-did-mount-set-state
         this.setState({
           isVisible: false
         });
@@ -340,9 +337,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     value: function componentDidUpdate() {
       var _this$rangeSliderRef;
       if ((_this$rangeSliderRef = this.rangeSliderRef) !== null && _this$rangeSliderRef !== void 0 && _this$rangeSliderRef.clientWidth && !this.state.isVisible) {
-        // Safe to call `setState` inside conditional
-        // https://reactjs.org/docs/react-component.html#componentdidupdate
-        // eslint-disable-next-line  react/no-did-update-set-state
         this.setState({
           isVisible: true
         });

package/optimize/es/components/i18n/i18n.js

@@ -92,6 +92,8 @@ var EuiI18n = function EuiI18n(props) {
 
 // A single default could be a string, react child, or render function
 
+// An array with multiple defaults can only be an array of strings or elements
+
 function useEuiI18n() {
   var i18nConfig = useContext(I18nContext);
   var mapping = i18nConfig.mapping,

package/optimize/es/components/icon/icon.js

@@ -38,6 +38,9 @@ var getIsAppIcon = function getIsAppIcon(iconType) {
   return iconType.endsWith('App') || iconType.endsWith('Job');
 };
 export var TYPES = keysOf(typeToPathMap);
+
+// We accept arbitrary color strings, which are impossible to type.
+
 export var SIZES = ['original', 's', 'm', 'l', 'xl', 'xxl'];
 function isEuiIconType(x) {
   return typeof x === 'string' && typeToPathMap.hasOwnProperty(x);
@@ -129,7 +132,6 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       this.isMounted = true;
       var type = this.props.type;
       if (isEuiIconType(type) && this.state.icon == null) {
-        //eslint-disable-next-line react/no-did-mount-set-state
         this.setState({
           neededLoading: true,
           isLoading: true
@@ -145,14 +147,12 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       var type = this.props.type;
       if (type !== prevProps.type) {
         if (isEuiIconType(type)) {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             neededLoading: iconComponentCache.hasOwnProperty(type),
             isLoading: true
           });
           this.loadIconComponent(type);
         } else {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             icon: type,
             neededLoading: true,

package/optimize/es/components/index.js

@@ -49,6 +49,7 @@ export * from './horizontal_rule';
 export * from './icon';
 export * from './image';
 export * from './inner_text';
+export * from './inline_edit';
 export * from './i18n';
 export * from './loading';
 export * from './key_pad_menu';