@base-ui-components/react/esm/form/Form.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

'use client';

import * as React from 'react';
import { useStableCallback } from '@base-ui-components/utils/useStableCallback';
import { createGenericEventDetails } from "../utils/createBaseUIEventDetails.js";
import { REASONS } from "../utils/reasons.js";
import { FormContext } from "./FormContext.js";
import { useRenderElement } from "../utils/useRenderElement.js";
import { EMPTY_OBJECT } from "../utils/constants.js";
import { useValueChanged } from "../utils/useValueChanged.js";

/**
 * A native form element with consolidated error handling.
 * Renders a `<form>` element.
 *
 * Documentation: [Base UI Form](https://base-ui.com/react/components/form)
 */
import { jsx as _jsx } from "react/jsx-runtime";
export const Form = /*#__PURE__*/React.forwardRef(function Form(componentProps, forwardedRef) {
  const {
    render,
    className,
    validationMode = 'onSubmit',
    errors: externalErrors,
    onSubmit,
    onFormSubmit,
    ...elementProps
  } = componentProps;
  const formRef = React.useRef({
    fields: new Map()
  });
  const submittedRef = React.useRef(false);
  const submitAttemptedRef = React.useRef(false);
  const focusControl = useStableCallback(control => {
    if (!control) {
      return;
    }
    control.focus();
    if (control.tagName === 'INPUT') {
      control.select();
    }
  });
  const [errors, setErrors] = React.useState(externalErrors);
  useValueChanged(externalErrors, () => {
    setErrors(externalErrors);
  });
  React.useEffect(() => {
    if (!submittedRef.current) {
      return;
    }
    submittedRef.current = false;
    const invalidFields = Array.from(formRef.current.fields.values()).filter(field => field.validityData.state.valid === false);
    if (invalidFields.length) {
      focusControl(invalidFields[0].controlRef.current);
    }
  }, [errors, focusControl]);
  const element = useRenderElement('form', componentProps, {
    ref: forwardedRef,
    props: [{
      noValidate: true,
      onSubmit(event) {
        submitAttemptedRef.current = true;
        let values = Array.from(formRef.current.fields.values());

        // Async validation isn't supported to stop the submit event.
        values.forEach(field => {
          field.validate();
        });
        values = Array.from(formRef.current.fields.values());
        const invalidFields = values.filter(field => !field.validityData.state.valid);
        if (invalidFields.length) {
          event.preventDefault();
          focusControl(invalidFields[0].controlRef.current);
        } else {
          submittedRef.current = true;
          onSubmit?.(event);
          if (onFormSubmit) {
            event.preventDefault();
            const formValues = values.reduce((acc, field) => {
              if (field.name) {
                acc[field.name] = field.getValue();
              }
              return acc;
            }, {});
            onFormSubmit(formValues, createGenericEventDetails(REASONS.none, event.nativeEvent));
          }
        }
      }
    }, elementProps]
  });
  const clearErrors = useStableCallback(name => {
    if (name && errors && EMPTY_OBJECT.hasOwnProperty.call(errors, name)) {
      const nextErrors = {
        ...errors
      };
      delete nextErrors[name];
      setErrors(nextErrors);
    }
  });
  const contextValue = React.useMemo(() => ({
    formRef,
    validationMode,
    errors: errors ?? EMPTY_OBJECT,
    clearErrors,
    submitAttemptedRef
  }), [formRef, validationMode, errors, clearErrors]);
  return /*#__PURE__*/_jsx(FormContext.Provider, {
    value: contextValue,
    children: element
  });
});
if (process.env.NODE_ENV !== "production") Form.displayName = "Form";