@elastic/eui 77.0.0 → 77.1.1

package/eui.d.ts

@@ -3393,19 +3393,30 @@ declare module '@elastic/eui/src/components/form/validatable_control/validatable
 	export interface ReactElementWithRef extends ReactElement {
 	    ref?: Ref<HTMLConstraintValidityElement>;
 	}
+	/**
+	 * The `EuiValidatableControl` component should be used in scenarios where
+	 * we can render the validated `<input>` as its direct child.
+	 */
 	export interface EuiValidatableControlProps {
 	    isInvalid?: boolean;
-	    /**
-	     * ReactNode to render as this component's content
-	     */
 	    children: ReactElementWithRef;
 	}
 	export const EuiValidatableControl: FunctionComponent<CommonProps & EuiValidatableControlProps>;
+	/**
+	 * The `UseEuiValidatableControl` hook should be used in scenarios where
+	 * we *cannot* control where the validated `<input>` is rendered (e.g., ReactDatePicker)
+	 * and instead need to access the input via a ref and pass the element in directly
+	 */
+	export interface UseEuiValidatableControlProps {
+	    isInvalid?: boolean;
+	    controlEl: HTMLInputElement | HTMLConstraintValidityElement | null;
+	}
+	export const useEuiValidatableControl: ({ isInvalid, controlEl, }: UseEuiValidatableControlProps) => void;
 
 }
 declare module '@elastic/eui/src/components/form/validatable_control' {
-	export type { EuiValidatableControlProps } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
-	export { EuiValidatableControl } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
+	export type { EuiValidatableControlProps, UseEuiValidatableControlProps, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
+	export { EuiValidatableControl, useEuiValidatableControl, } from '@elastic/eui/src/components/form/validatable_control/validatable_control';
 
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/_num_icons' {
@@ -4683,10 +4694,9 @@ declare module '@elastic/eui/src/components/popover/popover_panel/_popover_panel
 	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { _EuiPanelDivlike } from '@elastic/eui/src/components/panel/panel';
 	import { EuiPopoverArrowPositions } from '@elastic/eui/src/components/popover/popover_arrow';
-	interface ContextShape {
+	export const EuiPopoverPanelContext: React.Context<{
 	    paddingSize: EuiPaddingSize;
-	}
-	export const EuiPopoverPanelContext: React.Context<ContextShape>;
+	}>;
 	export type EuiPopoverPanelProps = _EuiPanelDivlike; type EuiPopoverPanelInternalProps = {
 	    isOpen?: boolean;
 	    isAttached?: boolean;
@@ -5034,9 +5044,18 @@ declare module '@elastic/eui/src/components/popover/popover_title' {
 declare module '@elastic/eui/src/components/popover/popover_footer.styles' {
 	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiPopoverFooterStyles: (euiThemeContext: UseEuiTheme, panelPadding: EuiPaddingSize) => {
+	export const euiPopoverFooterStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiPopoverFooter: import("@emotion/utils").SerializedStyles;
+	    panelPaddingSizes: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        xs: import("@emotion/utils").SerializedStyles;
+	        s: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	        l: import("@emotion/utils").SerializedStyles;
+	        xl: import("@emotion/utils").SerializedStyles;
+	    };
 	};
+	export const panelPaddingOffset: (euiThemeContext: UseEuiTheme, size: EuiPaddingSize) => string;
 
 }
 declare module '@elastic/eui/src/components/popover/popover_footer' {
@@ -6395,6 +6414,7 @@ declare module '@elastic/eui/src/components/form/text_area/text_area' {
 	import { TextareaHTMLAttributes, Ref, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & CommonProps & {
+	    isLoading?: boolean;
 	    isInvalid?: boolean;
 	    /**
 	     * Expand to fill 100% of the parent.
@@ -10381,12 +10401,12 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 
 }
 declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_input' {
-	import { ChangeEventHandler, Component, FocusEventHandler, RefCallback } from 'react';
+	import { Component, ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, RefCallback } from 'react';
 	import AutosizeInput from 'react-input-autosize';
-	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
+	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { htmlIdGenerator } from '@elastic/eui/src/services';
+	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import { EuiComboBoxOptionOption, EuiComboBoxSingleSelectionShape, OptionHandler, UpdatePositionHandler } from '@elastic/eui/src/components/combo_box/types';
-	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiComboBoxInputProps<T> extends CommonProps {
 	    autoSizeInputRef?: RefCallback<AutosizeInput & HTMLInputElement>;
 	    compressed: boolean;
@@ -10405,11 +10425,11 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    onCloseListClick: () => void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onOpenListClick: () => void;
-	    onRemoveOption?: OptionHandler<T>;
+	    onRemoveOption: OptionHandler<T>;
 	    placeholder?: string;
 	    rootId: ReturnType<typeof htmlIdGenerator>;
 	    searchValue: string;
-	    selectedOptions?: Array<EuiComboBoxOptionOption<T>>;
+	    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
 	    singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
 	    toggleButtonRef?: RefCallback<HTMLButtonElement | HTMLSpanElement>;
 	    updatePosition: UpdatePositionHandler;
@@ -10417,6 +10437,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    prepend?: EuiFormControlLayoutProps['prepend'];
 	    append?: EuiFormControlLayoutProps['append'];
 	    isLoading?: boolean;
+	    isInvalid?: boolean;
 	    autoFocus?: boolean;
 	    'aria-label'?: string;
 	    'aria-labelledby'?: string;
@@ -10429,6 +10450,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	    updatePosition: () => void;
 	    onFocus: FocusEventHandler<HTMLInputElement>;
 	    onBlur: FocusEventHandler<HTMLInputElement>;
+	    onKeyDown: KeyboardEventHandler<HTMLInputElement>;
 	    componentDidUpdate(prevProps: EuiComboBoxInputProps<T>): void;
 	    inputOnChange: ChangeEventHandler<HTMLInputElement>;
 	    inputRefCallback: (ref: HTMLInputElement & AutosizeInput) => void;
@@ -10657,7 +10679,6 @@ declare module '@elastic/eui/src/components/combo_box/combo_box' {
 	    hasActiveOption: () => boolean;
 	    clearActiveOption: () => void;
 	    clearSearchValue: () => void;
-	    removeLastOption: () => void;
 	    addCustomOption: (isContainerBlur: boolean, searchValue: string) => void;
 	    doesSearchMatchOnlyOption: () => boolean;
 	    areAllOptionsSelected: () => boolean;
@@ -13727,10 +13748,10 @@ declare module '@elastic/eui/src/components/date_picker/react-datepicker' {
 
 }
 declare module '@elastic/eui/src/components/date_picker/date_picker' {
-	import { Component, MouseEventHandler, Ref } from 'react';
+	import { FunctionComponent, Component, MouseEventHandler, Ref } from 'react';
 	import { Moment } from 'moment';
 	import { EuiFormControlLayoutIconsProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_icons';
-	import { ApplyClassComponentDefaults, CommonProps } from '@elastic/eui/src/components/common';
+	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { PopoverAnchorPosition } from '@elastic/eui/src/components/popover';
 	import { ReactDatePickerProps } from '@elastic/eui/src/components/date_picker/react-datepicker';
 	export const euiDatePickerDefaultDateFormat = "MM/DD/YYYY";
@@ -13747,7 +13768,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 	    /**
 	     * ref for the ReactDatePicker instance
 	     */
-	    inputRef: Ref<Component<ReactDatePickerProps, any, any>>;
+	    inputRef?: Ref<Component<ReactDatePickerProps, any, any>>;
 	    /**
 	     * Provides styling to the input when invalid
 	     */
@@ -13786,24 +13807,9 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 	     * **Use [EuiPopover](/#/layout/popover) values**: 'upCenter', 'upLeft', 'upRight', downCenter', 'downLeft', 'downRight', 'leftCenter', 'leftUp', 'leftDown', 'rightCenter', 'rightUp', 'rightDown'.
 	     */
 	    popoverPlacement?: PopoverAnchorPosition;
-	} type _EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
-	export type EuiDatePickerProps = ApplyClassComponentDefaults<typeof EuiDatePicker>;
-	export class EuiDatePicker extends Component<_EuiDatePickerProps> {
-	    static defaultProps: {
-	        adjustDateOnChange: boolean;
-	        dateFormat: string;
-	        fullWidth: boolean;
-	        inputRef: () => void;
-	        isLoading: boolean;
-	        shadow: boolean;
-	        shouldCloseOnSelect: boolean;
-	        showIcon: boolean;
-	        showTimeSelect: boolean;
-	        timeFormat: string;
-	        popoverPlacement: string;
-	    };
-	    render(): JSX.Element;
 	}
+	export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
+	export const EuiDatePicker: FunctionComponent<EuiDatePickerProps>;
 	export {};
 
 }
@@ -14441,7 +14447,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     */
 	    isCustom?: boolean;
 	    /**
-	     * Will turn the range delimeter into an alert icon and pass through to each control
+	     * Will color the range delimiter the `danger` color and pass through to each control
 	     */
 	    isInvalid?: boolean;
 	    /**

package/i18ntokens.json

@@ -887,14 +887,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1001,
+        "line": 977,
         "column": 10,
-        "index": 28502
+        "index": 27944
       },
       "end": {
-        "line": 1004,
+        "line": 980,
         "column": 11,
-        "index": 28627
+        "index": 28069
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"

package/lib/components/accordion/accordion.a11y.js

@@ -14,7 +14,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var baseProps = {
   buttonContent: 'Click me to toggle',

package/lib/components/accordion/accordion.js

@@ -218,8 +218,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        "aria-controls": id,
-        "aria-expanded": isOpen,
+        "aria-controls": id
+        // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
+        ,
+        "aria-expanded": ButtonElement === 'button' ? isOpen : undefined,
         onClick: isDisabled ? undefined : this.onToggle,
         type: ButtonElement === 'button' ? 'button' : undefined,
         disabled: ButtonElement === 'button' ? isDisabled : undefined

package/lib/components/basic_table/table.a11y.js

@@ -16,7 +16,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var users = [];
 for (var i = 0; i < 20; i++) {

package/lib/components/breadcrumbs/breadcrumbs.a11y.js

@@ -12,7 +12,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var breadcrumbs = [{
   text: 'Animals',

package/lib/components/combo_box/combo_box.js

@@ -222,22 +222,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "clearSearchValue", function () {
       _this.onSearchChange('');
     });
-    _defineProperty(_assertThisInitialized(_this), "removeLastOption", function () {
-      if (!_this.props.selectedOptions.length) {
-        return;
-      }
-
-      // Backspace will be used to delete the input, not a pill.
-      if (_this.state.searchValue.length) {
-        return;
-      }
-
-      // Delete last pill.
-      _this.onRemoveOption(_this.props.selectedOptions[_this.props.selectedOptions.length - 1]);
-      if (Boolean(_this.props.singleSelection) && !_this.state.isListOpen) {
-        _this.openList();
-      }
-    });
     _defineProperty(_assertThisInitialized(_this), "addCustomOption", function (isContainerBlur, searchValue) {
       var _this$props = _this.props,
         isCaseSensitive = _this$props.isCaseSensitive,
@@ -387,10 +371,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
             _this.openList();
           }
           break;
-        case _services.keys.BACKSPACE:
-          event.stopPropagation();
-          _this.removeLastOption();
-          break;
         case _services.keys.ESCAPE:
           if (_this.state.isListOpen) {
             event.preventDefault();
@@ -667,7 +647,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
       // Visually indicate the combobox is in an invalid state if it has lost focus but there is text entered in the input.
       // When custom options are disabled and the user leaves the combo box after entering text that does not match any
       // options, this tells the user that they've entered invalid input.
-      var markAsInvalid = isInvalid || (hasFocus === false || isListOpen === false) && searchValue;
+      var markAsInvalid = !!(isInvalid || (hasFocus === false || isListOpen === false) && searchValue);
       var classes = (0, _classnames.default)('euiComboBox', className, {
         'euiComboBox--compressed': compressed,
         'euiComboBox--fullWidth': fullWidth,
@@ -764,6 +744,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           append: singleSelection ? append : undefined,
           prepend: singleSelection ? prepend : undefined,
           isLoading: isLoading,
+          isInvalid: markAsInvalid,
           autoFocus: autoFocus,
           "aria-label": ariaLabel,
           "aria-labelledby": ariaLabelledby

package/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -8,8 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
+var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _form_control_layout = require("../../form/form_control_layout");
+var _num_icons = require("../../form/form_control_layout/_num_icons");
 var _combo_box_pill = require("./combo_box_pill");
 var _react2 = require("@emotion/react");
 var _excluded = ["key", "label", "color", "onClick"];
@@ -66,10 +68,29 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         hasFocus: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (event) {
       var _this$props = _this.props,
-        onChange = _this$props.onChange,
-        searchValue = _this$props.searchValue;
+        searchValue = _this$props.searchValue,
+        selectedOptions = _this$props.selectedOptions,
+        onRemoveOption = _this$props.onRemoveOption,
+        singleSelection = _this$props.singleSelection,
+        isListOpen = _this$props.isListOpen,
+        onOpenListClick = _this$props.onOpenListClick;
+
+      // When backspacing from an empty input, delete the last pill option in the list
+      var searchIsEmpty = !searchValue.length;
+      var hasPills = selectedOptions.length;
+      if (event.key === _services.keys.BACKSPACE && searchIsEmpty && hasPills) {
+        onRemoveOption(selectedOptions[selectedOptions.length - 1]);
+        if (!!singleSelection && !isListOpen) {
+          onOpenListClick();
+        }
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "inputOnChange", function (event) {
+      var _this$props2 = _this.props,
+        onChange = _this$props2.onChange,
+        searchValue = _this$props2.searchValue;
       if (onChange) {
         onChange(event.target.value);
       }
@@ -96,34 +117,35 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        compressed = _this$props2.compressed,
-        focusedOptionId = _this$props2.focusedOptionId,
-        fullWidth = _this$props2.fullWidth,
-        hasSelectedOptions = _this$props2.hasSelectedOptions,
-        id = _this$props2.id,
-        inputRef = _this$props2.inputRef,
-        isDisabled = _this$props2.isDisabled,
-        isListOpen = _this$props2.isListOpen,
-        noIcon = _this$props2.noIcon,
-        onClear = _this$props2.onClear,
-        onClick = _this$props2.onClick,
-        onCloseListClick = _this$props2.onCloseListClick,
-        onOpenListClick = _this$props2.onOpenListClick,
-        onRemoveOption = _this$props2.onRemoveOption,
-        placeholder = _this$props2.placeholder,
-        rootId = _this$props2.rootId,
-        searchValue = _this$props2.searchValue,
-        selectedOptions = _this$props2.selectedOptions,
-        singleSelectionProp = _this$props2.singleSelection,
-        toggleButtonRef = _this$props2.toggleButtonRef,
-        value = _this$props2.value,
-        prepend = _this$props2.prepend,
-        append = _this$props2.append,
-        isLoading = _this$props2.isLoading,
-        autoFocus = _this$props2.autoFocus,
-        ariaLabel = _this$props2['aria-label'],
-        ariaLabelledby = _this$props2['aria-labelledby'];
+      var _this$props3 = this.props,
+        compressed = _this$props3.compressed,
+        focusedOptionId = _this$props3.focusedOptionId,
+        fullWidth = _this$props3.fullWidth,
+        hasSelectedOptions = _this$props3.hasSelectedOptions,
+        id = _this$props3.id,
+        inputRef = _this$props3.inputRef,
+        isDisabled = _this$props3.isDisabled,
+        isListOpen = _this$props3.isListOpen,
+        noIcon = _this$props3.noIcon,
+        onClear = _this$props3.onClear,
+        onClick = _this$props3.onClick,
+        onCloseListClick = _this$props3.onCloseListClick,
+        onOpenListClick = _this$props3.onOpenListClick,
+        onRemoveOption = _this$props3.onRemoveOption,
+        placeholder = _this$props3.placeholder,
+        rootId = _this$props3.rootId,
+        searchValue = _this$props3.searchValue,
+        selectedOptions = _this$props3.selectedOptions,
+        singleSelectionProp = _this$props3.singleSelection,
+        toggleButtonRef = _this$props3.toggleButtonRef,
+        value = _this$props3.value,
+        prepend = _this$props3.prepend,
+        append = _this$props3.append,
+        isLoading = _this$props3.isLoading,
+        isInvalid = _this$props3.isInvalid,
+        autoFocus = _this$props3.autoFocus,
+        ariaLabel = _this$props3['aria-label'],
+        ariaLabelledby = _this$props3['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && _typeof(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -185,12 +207,16 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           type: 'arrowDown'
         };
       }
-      var wrapClasses = (0, _classnames.default)('euiComboBox__inputWrap', {
+      var numIconsClass = (0, _num_icons.getFormControlClassNameForIconCount)({
+        isDropdown: !noIcon,
+        clear: !!clickProps.clear,
+        isInvalid: isInvalid,
+        isLoading: isLoading
+      });
+      var wrapClasses = (0, _classnames.default)('euiComboBox__inputWrap', numIconsClass, {
         'euiComboBox__inputWrap--compressed': compressed,
         'euiComboBox__inputWrap--fullWidth': fullWidth,
         'euiComboBox__inputWrap--noWrap': singleSelection,
-        'euiComboBox__inputWrap-isLoading': isLoading,
-        'euiComboBox__inputWrap-isClearable': onClear,
         'euiComboBox__inputWrap--inGroup': prepend || append
       });
       return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, _extends({
@@ -198,6 +224,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }, clickProps, {
         inputId: id,
         isLoading: isLoading,
+        isInvalid: isInvalid,
         compressed: compressed,
         fullWidth: fullWidth,
         prepend: prepend,
@@ -214,6 +241,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         "aria-expanded": isListOpen,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
+        "aria-invalid": isInvalid,
         className: "euiComboBox__input",
         "data-test-subj": "comboBoxSearchInput",
         disabled: isDisabled,
@@ -222,6 +250,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
         role: "combobox",
         style: {
@@ -253,7 +282,7 @@ EuiComboBoxInput.propTypes = {
   onCloseListClick: _propTypes.default.func.isRequired,
   onFocus: _propTypes.default.any.isRequired,
   onOpenListClick: _propTypes.default.func.isRequired,
-  onRemoveOption: _propTypes.default.func,
+  onRemoveOption: _propTypes.default.func.isRequired,
   placeholder: _propTypes.default.string,
   rootId: _propTypes.default.any.isRequired,
   searchValue: _propTypes.default.string.isRequired,
@@ -277,7 +306,7 @@ EuiComboBoxInput.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
-  }).isRequired),
+  }).isRequired).isRequired,
   singleSelection: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
     asPlainText: _propTypes.default.bool
   }).isRequired]),
@@ -287,6 +316,7 @@ EuiComboBoxInput.propTypes = {
   prepend: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
   append: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
   isLoading: _propTypes.default.bool,
+  isInvalid: _propTypes.default.bool,
   autoFocus: _propTypes.default.bool,
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,

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

@@ -351,7 +351,7 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         hasShadow: false,
         className: classes,
         panelRef: this.listRefCallback,
-        "data-test-subj": "comboBoxOptionsList ".concat(dataTestSubj),
+        "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
         style: _objectSpread(_objectSpread({}, style), {}, {
           zIndex: zIndex
         }),

package/lib/components/context_menu/context_menu_panel.a11y.js

@@ -13,7 +13,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var items = [(0, _react2.jsx)(_context_menu_item.EuiContextMenuItem, {
   key: "A",

package/lib/components/copy/copy.a11y.js

@@ -20,14 +20,13 @@ var Copy = function Copy() {
     _useState2 = _slicedToArray(_useState, 2),
     copyText = _useState2[0],
     setCopyText = _useState2[1];
-  var onChange = function onChange(e) {
-    setCopyText(e.target.value);
-  };
   return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_form.EuiFormRow, {
     label: "Enter text that will be copied to clipboard"
   }, (0, _react2.jsx)(_form.EuiFieldText, {
     value: copyText,
-    onChange: onChange
+    onChange: function onChange(e) {
+      return setCopyText(e.target.value);
+    }
   })), (0, _react2.jsx)(_spacer.EuiSpacer, {
     size: "m"
   }), (0, _react2.jsx)(_copy.EuiCopy, {