@elastic/eui 77.0.0 → 77.1.0

package/eui.d.ts

@@ -2582,7 +2582,8 @@ declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
 	    contentProps?: CommonProps & EuiButtonContentType;
-	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>; type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
+	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>;
+	export type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
 	export type EuiButtonEmptyProps = ExclusiveUnion<EuiButtonEmptyPropsForAnchor, EuiButtonEmptyPropsForButton>;
 	export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps>;
 	export {};
@@ -3393,19 +3394,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 +4695,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 +5045,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 +6415,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 +10402,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 +10426,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 +10438,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 +10451,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 +10680,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 +13749,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 +13769,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 +13808,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 +14448,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;
 	    /**
@@ -15614,6 +15621,113 @@ declare module '@elastic/eui/src/components/image' {
 	export type { EuiImageProps } from '@elastic/eui/src/components/image/image_types';
 	export { EuiImage } from '@elastic/eui/src/components/image/image';
 
+}
+declare module '@elastic/eui/src/components/inline_edit/inline_edit_form' {
+	import { ReactNode, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiFieldTextProps } from '@elastic/eui/src/components/form';
+	import { EuiButtonEmptyProps } from '@elastic/eui/src/components/button';
+	import { EuiButtonEmptyPropsForButton } from '@elastic/eui/src/components/button/button_empty/button_empty';
+	export type EuiInlineEditCommonProps = CommonProps & {
+	    defaultValue: string;
+	    /**
+	     * Allow users to pass in a function that is called when the confirm button is clicked
+	     * The function should return a boolean flag that will determine if the value will be saved.
+	     * When the flag is true, the value will be saved. When the flag is false, the user will be
+	     * returned to editMode.
+	     */
+	    onConfirm?: () => boolean;
+	    /**
+	     * Form label that appears above the form control
+	     * This is required for accessibility because there is no visual label on the input
+	     */
+	    inputAriaLabel: string;
+	    /**
+	     * Aria-label for save button in editMode
+	     */
+	    saveButtonAriaLabel?: string;
+	    /**
+	     * Aria-label for cancel button in editMode
+	     */
+	    cancelButtonAriaLabel?: string;
+	    /**
+	     * Start in editMode
+	     */
+	    startWithEditOpen?: boolean;
+	    /**
+	     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+	     */
+	    readModeProps?: Omit<EuiButtonEmptyPropsForButton, 'onClick'>;
+	    /**
+	     * Props that will be applied directly to the EuiFieldText displayed in editMode
+	     */
+	    editModeProps?: EuiFieldTextProps;
+	};
+	export type EuiInlineEditFormProps = EuiInlineEditCommonProps & {
+	    /**
+	     * Form sizes
+	     */
+	    sizes: {
+	        compressed: boolean;
+	        buttonSize: EuiButtonEmptyProps['size'];
+	        iconSize: EuiButtonEmptyProps['iconSize'];
+	    };
+	    /**
+	     * Render prop that returns the read mode value as an arg
+	     */
+	    children: (readModeValue: ReactNode) => ReactNode;
+	};
+	export const SMALL_SIZE_FORM: {
+	    readonly iconSize: "s";
+	    readonly compressed: true;
+	    readonly buttonSize: "s";
+	};
+	export const MEDIUM_SIZE_FORM: {
+	    readonly iconSize: "m";
+	    readonly compressed: false;
+	    readonly buttonSize: "m";
+	};
+	export const EuiInlineEditForm: FunctionComponent<EuiInlineEditFormProps>;
+
+}
+declare module '@elastic/eui/src/components/inline_edit/inline_edit_text' {
+	import { FunctionComponent } from 'react';
+	import { EuiTextProps } from '@elastic/eui/src/components/text';
+	import { EuiInlineEditCommonProps } from '@elastic/eui/src/components/inline_edit/inline_edit_form';
+	export type EuiInlineEditTextSizes = Exclude<EuiTextProps['size'], 'relative'>;
+	export type EuiInlineEditTextProps = EuiInlineEditCommonProps & {
+	    /**
+	     * Text size level
+	     */
+	    size?: EuiInlineEditTextSizes;
+	};
+	export const EuiInlineEditText: FunctionComponent<EuiInlineEditTextProps>;
+
+}
+declare module '@elastic/eui/src/components/inline_edit/inline_edit_title' {
+	import { FunctionComponent } from 'react';
+	import { EuiTitleSize } from '@elastic/eui/src/components/title';
+	import { EuiInlineEditCommonProps } from '@elastic/eui/src/components/inline_edit/inline_edit_form';
+	export const HEADINGS: readonly ["h1", "h2", "h3", "h4", "h5", "h6"]; type Heading = typeof HEADINGS[number];
+	export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & {
+	    /**
+	     * Title size level
+	     */
+	    size?: EuiTitleSize;
+	    /**
+	     * Level of heading to be used for the title
+	     */
+	    heading: Heading;
+	};
+	export const EuiInlineEditTitle: FunctionComponent<EuiInlineEditTitleProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/inline_edit' {
+	export { EuiInlineEditText } from '@elastic/eui/src/components/inline_edit/inline_edit_text';
+	export { EuiInlineEditTitle } from '@elastic/eui/src/components/inline_edit/inline_edit_title';
+	export type { EuiInlineEditTextSizes } from '@elastic/eui/src/components/inline_edit/inline_edit_text';
+
 }
 declare module '@elastic/eui/src/components/key_pad_menu/key_pad_menu.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -21373,6 +21487,7 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/icon';
 	export * from '@elastic/eui/src/components/image';
 	export * from '@elastic/eui/src/components/inner_text';
+	export * from '@elastic/eui/src/components/inline_edit';
 	export * from '@elastic/eui/src/components/i18n';
 	export * from '@elastic/eui/src/components/loading';
 	export * from '@elastic/eui/src/components/key_pad_menu';
@@ -26116,6 +26231,13 @@ declare module '@elastic/eui/src/components/icon/assets/wrench' {
 	export const icon: ({ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/inline_edit/inline_edit.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiInlineEditStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiInlineEdit: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -26460,6 +26582,8 @@ declare module '@elastic/eui' {
 "euiHeaderLinks.appNavigation": any;
 "euiImageButton.openFullScreen": any;
 "euiImageButton.closeFullScreen": any;
+"euiInlineEditForm.saveButtonAriaLabel": any;
+"euiInlineEditForm.cancelButtonAriaLabel": any;
 "euiLink.newTarget.screenReaderOnlyText": any;
 "euiLink.external.ariaLabel": any;
 "euiPinnableListGroup.pinExtraActionLabel": any;

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"
@@ -4967,6 +4967,42 @@
     },
     "filepath": "src/components/image/image_button.tsx"
   },
+  {
+    "token": "euiInlineEditForm.saveButtonAriaLabel",
+    "defString": "Save edit",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 105,
+        "column": 37,
+        "index": 3359
+      },
+      "end": {
+        "line": 108,
+        "column": 3,
+        "index": 3435
+      }
+    },
+    "filepath": "src/components/inline_edit/inline_edit_form.tsx"
+  },
+  {
+    "token": "euiInlineEditForm.cancelButtonAriaLabel",
+    "defString": "Cancel edit",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 109,
+        "column": 39,
+        "index": 3476
+      },
+      "end": {
+        "line": 112,
+        "column": 3,
+        "index": 3556
+      }
+    },
+    "filepath": "src/components/inline_edit/inline_edit_form.tsx"
+  },
   {
     "token": "euiLink.newTarget.screenReaderOnlyText",
     "defString": "(opens in a new tab or window)",

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