@conform-to/react/dist/hooks.js

Conform view adapter for react

'use strict';

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

var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
var react = require('react');
var context = require('./context.js');

var _excluded = ["id"];

/**
 * useLayoutEffect is client-only.
 * This basically makes it a no-op on server
 */
var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
function useFormId(preferredId) {
  var id = react.useId();
  return preferredId !== null && preferredId !== void 0 ? preferredId : id;
}
function useNoValidate() {
  var defaultNoValidate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
  var [noValidate, setNoValidate] = react.useState(defaultNoValidate);
  useSafeLayoutEffect(() => {
    // This is necessary to fix an issue in strict mode with related to our proxy setup
    // It avoids the component from being rerendered without re-rendering the child
    // Which reset the proxy but failed to capture its usage within child component
    if (!noValidate) {
      setNoValidate(true);
    }
  }, [noValidate]);
  return noValidate;
}
function useForm(options) {
  var {
      id
    } = options,
    formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
  var formId = useFormId(id);
  var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
    formId
  })));
  useSafeLayoutEffect(() => {
    var disconnect = context$1.observe();
    document.addEventListener('input', context$1.onInput);
    document.addEventListener('focusout', context$1.onBlur);
    document.addEventListener('reset', context$1.onReset);
    return () => {
      disconnect();
      document.removeEventListener('input', context$1.onInput);
      document.removeEventListener('focusout', context$1.onBlur);
      document.removeEventListener('reset', context$1.onReset);
    };
  }, [context$1]);
  useSafeLayoutEffect(() => {
    context$1.onUpdate(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
      formId
    }));
  });
  var subjectRef = context.useSubjectRef({
    pendingIntents: true
  });
  var stateSnapshot = context.useFormState(context$1, subjectRef);
  var noValidate = useNoValidate(options.defaultNoValidate);
  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
  react.useEffect(() => {
    context$1.runSideEffect(stateSnapshot.pendingIntents);
  }, [context$1, stateSnapshot.pendingIntents]);
  return [form, form.getFieldset()];
}
function useFormMetadata(formId) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var subjectRef = context.useSubjectRef();
  var context$1 = context.useFormContext(formId);
  var stateSnapshot = context.useFormState(context$1, subjectRef);
  var noValidate = useNoValidate(options.defaultNoValidate);
  return context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
}
function useField(name) {
  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var subjectRef = context.useSubjectRef();
  var context$1 = context.useFormContext(options.formId);
  var stateSnapshot = context.useFormState(context$1, subjectRef);
  var field = context.getFieldMetadata(context$1, subjectRef, stateSnapshot, name);
  var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, false);
  return [field, form];
}

exports.useField = useField;
exports.useForm = useForm;
exports.useFormId = useFormId;
exports.useFormMetadata = useFormMetadata;
exports.useNoValidate = useNoValidate;
exports.useSafeLayoutEffect = useSafeLayoutEffect;