@elastic/eui 95.7.0 → 95.8.0-backport.0

package/test-env/components/form/form_error_text/form_error_text.js

@@ -10,6 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_error_text = require("./form_error_text.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 /*
@@ -24,7 +26,9 @@ var EuiFormErrorText = exports.EuiFormErrorText = function EuiFormErrorText(_ref
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFormErrorText', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_error_text.euiFormErrorTextStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiFormErrorText,
     className: classes,
     "aria-live": "polite"
   }, rest), children);

package/test-env/components/form/form_error_text/form_error_text.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormErrorTextStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiFormErrorTextStyles = exports.euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormErrorText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.danger, ";;label:euiFormErrorText;")
+  };
+};

package/test-env/components/form/form_fieldset/form_legend.js

@@ -10,7 +10,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
+var _form_legend = require("./form_legend.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "display", "compressed"];
 /*
@@ -28,11 +30,13 @@ var EuiFormLegend = exports.EuiFormLegend = function EuiFormLegend(_ref) {
     compressed = _ref.compressed,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isLegendHidden = display === 'hidden';
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_legend.euiFormLegendStyles);
+  var cssStyles = [styles.euiFormLegend, !isLegendHidden && (compressed ? styles.compressed : styles.uncompressed)];
   var classes = (0, _classnames.default)('euiFormLegend', {
-    'euiFormLegend-isHidden': isLegendHidden,
-    'euiFormLegend--compressed': compressed
+    'euiFormLegend-isHidden': isLegendHidden
   }, className);
   return (0, _react2.jsx)("legend", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), isLegendHidden ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, children)) : children);
 };

package/test-env/components/form/form_fieldset/form_legend.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormLegendStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form_label = require("../form_label/form_label.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 euiFormLegendStyles = exports.euiFormLegendStyles = function euiFormLegendStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLegend: /*#__PURE__*/(0, _react.css)((0, _form_label.euiFormLabel)(euiThemeContext), ";;label:euiFormLegend;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    uncompressed: (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.xs), ";label:compressed;")
+  };
+};

package/test-env/components/form/form_help_text/form_help_text.js

@@ -10,6 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_help_text = require("./form_help_text.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 /*
@@ -24,7 +26,9 @@ var EuiFormHelpText = exports.EuiFormHelpText = function EuiFormHelpText(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFormHelpText', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_help_text.euiFormHelpTextStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiFormHelpText,
     className: classes
   }, rest), children);
 };

package/test-env/components/form/form_help_text/form_help_text.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormHelpTextStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiFormHelpTextStyles = exports.euiFormHelpTextStyles = function euiFormHelpTextStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormHelpText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiFormHelpText;")
+  };
+};

package/test-env/components/form/form_label/form_label.js

@@ -10,6 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _form_label = require("./form_label.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["type", "isFocused", "isInvalid", "isDisabled", "children", "className"];
 /*
@@ -28,6 +30,8 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_label.euiFormLabelStyles);
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
   var classes = (0, _classnames.default)('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,
@@ -35,10 +39,12 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
   });
   if (type === 'legend') {
     return (0, _react2.jsx)("legend", (0, _extends2.default)({
+      css: cssStyles,
       className: classes
     }, rest), children);
   } else {
     return (0, _react2.jsx)("label", (0, _extends2.default)({
+      css: cssStyles,
       className: classes
     }, rest), children);
   }

package/test-env/components/form/form_label/form_label.styles.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormLabelStyles = exports.euiFormLabel = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _serialize = require("@emotion/serialize");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+var _excluded = ["fontWeight"];
+/*
+ * 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 euiFormLabel = exports.euiFormLabel = function euiFormLabel(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  // Exclude the fontWeight from the title, since we're setting our own later
+  var _euiTitle = (0, _title.euiTitle)(euiThemeContext, 'xxxs'),
+    _ = _euiTitle.fontWeight,
+    _titleStyles = (0, _objectWithoutProperties2.default)(_euiTitle, _excluded);
+  // Since we're not returning a css`` string (to avoid generating an extra Emotion
+  // className), we need to manually serialize the style object into a string
+  var titleStyles = (0, _serialize.serializeStyles)([_titleStyles]).styles;
+  return "\n    ".concat(titleStyles, "\n    font-weight: ").concat(euiTheme.font.weight.semiBold, ";\n    ").concat((0, _global_styling.euiTextBreakWord)(), "\n  ");
+};
+var euiFormLabelStyles = exports.euiFormLabelStyles = function euiFormLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFormLabel: /*#__PURE__*/(0, _react.css)(euiFormLabel(euiThemeContext), " display:inline-block;", _global_styling.euiCanAnimate, "{transition:color ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiFormLabel;"),
+    // Skip css`` to avoid generating an extra Emotion className
+    // Use :where to reduce specificity & make the CSS easier to override by prepend/append nodes
+    notDisabled: "\n      &:where([for]) {\n        cursor: pointer;\n      }\n    ",
+    invalid: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.danger, ";;label:invalid;"),
+    // Focused state should override invalid state
+    focused: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.primary, ";;label:focused;")
+  };
+};

