@elastic/eui 95.7.0 → 95.8.0-backport.0

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiSuperDatePickerInternal = exports.EuiSuperDatePicker = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -31,8 +32,11 @@ var _date_popover_button = require("./date_popover/date_popover_button");
 var _auto_refresh = require("../auto_refresh/auto_refresh");
 var _super_date_picker = require("./super_date_picker.styles");
 var _react2 = require("@emotion/react");
+var _excluded = ["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; })(); } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -282,7 +286,7 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         compressed: compressed,
         isInvalid: isInvalid,
         isLoading: isLoading && !showUpdateButton,
-        disabled: !!isDisabled,
+        isDisabled: !!isDisabled,
         prepend: _this.renderQuickSelect(),
         append: autoRefreshAppend,
         fullWidth: true,
@@ -313,9 +317,16 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
         })));
       }
       var rangeCssStyles = [styles.euiSuperDatePicker__range, formControlLayoutProps.css];
+
+      // EuiFormControlLayout wants `isDisabled`, EuiDatePickerRange wants `disabled` :T
+      var _ = formControlLayoutProps.isDisabled,
+        _rangeProps = (0, _objectWithoutProperties2.default)(formControlLayoutProps, _excluded);
+      var rangeProps = _objectSpread(_objectSpread({}, _rangeProps), {}, {
+        disabled: formControlLayoutProps.isDisabled
+      });
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
-        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, formControlLayoutProps, {
+        return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, rangeProps, {
           css: rangeCssStyles,
           isCustom: true,
           iconType: false,

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -46,7 +46,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   var needsUpdatingBackgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.success, 0.7) : (0, _services.tint)(euiTheme.colors.success, 0.9);
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
   return {
-    euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";}.euiFormControlLayout__childrenWrapper:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:euiSuperDatePicker;"),
+    euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
       restricted: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', restrictedWidth), ";;label:restricted;"),
       full: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:full;"),
@@ -66,9 +66,9 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       full: "\n        label: isAutoRefreshOnly;\n        display: block;\n      "
     },
     // isQuickSelectOnly forces `width` to be `auto`
-    isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ";;label:isQuickSelectOnly;"),
+    isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
-    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto !important'), ";;label:euiSuperDatePicker__rangeInput;"),
+    euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), ";;label:euiSuperDatePicker__rangeInput;"),
     euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
@@ -76,7 +76,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
       default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";background-size:100% 100%;};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
       invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.dangerText, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";background-size:100% 100%;};label:needsUpdating;")
     }
   };
 };

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

