@elastic/eui 77.0.0 → 77.1.0

package/src/components/form/file_picker/_file_picker.scss

@@ -101,8 +101,9 @@
     height: $euiFilePickerTallHeight - $euiSizeL; /* 4 */
   }
 
-  .euiFilePicker-isInvalid & {
-    border: $euiBorderWidthThick dashed $euiColorDanger;
+  // To match other EUI form controls, do not color the border red if focused or disabled
+  .euiFilePicker-isInvalid:not(.euiFilePicker__showDrop) .euiFilePicker__input:not(:disabled):not(:focus) + & {
+    border-color: $euiColorDanger;
   }
 }
 

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -14,13 +14,18 @@
   // we use a form control layout class on all form controls.
   @for $i from 1 through 5 {
     &--#{$i}icons {
-      padding-right: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
+      $paddingOffset: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
+
+      --eui-form-control-layout-icons-padding: #{$paddingOffset}; // Set this for flexible usage, e.g. components that need extra specificity
+      padding-right: $paddingOffset;
 
       &[class*='compressed'] {
         $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small');
         $iconPaddingCompressed: $euiFormControlCompressedPadding;
+        $paddingOffset: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;
 
-        padding-right: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;
+        --eui-form-control-layout-icons-padding: #{$paddingOffset};
+        padding-right: $paddingOffset;
       }
     }
   }

package/src/components/form/text_area/_text_area.scss

@@ -9,6 +9,15 @@
   }
 }
 
+.euiFormControlLayout--euiTextArea {
+  height: auto;
+
+  .euiFormControlLayoutIcons {
+    top: auto;
+    bottom: $euiFormControlPadding;
+  }
+}
+
 // resize modifiers
 $textareaResizing: (
   vertical: 'resizeVertical',

package/test-env/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/test-env/components/accordion/accordion.js

@@ -213,8 +213,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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/components/combo_box/combo_box.js

@@ -217,22 +217,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,
@@ -382,10 +366,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();
@@ -662,7 +642,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,
@@ -759,6 +739,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/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -20,8 +20,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"];
@@ -62,10 +64,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);
       }
@@ -92,34 +113,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) {
@@ -181,12 +203,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)({
@@ -194,6 +220,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }, clickProps, {
         inputId: id,
         isLoading: isLoading,
+        isInvalid: isInvalid,
         compressed: compressed,
         fullWidth: fullWidth,
         prepend: prepend,
@@ -210,6 +237,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,
@@ -218,6 +246,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
+        onKeyDown: this.onKeyDown,
         ref: this.inputRefCallback,
         role: "combobox",
         style: {
@@ -249,7 +278,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,
@@ -273,7 +302,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]),
@@ -283,6 +312,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/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -346,7 +346,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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/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)()),