@ariakit/react-core/cjs/form/form.cjs

Ariakit React core

"use strict";Object.defineProperty(exports, "__esModule", {value: true});


var _52OIQPAOcjs = require('../__chunks/52OIQPAO.cjs');
require('../__chunks/6HKL3JR2.cjs');




var _WULEED4Qcjs = require('../__chunks/WULEED4Q.cjs');







var _OZM4QA2Vcjs = require('../__chunks/OZM4QA2V.cjs');
require('../__chunks/FDRJDQ5Y.cjs');




var _7EQBAZ46cjs = require('../__chunks/7EQBAZ46.cjs');

// src/form/form.tsx
var _dom = require('@ariakit/core/utils/dom');
var _misc = require('@ariakit/core/utils/misc');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var TagName = "form";
function isField(element, items) {
  return items.some(
    (item) => item.type === "field" && item.element === element
  );
}
function getFirstInvalidField(items) {
  return items.find(
    (item) => {
      var _a;
      return item.type === "field" && ((_a = item.element) == null ? void 0 : _a.getAttribute("aria-invalid")) === "true";
    }
  );
}
var useForm = _WULEED4Qcjs.createHook.call(void 0, function useForm2(_a) {
  var _b = _a, {
    store,
    validateOnChange = true,
    validateOnBlur = true,
    resetOnUnmount = false,
    resetOnSubmit = true,
    autoFocusOnSubmit = true
  } = _b, props = _7EQBAZ46cjs.__objRest.call(void 0, _b, [
    "store",
    "validateOnChange",
    "validateOnBlur",
    "resetOnUnmount",
    "resetOnSubmit",
    "autoFocusOnSubmit"
  ]);
  const context = _52OIQPAOcjs.useFormContext.call(void 0, );
  store = store || context;
  _misc.invariant.call(void 0, 
    store,
    process.env.NODE_ENV !== "production" && "Form must receive a `store` prop or be wrapped in a FormProvider component."
  );
  const ref = _react.useRef.call(void 0, null);
  const values = store.useState("values");
  const submitSucceed = store.useState("submitSucceed");
  const submitFailed = store.useState("submitFailed");
  const items = store.useState("items");
  const defaultValues = _OZM4QA2Vcjs.useInitialValue.call(void 0, values);
  _react.useEffect.call(void 0, 
    () => resetOnUnmount ? store == null ? void 0 : store.reset : void 0,
    [resetOnUnmount, store]
  );
  _OZM4QA2Vcjs.useUpdateEffect.call(void 0, () => {
    if (!validateOnChange) return;
    if (values === defaultValues) return;
    store == null ? void 0 : store.validate();
  }, [validateOnChange, values, defaultValues, store]);
  _react.useEffect.call(void 0, () => {
    if (!resetOnSubmit) return;
    if (!submitSucceed) return;
    store == null ? void 0 : store.reset();
  }, [resetOnSubmit, submitSucceed, store]);
  const [shouldFocusOnSubmit, setShouldFocusOnSubmit] = _react.useState.call(void 0, false);
  _react.useEffect.call(void 0, () => {
    if (!shouldFocusOnSubmit) return;
    if (!submitFailed) return;
    const field = getFirstInvalidField(items);
    const element = field == null ? void 0 : field.element;
    if (!element) return;
    setShouldFocusOnSubmit(false);
    element.focus();
    if (_dom.isTextField.call(void 0, element)) {
      element.select();
    }
  }, [autoFocusOnSubmit, submitFailed, items]);
  const onSubmitProp = props.onSubmit;
  const onSubmit = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
    onSubmitProp == null ? void 0 : onSubmitProp(event);
    if (event.defaultPrevented) return;
    event.preventDefault();
    store == null ? void 0 : store.submit();
    if (!autoFocusOnSubmit) return;
    setShouldFocusOnSubmit(true);
  });
  const onBlurProp = props.onBlur;
  const onBlur = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
    onBlurProp == null ? void 0 : onBlurProp(event);
    if (event.defaultPrevented) return;
    if (!validateOnBlur) return;
    if (!store) return;
    if (!isField(event.target, store.getState().items)) return;
    store.validate();
  });
  const onResetProp = props.onReset;
  const onReset = _OZM4QA2Vcjs.useEvent.call(void 0, (event) => {
    onResetProp == null ? void 0 : onResetProp(event);
    if (event.defaultPrevented) return;
    event.preventDefault();
    store == null ? void 0 : store.reset();
  });
  props = _OZM4QA2Vcjs.useWrapElement.call(void 0, 
    props,
    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _52OIQPAOcjs.FormScopedContextProvider, { value: store, children: element }),
    [store]
  );
  const tagName = _OZM4QA2Vcjs.useTagName.call(void 0, ref, TagName);
  props = _7EQBAZ46cjs.__spreadProps.call(void 0, _7EQBAZ46cjs.__spreadValues.call(void 0, {
    role: tagName !== "form" ? "form" : void 0,
    noValidate: true
  }, props), {
    ref: _OZM4QA2Vcjs.useMergeRefs.call(void 0, ref, props.ref),
    onSubmit,
    onBlur,
    onReset
  });
  return props;
});
var Form = _WULEED4Qcjs.forwardRef.call(void 0, function Form2(props) {
  const htmlProps = useForm(props);
  return _WULEED4Qcjs.createElement.call(void 0, TagName, htmlProps);
});



exports.Form = Form; exports.useForm = useForm;