@@ -9,10 +9,12 @@ exports.EuiCheckbox = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _excluded = ["className", "css", "id", "checked", "label", "onChange", "type", "disabled", "indeterminate", "inputRef", "labelProps"];
+var _icon = require("../../icon");
+var _checkbox = require("./checkbox.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,7 +26,6 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   var className = _ref.className,
-    customCss = _ref.css,
     id = _ref.id,
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? false : _ref$checked,
@@ -33,26 +34,19 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     type = _ref.type,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$indeterminate = _ref.indeterminate,
     indeterminate = _ref$indeterminate === void 0 ? false : _ref$indeterminate,
     inputRef = _ref.inputRef,
     labelProps = _ref.labelProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiCheckbox', {
-    'euiCheckbox--noLabel': !label
-  }, className);
-  var styles = {
-    euiCheckbox: /*#__PURE__*/(0, _react2.css)(";label:euiCheckbox;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiCheckbox, customCss];
-  var optionalLabel = (0, _react.useMemo)(function () {
-    if (!label) return;
-    var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
-    return (0, _react2.jsx)("label", (0, _extends2.default)({}, labelProps, {
-      className: labelClasses,
-      htmlFor: id
-    }), label);
-  }, [label, labelProps, id]);
+  var classes = (0, _classnames.default)('euiCheckbox', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_checkbox.euiCheckboxStyles);
+  var inputStyles = [styles.input.euiCheckbox__square, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
+  var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
+  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = (0, _react.useCallback)(function (input) {
@@ -60,17 +54,27 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   }, [indeterminate]);
   var refs = (0, _services.useCombinedRefs)([inputRef, setIndeterminateState]);
   return (0, _react2.jsx)("div", {
-    css: cssStyles,
+    css: styles.euiCheckbox,
     className: classes
-  }, (0, _react2.jsx)("input", (0, _extends2.default)({
+  }, (0, _react2.jsx)("div", {
+    css: inputStyles,
+    className: "euiCheckbox__square"
+  }, (0, _react2.jsx)(_icon.EuiIcon, {
+    css: iconStyles,
+    type: indeterminate ? 'stopFilled' : checked ? 'check' : 'empty'
+  }), (0, _react2.jsx)("input", (0, _extends2.default)({
+    css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",
     type: "checkbox",
     id: id,
     checked: checked,
     onChange: onChange,
     disabled: disabled,
+    readOnly: readOnly,
     ref: refs
-  }, rest)), (0, _react2.jsx)("div", {
-    className: "euiCheckbox__square"
-  }), optionalLabel);
+  }, rest))), label && (0, _react2.jsx)("label", (0, _extends2.default)({}, labelProps, {
+    css: labelStyles,
+    className: labelClasses,
+    htmlFor: id
+  }), label));
 };

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCheckboxStyles = void 0;
+var _react = require("@emotion/react");
+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
+ * 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 _ref = process.env.NODE_ENV === "production" ? {
+  name: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;"
+} : {
+  name: "1m8ob9b-readOnly",
+  styles: "cursor:default;label:readOnly;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;"
+} : {
+  name: "u54glv-indeterminate",
+  styles: "transform:scale(0.5);label:indeterminate;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
+  var _euiFormCustomControl = (0, _form.euiFormCustomControlVariables)(euiThemeContext),
+    unselectedBorder = _euiFormCustomControl.colors.unselectedBorder;
+  return {
+    euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
+    input: {
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      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;")
+      },
+      // Readonly checkboxes are used by EuiMarkdownEditor
+      // Maintain the initial color to enforce that clicks are not doing anything
+      readOnly: /*#__PURE__*/(0, _react.css)("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
+      icon: {
+        euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
+        check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
+        indeterminate: _ref2
+      },
+      euiCheckbox__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
+    },
+    label: {
+      euiCheckbox__label: /*#__PURE__*/(0, _react.css)(controlStyles.label.label, ";label:euiCheckbox__label;"),
+      enabled: controlStyles.label.enabled,
+      disabled: /*#__PURE__*/(0, _react.css)(controlStyles.label.disabled, ";label:disabled;"),
+      readOnly: _ref
+    }
+  };
+};

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

@@ -9,10 +9,12 @@ 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 _title = require("../../title");
 var _text = require("../../text");
 var _flex = require("../../flex");
 var _eui_form_context = require("../eui_form_context");
