@wordpress/components/build/validated-form-controls/control-with-error.js

UI components for WordPress.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// packages/components/src/validated-form-controls/control-with-error.tsx
var control_with_error_exports = {};
__export(control_with_error_exports, {
  ControlWithError: () => ControlWithError
});
module.exports = __toCommonJS(control_with_error_exports);
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_validity_indicator = require("./validity-indicator");
var import_jsx_runtime = require("react/jsx-runtime");
function appendRequiredIndicator(label, required, markWhenOptional) {
  if (required && !markWhenOptional) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
      children: [label, " ", `(${(0, import_i18n.__)("Required")})`]
    });
  }
  if (!required && markWhenOptional) {
    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
      children: [label, " ", `(${(0, import_i18n.__)("Optional")})`]
    });
  }
  return label;
}
var VALIDITY_VISIBLE_ATTRIBUTE = "data-validity-visible";
function UnforwardedControlWithError({
  required,
  markWhenOptional,
  customValidity,
  getValidityTarget,
  children
}, forwardedRef) {
  const [errorMessage, setErrorMessage] = (0, import_element.useState)();
  const [statusMessage, setStatusMessage] = (0, import_element.useState)();
  const [showMessage, setShowMessage] = (0, import_element.useState)(false);
  const [isTouched, setIsTouched] = (0, import_element.useState)(false);
  (0, import_element.useEffect)(() => {
    const validityTarget = getValidityTarget();
    const handler = () => {
      setShowMessage(true);
      validityTarget?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    };
    validityTarget?.addEventListener("invalid", handler);
    return () => validityTarget?.removeEventListener("invalid", handler);
  }, [getValidityTarget]);
  (0, import_element.useEffect)(() => {
    const validityTarget = getValidityTarget();
    if (!customValidity?.type) {
      validityTarget?.setCustomValidity("");
      setErrorMessage(validityTarget?.validationMessage);
      setStatusMessage(void 0);
      return;
    }
    switch (customValidity.type) {
      case "validating": {
        validityTarget?.setCustomValidity("");
        setErrorMessage(void 0);
        setStatusMessage({
          type: "validating",
          message: customValidity.message
        });
        break;
      }
      case "valid": {
        validityTarget?.setCustomValidity("");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage({
          type: "valid",
          message: customValidity.message
        });
        break;
      }
      case "invalid": {
        var _customValidity$messa;
        validityTarget?.setCustomValidity((_customValidity$messa = customValidity.message) !== null && _customValidity$messa !== void 0 ? _customValidity$messa : "");
        setErrorMessage(validityTarget?.validationMessage);
        setStatusMessage(void 0);
        break;
      }
    }
  }, [customValidity, getValidityTarget]);
  (0, import_element.useEffect)(() => {
    if (!isTouched || showMessage) {
      return;
    }
    if (customValidity?.type === "validating") {
      const timer = setTimeout(() => {
        setShowMessage(true);
      }, 1e3);
      return () => clearTimeout(timer);
    }
    setShowMessage(true);
  }, [isTouched, customValidity?.type, showMessage]);
  const onBlur = (event) => {
    if (isTouched) {
      return;
    }
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      setIsTouched(true);
      getValidityTarget()?.setAttribute(VALIDITY_VISIBLE_ATTRIBUTE, "");
    }
  };
  const message = () => {
    if (errorMessage) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
        type: "invalid",
        message: errorMessage
      });
    }
    if (statusMessage?.type) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
        type: statusMessage.type,
        message: statusMessage.message
      });
    }
    return null;
  };
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
    className: "components-validated-control",
    ref: forwardedRef,
    onBlur,
    children: [(0, import_element.cloneElement)(children, {
      label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
      required
    }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
      "aria-live": "polite",
      children: showMessage && message()
    })]
  });
}
var ControlWithError = (0, import_element.forwardRef)(UnforwardedControlWithError);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ControlWithError
});
//# sourceMappingURL=control-with-error.js.map