@elastic/eui 77.0.0 → 77.1.0

package/test-env/components/form/switch/switch.a11y.js

@@ -16,21 +16,20 @@ 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 Switch = function Switch() {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_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/test-env/components/form/text_area/text_area.js

@@ -10,10 +10,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
 var resizeToClassNameMap = {
   vertical: 'euiTextArea--resizeVertical',
   horizontal: 'euiTextArea--resizeHorizontal',
@@ -32,6 +33,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,
@@ -51,7 +53,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", (0, _extends2.default)({
     className: classes
@@ -61,7 +68,7 @@ var EuiTextArea = function EuiTextArea(props) {
     id: id,
     ref: inputRef,
     placeholder: placeholder
-  }), children));
+  }), children)));
 };
 exports.EuiTextArea = EuiTextArea;
 EuiTextArea.propTypes = {
@@ -69,6 +76,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/test-env/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/test-env/components/form/validatable_control/validatable_control.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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"));
 /*
@@ -18,6 +18,12 @@ var _propTypes = _interopRequireDefault(require("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.
+ */
+
 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/test-env/components/header/header.a11y.js

@@ -29,7 +29,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 Header = function Header() {
   var renderLogo = function renderLogo() {

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

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

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

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

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

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

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

package/test-env/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/test-env/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/test-env/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;

package/test-env/components/inline_edit/inline_edit_form.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SMALL_SIZE_FORM = exports.MEDIUM_SIZE_FORM = exports.EuiInlineEditForm = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _form = require("../form");
+var _button = require("../button");
+var _flex = require("../flex");
+var _i18n = require("../i18n");
+var _accessibility = require("../../services/accessibility");
+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; }
+/*
+ * 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 SMALL_SIZE_FORM = {
+  iconSize: 's',
+  compressed: true,
+  buttonSize: 's'
+};
+exports.SMALL_SIZE_FORM = SMALL_SIZE_FORM;
+var MEDIUM_SIZE_FORM = {
+  iconSize: 'm',
+  compressed: false,
+  buttonSize: 'm'
+};
+exports.MEDIUM_SIZE_FORM = MEDIUM_SIZE_FORM;
+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 = (0, _classnames.default)('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 = (0, _i18n.useEuiI18n)('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
+  var defaultCancelButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
+  var _useState = (0, _react.useState)(false || startWithEditOpen),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  var inlineEditInputId = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: '__inlineEditInput'
+  });
+  var _useState3 = (0, _react.useState)(defaultValue),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    editModeValue = _useState4[0],
+    setEditModeValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultValue),
+    _useState6 = (0, _slicedToArray2.default)(_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 = (0, _react2.jsx)(_form.EuiForm, {
+    fullWidth: true
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s"
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFieldText, (0, _extends2.default)({
+    id: inlineEditInputId,
+    value: editModeValue,
+    onChange: function onChange(e) {
+      setEditModeValue(e.target.value);
+    },
+    "aria-label": inputAriaLabel,
+    autoFocus: true,
+    compressed: sizes.compressed
+  }, editModeProps))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    className: classes
+  }, (0, _react2.jsx)(_form.EuiFormRow, null, (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "check",
+    "aria-label": saveButtonAriaLabel || defaultSaveButtonAriaLabel,
+    onClick: saveInlineEditValue,
+    color: "success",
+    display: "base",
+    size: sizes.buttonSize,
+    iconSize: sizes.iconSize
+  }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_form.EuiFormRow, null, (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "cross",
+    "aria-label": cancelButtonAriaLabel || defaultCancelButtonAriaLabel,
+    onClick: cancelInlineEdit,
+    color: "danger",
+    display: "base",
+    size: sizes.buttonSize,
+    iconSize: sizes.iconSize
+  })))));
+  var readModeElement = (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    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 (0, _react2.jsx)("div", {
+    className: classes
+  }, isEditing ? editModeForm : readModeElement);
+};
+exports.EuiInlineEditForm = EuiInlineEditForm;
+EuiInlineEditForm.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  defaultValue: _propTypes.default.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.default.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.default.string.isRequired,
+  /**
+     * Aria-label for save button in editMode
+     */
+  saveButtonAriaLabel: _propTypes.default.string,
+  /**
+     * Aria-label for cancel button in editMode
+     */
+  cancelButtonAriaLabel: _propTypes.default.string,
+  /**
+     * Start in editMode
+     */
+  startWithEditOpen: _propTypes.default.bool,
+  /**
+     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+     */
+  readModeProps: _propTypes.default.any,
+  /**
+     * Props that will be applied directly to the EuiFieldText displayed in editMode
+     */
+  editModeProps: _propTypes.default.any,
+  /**
+     * Form sizes
+     */
+  sizes: _propTypes.default.shape({
+    compressed: _propTypes.default.bool.isRequired,
+    buttonSize: _propTypes.default.oneOf(["xs", "s", "m"]).isRequired,
+    iconSize: _propTypes.default.oneOf(["s", "m"]).isRequired
+  }).isRequired,
+  /**
+     * Render prop that returns the read mode value as an arg
+     */
+  children: _propTypes.default.func.isRequired
+};

package/test-env/components/inline_edit/inline_edit_text.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiInlineEditText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _text = require("../text");
+var _inline_edit_form = require("./inline_edit_form");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "size", "defaultValue", "onConfirm", "inputAriaLabel", "saveButtonAriaLabel", "cancelButtonAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps"];
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiInlineEditText', className);
+  var isSmallSize = ['xs', 's'].includes(size);
+  var sizes = isSmallSize ? _inline_edit_form.SMALL_SIZE_FORM : _inline_edit_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 (0, _react2.jsx)(_inline_edit_form.EuiInlineEditForm, (0, _extends2.default)({
+    className: classes
+  }, rest, formProps), function (textReadModeValue) {
+    return (0, _react2.jsx)(_text.EuiText, {
+      size: size
+    }, textReadModeValue);
+  });
+};
+exports.EuiInlineEditText = EuiInlineEditText;
+EuiInlineEditText.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  defaultValue: _propTypes.default.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.default.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.default.string.isRequired,
+  /**
+     * Aria-label for save button in editMode
+     */
+  saveButtonAriaLabel: _propTypes.default.string,
+  /**
+     * Aria-label for cancel button in editMode
+     */
+  cancelButtonAriaLabel: _propTypes.default.string,
+  /**
+     * Start in editMode
+     */
+  startWithEditOpen: _propTypes.default.bool,
+  /**
+     * Props that will be applied directly to the EuiEmptyButton displayed in readMode
+     */
+  readModeProps: _propTypes.default.any,
+  /**
+     * Props that will be applied directly to the EuiFieldText displayed in editMode
+     */
+  editModeProps: _propTypes.default.any,
+  /**
+     * Text size level
+     */
+  size: _propTypes.default.any
+};