@elastic/eui 77.0.0 → 77.1.0

package/lib/components/empty_prompt/empty_prompt.a11y.js

@@ -15,12 +15,15 @@ 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 EmptyPrompt = function EmptyPrompt(_ref) {
-  var addCaseSpy = _ref.addCaseSpy,
-    addLinkSpy = _ref.addLinkSpy;
-  return (0, _react2.jsx)(_empty_prompt.EuiEmptyPrompt, {
+beforeEach(function () {
+  var addCaseSpy = cy.spy().as('addCaseSpy');
+  var addLinkSpy = cy.spy().as('addLinkSpy');
+  cy.viewport(1024, 768); // medium breakpoint
+  cy.realMount((0, _react2.jsx)(_empty_prompt.EuiEmptyPrompt, {
     iconType: "logoSecurity",
     title: (0, _react2.jsx)("h2", null, "Start adding cases"),
     body: (0, _react2.jsx)("p", null, "Add a new case or change your filter settings."),
@@ -35,15 +38,6 @@ var EmptyPrompt = function EmptyPrompt(_ref) {
       href: "#",
       onClick: addLinkSpy
     }, "Read the docs"))
-  });
-};
-beforeEach(function () {
-  var addCaseSpy = cy.spy().as('addCaseSpy');
-  var addLinkSpy = cy.spy().as('addLinkSpy');
-  cy.viewport(1024, 768); // medium breakpoint
-  cy.realMount((0, _react2.jsx)(EmptyPrompt, {
-    addCaseSpy: addCaseSpy,
-    addLinkSpy: addLinkSpy
   }));
 });
 describe('EuiEmptyPrompt', function () {

package/lib/components/error_boundary/error_boundary.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 handleFocus = function handleFocus() {
   var target = document.querySelector('pre.euiCodeBlock__pre');

package/lib/components/filter_group/filter_group.a11y.js

@@ -2,11 +2,10 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _react = _interopRequireWildcard(require("react"));
-var _filter_button = require("./filter_button");
-var _filter_group = require("./filter_group");
 var _popover = require("../popover");
 var _selectable = require("../selectable");
 var _services = require("../../services");
+var _index = require("./index");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -25,7 +24,7 @@ describe('EuiFilterGroup single filter example', function () {
     var toggleFilter = function toggleFilter() {
       setIsFilterOn(!isFilterOn);
     };
-    return (0, _react2.jsx)(_filter_group.EuiFilterGroup, null, (0, _react2.jsx)(_filter_button.EuiFilterButton, {
+    return (0, _react2.jsx)(_index.EuiFilterGroup, null, (0, _react2.jsx)(_index.EuiFilterButton, {
       hasActiveFilters: isFilterOn,
       onClick: toggleFilter
     }, "Single filter"));
@@ -53,7 +52,7 @@ describe('EuiFilterGroup filter with long name example', function () {
     var toggleFilter = function toggleFilter() {
       setIsFilterOn(!isFilterOn);
     };
-    return (0, _react2.jsx)(_filter_group.EuiFilterGroup, null, (0, _react2.jsx)(_filter_button.EuiFilterButton, {
+    return (0, _react2.jsx)(_index.EuiFilterGroup, null, (0, _react2.jsx)(_index.EuiFilterButton, {
       hasActiveFilters: isFilterOn,
       numFilters: 12,
       onClick: toggleFilter
@@ -91,11 +90,11 @@ describe('EuiFilterGroup two filter example', function () {
       setIsOffFilterOn(!isOffFilterOn);
       setIsOnFilterOn(isOnFilterOn && !isOffFilterOn ? false : isOnFilterOn);
     };
-    return (0, _react2.jsx)(_filter_group.EuiFilterGroup, null, (0, _react2.jsx)(_filter_button.EuiFilterButton, {
+    return (0, _react2.jsx)(_index.EuiFilterGroup, null, (0, _react2.jsx)(_index.EuiFilterButton, {
       withNext: true,
       hasActiveFilters: isOnFilterOn,
       onClick: toggleOnFilter
-    }, "Yes"), (0, _react2.jsx)(_filter_button.EuiFilterButton, {
+    }, "Yes"), (0, _react2.jsx)(_index.EuiFilterButton, {
       withNext: true,
       hasActiveFilters: isOffFilterOn,
       onClick: toggleOffFilter
@@ -167,7 +166,7 @@ describe('EuiFilterGroup multiselect example', function () {
       _useState16 = _slicedToArray(_useState15, 2),
       items = _useState16[0],
       setItems = _useState16[1];
-    var button = (0, _react2.jsx)(_filter_button.EuiFilterButton, {
+    var button = (0, _react2.jsx)(_index.EuiFilterButton, {
       iconType: "arrowDown",
       onClick: onButtonClick,
       isSelected: isPopoverOpen,
@@ -181,7 +180,7 @@ describe('EuiFilterGroup multiselect example', function () {
         return item.checked === 'on';
       }).length
     }, "Composers");
-    return (0, _react2.jsx)(_filter_group.EuiFilterGroup, null, (0, _react2.jsx)(_popover.EuiPopover, {
+    return (0, _react2.jsx)(_index.EuiFilterGroup, null, (0, _react2.jsx)(_popover.EuiPopover, {
       id: filterGroupPopoverId,
       button: button,
       isOpen: isPopoverOpen,

package/lib/components/form/file_picker/file_picker.js

@@ -205,8 +205,10 @@ var EuiFilePicker = /*#__PURE__*/function (_Component) {
           id: promptId
         }, (0, _react2.jsx)(_icon.EuiIcon, {
           className: "euiFilePicker__icon",
-          color: disabled ? 'subdued' : 'primary',
-          type: "importAction",
+          color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary' // eslint-disable-line no-nested-ternary
+          ,
+
+          type: isInvalid ? 'alert' : 'importAction',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), (0, _react2.jsx)("div", {

package/lib/components/form/radio/radio_group.a11y.js

@@ -35,14 +35,11 @@ var RadioGroup = function RadioGroup() {
     _useState2 = _slicedToArray(_useState, 2),
     radioIdSelected = _useState2[0],
     setRadioIdSelected = _useState2[1];
-  var _onChange = function onChange(optionId) {
-    setRadioIdSelected(optionId);
-  };
   return (0, _react2.jsx)(_radio_group.EuiRadioGroup, {
     options: radios,
     idSelected: radioIdSelected,
     onChange: function onChange(id) {
-      return _onChange(id);
+      return setRadioIdSelected(id);
     },
     name: "radio group",
     legend: {

package/lib/components/form/switch/switch.a11y.js

@@ -17,14 +17,11 @@ var Switch = function Switch() {
     _useState2 = _slicedToArray(_useState, 2),
     checked = _useState2[0],
     setChecked = _useState2[1];
-  var _onChange = function onChange(e) {
-    setChecked(e.target.checked);
-  };
   return (0, _react2.jsx)(_switch.EuiSwitch, {
     label: "Malware protection",
     checked: checked,
     onChange: function onChange(e) {
-      return _onChange(e);
+      return setChecked(e.target.checked);
     }
   });
 };

package/lib/components/form/text_area/text_area.js

@@ -7,10 +7,11 @@ exports.RESIZE = exports.EuiTextArea = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _form_control_layout = require("../form_control_layout");
 var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inputRef", "isInvalid", "name", "placeholder", "resize", "rows"];
+var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inputRef", "isLoading", "isInvalid", "name", "placeholder", "resize", "rows"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -33,6 +34,7 @@ var EuiTextArea = function EuiTextArea(props) {
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     id = props.id,
     inputRef = props.inputRef,
+    isLoading = props.isLoading,
     isInvalid = props.isInvalid,
     name = props.name,
     placeholder = props.placeholder,
@@ -52,7 +54,12 @@ var EuiTextArea = function EuiTextArea(props) {
   } else {
     definedRows = 6;
   }
-  return (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+  return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
+    fullWidth: fullWidth,
+    isLoading: isLoading,
+    isInvalid: isInvalid,
+    className: "euiFormControlLayout--euiTextArea"
+  }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
     isInvalid: isInvalid
   }, (0, _react2.jsx)("textarea", _extends({
     className: classes
@@ -62,7 +69,7 @@ var EuiTextArea = function EuiTextArea(props) {
     id: id,
     ref: inputRef,
     placeholder: placeholder
-  }), children));
+  }), children)));
 };
 exports.EuiTextArea = EuiTextArea;
 EuiTextArea.propTypes = {
@@ -70,6 +77,7 @@ EuiTextArea.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  isLoading: _propTypes.default.bool,
   isInvalid: _propTypes.default.bool,
   /**
        * Expand to fill 100% of the parent.

package/lib/components/form/validatable_control/index.js

@@ -9,4 +9,10 @@ Object.defineProperty(exports, "EuiValidatableControl", {
     return _validatable_control.EuiValidatableControl;
   }
 });
+Object.defineProperty(exports, "useEuiValidatableControl", {
+  enumerable: true,
+  get: function get() {
+    return _validatable_control.useEuiValidatableControl;
+  }
+});
 var _validatable_control = require("./validatable_control");

package/lib/components/form/validatable_control/validatable_control.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiValidatableControl = void 0;
+exports.useEuiValidatableControl = exports.EuiValidatableControl = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,6 +18,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function isMutableRef(ref) {
   return ref != null && ref.hasOwnProperty('current');
 }
+
+/**
+ * The `EuiValidatableControl` component should be used in scenarios where
+ * we can render the validated `<input>` as its direct child.
+ */
+
 var EuiValidatableControl = function EuiValidatableControl(_ref) {
   var isInvalid = _ref.isInvalid,
     children = _ref.children;
@@ -34,22 +40,21 @@ var EuiValidatableControl = function EuiValidatableControl(_ref) {
       childRef.current = element;
     }
   }, [childRef]);
-  (0, _react.useEffect)(function () {
-    if (control.current === null || typeof control.current.setCustomValidity !== 'function') {
-      return; // jsdom doesn't polyfill this for the server-side
-    }
-
-    if (isInvalid) {
-      control.current.setCustomValidity('Invalid');
-    } else {
-      control.current.setCustomValidity('');
-    }
+  useSetControlValidity({
+    controlEl: control.current,
+    isInvalid: isInvalid
   });
   return /*#__PURE__*/(0, _react.cloneElement)(child, {
     ref: replacedRef,
     'aria-invalid': isInvalid
   });
 };
+
+/**
+ * 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
+ */
 exports.EuiValidatableControl = EuiValidatableControl;
 EuiValidatableControl.propTypes = {
   className: _propTypes.default.string,
@@ -57,10 +62,42 @@ EuiValidatableControl.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   isInvalid: _propTypes.default.bool,
-  /**
-     * ReactNode to render as this component's content
-     */
   children: _propTypes.default.shape({
     ref: _propTypes.default.any
   }).isRequired
+};
+var useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
+  var isInvalid = _ref2.isInvalid,
+    controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
+  (0, _react.useEffect)(function () {
+    if (!controlEl) return;
+    if (typeof isInvalid === 'boolean') {
+      controlEl.setAttribute('aria-invalid', String(isInvalid));
+    } else {
+      controlEl.removeAttribute('aria-invalid');
+    }
+  }, [isInvalid, controlEl]);
+};
+
+/**
+ * Internal `setCustomValidity` helper
+ */
+exports.useEuiValidatableControl = useEuiValidatableControl;
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  (0, _react.useEffect)(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
+    if (isInvalid) {
+      controlEl.setCustomValidity('Invalid');
+    } else {
+      controlEl.setCustomValidity('');
+    }
+  }, [isInvalid, controlEl]);
 };

package/lib/components/icon/icon_ML.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for ML icons', function () {

package/lib/components/icon/icon_apps.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for app icons', function () {

package/lib/components/icon/icon_editor.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for editor icons', function () {

package/lib/components/icon/icon_elastic.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for Elastic logos', function () {

package/lib/components/icon/icon_glyphs.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for glyph icons', function () {

package/lib/components/icon/icon_tokens.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" />
 
 describe('EuiIcons', function () {
   describe('Automated accessibility check for token icons', function () {

package/lib/components/image/image.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 Image = function Image() {
   return (0, _react2.jsx)(_image.EuiImage, {

package/lib/components/index.js

@@ -476,6 +476,17 @@ Object.keys(_inner_text).forEach(function (key) {
     }
   });
 });
+var _inline_edit = require("./inline_edit");
+Object.keys(_inline_edit).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _inline_edit[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _inline_edit[key];
+    }
+  });
+});
 var _i18n = require("./i18n");
 Object.keys(_i18n).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/inline_edit/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiInlineEditText", {
+  enumerable: true,
+  get: function get() {
+    return _inline_edit_text.EuiInlineEditText;
+  }
+});
+Object.defineProperty(exports, "EuiInlineEditTitle", {
+  enumerable: true,
+  get: function get() {
+    return _inline_edit_title.EuiInlineEditTitle;
+  }
+});
+var _inline_edit_text = require("./inline_edit_text");
+var _inline_edit_title = require("./inline_edit_title");

package/lib/components/inline_edit/inline_edit.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiInlineEditStyles = void 0;
+var _react = require("@emotion/react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var euiInlineEditStyles = function euiInlineEditStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiInlineEdit: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primaryText, ";;label:euiInlineEdit;")
+  };
+};
+exports.euiInlineEditStyles = euiInlineEditStyles;