@elastic/eui 77.0.0 → 77.1.0

package/es/components/accordion/accordion.a11y.js

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React from 'react';
 import { EuiAccordion } from './index';

package/es/components/accordion/accordion.js

@@ -216,8 +216,10 @@ export 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/es/components/basic_table/table.a11y.js

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React from 'react';
 import { faker } from '@faker-js/faker';

package/es/components/breadcrumbs/breadcrumbs.a11y.js

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React from 'react';
 import { EuiBreadcrumbs } from './breadcrumbs';

package/es/components/card/card.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import { EuiButtonEmpty } from '../button';

package/es/components/color_picker/color_picker.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React from 'react';
 import { EuiColorPicker } from './color_picker';

package/es/components/combo_box/combo_box.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import { EuiComboBox } from './index';

package/es/components/combo_box/combo_box.js

@@ -225,22 +225,6 @@ export 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,
@@ -390,10 +374,6 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             _this.openList();
           }
           break;
-        case keys.BACKSPACE:
-          event.stopPropagation();
-          _this.removeLastOption();
-          break;
         case keys.ESCAPE:
           if (_this.state.isListOpen) {
             event.preventDefault();
@@ -670,7 +650,7 @@ export 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 = classNames('euiComboBox', className, {
         'euiComboBox--compressed': compressed,
         'euiComboBox--fullWidth': fullWidth,
@@ -767,6 +747,7 @@ export 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/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -28,8 +28,10 @@ import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import AutosizeInput from 'react-input-autosize';
+import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../../form/form_control_layout';
+import { getFormControlClassNameForIconCount } from '../../form/form_control_layout/_num_icons';
 import { EuiComboBoxPill } from './combo_box_pill';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
@@ -65,10 +67,29 @@ export 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 === 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);
       }
@@ -95,34 +116,35 @@ export 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) {
@@ -184,12 +206,16 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
           type: 'arrowDown'
         };
       }
-      var wrapClasses = classNames('euiComboBox__inputWrap', {
+      var numIconsClass = getFormControlClassNameForIconCount({
+        isDropdown: !noIcon,
+        clear: !!clickProps.clear,
+        isInvalid: isInvalid,
+        isLoading: isLoading
+      });
+      var wrapClasses = classNames('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 ___EmotionJSX(EuiFormControlLayout, _extends({
@@ -197,6 +223,7 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }, clickProps, {
         inputId: id,
         isLoading: isLoading,
+        isInvalid: isInvalid,
         compressed: compressed,
         fullWidth: fullWidth,
         prepend: prepend,
@@ -213,6 +240,7 @@ export 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,
@@ -221,6 +249,7 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
         role: "combobox",
         style: {
@@ -251,7 +280,7 @@ EuiComboBoxInput.propTypes = {
   onCloseListClick: PropTypes.func.isRequired,
   onFocus: PropTypes.any.isRequired,
   onOpenListClick: PropTypes.func.isRequired,
-  onRemoveOption: PropTypes.func,
+  onRemoveOption: PropTypes.func.isRequired,
   placeholder: PropTypes.string,
   rootId: PropTypes.any.isRequired,
   searchValue: PropTypes.string.isRequired,
@@ -275,7 +304,7 @@ EuiComboBoxInput.propTypes = {
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
-  }).isRequired),
+  }).isRequired).isRequired,
   singleSelection: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
     asPlainText: PropTypes.bool
   }).isRequired]),
@@ -285,6 +314,7 @@ EuiComboBoxInput.propTypes = {
   prepend: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
   append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
   isLoading: PropTypes.bool,
+  isInvalid: PropTypes.bool,
   autoFocus: PropTypes.bool,
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,

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

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

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

@@ -6,7 +6,9 @@
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React from 'react';
 import { EuiContextMenuItem } from './context_menu_item';

package/es/components/control_bar/control_bar.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import { EuiButton } from '../button';

package/es/components/copy/copy.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import { EuiButton } from '../button';
@@ -25,14 +27,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 ___EmotionJSX("div", null, ___EmotionJSX(EuiFormRow, {
     label: "Enter text that will be copied to clipboard"
   }, ___EmotionJSX(EuiFieldText, {
     value: copyText,
-    onChange: onChange
+    onChange: function onChange(e) {
+      return setCopyText(e.target.value);
+    }
   })), ___EmotionJSX(EuiSpacer, {
     size: "m"
   }), ___EmotionJSX(EuiCopy, {

package/es/components/datagrid/data_grid.a11y.js

@@ -16,7 +16,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import { EuiDataGrid } from './index';

package/es/components/date_picker/date_picker.a11y.js

@@ -12,7 +12,9 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 import React, { useState } from 'react';
 import moment from 'moment';