@elastic/eui 95.7.0 → 95.8.0-backport.0

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.euiCustomControl = void 0;
+exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -57,14 +57,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-    inputGroupLabelBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5),
-    inputGroupBorder: 'none'
-  };
-
-  // Colors - specific to checkboxes, radios, switches, and range thumbs
-  var customControlColors = {
-    customControlDisabledIconColor: isColorDark ? (0, _services.shade)(euiTheme.colors.mediumShade, 0.38) : (0, _services.tint)(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.31)
+    appendPrependBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {
@@ -84,7 +77,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
       xxl: euiTheme.size.xxl
     }
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), iconSizes), controlLayout), {}, {
     animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
   });
 };
@@ -108,29 +101,6 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     autoFill: euiFormControlAutoFillStyles(euiThemeContext)
   };
 };
-var euiCustomControl = exports.euiCustomControl = function euiCustomControl(euiThemeContext) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var euiTheme = euiThemeContext.euiTheme;
-  var form = euiFormVariables(euiThemeContext);
-  var type = options.type,
-    _options$size = options.size,
-    size = _options$size === void 0 ? euiTheme.size.base : _options$size;
-  var padddingStyle = '';
-  var borderRadiusStyle = '';
-  if (size) {
-    var borderSize = parseFloat(String(euiTheme.border.width.thin));
-    var paddingSize = (0, _global_styling.mathWithUnits)(size, function (x) {
-      return (x - borderSize * 2) / 2;
-    });
-    padddingStyle = "padding: ".concat(paddingSize, ";");
-  }
-  if (type === 'round') {
-    borderRadiusStyle = "border-radius: ".concat(size, ";");
-  } else if (type === 'square') {
-    borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
-  }
-  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
-};
 var euiFormControlText = exports.euiFormControlText = function euiFormControlText(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
@@ -139,22 +109,37 @@ var euiFormControlText = exports.euiFormControlText = function euiFormControlTex
   return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(form.textColor, ";\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlPlaceholderText, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? true : _ref2$withBorder,
+    _ref2$withBackground = _ref2.withBackground,
+    withBackground = _ref2$withBackground === void 0 ? true : _ref2$withBackground,
+    _ref2$withBackgroundC = _ref2.withBackgroundColor,
+    withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
+    _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
+    withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
   var euiTheme = euiThemeContext.euiTheme;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    /* We use inset box-shadow instead of border to skip extra hight calculations */\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
+
+  // We use inset box-shadow instead of border to skip extra height calculations
+  var border = "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim();
+  var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
+  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n  ").trim();
+  var backgroundAnimation = "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
+  return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
-var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
 };
-var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
-  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
+  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlReadOnlyStyles = exports.euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -186,4 +171,67 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
+};
+
+/**
+ * Selection custom controls - checkboxes, radios, and switches
+ */
+
+var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var sizes = {
+    control: euiTheme.size.base,
+    lineHeight: euiTheme.size.l,
+    labelGap: euiTheme.size.s
+  };
+  var colors = {
+    unselected: euiTheme.colors.emptyShade,
+    unselectedBorder: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    : (0, _services.shade)(euiTheme.colors.lightestShade, 0.4),
+    selected: euiTheme.colors.primary,
+    selectedIcon: euiTheme.colors.emptyShade,
+    disabled: euiTheme.colors.lightShade,
+    disabledIcon: euiTheme.colors.darkShade,
+    disabledLabel: euiTheme.colors.disabledText // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
+  };
+  var animation = {
+    speed: euiTheme.animation.fast,
+    easing: 'ease-in'
+  };
+  return {
+    sizes: sizes,
+    colors: colors,
+    animation: animation
+  };
+};
+var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlVars = euiFormCustomControlVariables(euiThemeContext);
+  var centerWithLabel = (0, _global_styling.mathWithUnits)([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
+    return (x - y) / 2;
+  });
+  return {
+    wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
+    input: {
+      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(+ label) {\n          ").concat((0, _global_styling.logicalCSS)('margin-top', centerWithLabel), "\n        }\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      enabled: {
+        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n        "),
+        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border: ").concat(euiTheme.border.width.thin, " solid ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
+      },
+      disabled: {
+        selected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabledIcon, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n        "),
+        unselected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabled, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n          cursor: not-allowed;\n        ")
+      },
+      // Looks better centered at different zoom levels than just <EuiIcon size="s" />
+      icon: "\n        transform: scale(0.75);\n      ",
+      // Hidden input sits on top of the visible element
+      hiddenInput: "\n        position: absolute;\n        inset: 0;\n        opacity: 0 !important;\n        cursor: pointer;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n      "
+    },
+    label: {
+      label: "\n        /* Needs to use padding and not flex gap for extra mouse click area */\n        ".concat((0, _global_styling.logicalCSS)('padding-left', controlVars.sizes.labelGap), "\n        line-height: ").concat(controlVars.sizes.lineHeight, ";\n        font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n      "),
+      enabled: "\n        cursor: pointer;\n      ",
+      disabled: "\n        cursor: not-allowed;\n        color: ".concat(controlVars.colors.disabledLabel, ";\n      ")
+    }
+  };
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isRightSideIcon = exports.getIconAffordanceStyles = exports.getFormControlClassNameForIconCount = void 0;
+exports.isRightSideIcon = exports.getIconAffordanceStyles = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _form_control_layout_icons = require("./form_control_layout_icons");
 /*
@@ -15,40 +15,15 @@ var _form_control_layout_icons = require("./form_control_layout_icons");
  * Side Public License, v 1.
  */
 
