@elastic/eui 77.0.0 → 77.1.1

package/optimize/es/components/popover/popover_panel/_popover_panel.js

@@ -10,14 +10,15 @@ var _excluded = ["children", "className", "isOpen", "isAttached", "hasDragDrop",
  * Side Public License, v 1.
  */
 
-import React, { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { EuiPanel } from '../../panel/panel';
 import { euiPopoverPanelStyles } from './_popover_panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var DEFAULT_PANEL_PADDING_SIZE = 'l';
 export var EuiPopoverPanelContext = /*#__PURE__*/createContext({
-  paddingSize: 'l'
+  paddingSize: DEFAULT_PANEL_PADDING_SIZE
 });
 /**
  * *INTERNAL ONLY*
@@ -31,8 +32,8 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
     hasDragDrop = _ref.hasDragDrop,
     position = _ref.position,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var panelContext = useContext(EuiPopoverPanelContext);
-  if (rest.paddingSize) panelContext.paddingSize = rest.paddingSize;
+  var _rest$paddingSize = rest.paddingSize,
+    paddingSize = _rest$paddingSize === void 0 ? DEFAULT_PANEL_PADDING_SIZE : _rest$paddingSize;
   var euiThemeContext = useEuiTheme();
   // Using BEM child class for BWC
   var classes = classNames('euiPopover__panel', className);
@@ -45,7 +46,9 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
     panelCSS = [].concat(_toConsumableArray(panelCSS), [styles.hasDragDrop.hasDragDrop, position && styles.hasDragDrop[position]]);
   }
   return ___EmotionJSX(EuiPopoverPanelContext.Provider, {
-    value: panelContext
+    value: {
+      paddingSize: paddingSize
+    }
   }, ___EmotionJSX(EuiPanel, _extends({
     className: classes,
     css: panelCSS,

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

@@ -7,7 +7,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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/optimize/es/components/progress/progress.a11y.js

@@ -7,7 +7,9 @@ import _extends from "@babel/runtime/helpers/extends";
  * 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 { EuiProgress } from './progress';

package/optimize/es/components/resizable_container/resizable_container.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 { EuiResizableContainer } from './resizable_container';

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

@@ -7,14 +7,16 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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 { EuiBasicTable } from '../basic_table';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiHealth } from '../health';
-import { EuiSearchBar } from './search_bar';
 import { EuiSpacer } from '../spacer';
+import { EuiSearchBar } from './search_bar';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var tags = [{
   name: 'marketing',
@@ -76,10 +78,6 @@ export var SearchBar = function SearchBar() {
     _useState2 = _slicedToArray(_useState, 2),
     query = _useState2[0],
     setQuery = _useState2[1];
-  var onChange = function onChange(_ref) {
-    var query = _ref.query;
-    return setQuery(query);
-  };
   var renderSearch = function renderSearch() {
     var filters = [{
       type: 'field_value_toggle_group',
@@ -125,7 +123,10 @@ export var SearchBar = function SearchBar() {
         schema: schema
       },
       filters: filters,
-      onChange: onChange
+      onChange: function onChange(_ref) {
+        var query = _ref.query;
+        if (query) setQuery(query);
+      }
     });
   };
   var renderTable = function renderTable() {

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

@@ -8,7 +8,9 @@ import _extends from "@babel/runtime/helpers/extends";
  * 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/optimize/es/components/side_nav/side_nav.a11y.js

@@ -7,7 +7,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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 { EuiSideNav } from './side_nav';

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

@@ -9,7 +9,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 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 { EuiTabbedContent } from './tabbed_content';

package/optimize/es/components/tree_view/tree_view.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 { EuiTreeView } from './tree_view';

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

@@ -14,7 +14,9 @@ var _react2 = require("@emotion/react");
  * 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/optimize/lib/components/accordion/accordion.js

@@ -212,8 +212,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/optimize/lib/components/basic_table/table.a11y.js

@@ -16,7 +16,9 @@ var _react2 = require("@emotion/react");
  * 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/optimize/lib/components/breadcrumbs/breadcrumbs.a11y.js

@@ -12,7 +12,9 @@ var _react2 = require("@emotion/react");
  * 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/optimize/lib/components/card/card.a11y.js

@@ -19,7 +19,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var Card = function Card() {
   var _useState = (0, _react.useState)(false),

package/optimize/lib/components/color_picker/color_picker.a11y.js

@@ -15,7 +15,9 @@ var _react2 = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var ColorPicker = function ColorPicker() {
   var _useColorPickerState = (0, _services.useColorPickerState)('#D36086'),

package/optimize/lib/components/combo_box/combo_box.a11y.js

@@ -16,7 +16,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var ComboBox = function ComboBox() {
   var _useState = (0, _react.useState)([{

package/optimize/lib/components/combo_box/combo_box.js

@@ -216,22 +216,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "clearSearchValue", function () {
       _this.onSearchChange('');
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "addCustomOption", function (isContainerBlur, searchValue) {
       var _this$props = _this.props,
         isCaseSensitive = _this$props.isCaseSensitive,
@@ -381,10 +365,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();
@@ -661,7 +641,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,
@@ -758,6 +738,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/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -19,8 +19,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 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"];
@@ -61,10 +63,29 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         hasFocus: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
+      var _this$props2 = _this.props,
+        onChange = _this$props2.onChange,
+        searchValue = _this$props2.searchValue;
       if (onChange) {
         onChange(event.target.value);
       }
@@ -91,34 +112,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 && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -180,12 +202,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, (0, _extends2.default)({
@@ -193,6 +219,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }, clickProps, {
         inputId: id,
         isLoading: isLoading,
+        isInvalid: isInvalid,
         compressed: compressed,
         fullWidth: fullWidth,
         prepend: prepend,
@@ -209,6 +236,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,
@@ -217,6 +245,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
         role: "combobox",
         style: {

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

@@ -345,7 +345,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/optimize/lib/components/context_menu/context_menu_panel.a11y.js

@@ -13,7 +13,9 @@ var _react2 = require("@emotion/react");
  * 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/optimize/lib/components/control_bar/control_bar.a11y.js

@@ -19,7 +19,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var ControlBar = function ControlBar() {
   var _useState = (0, _react.useState)(false),

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

@@ -19,21 +19,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var Copy = function Copy() {
   var _useState = (0, _react.useState)('I am the text that will be copied'),
     _useState2 = (0, _slicedToArray2.default)(_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, {

package/optimize/lib/components/datagrid/data_grid.a11y.js

@@ -18,7 +18,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var columns = [{
   id: 'Name'

package/optimize/lib/components/date_picker/date_picker.a11y.js

@@ -18,7 +18,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Side Public License, v 1.
  */
 
-/// <reference types="../../../cypress/support"/>
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
 
 var DatePicker = function DatePicker() {
   var _useState = (0, _react.useState)((0, _moment.default)()),