@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_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_element = require("@wordpress/element");
var import_with_ignore_ime_events = require("../utils/with-ignore-ime-events");
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;
}
function UnforwardedControlWithError({
  required,
  markWhenOptional,
  onValidate,
  customValidity,
  getValidityTarget,
  children
}, forwardedRef) {
  const [errorMessage, setErrorMessage] = (0, import_element.useState)();
  const [statusMessage, setStatusMessage] = (0, import_element.useState)();
  const [isTouched, setIsTouched] = (0, import_element.useState)(false);
  const previousCustomValidityType = (0, import_compose.usePrevious)(customValidity?.type);
  (0, import_element.useEffect)(() => {
    const validityTarget = getValidityTarget();
    const showValidationMessage = () => setErrorMessage(validityTarget?.validationMessage);
    validityTarget?.addEventListener("invalid", showValidationMessage);
    return () => {
      validityTarget?.removeEventListener("invalid", showValidationMessage);
    };
  });
  (0, import_element.useEffect)(() => {
    if (!isTouched) {
      return;
    }
    const validityTarget = getValidityTarget();
    if (!customValidity?.type) {
      validityTarget?.setCustomValidity("");
      setErrorMessage(validityTarget?.validationMessage);
      setStatusMessage(void 0);
      return;
    }
    switch (customValidity.type) {
      case "validating": {
        const timer = setTimeout(() => {
          validityTarget?.setCustomValidity("");
          setErrorMessage(void 0);
          setStatusMessage({
            type: "validating",
            message: customValidity.message
          });
        }, 1e3);
        return () => clearTimeout(timer);
      }
      case "valid": {
        if (previousCustomValidityType === "valid") {
          break;
        }
        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;
      }
    }
  }, [isTouched, customValidity?.type, customValidity?.message, getValidityTarget, previousCustomValidityType]);
  const onBlur = (event) => {
    if (isTouched) {
      return;
    }
    if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) {
      setIsTouched(true);
      onValidate?.();
    }
  };
  const onChange = (...args) => {
    children.props.onChange?.(...args);
    if (isTouched || errorMessage) {
      onValidate?.();
    }
  };
  const onKeyDown = (event) => {
    if (event.key === "Enter") {
      onValidate?.();
    }
  };
  return (
    // Disable reason: Just listening to a bubbled event, not for interaction.
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
      className: "components-validated-control",
      ref: forwardedRef,
      onBlur,
      onKeyDown: (0, import_with_ignore_ime_events.withIgnoreIMEEvents)(onKeyDown),
      children: [(0, import_element.cloneElement)(children, {
        label: appendRequiredIndicator(children.props.label, required, markWhenOptional),
        onChange,
        required
      }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
        "aria-live": "polite",
        children: [errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
          type: "invalid",
          message: errorMessage
        }), !errorMessage && statusMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_validity_indicator.ValidityIndicator, {
          type: statusMessage.type,
          message: statusMessage.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