@elastic/eui 95.7.0 → 95.8.0-backport.0

package/optimize/lib/components/form/form_row/form_row.js

@@ -6,224 +6,159 @@ 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 _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));
+};

package/optimize/lib/components/form/form_row/form_row.styles.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormRowStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _form = require("../form.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 euiFormRowStyles = exports.euiFormRowStyles = function euiFormRowStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    maxWidth = _euiFormVariables.maxWidth,
+    controlHeight = _euiFormVariables.controlHeight,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  return {
+    euiFormRow: /*#__PURE__*/(0, _react.css)("display:flex;+.euiButton{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:euiFormRow;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', maxWidth), "\n    "),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.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((0, _global_styling.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__*/(0, _react.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, ");", (0, _global_styling.logicalCSS)('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", (0, _global_styling.logicalCSS)('min-width', 0), ";}+.euiFormRow{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.m), ";}&:not(:last-child){", (0, _global_styling.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((0, _global_styling.logicalCSS)('min-height', compressed ? controlCompressedHeight : controlHeight), "\n      }\n    ");
+    },
+    get center() {
+      return /*#__PURE__*/(0, _react.css)(this.row, " ", this.centerDisplayCss(false), ";;label:center;");
+    },
+    get centerCompressed() {
+      return /*#__PURE__*/(0, _react.css)(this.row, " ", this.centerDisplayCss(true), ";;label:centerCompressed;");
+    }
+  };
+};

package/optimize/lib/components/form/radio/radio.js

@@ -9,6 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+var _icon = require("../../icon");
+var _radio = require("./radio.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "name", "checked", "label", "value", "onChange", "disabled", "autoFocus", "labelProps"];
 /*
@@ -30,20 +33,22 @@ var EuiRadio = exports.EuiRadio = function EuiRadio(_ref) {
     autoFocus = _ref.autoFocus,
     labelProps = _ref.labelProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiRadio', {
-    'euiRadio--noLabel': !label
-  }, className);
+  var classes = (0, _classnames.default)('euiRadio', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_radio.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 = (0, _classnames.default)('euiRadio__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-  var optionalLabel;
-  if (label) {
-    optionalLabel = (0, _react2.jsx)("label", (0, _extends2.default)({}, 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 (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiRadio,
     className: classes
-  }, rest), (0, _react2.jsx)("input", {
+  }, rest), (0, _react2.jsx)("div", {
+    css: inputStyles,
+    className: "euiRadio__circle"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    css: styles.input.euiRadio__icon,
+    type: "dot"
+  }), (0, _react2.jsx)("input", {
+    css: styles.input.euiRadio__input,
     className: "euiRadio__input",
     type: "radio",
     id: id,
@@ -53,7 +58,9 @@ var EuiRadio = exports.EuiRadio = function EuiRadio(_ref) {
     onChange: onChange,
     disabled: disabled,
     autoFocus: autoFocus
-  }), (0, _react2.jsx)("div", {
-    className: "euiRadio__circle"
-  }), optionalLabel);
+  })), label && (0, _react2.jsx)("label", (0, _extends2.default)({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };

package/optimize/lib/components/form/radio/radio.styles.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRadioStyles = void 0;
+var _react = require("@emotion/react");
+var _form = require("../form.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 euiRadioStyles = exports.euiRadioStyles = function euiRadioStyles(euiThemeContext) {
+  var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
+  return {
+    euiRadio: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiRadio;"),
+    input: {
+      euiRadio__circle: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:50%;;label:euiRadio__circle;"),
+      enabled: {
+        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;")
+      },
+      disabled: {
+        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
+        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
+      },
+      euiRadio__icon: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, ";label:euiRadio__icon;"),
+      euiRadio__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, ";label:euiRadio__input;")
+    },
+    label: {
+      euiRadio__label: /*#__PURE__*/(0, _react.css)(controlStyles.label.label, ";label:euiRadio__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/(0, _react.css)(controlStyles.label.disabled, ";label:disabled;")
+    }
+  };
+};

package/optimize/lib/components/form/range/range.styles.js

@@ -85,7 +85,7 @@ var euiRangeThumbFocusBoxShadow = exports.euiRangeThumbFocusBoxShadow = function
 };
 var euiRangeThumbStyle = exports.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  ");
 };
 var euiRangeThumbPerBrowser = exports.euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
   return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");

package/optimize/lib/components/form/range/range_input.styles.js

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

package/optimize/lib/components/form/range/range_slider.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiRangeSliderThumbStyles = exports.euiRangeSliderStyles = void 0;
 var _react = require("@emotion/react");
 var _services = require("../../../services");
-var _form = require("../form.styles");
 var _range = require("./range.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -20,9 +19,7 @@ var euiRangeSliderStyles = exports.euiRangeSliderStyles = function euiRangeSlide
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
-    euiRangeSlider: /*#__PURE__*/(0, _react.css)("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _form.euiCustomControl)(euiThemeContext, {
-      type: 'round'
-    }), "\n        ").concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", (0, _range.euiRangeThumbPerBrowser)('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocus)(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
+    euiRangeSlider: /*#__PURE__*/(0, _react.css)("appearance:none;background:transparent;inline-size:100%;block-size:100%;position:relative;cursor:pointer;z-index:", range.thumbZIndex, ";", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n      ")), " &:disabled{cursor:not-allowed;", (0, _range.euiRangeThumbPerBrowser)('cursor: not-allowed'), ";}&::-webkit-slider-thumb{-webkit-appearance:none;}&:focus{outline:none;}&:focus-visible{", (0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocus)(euiThemeContext)), " &~.euiRangeTooltip .euiRangeTooltip__value{transform:translateX(0) translateY(-50%) scale(1.1);}};label:euiRangeSlider;"),
     hasTicks: /*#__PURE__*/(0, _react.css)("block-size:", range.thumbHeight, ";;label:hasTicks;"),
     hasRange: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeTrackPerBrowser)("\n        background-color: transparent;\n        border-color: ".concat((0, _services.transparentize)(range.trackBorderColor, 0.6), "\n      ")), ";;label:hasRange;"),
     hasLevels: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbPerBrowser)("background-color: ".concat(range.thumbBackgroundColor)), ";;label:hasLevels;")

package/optimize/lib/components/form/range/range_thumb.styles.js

@@ -7,7 +7,6 @@ exports.euiRangeThumbStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
 var _range = require("./range.styles");
-var _form = require("../form.styles");
 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
@@ -27,9 +26,7 @@ var euiRangeThumbStyles = exports.euiRangeThumbStyles = function euiRangeThumbSt
   var range = (0, _range.euiRangeVariables)(euiThemeContext);
   return {
     // Base
-    euiRangeThumb: /*#__PURE__*/(0, _react.css)((0, _form.euiCustomControl)(euiThemeContext, {
-      type: 'round'
-    }), " ", (0, _range.euiRangeThumbStyle)(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
+    euiRangeThumb: /*#__PURE__*/(0, _react.css)((0, _range.euiRangeThumbStyle)(euiThemeContext), " content:'';position:absolute;inset-inline-start:0;inset-block-start:50%;margin-block-start:", (0, _global_styling.mathWithUnits)(range.thumbHeight, function (x) {
       return x / 2 * -1;
     }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{", (0, _range.euiRangeThumbFocus)(euiThemeContext), " outline:none;};label:euiRangeThumb;"),
     hasTicks: _ref