@elastic/eui 80.0.0 → 81.1.0

package/optimize/lib/components/inline_edit/inline_edit_form.js

@@ -0,0 +1,291 @@
+"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 _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;

package/optimize/lib/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/optimize/lib/components/inline_edit/inline_edit_text.js

@@ -0,0 +1,78 @@
+"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 _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;

package/optimize/lib/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;

package/optimize/lib/components/inline_edit/inline_edit_title.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HEADINGS = exports.EuiInlineEditTitle = 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 _classnames = _interopRequireDefault(require("classnames"));
+var _title = require("../title");
+var _inline_edit_form = require("./inline_edit_form");
+var _services = require("../../services");
+var _inline_edit_title = require("./inline_edit_title.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "size", "heading", "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 HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'];
+exports.HEADINGS = HEADINGS;
+var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    heading = _ref.heading,
+    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)('euiInlineEditTitle', className);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _inline_edit_title.euiInlineEditTitleStyles)(theme);
+  var cssStyles = [styles.euiInlineEditTitle, styles.fontSize[size]];
+  var H = heading;
+  var isSmallSize = ['xxxs', 'xxs', '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;
+    var headingNumber = Number(heading.substring(1));
+    return headingNumber ? _objectSpread(_objectSpread({}, _readModeProps), {}, {
+      role: 'heading',
+      'aria-level': headingNumber
+    }) : _objectSpread(_objectSpread({}, _readModeProps), {}, {
+      role: 'paragraph'
+    });
+  }, [_readModeProps, isReadOnly, heading]);
+  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)({
+    css: cssStyles,
+    className: classes
+  }, rest, formProps), function (titleReadModeValue) {
+    return (0, _react2.jsx)(_title.EuiTitle, {
+      size: size,
+      className: "eui-textTruncate"
+    }, (0, _react2.jsx)(H, {
+      role: isReadOnly ? 'presentation' : undefined
+    }, titleReadModeValue));
+  });
+};
+exports.EuiInlineEditTitle = EuiInlineEditTitle;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiInlineEditTitleStyles = void 0;
+var _react = require("@emotion/react");
+var _title = require("../title/title.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 euiInlineEditTitleStyles = function euiInlineEditTitleStyles(euiThemeContext) {
+  var titleFontStyles = (0, _title.euiTitleStyles)(euiThemeContext);
+  return {
+    euiInlineEditTitle: /*#__PURE__*/(0, _react.css)(";label:euiInlineEditTitle;"),
+    fontSize: {
+      xxxs: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.xxxs, ";};label:xxxs;"),
+      xxs: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.xxs, ";};label:xxs;"),
+      xs: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.xs, ";};label:xs;"),
+      s: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.s, ";};label:s;"),
+      m: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.m, ";};label:m;"),
+      l: /*#__PURE__*/(0, _react.css)(".euiFieldText{", titleFontStyles.l, ";};label:l;")
+    }
+  };
+};
+exports.euiInlineEditTitleStyles = euiInlineEditTitleStyles;

package/optimize/lib/components/key_pad_menu/key_pad_menu.js

@@ -15,6 +15,13 @@ var _services = require("../../services");
 var _key_pad_menu = require("./key_pad_menu.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "checkable"];
+/*
+ * 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 EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -16,6 +16,13 @@ var _href_validator = require("../../services/security/href_validator");
 var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
 var _excluded = ["id", "isSelected", "isDisabled", "label", "children", "className", "betaBadgeLabel", "betaBadgeTooltipContent", "betaBadgeIconType", "betaBadgeTooltipProps", "href", "rel", "target", "buttonRef", "checkable", "name", "value", "disabled", "onChange"];
+/*
+ * 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 EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
   var id = _ref.id,
     isSelected = _ref.isSelected,

package/optimize/lib/components/link/link.js

@@ -19,6 +19,13 @@ var _accessibility = require("../accessibility");
 var _href_validator = require("../../services/security/href_validator");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "color", "className", "href", "external", "target", "rel", "type", "onClick", "disabled"];
+/*
+ * 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; }

package/optimize/lib/components/link/link.styles.js

@@ -6,7 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiLinkStyles = exports.euiLinkHoverCSS = exports.euiLinkFocusCSS = exports.euiLinkCSS = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * 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 _colorCSS = function _colorCSS(color) {
   return "\n    color: ".concat(color, ";\n\n    &:hover,\n    &:focus,\n    &:target {\n      text-decoration: underline;\n    }\n\n    &:target {\n      color: darken(").concat(color, ", 10%);\n    }\n  ");
 };

package/optimize/lib/components/list_group/list_group.js

@@ -17,6 +17,13 @@ var _global_styling = require("../../global_styling");
 var _list_group = require("./list_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "listItems", "style", "flush", "bordered", "gutterSize", "wrapText", "maxWidth", "showToolTips", "color", "size", "ariaLabelledby"];
+/*
+ * 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 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 GUTTER_SIZES = ['none', 's', 'm'];