@elastic/eui 116.3.1-snapshot.1782222821728 → 116.4.0

package/lib/components/date_picker/date_picker.js

@@ -143,7 +143,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),
     inputValidityRef = _useState2[0],

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

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldPassword: /*#__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:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
     // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,

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

@@ -17,7 +17,7 @@ var _form = require("../form.styles");
 var euiFieldSearchStyles = exports.euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
+    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
     // 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/lib/components/form/form.styles.js

@@ -211,7 +211,7 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:is(:invalid, [aria-invalid='true']) {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
 var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {

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

@@ -18,7 +18,7 @@ var euiSelectStyles = exports.euiSelectStyles = function euiSelectStyles(euiThem
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
+    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
     // 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/lib/components/form/text_area/text_area.styles.js

@@ -51,7 +51,7 @@ var euiTextAreaStyles = exports.euiTextAreaStyles = function euiTextAreaStyles(e
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVars = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
+    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
     resize: {
       vertical: _ref4,
       horizontal: _ref3,

package/lib/components/form/validatable_control/validatable_control.js

@@ -7,30 +7,53 @@ exports.useEuiValidatableControl = exports.EuiValidatableControl = void 0;
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
  * 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.
  */
+function isMutableRef(ref) {
+  return ref != null && ref.hasOwnProperty('current');
+}
 
 /**
  * The `EuiValidatableControl` component should be used in scenarios where
  * we can render the validated `<input>` as its direct child.
- *
- * It flags the underlying control as invalid via `aria-invalid`, which EUI form
- * controls use to render their invalid styling. Note that it intentionally does
- * *not* hook into the native constraint validation API (`setCustomValidity`) -
- * `isInvalid` is a presentational prop, and tying it to native validity would
- * block native form submission and surface a non-localized native error tooltip.
  */
 
 var EuiValidatableControl = exports.EuiValidatableControl = function EuiValidatableControl(_ref) {
   var isInvalid = _ref.isInvalid,
     children = _ref.children;
+  // Note that this must be state and not a ref to cause a rerender/set invalid state on initial mount
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    control = _useState2[0],
+    setControl = _useState2[1];
   var child = _react.Children.only(children);
+  var childRef = child.ref;
+  var replacedRef = (0, _react.useCallback)(function (element) {
+    setControl(element);
+
+    // Call the original ref, if any
+    if (typeof childRef === 'function') {
+      childRef(element);
+    } else if (isMutableRef(childRef)) {
+      childRef.current = element;
+    }
+  }, [childRef]);
+  useSetControlValidity({
+    controlEl: control,
+    isInvalid: isInvalid
+  });
   return /*#__PURE__*/(0, _react.cloneElement)(child, {
+    ref: replacedRef,
     'aria-invalid': isInvalid || child.props['aria-invalid']
   });
 };
@@ -53,6 +76,10 @@ EuiValidatableControl.propTypes = {
 var useEuiValidatableControl = exports.useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
   var isInvalid = _ref2.isInvalid,
     controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
   (0, _react.useEffect)(function () {
     if (!controlEl) return;
     if (typeof isInvalid === 'boolean') {
@@ -61,4 +88,22 @@ var useEuiValidatableControl = exports.useEuiValidatableControl = function useEu
       controlEl.removeAttribute('aria-invalid');
     }
   }, [isInvalid, controlEl]);
+};
+
+/**
+ * Internal `setCustomValidity` helper
+ */
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  (0, _react.useEffect)(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
+    if (isInvalid) {
+      controlEl.setCustomValidity('Invalid');
+    } else {
+      controlEl.setCustomValidity('');
+    }
+  }, [isInvalid, controlEl]);
 };

package/optimize/es/components/date_picker/date_picker.js

@@ -124,7 +124,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     inputValidityRef = _useState2[0],

package/optimize/es/components/form/field_password/field_password.styles.js

