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

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.cjs");
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";
var className = "components-validated-control";
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();
    const suppressNativePopover = (event) => {
      event.preventDefault();
      const target = event.target;
      const firstErrorInForm = Array.from(target.form?.elements ?? []).find((el) => !el.validity.valid);
      if (!target.form || firstErrorInForm === target) {
        target.focus();
      }
    };
    const radioSibilings = validityTarget?.type === "radio" && validityTarget?.name ? Array.from(validityTarget?.closest(`.${className}`)?.querySelectorAll(`input[type="radio"][name="${validityTarget?.name}"]`) ?? []).filter((sibling) => sibling !== validityTarget) : [];
    validityTarget?.addEventListener("invalid", suppressNativePopover);
    radioSibilings.forEach((sibling) => sibling.addEventListener("invalid", suppressNativePopover));
    return () => {
      validityTarget?.removeEventListener("invalid", suppressNativePopover);
      radioSibilings.forEach((sibling) => sibling.removeEventListener("invalid", suppressNativePopover));
    };
  }, [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": {
        validityTarget?.setCustomValidity(customValidity.message ?? "");
        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 messageId = (0, import_element.useId)();
  const message = (() => {
    if (errorMessage) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
        id: messageId,
        type: "invalid",
        message: errorMessage
      });
    }
    if (statusMessage?.type) {
      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
        id: messageId,
        type: statusMessage.type,
        message: statusMessage.message
      });
    }
    return null;
  })();
  const visibleMessage = showMessage ? message : null;
  (0, import_element.useEffect)(() => {
    const target = getValidityTarget();
    if (!target) {
      return;
    }
    function setDescribedBy(el, shouldAdd) {
      const ids = (el.getAttribute("aria-describedby") ?? "").split(" ").filter((id) => id && id !== messageId);
      if (shouldAdd) {
        ids.push(messageId);
      }
      if (ids.length) {
        el.setAttribute("aria-describedby", ids.join(" "));
      } else {
        el.removeAttribute("aria-describedby");
      }
    }
    setDescribedBy(target, !!visibleMessage);
    return () => setDescribedBy(target, false);
  }, [visibleMessage, messageId, getValidityTarget]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
    className,
    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: visibleMessage
    })]
  });
}
var ControlWithError = (0, import_element.forwardRef)(UnforwardedControlWithError);
ControlWithError.displayName = "ControlWithError";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ControlWithError
});
//# sourceMappingURL=control-with-error.cjs.map