-/**
- * The `getFormControlClassNameForIconCount` function helps setup the className appendum
- * depending on the form control's current settings/state.
- *
- * @param icon {boolean} Does it contain a static icon like arrowDown
- * @param clear {boolean} Is it currently clearable
- * @param isLoading {boolean} Is is currently loading
- * @param isInvalid {boolean} It is currently invalid
- * @param isDropdown {boolean} It is as dropdown
- * @returns {string | undefined} Returns the string to append to the base className of the form control; or `undefined` if all evaluate to false
- */
-
-var getFormControlClassNameForIconCount = exports.getFormControlClassNameForIconCount = function getFormControlClassNameForIconCount(_ref) {
+var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
+  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
+};
+var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref) {
   var icon = _ref.icon,
     clear = _ref.clear,
     isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     isDropdown = _ref.isDropdown;
-  var numIcons = [icon, clear, isInvalid, isLoading, isDropdown].filter(function (item) {
-    return item === true;
-  }).length;
-
-  // This className is also specifically used in `src/global_styling/mixins/_form.scss`
-  return numIcons > 0 ? "euiFormControlLayout--".concat(numIcons, "icons") : undefined;
-};
-var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
-  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
-};
-var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref2) {
-  var icon = _ref2.icon,
-    clear = _ref2.clear,
-    isLoading = _ref2.isLoading,
-    isInvalid = _ref2.isInvalid,
-    isDropdown = _ref2.isDropdown;
   var cssVariables = {
     '--euiFormControlLeftIconsCount': 0,
     '--euiFormControlRightIconsCount': 0
@@ -64,9 +39,9 @@ var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIcon
   if (isLoading) cssVariables['--euiFormControlRightIconsCount']++;
   if (isInvalid) cssVariables['--euiFormControlRightIconsCount']++;
   if (isDropdown) cssVariables['--euiFormControlRightIconsCount']++;
-  var filtered = Object.entries(cssVariables).filter(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      count = _ref4[1];
+  var filtered = Object.entries(cssVariables).filter(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      count = _ref3[1];
     return count > 0;
   });
   return filtered.length ? Object.fromEntries(filtered) : undefined;

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

@@ -7,15 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFormControlLayout = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _num_icons = require("./_num_icons");
-var _form_control_layout_icons = require("./form_control_layout_icons");
+var _services = require("../../../services");
 var _form_label = require("../form_label");
 var _eui_form_context = require("../eui_form_context");
+var _num_icons = require("./_num_icons");
+var _form_control_layout_icons = require("./form_control_layout_icons");
+var _form_control_layout = require("./form_control_layout.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "fullWidth"];
+var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "isDelimited", "wrapperProps", "fullWidth"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,6 +29,8 @@ var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "c
  */
 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; }
 var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormControlLayout(props) {
   var _useFormContext = (0, _eui_form_context.useFormContext)(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
@@ -43,16 +49,20 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     compressed = props.compressed,
     prepend = props.prepend,
     append = props.append,
+    isDelimited = props.isDelimited,
+    wrapperProps = props.wrapperProps,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isGroup = !!(prepend || append || isDelimited);
   var classes = (0, _classnames.default)('euiFormControlLayout', {
-    'euiFormControlLayout--fullWidth': fullWidth,
-    'euiFormControlLayout--compressed': compressed,
-    'euiFormControlLayout--readOnly': readOnly,
-    'euiFormControlLayout--group': prepend || append,
-    'euiFormControlLayout-isDisabled': isDisabled
+    'euiFormControlLayout--group': isGroup && !isDelimited,
+    'euiFormControlLayout-isDisabled': isDisabled,
+    'euiFormControlLayout-readOnly': readOnly
   }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout.euiFormControlLayoutStyles);
+  var cssStyles = [styles.euiFormControlLayout, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth].concat((0, _toConsumableArray2.default)(isGroup ? [styles.group.group, compressed ? styles.group.compressed : styles.group.uncompressed] : []));
+  var childrenWrapperStyles = [styles.children.euiFormControlLayout__childrenWrapper, isGroup && styles.children.inGroup, isGroup && !append && styles.children.prependOnly, isGroup && !prepend && styles.children.appendOnly, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
   var hasRightIcon = (0, _num_icons.isRightSideIcon)(icon);
   var hasLeftIcon = icon && !hasRightIcon;
@@ -69,19 +79,23 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     });
   }, [iconsPosition, icon, clear, isInvalid, isLoading, hasDropdownIcon]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), (0, _react2.jsx)(EuiFormControlLayoutSideNodes, {
     side: "prepend",
     nodes: prepend,
-    inputId: inputId
-  }), (0, _react2.jsx)("div", {
-    className: "euiFormControlLayout__childrenWrapper",
-    style: iconAffordanceStyles
-  }, hasLeftIcon && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
+    inputId: inputId,
+    compressed: compressed
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({}, wrapperProps, {
+    css: childrenWrapperStyles,
+    className: (0, _classnames.default)('euiFormControlLayout__childrenWrapper', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className),
+    style: _objectSpread(_objectSpread({}, iconAffordanceStyles), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style)
+  }), hasLeftIcon && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
     side: "left",
     icon: icon,
     iconsPosition: iconsPosition,
-    compressed: compressed
+    compressed: compressed,
+    isDisabled: isDisabled
   }), children, hasRightIcons && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
     side: "right",
     icon: hasRightIcon ? icon : undefined,
