@elastic/eui 95.7.0 → 95.8.0-backport.0

package/es/components/form/form_row/form_row.js

@@ -1,29 +1,17 @@
-var _excluded = ["children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "className", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className", "children", "helpText", "isInvalid", "error", "label", "labelType", "labelAppend", "hasEmptyLabelSpace", "fullWidth", "describedByIds", "display", "hasChildLabel", "id", "isDisabled"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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) { _defineProperty(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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,206 +20,149 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import React, { cloneElement, Component, Children } from 'react';
+import React, { cloneElement, Children, useState, useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keysOf } from '../../common';
-import { get } from '../../../services/objects';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';
+import { EuiSpacer } from '../../spacer';
 import { EuiFormHelpText } from '../form_help_text';
 import { EuiFormErrorText } from '../form_error_text';
 import { EuiFormLabel } from '../form_label';
-import { FormContext } from '../eui_form_context';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { useFormContext } from '../eui_form_context';
+import { euiFormRowStyles } from './form_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var displayToClassNameMap = {
-  row: null,
-  rowCompressed: 'euiFormRow--compressed',
-  columnCompressed: 'euiFormRow--compressed euiFormRow--horizontal',
-  center: null,
-  centerCompressed: 'euiFormRow--compressed',
-  columnCompressedSwitch: 'euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch'
-};
-export var DISPLAYS = keysOf(displayToClassNameMap);
-export var EuiFormRow = /*#__PURE__*/function (_Component) {
-  function EuiFormRow() {
-    var _this;
-    _classCallCheck(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));
-    _defineProperty(_this, "state", {
-      isFocused: false,
-      id: _this.props.id || htmlIdGenerator()()
+export var DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
+/**
+ * @deprecated
+ */
+'columnCompressedSwitch',
+/**
+ * @deprecated
+ */
+'rowCompressed'];
+export var 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 = _objectWithoutProperties(_ref, _excluded);
+  var _useFormContext = useFormContext(),
+    defaultFullWidth = _useFormContext.defaultFullWidth;
+  var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
+  var id = useGeneratedHtmlId({
+    conditionalId: propsId
+  });
+  var hasLabel = label || labelAppend;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var onFocusWithin = useCallback(function () {
+    return setIsFocused(true);
+  }, []);
+  var onBlurWithin = useCallback(function () {
+    return setIsFocused(false);
+  }, []);
+  var classes = classNames('euiFormRow', {
+    'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
+    'euiFormRow--hasLabel': hasLabel
+  }, className);
+  var styles = useEuiMemoizedStyles(euiFormRowStyles);
+  var cssStyles = [styles.euiFormRow, fullWidth ? styles.fullWidth : styles.formWidth, styles[display]];
+  var optionalHelpTexts = 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 ___EmotionJSX(EuiFormHelpText, {
+        key: key,
+        id: "".concat(id, "-help-").concat(i),
+        className: "euiFormRow__text"
+      }, helpText);
     });
-    _defineProperty(_this, "onFocus", function () {
-      // Doing this to allow onFocus to be called correctly from the child input element as this component overrides it
-      var onChildFocus = 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 = 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 ___EmotionJSX(EuiFormErrorText, {
+        key: key,
+        id: "".concat(id, "-error-").concat(i),
+        className: "euiFormRow__text"
+      }, error);
     });
-    _defineProperty(_this, "onBlur", function () {
-      // Doing this to allow onBlur to be called correctly from the child input element as this component overrides it
-      var onChildBlur = get(_this.props, 'children.props.onBlur');
-      if (onChildBlur) {
-        onChildBlur.apply(void 0, arguments);
-      }
-      _this.setState({
-        isFocused: false
+  }, [error, isInvalid, id]);
+  var ariaDescribedBy = useMemo(function () {
+    var describingIds = _toConsumableArray(describedByIds || []);
+    if (optionalHelpTexts !== null && optionalHelpTexts !== void 0 && optionalHelpTexts.length) {
+      optionalHelpTexts.forEach(function (optionalHelpText) {
+        return describingIds.push(optionalHelpText.props.id);
       });
-    });
-    return _this;
-  }
-  _inherits(EuiFormRow, _Component);
-  return _createClass(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 = _objectWithoutProperties(_this$props, _excluded);
-      var id = this.state.id;
-      var hasLabel = label || labelAppend;
-      var classes = classNames('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 ___EmotionJSX(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 ___EmotionJSX(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 = ___EmotionJSX("div", {
-          className: "euiFormRow__labelWrapper"
-        }, ___EmotionJSX(EuiFormLabel, _extends({
-          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 = _toConsumableArray(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 = Children.only(children);
-      var field = /*#__PURE__*/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 = classNames('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 = ___EmotionJSX(React.Fragment, null, optionalLabel, ___EmotionJSX("div", {
-        className: fieldWrapperClasses
-      }, field, optionalErrors, optionalHelpTexts));
-      return labelType === 'legend' ? ___EmotionJSX("fieldset", _extends({}, sharedProps, rest), contents) : ___EmotionJSX("div", _extends({}, sharedProps, rest), contents);
     }
-  }]);
-}(Component);
-_defineProperty(EuiFormRow, "contextType", FormContext);
-_defineProperty(EuiFormRow, "defaultProps", {
-  display: 'row',
-  hasEmptyLabelSpace: false,
-  describedByIds: [],
-  labelType: 'label',
-  hasChildLabel: true
-});
+    if (describingIds.length) {
+      return describingIds.join(' ');
+    }
+  }, [describedByIds, optionalHelpTexts, optionalErrors]);
+  var field = useMemo(function () {
+    var _ref2, _child$props$disabled;
+    var child = Children.only(children);
+    return /*#__PURE__*/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 ___EmotionJSX(Element, _extends({
+    css: cssStyles,
+    className: classes,
+    id: "".concat(id, "-row")
+  }, rest), hasLabel ? ___EmotionJSX("div", {
+    className: "euiFormRow__labelWrapper"
+  }, ___EmotionJSX(EuiFormLabel, _extends({
+    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 && ___EmotionJSX(EuiSpacer, {
+    size: "m",
+    className: "euiFormRow__labelWrapper"
+  }), ___EmotionJSX("div", {
+    className: "euiFormRow__fieldWrapper",
+    onFocus: onFocusWithin,
+    onBlur: onBlurWithin
+  }, field, optionalErrors, optionalHelpTexts));
+};
 EuiFormRow.propTypes = {
   /**
      * Defaults to rendering a `<label>` but if passed `'legend'` for labelType,
@@ -243,24 +174,26 @@ EuiFormRow.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.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.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.oneOf(["row", "rowCompressed", "columnCompressed", "center", "centerCompressed", "columnCompressedSwitch"]),
   hasEmptyLabelSpace: PropTypes.bool,
   /**
      * Expand to fill 100% of the parent.

package/es/components/form/form_row/form_row.styles.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+export var euiFormRowStyles = function euiFormRowStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    maxWidth = _euiFormVariables.maxWidth,
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  return {
+    euiFormRow: /*#__PURE__*/css("display:flex;+.euiButton{", logicalCSS('margin-top', euiTheme.size.base), ";};label:euiFormRow;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat(logicalCSS('max-width', maxWidth), "\n    "),
+    fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:fullWidth;"),
+    // Skip css`` to avoid generating an extra className
+    row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat(logicalCSS('margin-top', euiTheme.size.base), "\n      }\n    "),
+    // No difference from the uncompressed row for this current theme AFAICT
+    // TODO: Deprecate prop
+    get rowCompressed() {
+      return this.row;
+    },
+    columnCompressed: /*#__PURE__*/css("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", logicalCSS('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", logicalCSS('min-width', 0), ";}+.euiFormRow{", logicalCSS('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", logicalCSS('margin-top', euiTheme.size.m), ";}&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
+    // Handled by :has CSS now rather than a separate modifier/prop
+    // TODO: Deprecate prop
+    get columnCompressedSwitch() {
+      return this.columnCompressed;
+    },
+    // Center display is primarily for inline form rows, which may have have
+    // field content that is shorter than form controls (e.g. switches, text),
+    // and should vertically center said content
+    centerDisplayCss: function centerDisplayCss(compressed) {
+      return "\n      .euiFormRow__fieldWrapper {\n        display: flex;\n        align-items: center;\n        ".concat(logicalCSS('min-height', compressed ? controlCompressedHeight : controlHeight), "\n      }\n    ");
+    },
+    get center() {
+      return /*#__PURE__*/css(this.row, " ", this.centerDisplayCss(false), ";;label:center;");
+    },
+    get centerCompressed() {
+      return /*#__PURE__*/css(this.row, " ", this.centerDisplayCss(true), ";;label:centerCompressed;");
+    }
+  };
+};

package/es/components/form/radio/radio.js

@@ -13,6 +13,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../../services';
+import { EuiIcon } from '../../icon';
+import { euiRadioStyles } from './radio.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRadio = function EuiRadio(_ref) {
   var className = _ref.className,
@@ -26,20 +29,22 @@ export var EuiRadio = function EuiRadio(_ref) {
     autoFocus = _ref.autoFocus,
     labelProps = _ref.labelProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiRadio', {
-    'euiRadio--noLabel': !label
-  }, className);
+  var classes = classNames('euiRadio', className);
+  var styles = useEuiMemoizedStyles(euiRadioStyles);
+  var inputStyles = [styles.input.euiRadio__circle, disabled ? checked ? styles.input.disabled.selected : styles.input.disabled.unselected : checked ? styles.input.enabled.selected : styles.input.enabled.unselected];
   var labelClasses = classNames('euiRadio__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-  var optionalLabel;
-  if (label) {
-    optionalLabel = ___EmotionJSX("label", _extends({}, labelProps, {
-      className: labelClasses,
-      htmlFor: id
-    }), label);
-  }
+  var labelStyles = [styles.label.euiRadio__label, disabled ? styles.label.disabled : styles.label.enabled, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
   return ___EmotionJSX("div", _extends({
+    css: styles.euiRadio,
     className: classes
-  }, rest), ___EmotionJSX("input", {
+  }, rest), ___EmotionJSX("div", {
+    css: inputStyles,
+    className: "euiRadio__circle"
+  }, ___EmotionJSX(EuiIcon, {
+    css: styles.input.euiRadio__icon,
+    type: "dot"
+  }), ___EmotionJSX("input", {
+    css: styles.input.euiRadio__input,
     className: "euiRadio__input",
     type: "radio",
     id: id,
@@ -49,9 +54,11 @@ export var EuiRadio = function EuiRadio(_ref) {
     onChange: onChange,
     disabled: disabled,
     autoFocus: autoFocus
-  }), ___EmotionJSX("div", {
-    className: "euiRadio__circle"
-  }), optionalLabel);
+  })), label && ___EmotionJSX("label", _extends({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };
 EuiRadio.propTypes = {
   className: PropTypes.string,

package/es/components/form/radio/radio.styles.js

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiFormCustomControlStyles } from '../form.styles';
+export var euiRadioStyles = function euiRadioStyles(euiThemeContext) {
+  var controlStyles = euiFormCustomControlStyles(euiThemeContext);
+  return {
+    euiRadio: /*#__PURE__*/css(controlStyles.wrapper, ";label:euiRadio;"),
+    input: {
+      euiRadio__circle: /*#__PURE__*/css(controlStyles.input.fauxInput, " border-radius:50%;;label:euiRadio__circle;"),
+      enabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.enabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.enabled.unselected, ";label:unselected;")
+      },
+      disabled: {
+        selected: /*#__PURE__*/css(controlStyles.input.disabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/css(controlStyles.input.disabled.unselected, ";label:unselected;")
+      },
+      euiRadio__icon: /*#__PURE__*/css(controlStyles.input.icon, ";label:euiRadio__icon;"),
+      euiRadio__input: /*#__PURE__*/css(controlStyles.input.hiddenInput, ";label:euiRadio__input;")
+    },
+    label: {
+      euiRadio__label: /*#__PURE__*/css(controlStyles.label.label, ";label:euiRadio__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/css(controlStyles.label.disabled, ";label:disabled;")
+    }
+  };
+};

package/es/components/form/range/range.styles.js

@@ -79,7 +79,7 @@ export var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(eu
 };
 export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
-  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    border-radius: 50%;\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
 };
 export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
   return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");

package/es/components/form/range/range_input.styles.js

@@ -10,6 +10,6 @@ import { css } from '@emotion/react';
 export var euiRangeInputStyles = function euiRangeInputStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &{margin:0;inline-size:100%;};label:euiRangeInput;")
+    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &,.euiDualRange__popover &{inline-size:100%;};label:euiRangeInput;")
   };
 };

package/es/components/form/range/range_slider.styles.js

@@ -8,15 +8,12 @@
 
 import { css } from '@emotion/react';
 import { transparentize } from '../../../services';
-import { euiCustomControl } from '../form.styles';
 import { euiRangeThumbStyle, euiRangeThumbPerBrowser, euiRangeVariables, euiRangeTrackPerBrowser, euiRangeThumbFocus } from './range.styles';
 export var euiRangeSliderStyles = function euiRangeSliderStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeSlider: /*#__PURE__*/css("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", euiRangeThumbPerBrowser("\n        ".concat(euiCustomControl(euiThemeContext, {
-      type: 'round'
-    }), "\n        ").concat(euiRangeThumbStyle(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", euiRangeThumbPerBrowser('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocus(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
+    euiRangeSlider: /*#__PURE__*/css("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", euiRangeThumbPerBrowser("\n        ".concat(euiRangeThumbStyle(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", euiRangeThumbPerBrowser('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocus(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
     hasTicks: /*#__PURE__*/css("block-size:", range.thumbHeight, ";;label:hasTicks;"),
     hasRange: /*#__PURE__*/css(euiRangeTrackPerBrowser("\n        background-color: transparent;\n        border-color: ".concat(transparentize(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/css(euiRangeThumbPerBrowser("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")

package/es/components/form/range/range_thumb.styles.js

@@ -10,7 +10,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { mathWithUnits } from '../../../global_styling';
 import { euiRangeThumbStyle, euiRangeThumbFocus, euiRangeVariables } from './range.styles';
-import { euiCustomControl } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "9ugg7u-hasTicks",
   styles: "inset-block-start:0;margin-block-start:0;label:hasTicks;"
@@ -23,9 +22,7 @@ export var euiRangeThumbStyles = function euiRangeThumbStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
     // Base
-    euiRangeThumb: /*#__PURE__*/css(euiCustomControl(euiThemeContext, {
-      type: 'round'
-    }), " ", euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
+    euiRangeThumb: /*#__PURE__*/css(euiRangeThumbStyle(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
       return x / 2 * -1;
     }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", euiRangeThumbFocus(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
     hasTicks: _ref