+var _described_form_group = require("./described_form_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "gutterSize", "fullWidth", "ratio", "titleSize", "title", "description", "descriptionFlexItemProps", "fieldFlexItemProps"];
 /*
@@ -40,15 +42,18 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
     descriptionFlexItemProps = props.descriptionFlexItemProps,
     fieldFlexItemProps = props.fieldFlexItemProps,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var classes = (0, _classnames.default)('euiDescribedFormGroup', {
-    'euiDescribedFormGroup--fullWidth': fullWidth
-  }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_described_form_group.euiDescribedFormGroupStyles);
+  var cssStyles = [styles.euiDescribedFormGroup, fullWidth ? styles.fullWidth : styles.formWidth];
+  var descriptionColumnStyles = [styles.euiDescribedFormGroup__descriptionColumn, descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.css];
+  var fieldColumnStyles = [styles.euiDescribedFormGroup__fields, fieldFlexItemProps === null || fieldFlexItemProps === void 0 ? void 0 : fieldFlexItemProps.css];
+  var classes = (0, _classnames.default)('euiDescribedFormGroup', className);
   var fieldClasses = (0, _classnames.default)('euiDescribedFormGroup__fields', fieldFlexItemProps && fieldFlexItemProps.className);
   var renderedDescription;
   if (description) {
     renderedDescription = (0, _react2.jsx)(_text.EuiText, {
       size: "s",
       color: "subdued",
+      css: styles.euiDescribedFormGroup__description,
       className: "euiDescribedFormGroup__description"
     },
     // If the description is just a string, wrap it in a paragraph element
@@ -69,15 +74,17 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
       console.warn('Please provide an allowed ratio to EuiDescribedFromRow');
       break;
   }
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
-    role: "group",
-    className: classes
-  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+  return (0, _react2.jsx)(_flex.EuiFlexGroup, (0, _extends2.default)({
+    role: "group"
+  }, rest, {
+    css: cssStyles,
+    className: classes,
     alignItems: "baseline",
     gutterSize: gutterSize
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
+  }), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
     grow: 1
   }, descriptionFlexItemProps, {
+    css: descriptionColumnStyles,
     className: (0, _classnames.default)('euiDescribedFormGroup__descriptionColumn', descriptionFlexItemProps === null || descriptionFlexItemProps === void 0 ? void 0 : descriptionFlexItemProps.className)
   }), (0, _react2.jsx)(_title.EuiTitle, {
     size: titleSize,
@@ -85,6 +92,7 @@ var EuiDescribedFormGroup = exports.EuiDescribedFormGroup = function EuiDescribe
   }, title), renderedDescription), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
     grow: fieldGrowth
   }, fieldFlexItemProps, {
+    css: fieldColumnStyles,
     className: fieldClasses
-  }), children)));
+  }), children));
 };

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescribedFormGroupStyles = 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 euiDescribedFormGroupStyles = exports.euiDescribedFormGroupStyles = function euiDescribedFormGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);
+  return {
+    euiDescribedFormGroup: /*#__PURE__*/(0, _react.css)("&+*{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.l), ";};label:euiDescribedFormGroup;"),
+    // Skip css`` to avoid generating an Emotion className
+    formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', (0, _global_styling.mathWithUnits)(formMaxWidth, function (x) {
+      return x * 2;
+    })), "\n    "),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:fullWidth;"),
+    euiDescribedFormGroup__descriptionColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 'min(20rem, 50%)'), ";;label:euiDescribedFormGroup__descriptionColumn;"),
+    euiDescribedFormGroup__description: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.s), ";;label:euiDescribedFormGroup__description;"),
+    euiDescribedFormGroup__fields: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), "&>.euiFormRow:first-child:not(.euiFormRow--hasLabel){&::before{content:'';}}&>.euiFormRow--hasEmptyLabelSpace:first-child{", (0, _global_styling.logicalCSS)('margin-top', 0), ";};label:euiDescribedFormGroup__fields;")
+  };
+};

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

@@ -113,6 +113,7 @@ var EuiFieldNumber = exports.EuiFieldNumber = function EuiFieldNumber(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid || isNativelyInvalid,
+    isDisabled: rest.disabled,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

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

@@ -15,9 +15,10 @@ var _form = require("../form.styles");
  */
 
 var euiFieldNumberStyles = exports.euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
+  var colorMode = euiThemeContext.colorMode;
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "&:is(:invalid, [aria-invalid=\"true\"]){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
+    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

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

@@ -20,7 +20,7 @@ var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_password = require("./field_password.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "name", "placeholder", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
+var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +38,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     name = props.name,
     placeholder = props.placeholder,
     value = props.value,
+    disabled = props.disabled,
     isInvalid = props.isInvalid,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
@@ -87,14 +88,14 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
         iconType: isVisible ? 'eyeClosed' : 'eye',
         "aria-label": isVisible ? maskPasswordLabel : showPasswordLabel,
         title: isVisible ? maskPasswordLabel : showPasswordLabel,
-        disabled: rest.disabled
+        disabled: disabled
       }, dualToggleProps, {
         onClick: function onClick(e) {
           return handleToggle(e, isVisible);
         }
       }));
     }
-  }, [type, inputType, maskPasswordLabel, showPasswordLabel, dualToggleProps, handleToggle, rest.disabled]);
+  }, [type, inputType, maskPasswordLabel, showPasswordLabel, dualToggleProps, handleToggle, disabled]);
   var finalAppend = (0, _react.useMemo)(function () {
     if (!visibilityToggle) return append;
     if (!append) return visibilityToggle;
@@ -114,6 +115,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
     append: finalAppend
@@ -127,6 +129,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     className: classes,
     css: cssStyles,
     value: value,
+    disabled: disabled,
     ref: setInputRef
   }, rest))));
 };

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

@@ -16,14 +16,15 @@ 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 _browser = require("../../../services/browser");
 var _services = require("../../../services");
