@elastic/eui 80.0.0 → 81.1.0

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

@@ -0,0 +1,357 @@
+"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 _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _form2 = require("../form/form.styles");
+var _button = require("../button");
+var _flex = require("../flex");
+var _skeleton = require("../skeleton");
+var _services = require("../../services");
+var _i18n = require("../i18n");
+var _accessibility = require("../../services/accessibility");
+var _inline_edit_form = require("./inline_edit_form.styles");
+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.
+ */
+
+// Props shared between the internal form component as well as consumer-facing components
+
+// Internal-only props, passed by the consumer-facing components
+
+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 _editModeProps$inputP, _editModeProps$formRo, _editModeProps$inputP6;
+  var className = _ref.className,
+    children = _ref.children,
+    sizes = _ref.sizes,
+    defaultValue = _ref.defaultValue,
+    inputAriaLabel = _ref.inputAriaLabel,
+    startWithEditOpen = _ref.startWithEditOpen,
+    readModeProps = _ref.readModeProps,
+    editModeProps = _ref.editModeProps,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    isInvalid = _ref.isInvalid,
+    onSave = _ref.onSave,
+    isReadOnly = _ref.isReadOnly;
+  var classes = (0, _classnames.default)('euiInlineEdit', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var readModeStyles = (0, _inline_edit_form.euiInlineEditReadModeStyles)(euiTheme);
+  var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly];
+  var _euiFormVariables = (0, _form2.euiFormVariables)(euiTheme),
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var loadingSkeletonSize = sizes.compressed ? controlCompressedHeight : controlHeight;
+  var defaultSaveButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
+  var defaultCancelButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
+  var readModeDescribedById = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'inlineEdit'
+  });
+  var editModeDescribedById = (0, _accessibility.useGeneratedHtmlId)({
+    prefix: 'inlineEdit'
+  });
+  var readModeFocusRef = (0, _react.useRef)(null);
+  var editModeFocusRef = (0, _react.useRef)(null);
+  var setReadModeRefs = (0, _services.useCombinedRefs)([readModeFocusRef, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps.buttonRef]);
+  var setEditModeRefs = (0, _services.useCombinedRefs)([editModeFocusRef, editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$inputP = editModeProps.inputProps) === null || _editModeProps$inputP === void 0 ? void 0 : _editModeProps$inputP.inputRef]);
+  var _useState = (0, _react.useState)(false || startWithEditOpen),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  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 activateEditMode = function activateEditMode() {
+    setIsEditing(true);
+    // Waits a tick for state to settle and the focus target to render
+    requestAnimationFrame(function () {
+      var _editModeFocusRef$cur;
+      return (_editModeFocusRef$cur = editModeFocusRef.current) === null || _editModeFocusRef$cur === void 0 ? void 0 : _editModeFocusRef$cur.focus();
+    });
+  };
+  var cancelInlineEdit = function cancelInlineEdit() {
+    setEditModeValue(readModeValue);
+    setIsEditing(false);
+    requestAnimationFrame(function () {
+      var _readModeFocusRef$cur;
+      return (_readModeFocusRef$cur = readModeFocusRef.current) === null || _readModeFocusRef$cur === void 0 ? void 0 : _readModeFocusRef$cur.focus();
+    });
+  };
+  var saveInlineEditValue = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var onSaveReturn, awaitedReturn;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!onSave) {
+              _context.next = 12;
+              break;
+            }
+            onSaveReturn = onSave(editModeValue);
+            if (!(onSaveReturn instanceof Promise)) {
+              _context.next = 8;
+              break;
+            }
+            _context.next = 5;
+            return onSaveReturn;
+          case 5:
+            _context.t0 = _context.sent;
+            _context.next = 9;
+            break;
+          case 8:
+            _context.t0 = onSaveReturn;
+          case 9:
+            awaitedReturn = _context.t0;
+            if (!(awaitedReturn === false)) {
+              _context.next = 12;
+              break;
+            }
+            return _context.abrupt("return");
+          case 12:
+            setReadModeValue(editModeValue);
+            setIsEditing(false);
+            requestAnimationFrame(function () {
+              var _readModeFocusRef$cur2;
+              return (_readModeFocusRef$cur2 = readModeFocusRef.current) === null || _readModeFocusRef$cur2 === void 0 ? void 0 : _readModeFocusRef$cur2.focus();
+            });
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function saveInlineEditValue() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var editModeInputOnKeyDown = function editModeInputOnKeyDown(event) {
+    switch (event.key) {
+      case _services.keys.ENTER:
+        event.preventDefault(); // Enter keypresses will not proceed otherwise on webkit browsers & screen readers
+        saveInlineEditValue();
+        break;
+      case _services.keys.ESCAPE:
+        cancelInlineEdit();
+        break;
+    }
+  };
+
+  // If the state of isReadOnly changes while in edit mode, switch back to read mode
+  (0, _react.useEffect)(function () {
+    if (isReadOnly) {
+      setIsEditing(false);
+    }
+  }, [isReadOnly]);
+  var editModeForm = (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_form.EuiFormRow, (0, _extends2.default)({
+    fullWidth: true,
+    isInvalid: isInvalid,
+    error: isInvalid && (editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$formRo = editModeProps.formRowProps) === null || _editModeProps$formRo === void 0 ? void 0 : _editModeProps$formRo.error)
+  }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.formRowProps), (0, _react2.jsx)(_form.EuiFieldText, (0, _extends2.default)({
+    fullWidth: true,
+    value: editModeValue,
+    "aria-label": inputAriaLabel,
+    compressed: sizes.compressed,
+    isInvalid: isInvalid,
+    isLoading: isLoading,
+    "data-test-subj": "euiInlineEditModeInput"
+  }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.inputProps, {
+    inputRef: setEditModeRefs,
+    onChange: function onChange(e) {
+      var _editModeProps$inputP2, _editModeProps$inputP3;
+      setEditModeValue(e.target.value);
+      editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$inputP2 = editModeProps.inputProps) === null || _editModeProps$inputP2 === void 0 ? void 0 : (_editModeProps$inputP3 = _editModeProps$inputP2.onChange) === null || _editModeProps$inputP3 === void 0 ? void 0 : _editModeProps$inputP3.call(_editModeProps$inputP2, e);
+    },
+    onKeyDown: function onKeyDown(e) {
+      var _editModeProps$inputP4, _editModeProps$inputP5;
+      editModeInputOnKeyDown(e);
+      editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$inputP4 = editModeProps.inputProps) === null || _editModeProps$inputP4 === void 0 ? void 0 : (_editModeProps$inputP5 = _editModeProps$inputP4.onKeyDown) === null || _editModeProps$inputP5 === void 0 ? void 0 : _editModeProps$inputP5.call(_editModeProps$inputP4, e);
+    },
+    "aria-describedby": (0, _classnames.default)(editModeDescribedById, editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$inputP6 = editModeProps.inputProps) === null || _editModeProps$inputP6 === void 0 ? void 0 : _editModeProps$inputP6['aria-describedby'])
+  }))), (0, _react2.jsx)("span", {
+    id: editModeDescribedById,
+    hidden: true
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiInlineEditForm.inputKeyboardInstructions",
+    default: "Press Enter to save your edited text. Press Escape to cancel your edit."
+  }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_skeleton.EuiSkeletonLoading, {
+    isLoading: isLoading,
+    announceLoadingStatus: true,
+    announceLoadedStatus: false,
+    loadingContent: (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "s"
+    }, (0, _react2.jsx)(_skeleton.EuiSkeletonRectangle, {
+      height: loadingSkeletonSize,
+      width: loadingSkeletonSize,
+      borderRadius: "m"
+    }), (0, _react2.jsx)(_skeleton.EuiSkeletonRectangle, {
+      height: loadingSkeletonSize,
+      width: loadingSkeletonSize,
+      borderRadius: "m"
+    })),
+    loadedContent: (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "s"
+    }, (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
+      iconType: "check",
+      "aria-label": defaultSaveButtonAriaLabel,
+      color: "success",
+      display: "base",
+      size: sizes.buttonSize,
+      iconSize: sizes.iconSize,
+      "data-test-subj": "euiInlineEditModeSaveButton"
+    }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.saveButtonProps, {
+      onClick: function onClick(e) {
+        var _editModeProps$saveBu, _editModeProps$saveBu2;
+        saveInlineEditValue();
+        editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$saveBu = editModeProps.saveButtonProps) === null || _editModeProps$saveBu === void 0 ? void 0 : (_editModeProps$saveBu2 = _editModeProps$saveBu.onClick) === null || _editModeProps$saveBu2 === void 0 ? void 0 : _editModeProps$saveBu2.call(_editModeProps$saveBu, e);
+      }
+    })), (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
+      iconType: "cross",
+      "aria-label": defaultCancelButtonAriaLabel,
+      color: "danger",
+      display: "base",
+      size: sizes.buttonSize,
+      iconSize: sizes.iconSize,
+      "data-test-subj": "euiInlineEditModeCancelButton"
+    }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.cancelButtonProps, {
+      onClick: function onClick(e) {
+        var _editModeProps$cancel, _editModeProps$cancel2;
+        cancelInlineEdit();
+        editModeProps === null || editModeProps === void 0 ? void 0 : (_editModeProps$cancel = editModeProps.cancelButtonProps) === null || _editModeProps$cancel === void 0 ? void 0 : (_editModeProps$cancel2 = _editModeProps$cancel.onClick) === null || _editModeProps$cancel2 === void 0 ? void 0 : _editModeProps$cancel2.call(_editModeProps$cancel, e);
+      }
+    })))
+  })));
+  var readModeElement = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    color: "text",
+    iconType: isReadOnly ? undefined : 'pencil',
+    iconSide: "right",
+    flush: "both",
+    iconSize: sizes.iconSize,
+    size: sizes.buttonSize,
+    "data-test-subj": "euiInlineReadModeButton",
+    disabled: isReadOnly,
+    css: readModeCssStyles
+  }, readModeProps, {
+    buttonRef: setReadModeRefs,
+    "aria-describedby": (0, _classnames.default)(readModeDescribedById, readModeProps === null || readModeProps === void 0 ? void 0 : readModeProps['aria-describedby']),
+    onClick: function onClick(e) {
+      var _readModeProps$onClic;
+      activateEditMode();
+      readModeProps === null || readModeProps === void 0 ? void 0 : (_readModeProps$onClic = readModeProps.onClick) === null || _readModeProps$onClic === void 0 ? void 0 : _readModeProps$onClic.call(readModeProps, e);
+    }
+  }), children(readModeValue)), (0, _react2.jsx)("span", {
+    id: readModeDescribedById,
+    hidden: true
+  }, !isReadOnly && (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiInlineEditForm.activateEditModeDescription",
+    default: "Click to edit this text inline."
+  })));
+  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,
+  /**
+       * Callback that fires when a user clicks the save button.
+       * Passes the current edited text value as an argument.
+       *
+       * To validate the value of the edited text, pass back a boolean flag.
+       * If `false`, EuiInlineEdit will remain in edit mode, where loading or invalid states can be set.
+       * If `true`, EuiInlineEdit will return to read mode.
+       */
+  onSave: _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,
+  /**
+       * Starts the component in edit mode
+       */
+  startWithEditOpen: _propTypes.default.bool,
+  /**
+       * Props that will be applied directly to the `EuiEmptyButton` displayed in read mode
+       */
+  readModeProps: _propTypes.default.any,
+  /**
+       * Multiple props objects that can be applied directly to various child components displayed in edit mode.
+       * - `formRowProps` will be passed to `EuiFormRow`
+       * - `inputProps` will be passed to `EuiFieldText`
+       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+       */
+  editModeProps: _propTypes.default.shape({
+    formRowProps: _propTypes.default.any,
+    inputProps: _propTypes.default.any,
+    saveButtonProps: _propTypes.default.any,
+    cancelButtonProps: _propTypes.default.any
+  }),
+  /**
+       * Loading state - only displayed in edit mode
+       */
+  isLoading: _propTypes.default.bool,
+  /**
+       * Invalid state - only displayed edit mode
+       */
+  isInvalid: _propTypes.default.bool,
+  /**
+       * Locks inline edit in read mode and displays the text value
+       */
+  isReadOnly: _propTypes.default.bool,
+  /**
+     * 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_form.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiInlineEditReadModeStyles = 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 euiInlineEditReadModeStyles = function euiInlineEditReadModeStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiInlineEditReadMode: /*#__PURE__*/(0, _react.css)(";label:euiInlineEditReadMode;"),
+    // Override the cursor and allow users to highlight text when read mode is in the read only state
+    // Once EuiEmptyButton has been converted to Emotion, remove this extra selector
+    isReadOnly: /*#__PURE__*/(0, _react.css)("&.euiButtonEmpty:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;")
+  };
+};
+exports.euiInlineEditReadModeStyles = euiInlineEditReadModeStyles;

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

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiInlineEditText = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(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 _services = require("../../services");
+var _inline_edit_text = require("./inline_edit_text.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "size", "defaultValue", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
+/*
+ * 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.
+ */
+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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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,
+    inputAriaLabel = _ref.inputAriaLabel,
+    startWithEditOpen = _ref.startWithEditOpen,
+    _readModeProps = _ref.readModeProps,
+    editModeProps = _ref.editModeProps,
+    isLoading = _ref.isLoading,
+    isInvalid = _ref.isInvalid,
+    isReadOnly = _ref.isReadOnly,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiInlineEditText', className);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _inline_edit_text.euiInlineEditTextStyles)(theme);
+  var cssStyles = [styles.euiInlineEditText, styles.fontSize[size]];
+  var isSmallSize = ['xs', 's'].includes(size);
+  var sizes = isSmallSize ? _inline_edit_form.SMALL_SIZE_FORM : _inline_edit_form.MEDIUM_SIZE_FORM;
+  var readModeProps = (0, _react.useMemo)(function () {
+    if (!isReadOnly) return _readModeProps;
+    return _objectSpread(_objectSpread({}, _readModeProps), {}, {
+      role: 'paragraph'
+    });
+  }, [_readModeProps, isReadOnly]);
+  var formProps = {
+    sizes: sizes,
+    defaultValue: defaultValue,
+    inputAriaLabel: inputAriaLabel,
+    startWithEditOpen: startWithEditOpen,
+    readModeProps: readModeProps,
+    editModeProps: editModeProps,
+    isLoading: isLoading,
+    isInvalid: isInvalid,
+    isReadOnly: isReadOnly
+  };
+  return (0, _react2.jsx)(_inline_edit_form.EuiInlineEditForm, (0, _extends2.default)({
+    className: classes,
+    css: cssStyles
+  }, rest, formProps), function (textReadModeValue) {
+    return (0, _react2.jsx)(_text.EuiText, {
+      size: size,
+      className: "eui-textTruncate"
+    }, 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,
+  /**
+       * Callback that fires when a user clicks the save button.
+       * Passes the current edited text value as an argument.
+       *
+       * To validate the value of the edited text, pass back a boolean flag.
+       * If `false`, EuiInlineEdit will remain in edit mode, where loading or invalid states can be set.
+       * If `true`, EuiInlineEdit will return to read mode.
+       */
+  onSave: _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,
+  /**
+       * Starts the component in edit mode
+       */
+  startWithEditOpen: _propTypes.default.bool,
+  /**
+       * Props that will be applied directly to the `EuiEmptyButton` displayed in read mode
+       */
+  readModeProps: _propTypes.default.any,
+  /**
+       * Multiple props objects that can be applied directly to various child components displayed in edit mode.
+       * - `formRowProps` will be passed to `EuiFormRow`
+       * - `inputProps` will be passed to `EuiFieldText`
+       * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+       */
+  editModeProps: _propTypes.default.shape({
+    formRowProps: _propTypes.default.any,
+    inputProps: _propTypes.default.any,
+    saveButtonProps: _propTypes.default.any,
+    cancelButtonProps: _propTypes.default.any
+  }),
+  /**
+       * Loading state - only displayed in edit mode
+       */
+  isLoading: _propTypes.default.bool,
+  /**
+       * Invalid state - only displayed edit mode
+       */
+  isInvalid: _propTypes.default.bool,
+  /**
+       * Locks inline edit in read mode and displays the text value
+       */
+  isReadOnly: _propTypes.default.bool,
+  /**
+     * Text size level
+     */
+  size: _propTypes.default.any
+};

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiInlineEditTextStyles = void 0;
+var _react = require("@emotion/react");
+var _text = require("../text/text.styles");
+/*
+ * 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 euiInlineEditTextStyles = function euiInlineEditTextStyles(euiThemeContext) {
+  var textFontStyles = (0, _text.euiTextStyles)(euiThemeContext);
+  return {
+    euiInlineEditText: /*#__PURE__*/(0, _react.css)(";label:euiInlineEditText;"),
+    fontSize: {
+      xs: /*#__PURE__*/(0, _react.css)(".euiFieldText{", textFontStyles.xs, ";};label:xs;"),
+      s: /*#__PURE__*/(0, _react.css)(".euiFieldText{", textFontStyles.s, ";};label:s;"),
+      m: /*#__PURE__*/(0, _react.css)(".euiFieldText{", textFontStyles.m, ";};label:m;")
+    }
+  };
+};
+exports.euiInlineEditTextStyles = euiInlineEditTextStyles;