@@ -90,11 +104,13 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     clear: clear,
     isLoading: isLoading,
     isInvalid: isInvalid,
-    isDropdown: hasDropdownIcon
+    isDropdown: hasDropdownIcon,
+    isDisabled: isDisabled
   })), (0, _react2.jsx)(EuiFormControlLayoutSideNodes, {
     side: "append",
     nodes: append,
-    inputId: inputId
+    inputId: inputId,
+    compressed: compressed
   }));
 };
 
@@ -104,19 +120,18 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
 var EuiFormControlLayoutSideNodes = function EuiFormControlLayoutSideNodes(_ref) {
   var side = _ref.side,
     nodes = _ref.nodes,
-    inputId = _ref.inputId;
+    inputId = _ref.inputId,
+    compressed = _ref.compressed;
   var className = "euiFormControlLayout__".concat(side);
-  var renderFormLabel = (0, _react.useCallback)(function (label) {
-    return (0, _react2.jsx)(_form_label.EuiFormLabel, {
-      htmlFor: inputId,
-      className: className
-    }, label);
-  }, [inputId, className]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout.euiFormControlLayoutSideNodeStyles);
+  var cssStyles = [styles.euiFormControlLayout__side, styles[side], compressed ? styles.compressed : styles.uncompressed];
   if (!nodes) return null;
-  return (0, _react2.jsx)(_react.default.Fragment, null, _react.default.Children.map(nodes, function (node, index) {
-    return typeof node === 'string' ? renderFormLabel(node) : /*#__PURE__*/(0, _react.cloneElement)(node, {
-      className: (0, _classnames.default)(className, node.props.className),
-      key: index
-    });
+  return (0, _react2.jsx)("div", {
+    css: cssStyles,
+    className: className
+  }, _react.default.Children.map(nodes, function (node) {
+    return typeof node === 'string' ? (0, _react2.jsx)(_form_label.EuiFormLabel, {
+      htmlFor: inputId
+    }, node) : node;
   }));
 };

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFormControlLayoutStyles = exports.euiFormControlLayoutSideNodeStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+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: "1w10n1m-inGroup",
+  styles: "flex-grow:1;overflow:hidden;label:inGroup;"
+} : {
+  name: "1w10n1m-inGroup",
+  styles: "flex-grow:1;overflow:hidden;label:inGroup;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1lbfa6m-euiFormControlLayout__childrenWrapper",
+  styles: "position:relative;label:euiFormControlLayout__childrenWrapper;"
+} : {
+  name: "1lbfa6m-euiFormControlLayout__childrenWrapper",
+  styles: "position:relative;label:euiFormControlLayout__childrenWrapper;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  return {
+    euiFormControlLayout: /*#__PURE__*/(0, _react.css)(";label:euiFormControlLayout;"),
+    // Skip the css`` on the default height to avoid generating a className
+    uncompressed: "\n      ".concat((0, _global_styling.logicalCSS)('height', form.controlHeight), "\n    "),
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', form.controlCompressedHeight), ";;label:compressed;"),
+    // Skip the css`` on the default width to avoid generating a className
+    formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
+    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
+    group: {
+      group: /*#__PURE__*/(0, _react.css)("display:flex;align-items:stretch;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";background-color:", form.backgroundColor, ";overflow:hidden;>*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
+      // Skipping css`` to avoid repeated compressed/uncompressed classNames
+      uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
+      compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")
+    },
+    children: {
+      euiFormControlLayout__childrenWrapper: _ref2,
+      inGroup: _ref,
+      prependOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";;label:prependOnly;"),
+      appendOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";;label:appendOnly;")
+    }
+  };
+};
+var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  var uncompressedHeight = (0, _global_styling.mathWithUnits)([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var compressedHeight = (0, _global_styling.mathWithUnits)([form.controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)';
+  var text = '*:is(.euiFormLabel, .euiText)';
+  return {
+    euiFormControlLayout__side: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.euiTextTruncate)('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
+    append: /*#__PURE__*/(0, _react.css)(";label:append;"),
+    prepend: /*#__PURE__*/(0, _react.css)(";label:prepend;"),
+    uncompressed: "\n      ".concat(text, " {\n        ").concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat((0, _global_styling.logicalCSS)('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xl), "\n      }\n    "),
+    compressed: /*#__PURE__*/(0, _react.css)(text, "{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xxs), " line-height:", compressedHeight, ";}", buttons, "{", (0, _global_styling.logicalCSS)('height', compressedHeight), ";}.euiButtonIcon{flex-shrink:0;", (0, _global_styling.logicalCSS)('width', euiTheme.size.xl), ";};label:compressed;")
+  };
+};

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

@@ -4,14 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiFormControlLayoutClearButton = void 0;
+exports.EuiFormControlLayoutClearButton = void 0;
 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 _common = require("../../common");
+var _services = require("../../../services");
 var _icon = require("../../icon");
 var _i18n = require("../../i18n");
+var _form_control_layout_clear_button = require("./form_control_layout_clear_button.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "onClick", "size"];
 /*
@@ -21,30 +22,26 @@ var _excluded = ["className", "onClick", "size"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var sizeToClassNameMap = {
-  s: 'euiFormControlLayoutClearButton--small',
-  m: null
-};
-var SIZES = exports.SIZES = (0, _common.keysOf)(sizeToClassNameMap);
 var EuiFormControlLayoutClearButton = exports.EuiFormControlLayoutClearButton = function EuiFormControlLayoutClearButton(_ref) {
   var className = _ref.className,
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFormControlLayoutClearButton', sizeToClassNameMap[size], className);
-  return (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiFormControlLayoutClearButton.label",
-    default: "Clear input"
-  }, function (label) {
-    return (0, _react2.jsx)("button", (0, _extends2.default)({
-      type: "button",
-      className: classes,
-      onClick: onClick,
-      "aria-label": label
-    }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
-      className: "euiFormControlLayoutClearButton__icon",
-      type: "cross"
-    }));
-  });
+  var classes = (0, _classnames.default)('euiFormControlLayoutClearButton', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout_clear_button.EuiFormControlLayoutClearButtonStyles);
+  var iconStyles = [styles.euiFormControlLayoutClearButton__icon, styles.size[size]];
+  var ariaLabel = (0, _i18n.useEuiI18n)('euiFormControlLayoutClearButton.label', 'Clear input');
+  return (0, _react2.jsx)("button", (0, _extends2.default)({
+    type: "button",
+    css: styles.euiFormControlLayoutClearButton,
+    className: classes,
+    onClick: onClick,
+    "aria-label": ariaLabel
+  }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
+    css: iconStyles,
+    className: "euiFormControlLayoutClearButton__icon",
+    type: "cross",
+    size: size
+  }));
 };

package/optimize/lib/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFormControlLayoutClearButtonStyles = void 0;
+var _react = require("@emotion/react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var EuiFormControlLayoutClearButtonStyles = exports.EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
+  var backgroundColor = colorMode === 'DARK' ? euiTheme.colors.darkShade : euiTheme.colors.mediumShade;
+  return {
+    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.css)("pointer-events:all;background-color:", backgroundColor, ";border-radius:50%;line-height:0;&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
+    euiFormControlLayoutClearButton__icon: /*#__PURE__*/(0, _react.css)("transform:scale(0.5);fill:", euiTheme.colors.emptyShade, ";stroke:", euiTheme.colors.emptyShade, ";;label:euiFormControlLayoutClearButton__icon;"),
+    size: {
+      s: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xs, ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)("stroke-width:", euiTheme.size.xxs, ";;label:m;")
+    }
+  };
+};

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

@@ -8,11 +8,11 @@ exports.EuiFormControlLayoutCustomIcon = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _icon = require("../../icon");
-var _react2 = require("@emotion/react");
-var _excluded = ["className", "onClick", "type", "iconRef", "size", "color"];
-/*
+var _excluded = ["className", "onClick", "type", "iconRef", "size", "color", "disabled"];
+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
@@ -26,14 +26,16 @@ var EuiFormControlLayoutCustomIcon = exports.EuiFormControlLayoutCustomIcon = fu
     iconRef = _ref.iconRef,
     size = _ref.size,
     color = _ref.color,
+    disabled = _ref.disabled,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFormControlLayoutCustomIcon', className, {
-    'euiFormControlLayoutCustomIcon--clickable': onClick
-  });
+  var classes = (0, _classnames.default)('euiFormControlLayoutCustomIcon', className);
+  var cssStyles = [styles.euiFormControlLayoutCustomIcon, onClick ? styles.clickable : styles.unclickable];
   if (onClick) {
     return (0, _react2.jsx)("button", (0, _extends2.default)({
       type: "button",
       onClick: onClick,
+      disabled: disabled,
+      css: cssStyles,
       className: classes,
       ref: iconRef
     }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
@@ -45,6 +47,7 @@ var EuiFormControlLayoutCustomIcon = exports.EuiFormControlLayoutCustomIcon = fu
     }));
   }
   return (0, _react2.jsx)("span", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     ref: iconRef
   }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
@@ -54,4 +57,24 @@ var EuiFormControlLayoutCustomIcon = exports.EuiFormControlLayoutCustomIcon = fu
     type: type,
     color: color
   }));
+};
+var styles = {
+  euiFormControlLayoutCustomIcon: process.env.NODE_ENV === "production" ? {
+    name: "7d1ma8-euiFormControlLayoutCustomIcon",
+    styles: "font-size:0;label:euiFormControlLayoutCustomIcon;"
+  } : {
+    name: "7d1ma8-euiFormControlLayoutCustomIcon",
+    styles: "font-size:0;label:euiFormControlLayoutCustomIcon;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  // Skip css`` here to avoid generating an Emotion className
+  unclickable: "\n    pointer-events: none;\n  ",
+  clickable: process.env.NODE_ENV === "production" ? {
+    name: "1j8wgxj-clickable",
+    styles: "pointer-events:all;&:disabled{cursor:not-allowed;color:currentColor;};label:clickable;"
+  } : {
+    name: "1j8wgxj-clickable",
+    styles: "pointer-events:all;&:disabled{cursor:not-allowed;color:currentColor;};label:clickable;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };