@elastic/eui 77.0.0 → 77.1.0

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

package/es/components/form/switch/switch.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 { EuiSwitch } from './switch';
@@ -22,14 +24,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/es/components/form/text_area/text_area.js

@@ -1,4 +1,4 @@
-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 _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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -13,6 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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";
@@ -33,6 +34,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,
@@ -52,7 +54,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
@@ -62,13 +69,14 @@ export var EuiTextArea = function EuiTextArea(props) {
     id: id,
     ref: inputRef,
     placeholder: placeholder
-  }), children));
+  }), children)));
 };
 EuiTextArea.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
+  isLoading: PropTypes.bool,
   isInvalid: PropTypes.bool,
   /**
        * Expand to fill 100% of the parent.

package/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/es/components/form/validatable_control/validatable_control.js

@@ -11,6 +11,12 @@ import PropTypes from "prop-types";
 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;
@@ -27,32 +33,62 @@ export var EuiValidatableControl = function EuiValidatableControl(_ref) {
       childRef.current = element;
     }
   }, [childRef]);
-  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__*/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
+ */
 EuiValidatableControl.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
   isInvalid: PropTypes.bool,
-  /**
-     * ReactNode to render as this component's content
-     */
   children: PropTypes.shape({
     ref: PropTypes.any
   }).isRequired
+};
+export var useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
+  var isInvalid = _ref2.isInvalid,
+    controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
+  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
+ */
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  useEffect(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
+    if (isInvalid) {
+      controlEl.setCustomValidity('Invalid');
+    } else {
+      controlEl.setCustomValidity('');
+    }
+  }, [isInvalid, controlEl]);
 };

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

package/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/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/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/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/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/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/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/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/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/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;")
+  };
+};

package/es/components/inline_edit/inline_edit_form.js

@@ -0,0 +1,190 @@
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/*
+ * 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 React, { useState } from 'react';
+import PropTypes from "prop-types";
+import classNames from 'classnames';
+import { EuiFormRow, EuiFieldText, EuiForm } from '../form';
+import { EuiButtonIcon, EuiButtonEmpty } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { useEuiI18n } from '../i18n';
+import { useGeneratedHtmlId } from '../../services/accessibility';
+
+// Props shared between the internal form component as well as consumer-facing components
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var SMALL_SIZE_FORM = {
+  iconSize: 's',
+  compressed: true,
+  buttonSize: 's'
+};
+export var MEDIUM_SIZE_FORM = {
+  iconSize: 'm',
+  compressed: false,
+  buttonSize: 'm'
+};
+export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    sizes = _ref.sizes,
+    defaultValue = _ref.defaultValue,
+    onConfirm = _ref.onConfirm,
+    inputAriaLabel = _ref.inputAriaLabel,
+    saveButtonAriaLabel = _ref.saveButtonAriaLabel,
+    cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
+    startWithEditOpen = _ref.startWithEditOpen,
+    readModeProps = _ref.readModeProps,
+    editModeProps = _ref.editModeProps;
+  var classes = classNames('euiInlineEdit', className);
+
+  // Styles to come later! (Styling editMode text to match the size of its readMode counterpart)
+  /*const theme = useEuiTheme();
+  const styles = euiInlineEditStyles(theme);
+  const cssStyles = [styles.euiInlineEdit];*/
+
+  var defaultSaveButtonAriaLabel = useEuiI18n('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
+  var defaultCancelButtonAriaLabel = useEuiI18n('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
+  var _useState = useState(false || startWithEditOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var inlineEditInputId = useGeneratedHtmlId({
+    prefix: '__inlineEditInput'
+  });
+  var _useState3 = useState(defaultValue),
+    _useState4 = _slicedToArray(_useState3, 2),
+    editModeValue = _useState4[0],
+    setEditModeValue = _useState4[1];
+  var _useState5 = useState(defaultValue),
+    _useState6 = _slicedToArray(_useState5, 2),
+    readModeValue = _useState6[0],
+    setReadModeValue = _useState6[1];
+  var cancelInlineEdit = function cancelInlineEdit() {
+    setEditModeValue(readModeValue);
+    setIsEditing(!isEditing);
+  };
+  var saveInlineEditValue = function saveInlineEditValue() {
+    if (editModeValue && onConfirm && !onConfirm()) {
+      // If there is text, an onConfirm method is present, and it has returned false, cancel the action
+      return;
+    } else if (editModeValue) {
+      setReadModeValue(editModeValue);
+      setIsEditing(!isEditing);
+    } else {
+      // If there's no text, cancel the action, reset the input text, and return to readMode
+      cancelInlineEdit();
+    }
+  };
+  var editModeForm = ___EmotionJSX(EuiForm, {
+    fullWidth: true
+  }, ___EmotionJSX(EuiFlexGroup, {
+    gutterSize: "s"
+  }, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX(EuiFieldText, _extends({
+    id: inlineEditInputId,
+    value: editModeValue,
+    onChange: function onChange(e) {
+      setEditModeValue(e.target.value);
+    },
+    "aria-label": inputAriaLabel,
+    autoFocus: true,
+    compressed: sizes.compressed
+  }, editModeProps))), ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    className: classes
+  }, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiButtonIcon, {
+    iconType: "check",
+    "aria-label": saveButtonAriaLabel || defaultSaveButtonAriaLabel,
+    onClick: saveInlineEditValue,
+    color: "success",
+    display: "base",
+    size: sizes.buttonSize,
+    iconSize: sizes.iconSize
+  }))), ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(EuiFormRow, null, ___EmotionJSX(EuiButtonIcon, {
+    iconType: "cross",
+    "aria-label": cancelButtonAriaLabel || defaultCancelButtonAriaLabel,
+    onClick: cancelInlineEdit,
+    color: "danger",
+    display: "base",
+    size: sizes.buttonSize,
+    iconSize: sizes.iconSize
+  })))));
+  var readModeElement = ___EmotionJSX(EuiButtonEmpty, _extends({
+    color: "text",
+    iconType: "pencil",
+    iconSide: "right",
+    autoFocus: true,
+    flush: "both",
+    iconSize: sizes.iconSize,
+    size: sizes.buttonSize,
+    onClick: function onClick() {
+      setIsEditing(!isEditing);
+    }
+  }, readModeProps), children(readModeValue));
+  return ___EmotionJSX("div", {
+    className: classes
+  }, isEditing ? editModeForm : readModeElement);
+};
+EuiInlineEditForm.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  defaultValue: PropTypes.string.isRequired,
+  /**
+     * Allow users to pass in a function that is called when the confirm button is clicked
+     * The function should return a boolean flag that will determine if the value will be saved.
+     * When the flag is true, the value will be saved. When the flag is false, the user will be
+     * returned to editMode.
+     */
+  onConfirm: PropTypes.func,
+  /**
+     * Form label that appears above the form control
+     * This is required for accessibility because there is no visual label on the input
+     */
+  inputAriaLabel: PropTypes.string.isRequired,
+  /**
+     * Aria-label for save button in editMode
+     */
+  saveButtonAriaLabel: PropTypes.string,
+  /**
+     * Aria-label for cancel button in editMode
+     */
+  cancelButtonAriaLabel: PropTypes.string,
+  /**
+     * Start in editMode
+     */
+  startWithEditOpen: PropTypes.bool,
+  /**
+     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+     */
+  readModeProps: PropTypes.any,
+  /**
+     * Props that will be applied directly to the EuiFieldText displayed in editMode
+     */
+  editModeProps: PropTypes.any,
+  /**
+     * Form sizes
+     */
+  sizes: PropTypes.shape({
+    compressed: PropTypes.bool.isRequired,
+    buttonSize: PropTypes.oneOf(["xs", "s", "m"]).isRequired,
+    iconSize: PropTypes.oneOf(["s", "m"]).isRequired
+  }).isRequired,
+  /**
+     * Render prop that returns the read mode value as an arg
+     */
+  children: PropTypes.func.isRequired
+};