+var _browser = require("../../../services/browser");
+var _i18n = require("../../i18n");
 var _form_control_layout = require("../form_control_layout");
 var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_search = require("./field_search.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
+var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "disabled", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
 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 _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)); }
@@ -160,6 +161,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
         isInvalid = _this$props2.isInvalid,
+        disabled = _this$props2.disabled,
         _this$props2$fullWidt = _this$props2.fullWidth,
         fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
         isLoading = _this$props2.isLoading,
@@ -175,7 +177,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       if (typeof this.props.value !== 'string') value = this.state.value;
 
       // Set actual value of isClearable if value exists as well
-      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !rest.disabled);
+      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !disabled);
       var classes = (0, _classnames.default)('euiFieldSearch', {
         'euiFieldSearch-isLoading': isLoading,
         'euiFieldSearch-isClearable': isClearable,
@@ -183,32 +185,40 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       }, className);
       var styles = stylesMemoizer(_field_search.euiFieldSearchStyles);
       var cssStyles = [styles.euiFieldSearch, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth, (prepend || append) && styles.inGroup];
-      return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
-        icon: "search",
-        fullWidth: fullWidth,
-        isLoading: isLoading,
-        isInvalid: isInvalid,
-        clear: isClearable ? {
-          onClick: this.onClear,
-          'data-test-subj': 'clearSearchButton'
-        } : undefined,
-        compressed: compressed,
-        append: append,
-        prepend: prepend
-      }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
-        isInvalid: isInvalid
-      }, (0, _react2.jsx)("input", (0, _extends2.default)({
-        type: "search",
-        id: id,
-        name: name,
-        placeholder: placeholder,
-        className: classes,
-        css: cssStyles,
-        onKeyUp: function onKeyUp(e) {
-          return _this3.onKeyUp(e, incremental, onSearch);
-        },
-        ref: this.setRef
-      }, rest))));
+      return (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiFieldSearch.clearSearchButtonLabel",
+        default: "Clear search input"
+      }, function (clearSearchButtonLabel) {
+        return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
+          icon: "search",
+          fullWidth: fullWidth,
+          isLoading: isLoading,
+          isInvalid: isInvalid,
+          isDisabled: disabled,
+          clear: isClearable ? {
+            onClick: _this3.onClear,
+            'aria-label': clearSearchButtonLabel,
+            'data-test-subj': 'clearSearchButton'
+          } : undefined,
+          compressed: compressed,
+          append: append,
+          prepend: prepend
+        }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+          isInvalid: isInvalid
+        }, (0, _react2.jsx)("input", (0, _extends2.default)({
+          type: "search",
+          id: id,
+          name: name,
+          placeholder: placeholder,
+          className: classes,
+          css: cssStyles,
+          onKeyUp: function onKeyUp(e) {
+            return _this3.onKeyUp(e, incremental, onSearch);
+          },
+          disabled: disabled,
+          ref: _this3.setRef
+        }, rest))));
+      });
     }
   }]);
 }(_react.Component);

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

@@ -67,6 +67,7 @@ var EuiFieldText = exports.EuiFieldText = function EuiFieldText(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: rest.disabled,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

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

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _call_out = require("../call_out");
 var _i18n = require("../i18n");
+var _spacer = require("../spacer");
 var _eui_form_context = require("./eui_form_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isInvalid", "error", "component", "invalidCallout", "fullWidth"];
@@ -35,7 +36,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     invalidCallout = _ref$invalidCallout === void 0 ? 'above' : _ref$invalidCallout,
     fullWidth = _ref.fullWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var formContext = _react.default.useMemo(function () {
+  var formContext = (0, _react.useMemo)(function () {
     return {
       defaultFullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : false
     };
@@ -60,7 +61,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
       token: "euiForm.addressFormErrors",
       default: "Please address the highlighted errors."
     }, function (addressFormErrors) {
-      return (0, _react2.jsx)(_call_out.EuiCallOut, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_call_out.EuiCallOut, {
         tabIndex: -1,
         ref: handleFocus,
         className: "euiForm__errors",
@@ -68,7 +69,9 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
         color: "danger",
         role: "alert",
         "aria-live": "assertive"
-      }, optionalErrors);
+      }, optionalErrors), (0, _react2.jsx)(_spacer.EuiSpacer, {
+        size: "m"
+      }));
     });
   }
   var Element = component;