@conform-to/dom/dom.js

A set of opinionated helpers built on top of the Constraint Validation API

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var util = require('./util.js');

/**
 * Element that user can interact with,
 * includes `<input>`, `<select>` and `<textarea>`.
 */

/**
 * HTML Element that can be used as a form control,
 * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
 */

/**
 * Form Control element. It can either be a submit button or a submit input.
 */

/**
 * A type guard to check if the provided element is a form control
 */
function isFormControl(element) {
  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
}

/**
 * A type guard to check if the provided element is a field element, which
 * is a form control excluding submit, button and reset type.
 */
function isFieldElement(element) {
  return isFormControl(element) && element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
}

/**
 * Resolves the action from the submit event
 * with respect to the submitter `formaction` attribute.
 */
function getFormAction(event) {
  var _ref, _submitter$getAttribu;
  var form = event.target;
  var submitter = event.submitter;
  return (_ref = (_submitter$getAttribu = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formaction')) !== null && _submitter$getAttribu !== void 0 ? _submitter$getAttribu : form.getAttribute('action')) !== null && _ref !== void 0 ? _ref : "".concat(location.pathname).concat(location.search);
}

/**
 * Resolves the encoding type from the submit event
 * with respect to the submitter `formenctype` attribute.
 */
function getFormEncType(event) {
  var _submitter$getAttribu2;
  var form = event.target;
  var submitter = event.submitter;
  var encType = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.enctype;
  if (encType === 'multipart/form-data') {
    return encType;
  }
  return 'application/x-www-form-urlencoded';
}

/**
 * Resolves the method from the submit event
 * with respect to the submitter `formmethod` attribute.
 */
function getFormMethod(event) {
  var _ref2, _submitter$getAttribu3;
  var form = event.target;
  var submitter = event.submitter;
  var method = (_ref2 = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.getAttribute('method')) === null || _ref2 === void 0 ? void 0 : _ref2.toUpperCase();
  switch (method) {
    case 'POST':
    case 'PUT':
    case 'PATCH':
    case 'DELETE':
      return method;
  }
  return 'GET';
}

/**
 * Trigger a form submit event with an optional submitter.
 * If the submitter is not mounted, it will be appended to the form and removed after submission.
 */
function requestSubmit(form, submitter) {
  util.invariant(!!form, 'Failed to submit the form. The element provided is null or undefined.');
  if (typeof form.requestSubmit === 'function') {
    form.requestSubmit(submitter);
  } else {
    var event = new SubmitEvent('submit', {
      bubbles: true,
      cancelable: true,
      submitter
    });
    form.dispatchEvent(event);
  }
}

exports.getFormAction = getFormAction;
exports.getFormEncType = getFormEncType;
exports.getFormMethod = getFormMethod;
exports.isFieldElement = isFieldElement;
exports.isFormControl = isFormControl;
exports.requestSubmit = requestSubmit;