package/es/components/inline_edit/inline_edit_text.js

@@ -0,0 +1,97 @@
+var _excluded = ["children", "className", "size", "defaultValue", "onConfirm", "inputAriaLabel", "saveButtonAriaLabel", "cancelButtonAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps"];
+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; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/*
+ * 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 React from 'react';
+import PropTypes from "prop-types";
+import classNames from 'classnames';
+import { EuiText } from '../text';
+import { EuiInlineEditForm, SMALL_SIZE_FORM, MEDIUM_SIZE_FORM } from './inline_edit_form';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiInlineEditText = function EuiInlineEditText(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    defaultValue = _ref.defaultValue,
+    onConfirm = _ref.onConfirm,
+    inputAriaLabel = _ref.inputAriaLabel,
+    saveButtonAriaLabel = _ref.saveButtonAriaLabel,
+    cancelButtonAriaLabel = _ref.cancelButtonAriaLabel,
+    startWithEditOpen = _ref.startWithEditOpen,
+    readModeProps = _ref.readModeProps,
+    editModeProps = _ref.editModeProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiInlineEditText', className);
+  var isSmallSize = ['xs', 's'].includes(size);
+  var sizes = isSmallSize ? SMALL_SIZE_FORM : MEDIUM_SIZE_FORM;
+  var formProps = {
+    sizes: sizes,
+    defaultValue: defaultValue,
+    onConfirm: onConfirm,
+    inputAriaLabel: inputAriaLabel,
+    saveButtonAriaLabel: saveButtonAriaLabel,
+    cancelButtonAriaLabel: cancelButtonAriaLabel,
+    startWithEditOpen: startWithEditOpen,
+    readModeProps: readModeProps,
+    editModeProps: editModeProps
+  };
+  return ___EmotionJSX(EuiInlineEditForm, _extends({
+    className: classes
+  }, rest, formProps), function (textReadModeValue) {
+    return ___EmotionJSX(EuiText, {
+      size: size
+    }, textReadModeValue);
+  });
+};
+EuiInlineEditText.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  defaultValue: PropTypes.string.isRequired,
+  /**
+     * Allow users to pass in a function that is called when the confirm button is clicked
+     * The function should return a boolean flag that will determine if the value will be saved.
+     * When the flag is true, the value will be saved. When the flag is false, the user will be
+     * returned to editMode.
+     */
+  onConfirm: PropTypes.func,
+  /**
+     * Form label that appears above the form control
+     * This is required for accessibility because there is no visual label on the input
+     */
+  inputAriaLabel: PropTypes.string.isRequired,
+  /**
+     * Aria-label for save button in editMode
+     */
+  saveButtonAriaLabel: PropTypes.string,
+  /**
+     * Aria-label for cancel button in editMode
+     */
+  cancelButtonAriaLabel: PropTypes.string,
+  /**
+     * Start in editMode
+     */
+  startWithEditOpen: PropTypes.bool,
+  /**
+     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+     */
+  readModeProps: PropTypes.any,
+  /**
+     * Props that will be applied directly to the EuiFieldText displayed in editMode
+     */
+  editModeProps: PropTypes.any,
+  /**
+     * Text size level
+     */
+  size: PropTypes.any
+};