@@ -20,7 +20,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 export var euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
-    euiFieldPassword: /*#__PURE__*/css(formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/css(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
     // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,

package/optimize/es/components/form/field_search/field_search.styles.js

@@ -11,7 +11,7 @@ import { euiFormControlStyles } from '../form.styles';
 export var euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/css("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
+    euiFieldSearch: /*#__PURE__*/css("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

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

@@ -205,7 +205,7 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:is(:invalid, [aria-invalid='true']) {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
 export var euiFormControlAutofillUnsetStyles = "\n\n";
 export var euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {

package/optimize/es/components/form/select/select.styles.js

@@ -12,7 +12,7 @@ export var euiSelectStyles = function euiSelectStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   var formVariables = euiFormVariables(euiThemeContext);
   return {
-    euiSelect: /*#__PURE__*/css("appearance:none;", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
+    euiSelect: /*#__PURE__*/css("appearance:none;", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/optimize/es/components/form/text_area/text_area.styles.js

@@ -47,7 +47,7 @@ export var euiTextAreaStyles = function euiTextAreaStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   var formVars = euiFormVariables(euiThemeContext);
   return {
-    euiTextArea: /*#__PURE__*/css(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
+    euiTextArea: /*#__PURE__*/css(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
     resize: {
       vertical: _ref4,
       horizontal: _ref3,

package/optimize/es/components/form/validatable_control/validatable_control.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,24 +7,42 @@
  * Side Public License, v 1.
  */
 
-import { Children, cloneElement, useEffect } from 'react';
+import { Children, cloneElement, useState, useEffect, useCallback } from 'react';
+function isMutableRef(ref) {
+  return ref != null && ref.hasOwnProperty('current');
+}
 
 /**
  * The `EuiValidatableControl` component should be used in scenarios where
  * we can render the validated `<input>` as its direct child.
- *
- * It flags the underlying control as invalid via `aria-invalid`, which EUI form
- * controls use to render their invalid styling. Note that it intentionally does
- * *not* hook into the native constraint validation API (`setCustomValidity`) -
- * `isInvalid` is a presentational prop, and tying it to native validity would
- * block native form submission and surface a non-localized native error tooltip.
  */
 
 export var EuiValidatableControl = function EuiValidatableControl(_ref) {
   var isInvalid = _ref.isInvalid,
     children = _ref.children;
+  // Note that this must be state and not a ref to cause a rerender/set invalid state on initial mount
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    control = _useState2[0],
+    setControl = _useState2[1];
   var child = Children.only(children);
+  var childRef = child.ref;
+  var replacedRef = useCallback(function (element) {
+    setControl(element);
+
+    // Call the original ref, if any
+    if (typeof childRef === 'function') {
+      childRef(element);
+    } else if (isMutableRef(childRef)) {
+      childRef.current = element;
+    }
+  }, [childRef]);
+  useSetControlValidity({
+    controlEl: control,
+    isInvalid: isInvalid
+  });
   return /*#__PURE__*/cloneElement(child, {
+    ref: replacedRef,
     'aria-invalid': isInvalid || child.props['aria-invalid']
   });
 };
@@ -37,6 +56,10 @@ export var EuiValidatableControl = function EuiValidatableControl(_ref) {
 export var useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
   var isInvalid = _ref2.isInvalid,
     controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
   useEffect(function () {
     if (!controlEl) return;
     if (typeof isInvalid === 'boolean') {
@@ -45,4 +68,22 @@ export var useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
       controlEl.removeAttribute('aria-invalid');
     }
   }, [isInvalid, controlEl]);
+};
+
+/**
+ * Internal `setCustomValidity` helper
+ */
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  useEffect(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
+    if (isInvalid) {
+      controlEl.setCustomValidity('Invalid');
+    } else {
+      controlEl.setCustomValidity('');
+    }
+  }, [isInvalid, controlEl]);
 };

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

@@ -133,7 +133,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputValidityRef = _useState2[0],

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

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldPassword: /*#__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:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
     // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,

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

@@ -17,7 +17,7 @@ var _form = require("../form.styles");
 var euiFieldSearchStyles = exports.euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
+    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
     // 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/form.styles.js

@@ -209,7 +209,7 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:is(:invalid, [aria-invalid='true']) {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
 var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {

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

@@ -18,7 +18,7 @@ var euiSelectStyles = exports.euiSelectStyles = function euiSelectStyles(euiThem
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
+    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
     // 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/text_area/text_area.styles.js

@@ -51,7 +51,7 @@ var euiTextAreaStyles = exports.euiTextAreaStyles = function euiTextAreaStyles(e
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVars = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
+    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
     resize: {
       vertical: _ref4,
       horizontal: _ref3,

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

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEuiValidatableControl = exports.EuiValidatableControl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,22 +15,41 @@ var _react = require("react");
  * Side Public License, v 1.
  */
 
+function isMutableRef(ref) {
+  return ref != null && ref.hasOwnProperty('current');
+}
+
 /**
  * The `EuiValidatableControl` component should be used in scenarios where
  * we can render the validated `<input>` as its direct child.
- *
- * It flags the underlying control as invalid via `aria-invalid`, which EUI form
- * controls use to render their invalid styling. Note that it intentionally does
- * *not* hook into the native constraint validation API (`setCustomValidity`) -
- * `isInvalid` is a presentational prop, and tying it to native validity would
- * block native form submission and surface a non-localized native error tooltip.
  */
 
 var EuiValidatableControl = exports.EuiValidatableControl = function EuiValidatableControl(_ref) {
   var isInvalid = _ref.isInvalid,
     children = _ref.children;
+  // Note that this must be state and not a ref to cause a rerender/set invalid state on initial mount
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    control = _useState2[0],
+    setControl = _useState2[1];
   var child = _react.Children.only(children);
+  var childRef = child.ref;
+  var replacedRef = (0, _react.useCallback)(function (element) {
+    setControl(element);
+
+    // Call the original ref, if any
+    if (typeof childRef === 'function') {
+      childRef(element);
+    } else if (isMutableRef(childRef)) {
+      childRef.current = element;
+    }
+  }, [childRef]);
+  useSetControlValidity({
+    controlEl: control,
+    isInvalid: isInvalid
+  });
   return /*#__PURE__*/(0, _react.cloneElement)(child, {
+    ref: replacedRef,
     'aria-invalid': isInvalid || child.props['aria-invalid']
   });
 };
@@ -42,6 +63,10 @@ var EuiValidatableControl = exports.EuiValidatableControl = function EuiValidata
 var useEuiValidatableControl = exports.useEuiValidatableControl = function useEuiValidatableControl(_ref2) {
   var isInvalid = _ref2.isInvalid,
     controlEl = _ref2.controlEl;
+  useSetControlValidity({
+    controlEl: controlEl,
+    isInvalid: isInvalid
+  });
   (0, _react.useEffect)(function () {
     if (!controlEl) return;
     if (typeof isInvalid === 'boolean') {
@@ -50,4 +75,22 @@ var useEuiValidatableControl = exports.useEuiValidatableControl = function useEu
       controlEl.removeAttribute('aria-invalid');
     }
   }, [isInvalid, controlEl]);
+};
+
+/**
+ * Internal `setCustomValidity` helper
+ */
+var useSetControlValidity = function useSetControlValidity(_ref3) {
+  var controlEl = _ref3.controlEl,
+    isInvalid = _ref3.isInvalid;
+  (0, _react.useEffect)(function () {
+    if (controlEl == null || typeof controlEl.setCustomValidity !== 'function') {
+      return;
+    }
+    if (isInvalid) {
+      controlEl.setCustomValidity('Invalid');
+    } else {
+      controlEl.setCustomValidity('');
+    }
+  }, [isInvalid, controlEl]);
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "116.3.1-snapshot.1782222821728",
+  "version": "116.4.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -274,6 +274,5 @@
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"
-  },
-  "stableVersion": "116.3.1"
+  }
 }

package/test-env/components/date_picker/date_picker.js

@@ -134,7 +134,7 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     fullDateFormat = "".concat(dateFormat, " ").concat(timeFormat);
   }
 
-  // Set an internal ref on ReactDatePicker's `input` so we can set its `aria-invalid` state via useEuiValidatableControl
+  // Set an internal ref on ReactDatePicker's `input` so we can set its :invalid state via useEuiValidatableControl
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     inputValidityRef = _useState2[0],

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

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldPassword: /*#__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:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
     // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,

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

@@ -17,7 +17,7 @@ var _form = require("../form.styles");
 var euiFieldSearchStyles = exports.euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
+    euiFieldSearch: /*#__PURE__*/(0, _react.css)("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
     // 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/test-env/components/form/form.styles.js

@@ -209,7 +209,7 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:is(:invalid, [aria-invalid='true']) {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
 var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {

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

@@ -18,7 +18,7 @@ var euiSelectStyles = exports.euiSelectStyles = function euiSelectStyles(euiThem
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
+    euiSelect: /*#__PURE__*/(0, _react.css)("appearance:none;", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiSelect;"),
     // 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/test-env/components/form/text_area/text_area.styles.js

@@ -51,7 +51,7 @@ var euiTextAreaStyles = exports.euiTextAreaStyles = function euiTextAreaStyles(e
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVars = (0, _form.euiFormVariables)(euiThemeContext);
   return {
-    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
+    euiTextArea: /*#__PURE__*/(0, _react.css)(formStyles.shared, "line-height:", euiTheme.font.lineHeightMultiplier, ";/* <textarea>s default to 'inline-block', which causes an extra 2-3px of\n       * unnecessary height within its parent 'block' form control wrapper.\n       * @see https://stackoverflow.com/a/27536461/4294462 */display:block;&:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiTextArea;"),
     resize: {
       vertical: _ref4,
       horizontal: _ref3,