package/test-env/components/form/form_row/form_row.js

@@ -6,228 +6,163 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFormRow = exports.DISPLAYS = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../../common");
-var _objects = require("../../../services/objects");
+var _services = require("../../../services");
+var _spacer = require("../../spacer");
 var _form_help_text = require("../form_help_text");
 var _form_error_text = require("../form_error_text");
 var _form_label = require("../form_label");
 var _eui_form_context = require("../eui_form_context");
-var _accessibility = require("../../../services/accessibility");
+var _form_row = require("./form_row.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "className", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+var _excluded = ["className", "children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
+/*
  * 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 displayToClassNameMap = {
-  row: null,
-  rowCompressed: 'euiFormRow--compressed',
-  columnCompressed: 'euiFormRow--compressed euiFormRow--horizontal',
-  center: null,
-  centerCompressed: 'euiFormRow--compressed',
-  columnCompressedSwitch: 'euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch'
-};
-var DISPLAYS = exports.DISPLAYS = (0, _common.keysOf)(displayToClassNameMap);
-var EuiFormRow = exports.EuiFormRow = /*#__PURE__*/function (_Component) {
-  function EuiFormRow() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiFormRow);
-    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
-      _args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiFormRow, [].concat(_args));
-    (0, _defineProperty2.default)(_this, "state", {
-      isFocused: false,
-      id: _this.props.id || (0, _accessibility.htmlIdGenerator)()()
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DISPLAYS = exports.DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
+/**
+ * @deprecated
+ */
+'columnCompressedSwitch',
+/**
+ * @deprecated
+ */
+'rowCompressed'];
+var EuiFormRow = exports.EuiFormRow = function EuiFormRow(_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    helpText = _ref.helpText,
+    isInvalid = _ref.isInvalid,
+    error = _ref.error,
+    label = _ref.label,
+    _ref$labelType = _ref.labelType,
+    labelType = _ref$labelType === void 0 ? 'label' : _ref$labelType,
+    labelAppend = _ref.labelAppend,
+    _ref$hasEmptyLabelSpa = _ref.hasEmptyLabelSpace,
+    hasEmptyLabelSpace = _ref$hasEmptyLabelSpa === void 0 ? false : _ref$hasEmptyLabelSpa,
+    _fullWidth = _ref.fullWidth,
+    describedByIds = _ref.describedByIds,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'row' : _ref$display,
+    _ref$hasChildLabel = _ref.hasChildLabel,
+    hasChildLabel = _ref$hasChildLabel === void 0 ? true : _ref$hasChildLabel,
+    propsId = _ref.id,
+    isDisabled = _ref.isDisabled,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useFormContext = (0, _eui_form_context.useFormContext)(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
+  var id = (0, _services.useGeneratedHtmlId)({
+    conditionalId: propsId
+  });
+  var hasLabel = label || labelAppend;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var onFocusWithin = (0, _react.useCallback)(function () {
+    return setIsFocused(true);
+  }, []);
+  var onBlurWithin = (0, _react.useCallback)(function () {
+    return setIsFocused(false);
+  }, []);
+  var classes = (0, _classnames.default)('euiFormRow', {
+    'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
+    'euiFormRow--hasLabel': hasLabel
+  }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_row.euiFormRowStyles);
+  var cssStyles = [styles.euiFormRow, fullWidth ? styles.fullWidth : styles.formWidth, styles[display]];
+  var optionalHelpTexts = (0, _react.useMemo)(function () {
+    if (!helpText) return;
+    var helpTexts = Array.isArray(helpText) ? helpText : [helpText];
+    return helpTexts.map(function (helpText, i) {
+      var key = typeof helpText === 'string' ? helpText : i;
+      return (0, _react2.jsx)(_form_help_text.EuiFormHelpText, {
+        key: key,
+        id: "".concat(id, "-help-").concat(i),
+        className: "euiFormRow__text"
+      }, helpText);
     });
-    (0, _defineProperty2.default)(_this, "onFocus", function () {
-      // Doing this to allow onFocus to be called correctly from the child input element as this component overrides it
-      var onChildFocus = (0, _objects.get)(_this.props, 'children.props.onFocus');
-      if (onChildFocus) {
-        onChildFocus.apply(void 0, arguments);
-      }
-      _this.setState(function (_ref) {
-        var isFocused = _ref.isFocused;
-        if (!isFocused) {
-          return {
-            isFocused: true
-          };
-        } else {
-          return null;
-        }
-      });
+  }, [helpText, id]);
+  var optionalErrors = (0, _react.useMemo)(function () {
+    if (!(error && isInvalid)) return;
+    var errorTexts = Array.isArray(error) ? error : [error];
+    return errorTexts.map(function (error, i) {
+      var key = typeof error === 'string' ? error : i;
+      return (0, _react2.jsx)(_form_error_text.EuiFormErrorText, {
+        key: key,
+        id: "".concat(id, "-error-").concat(i),
+        className: "euiFormRow__text"
+      }, error);
     });
-    (0, _defineProperty2.default)(_this, "onBlur", function () {
-      // Doing this to allow onBlur to be called correctly from the child input element as this component overrides it
-      var onChildBlur = (0, _objects.get)(_this.props, 'children.props.onBlur');
-      if (onChildBlur) {
-        onChildBlur.apply(void 0, arguments);
-      }
-      _this.setState({
-        isFocused: false
+  }, [error, isInvalid, id]);
+  var ariaDescribedBy = (0, _react.useMemo)(function () {
+    var describingIds = (0, _toConsumableArray2.default)(describedByIds || []);
+    if (optionalHelpTexts !== null && optionalHelpTexts !== void 0 && optionalHelpTexts.length) {
+      optionalHelpTexts.forEach(function (optionalHelpText) {
+        return describingIds.push(optionalHelpText.props.id);
       });
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(EuiFormRow, _Component);
-  return (0, _createClass2.default)(EuiFormRow, [{
-    key: "render",
-    value: function render() {
-      var _ref3, _child$props$disabled;
-      var _ref2 = this.context,
-        defaultFullWidth = _ref2.defaultFullWidth;
-      var _this$props = this.props,
-        children = _this$props.children,
-        helpText = _this$props.helpText,
-        isInvalid = _this$props.isInvalid,
-        error = _this$props.error,
-        label = _this$props.label,
-        labelType = _this$props.labelType,
-        labelAppend = _this$props.labelAppend,
-        hasEmptyLabelSpace = _this$props.hasEmptyLabelSpace,
-        _this$props$fullWidth = _this$props.fullWidth,
-        fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
-        className = _this$props.className,
-        describedByIds = _this$props.describedByIds,
-        display = _this$props.display,
-        hasChildLabel = _this$props.hasChildLabel,
-        propsId = _this$props.id,
-        isDisabled = _this$props.isDisabled,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var id = this.state.id;
-      var hasLabel = label || labelAppend;
-      var classes = (0, _classnames.default)('euiFormRow', {
-        'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
-        'euiFormRow--fullWidth': fullWidth,
-        'euiFormRow--hasLabel': hasLabel
-      }, displayToClassNameMap[display],
-      // Safe use of ! as default prop is 'row'
-      className);
-      var optionalHelpTexts;
-      if (helpText) {
-        var helpTexts = Array.isArray(helpText) ? helpText : [helpText];
-        optionalHelpTexts = helpTexts.map(function (helpText, i) {
-          var key = typeof helpText === 'string' ? helpText : i;
-          return (0, _react2.jsx)(_form_help_text.EuiFormHelpText, {
-            key: key,
-            id: "".concat(id, "-help-").concat(i),
-            className: "euiFormRow__text"
-          }, helpText);
-        });
-      }
-      var optionalErrors;
-      if (error && isInvalid) {
-        var errorTexts = Array.isArray(error) ? error : [error];
-        optionalErrors = errorTexts.map(function (error, i) {
-          var key = typeof error === 'string' ? error : i;
-          return (0, _react2.jsx)(_form_error_text.EuiFormErrorText, {
-            key: key,
-            id: "".concat(id, "-error-").concat(i),
-            className: "euiFormRow__text"
-          }, error);
-        });
-      }
-      var optionalLabel;
-      var isLegend = label && labelType === 'legend' ? true : false;
-      var labelId = "".concat(id, "-label");
-      if (hasLabel) {
-        var labelProps = {};
-        if (isLegend) {
-          labelProps = {
-            type: labelType
-          };
-        } else {
-          labelProps = _objectSpread(_objectSpread({
-            htmlFor: hasChildLabel ? id : undefined
-          }, !isDisabled && {
-            isFocused: this.state.isFocused
-          }), {}, {
-            // If the row is disabled, don't pass the isFocused state.
-            type: labelType
-          });
-        }
-        optionalLabel = (0, _react2.jsx)("div", {
-          className: "euiFormRow__labelWrapper"
-        }, (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
-          className: "euiFormRow__label",
-          isInvalid: isInvalid,
-          isDisabled: isDisabled,
-          "aria-invalid": isInvalid,
-          id: labelId
-        }, labelProps), label), labelAppend && ' ', labelAppend);
-      }
-      var optionalProps = {};
-      /**
-       * Safe use of ! as default prop is []
-       */
-      var describingIds = (0, _toConsumableArray2.default)(describedByIds);
-      if (optionalHelpTexts) {
-        optionalHelpTexts.forEach(function (optionalHelpText) {
-          return describingIds.push(optionalHelpText.props.id);
-        });
-      }
-      if (optionalErrors) {
-        optionalErrors.forEach(function (error) {
-          return describingIds.push(error.props.id);
-        });
-      }
-      if (describingIds.length > 0) {
-        optionalProps['aria-describedby'] = describingIds.join(' ');
-      }
-      var child = _react.Children.only(children);
-      var field = /*#__PURE__*/(0, _react.cloneElement)(child, _objectSpread({
-        id: id,
-        // Allow the child's disabled or isDisabled prop to supercede the `isDisabled`
-        disabled: (_ref3 = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : child.props.isDisabled) !== null && _ref3 !== void 0 ? _ref3 : isDisabled,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur
-      }, optionalProps));
-      var fieldWrapperClasses = (0, _classnames.default)('euiFormRow__fieldWrapper', {
-        euiFormRow__fieldWrapperDisplayOnly:
-        /**
-         * Safe use of ! as default prop is 'row'
-         */
-        display.startsWith('center')
+    }
+    if (optionalErrors !== null && optionalErrors !== void 0 && optionalErrors.length) {
+      optionalErrors.forEach(function (error) {
+        return describingIds.push(error.props.id);
       });
-      var sharedProps = {
-        className: classes,
-        id: "".concat(id, "-row")
-      };
-      var contents = (0, _react2.jsx)(_react.default.Fragment, null, optionalLabel, (0, _react2.jsx)("div", {
-        className: fieldWrapperClasses
-      }, field, optionalErrors, optionalHelpTexts));
-      return labelType === 'legend' ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({}, sharedProps, rest), contents) : (0, _react2.jsx)("div", (0, _extends2.default)({}, sharedProps, rest), contents);
     }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiFormRow, "contextType", _eui_form_context.FormContext);
-(0, _defineProperty2.default)(EuiFormRow, "defaultProps", {
-  display: 'row',
-  hasEmptyLabelSpace: false,
-  describedByIds: [],
-  labelType: 'label',
-  hasChildLabel: true
-});
+    if (describingIds.length) {
+      return describingIds.join(' ');
+    }
+  }, [describedByIds, optionalHelpTexts, optionalErrors]);
+  var field = (0, _react.useMemo)(function () {
+    var _ref2, _child$props$disabled;
+    var child = _react.Children.only(children);
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      id: id,
+      // Allow the child's disabled or isDisabled prop to supercede the `isDisabled`
+      disabled: (_ref2 = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : child.props.isDisabled) !== null && _ref2 !== void 0 ? _ref2 : isDisabled,
+      'aria-describedby': ariaDescribedBy
+    });
+  }, [children, id, isDisabled, ariaDescribedBy]);
+  var Element = labelType === 'legend' ? 'fieldset' : 'div';
+  return (0, _react2.jsx)(Element, (0, _extends2.default)({
+    css: cssStyles,
+    className: classes,
+    id: "".concat(id, "-row")
+  }, rest), hasLabel ? (0, _react2.jsx)("div", {
+    className: "euiFormRow__labelWrapper"
+  }, (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
+    className: "euiFormRow__label",
+    "aria-invalid": isInvalid,
+    isInvalid: isInvalid,
+    isDisabled: isDisabled,
+    isFocused: isFocused && !isDisabled,
+    id: "".concat(id, "-label")
+    // ExclusiveUnion shenanigans
+  }, labelType === 'legend' ? {
+    type: labelType
+  } : {
+    type: labelType,
+    htmlFor: hasChildLabel ? id : undefined
+  }), label), labelAppend && ' ', labelAppend) : hasEmptyLabelSpace && (0, _react2.jsx)(_spacer.EuiSpacer, {
+    size: "m",
+    className: "euiFormRow__labelWrapper"
+  }), (0, _react2.jsx)("div", {
+    className: "euiFormRow__fieldWrapper",
+    onFocus: onFocusWithin,
+    onBlur: onBlurWithin
+  }, field, optionalErrors, optionalHelpTexts));
+};
 EuiFormRow.propTypes = {
   /**
      * Defaults to rendering a `<label>` but if passed `'legend'` for labelType,
@@ -239,24 +174,26 @@ EuiFormRow.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-     * When `rowCompressed`, just tightens up the spacing;
-     * Set to `columnCompressed` if compressed
-     * and horizontal layout is needed.
-     * Set to `center` or `centerCompressed` to align non-input
-     * content better with inline rows.
-     * Set to `columnCompressedSwitch` if the form control being passed
-     * as the child is a switch.
+     * - `columnCompressed` creates a compressed and horizontal layout
+     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
+     * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
+     * - `rowCompressed` - **deprecated**, does not currently affect styling
+     */
+  /**
+     * - `columnCompressed` creates a compressed and horizontal layout
+     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
+     * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
+     * - `rowCompressed` - **deprecated**, does not currently affect styling
+     */
+  display: _propTypes.default.any,
+  /**
+     * Useful for inline form layouts, primarily for content that
+     * needs to be aligned with inputs but does not need a label
      */
   /**
-     * When `rowCompressed`, just tightens up the spacing;
-     * Set to `columnCompressed` if compressed
-     * and horizontal layout is needed.
-     * Set to `center` or `centerCompressed` to align non-input
-     * content better with inline rows.
-     * Set to `columnCompressedSwitch` if the form control being passed
-     * as the child is a switch.
+     * Useful for inline form layouts, primarily for content that
+     * needs to be aligned with inputs but does not need a label
      */
-  display: _propTypes.default.oneOf(["row", "rowCompressed", "columnCompressed", "center", "centerCompressed", "columnCompressedSwitch"]),
   hasEmptyLabelSpace: _propTypes.default.bool,
   /**
      * Expand to fill 100% of the parent.