@elastic/eui 77.0.0 → 77.1.0

package/optimize/es/components/delay_hide/delay_hide.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 { EuiDelayHide } from './delay_hide';
@@ -24,22 +26,20 @@ var DelayHide = function DelayHide() {
     _useState4 = _slicedToArray(_useState3, 2),
     hide = _useState4[0],
     setHide = _useState4[1];
-  var onChangeMinimumDuration = function onChangeMinimumDuration(event) {
-    setDuration(parseInt(event.target.value, 10));
-  };
-  var onChangeHide = function onChangeHide(event) {
-    setHide(event.target.checked);
-  };
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiCheckbox, {
     id: "dummy-id",
     checked: hide,
-    onChange: onChangeHide,
+    onChange: function onChange(event) {
+      return setHide(event.target.checked);
+    },
     label: "Hide child"
   })), ___EmotionJSX(EuiFormRow, {
     label: "Minimum duration"
   }, ___EmotionJSX(EuiFieldNumber, {
     value: minimumDuration,
-    onChange: onChangeMinimumDuration
+    onChange: function onChange(event) {
+      return setDuration(parseInt(event.target.value, 10));
+    }
   })), ___EmotionJSX(EuiFormRow, {
     label: "Child to render"
   }, ___EmotionJSX(EuiDelayHide, {

package/optimize/es/components/delay_render/delay_render.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 { EuiDelayRender } from './delay_render';
@@ -24,24 +26,22 @@ var DelayRender = function DelayRender() {
     _useState4 = _slicedToArray(_useState3, 2),
     render = _useState4[0],
     setRender = _useState4[1];
-  var onChangeMinimumDelay = function onChangeMinimumDelay(event) {
-    setDelay(parseInt(event.target.value, 10));
-  };
-  var onChangeHide = function onChangeHide(event) {
-    setRender(event.target.checked);
-  };
   var status = render ? 'showing' : 'hidden';
   var label = "Child (".concat(status, ")");
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiCheckbox, {
     id: "dummy-id",
     checked: render,
-    onChange: onChangeHide,
+    onChange: function onChange(event) {
+      return setRender(event.target.checked);
+    },
     label: "Show child"
   })), ___EmotionJSX(EuiFormRow, {
     label: "Minimum delay"
   }, ___EmotionJSX(EuiFieldNumber, {
     value: minimumDelay,
-    onChange: onChangeMinimumDelay
+    onChange: function onChange(event) {
+      return setDelay(parseInt(event.target.value, 10));
+    }
   })), ___EmotionJSX(EuiFormRow, {
     label: label
   }, render ? ___EmotionJSX(EuiDelayRender, {

package/optimize/es/components/drag_and_drop/drag_and_drop.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 { EuiDragDropContext } from './drag_drop_context';
@@ -36,7 +38,6 @@ var DragAndDrop = function DragAndDrop() {
     _useState2 = _slicedToArray(_useState, 2),
     list = _useState2[0],
     setList = _useState2[1];
-  console.log(list);
   var onDragEnd = function onDragEnd(_ref) {
     var source = _ref.source,
       destination = _ref.destination;

package/optimize/es/components/empty_prompt/empty_prompt.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 { EuiButton } from '../button';
@@ -14,10 +16,11 @@ import { EuiEmptyPrompt } from './empty_prompt';
 import { EuiLink } from '../link';
 import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var EmptyPrompt = function EmptyPrompt(_ref) {
-  var addCaseSpy = _ref.addCaseSpy,
-    addLinkSpy = _ref.addLinkSpy;
-  return ___EmotionJSX(EuiEmptyPrompt, {
+beforeEach(function () {
+  var addCaseSpy = cy.spy().as('addCaseSpy');
+  var addLinkSpy = cy.spy().as('addLinkSpy');
+  cy.viewport(1024, 768); // medium breakpoint
+  cy.realMount(___EmotionJSX(EuiEmptyPrompt, {
     iconType: "logoSecurity",
     title: ___EmotionJSX("h2", null, "Start adding cases"),
     body: ___EmotionJSX("p", null, "Add a new case or change your filter settings."),
@@ -32,15 +35,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(___EmotionJSX(EmptyPrompt, {
-    addCaseSpy: addCaseSpy,
-    addLinkSpy: addLinkSpy
   }));
 });
 describe('EuiEmptyPrompt', function () {

package/optimize/es/components/error_boundary/error_boundary.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 { EuiButton } from '../button';

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

@@ -10,7 +10,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, { useState } from 'react';
 import { EuiExpression } from './expression';

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

@@ -7,14 +7,15 @@ 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 { EuiFilterButton } from './filter_button';
-import { EuiFilterGroup } from './filter_group';
 import { EuiPopover, EuiPopoverTitle } from '../popover';
 import { EuiSelectable } from '../selectable';
 import { useGeneratedHtmlId } from '../../services';
+import { EuiFilterGroup, EuiFilterButton } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('EuiFilterGroup single filter example', function () {
   var SingleFilter = function SingleFilter() {

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

@@ -10,7 +10,9 @@ var _excluded = ["children"];
  * 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 { EuiFlyout } from './flyout';

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

@@ -8,7 +8,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 { EuiBadge } from '../badge';

package/optimize/es/components/form/checkbox/checkbox_group.a11y.js

@@ -10,7 +10,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, { useState } from 'react';
 import { EuiCheckboxGroup } from './checkbox_group';

package/optimize/es/components/form/file_picker/file_picker.js

@@ -196,8 +196,10 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
           id: promptId
         }, ___EmotionJSX(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"
         }), ___EmotionJSX("div", {

package/optimize/es/components/form/radio/radio_group.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 { EuiRadioGroup } from './radio_group';
@@ -35,14 +37,11 @@ var RadioGroup = function RadioGroup() {
     _useState2 = _slicedToArray(_useState, 2),
     radioIdSelected = _useState2[0],
     setRadioIdSelected = _useState2[1];
-  var _onChange = function onChange(optionId) {
-    setRadioIdSelected(optionId);
-  };
   return ___EmotionJSX(EuiRadioGroup, {
     options: radios,
     idSelected: radioIdSelected,
     onChange: function onChange(id) {
-      return _onChange(id);
+      return setRadioIdSelected(id);
     },
     name: "radio group",
     legend: {

package/optimize/es/components/form/range/range.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 { EuiDualRange } from './dual_range';

package/optimize/es/components/form/switch/switch.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 { EuiSwitch } from './switch';
@@ -17,14 +19,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 ___EmotionJSX(EuiSwitch, {
     label: "Malware protection",
     checked: checked,
     onChange: function onChange(e) {
-      return _onChange(e);
+      return setChecked(e.target.checked);
     }
   });
 };

package/optimize/es/components/form/text_area/text_area.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,6 +11,7 @@ var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inpu
 
 import React from 'react';
 import classNames from 'classnames';
+import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,6 +32,7 @@ export 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,
@@ -50,7 +52,12 @@ export var EuiTextArea = function EuiTextArea(props) {
   } else {
     definedRows = 6;
   }
-  return ___EmotionJSX(EuiValidatableControl, {
+  return ___EmotionJSX(EuiFormControlLayout, {
+    fullWidth: fullWidth,
+    isLoading: isLoading,
+    isInvalid: isInvalid,
+    className: "euiFormControlLayout--euiTextArea"
+  }, ___EmotionJSX(EuiValidatableControl, {
     isInvalid: isInvalid
   }, ___EmotionJSX("textarea", _extends({
     className: classes
@@ -60,5 +67,5 @@ export var EuiTextArea = function EuiTextArea(props) {
     id: id,
     ref: inputRef,
     placeholder: placeholder
-  }), children));
+  }), children)));
 };

package/optimize/es/components/form/validatable_control/index.js

@@ -6,4 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { EuiValidatableControl } from './validatable_control';
+export { EuiValidatableControl, useEuiValidatableControl } from './validatable_control';

package/optimize/es/components/form/validatable_control/validatable_control.js

@@ -10,6 +10,12 @@ import { Children, cloneElement, useRef, useEffect, useCallback } from 'react';
 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.
+ */
+
 export var EuiValidatableControl = function EuiValidatableControl(_ref) {
   var isInvalid = _ref.isInvalid,
     children = _ref.children;
@@ -26,19 +32,53 @@ export var EuiValidatableControl = function EuiValidatableControl(_ref) {
       childRef.current = element;
     }
   }, [childRef]);
+  useSetControlValidity({
+    controlEl: control.current,
+    isInvalid: isInvalid
+  });
+  return /*#__PURE__*/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
+ */
+
+export var useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
+  var isInvalid = _ref2.isInvalid,
+    controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
   useEffect(function () {
-    if (control.current === null || typeof control.current.setCustomValidity !== 'function') {
-      return; // jsdom doesn't polyfill this for the server-side
+    if (!controlEl) return;
+    if (typeof isInvalid === 'boolean') {
+      controlEl.setAttribute('aria-invalid', String(isInvalid));
+    } else {
+      controlEl.removeAttribute('aria-invalid');
     }
+  }, [isInvalid, controlEl]);
+};
 
+/**
+ * Internal `setCustomValidity` helper
+ */
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  useEffect(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
     if (isInvalid) {
-      control.current.setCustomValidity('Invalid');
+      controlEl.setCustomValidity('Invalid');
     } else {
-      control.current.setCustomValidity('');
+      controlEl.setCustomValidity('');
     }
-  });
-  return /*#__PURE__*/cloneElement(child, {
-    ref: replacedRef,
-    'aria-invalid': isInvalid
-  });
+  }, [isInvalid, controlEl]);
 };

package/optimize/es/components/header/header.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 { EuiAvatar } from '../avatar';

package/optimize/es/components/icon/icon_ML.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 { EuiIcon } from './icon';

package/optimize/es/components/icon/icon_apps.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 { EuiIcon } from './icon';

package/optimize/es/components/icon/icon_editor.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 { EuiIcon } from './icon';

package/optimize/es/components/icon/icon_elastic.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 { EuiIcon } from './icon';

package/optimize/es/components/icon/icon_glyphs.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 { EuiIcon } from './icon';

package/optimize/es/components/icon/icon_tokens.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 { EuiIcon } from './icon';

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

package/optimize/es/components/index.js

@@ -49,6 +49,7 @@ export * from './horizontal_rule';
 export * from './icon';
 export * from './image';
 export * from './inner_text';
+export * from './inline_edit';
 export * from './i18n';
 export * from './loading';
 export * from './key_pad_menu';

package/optimize/es/components/inline_edit/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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.
+ */
+
+export { EuiInlineEditText } from './inline_edit_text';
+export { EuiInlineEditTitle } from './inline_edit_title';

package/optimize/es/components/inline_edit/inline_edit.styles.js

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+
+import { css } from '@emotion/react';
+export var euiInlineEditStyles = function euiInlineEditStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiInlineEdit: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";;label:euiInlineEdit;")
+  };
+};