@elastic/eui 116.3.1-snapshot.1782222821728 → 116.4.0

package/test-env/components/form/validatable_control/validatable_control.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEuiValidatableControl = exports.EuiValidatableControl = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 /*
@@ -15,22 +16,41 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * 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']
   });
 };
@@ -53,6 +73,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 +85,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]);
 };