@conform-to/react 0.9.0 → 1.0.0-pre.0

package/index.d.ts

@@ -1,3 +1,6 @@
-export { type FieldsetConstraint, type Submission, parse, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
-export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, } from './hooks.js';
-export * as conform from './helpers.js';
+export { type Submission, type FieldName, requestIntent, isFieldElement, } from '@conform-to/dom';
+export { type Field, type FieldMetadata as FieldConfig, FormProvider, FormStateInput, } from './context';
+export { useForm, useFormMetadata, useFieldset, useFieldList, useField, } from './hooks';
+export { useInputEvent } from './integrations';
+export * as conform from './helpers';
+export * as intent from './intent';

package/index.js

@@ -3,8 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var dom = require('@conform-to/dom');
+var context = require('./context.js');
 var hooks = require('./hooks.js');
+var integrations = require('./integrations.js');
 var helpers = require('./helpers.js');
+var intent = require('./intent.js');
 
 
 
@@ -12,25 +15,17 @@ Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
 	get: function () { return dom.isFieldElement; }
 });
-Object.defineProperty(exports, 'list', {
-	enumerable: true,
-	get: function () { return dom.list; }
-});
-Object.defineProperty(exports, 'parse', {
-	enumerable: true,
-	get: function () { return dom.parse; }
-});
 Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
 	get: function () { return dom.requestIntent; }
 });
-Object.defineProperty(exports, 'validate', {
-	enumerable: true,
-	get: function () { return dom.validate; }
-});
+exports.FormProvider = context.FormProvider;
+exports.FormStateInput = context.FormStateInput;
+exports.useField = hooks.useField;
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;
-exports.useInputEvent = hooks.useInputEvent;
-exports.validateConstraint = hooks.validateConstraint;
+exports.useFormMetadata = hooks.useFormMetadata;
+exports.useInputEvent = integrations.useInputEvent;
 exports.conform = helpers;
+exports.intent = intent;

package/index.mjs

@@ -1,4 +1,8 @@
-export { isFieldElement, list, parse, requestIntent, validate } from '@conform-to/dom';
-export { useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.mjs';
+export { isFieldElement, requestIntent } from '@conform-to/dom';
+export { FormProvider, FormStateInput } from './context.mjs';
+export { useField, useFieldList, useFieldset, useForm, useFormMetadata } from './hooks.mjs';
+export { useInputEvent } from './integrations.mjs';
 import * as helpers from './helpers.mjs';
 export { helpers as conform };
+import * as intent from './intent.mjs';
+export { intent };

package/integrations.d.ts

@@ -0,0 +1,23 @@
+import { type FieldElement } from '@conform-to/dom';
+import { type RefObject } from 'react';
+export type InputControl = {
+    change: (eventOrValue: {
+        target: {
+            value: string;
+        };
+    } | string | boolean) => void;
+    focus: () => void;
+    blur: () => void;
+};
+/**
+ * Returns a ref object and a set of helpers that dispatch corresponding dom event.
+ *
+ * @see https://conform.guide/api/react#useinputevent
+ */
+export declare function useInputEvent(options: {
+    ref: RefObject<FieldElement> | (() => Element | RadioNodeList | FieldElement | null | undefined);
+    onInput?: (event: Event) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onReset?: (event: Event) => void;
+}): InputControl;

package/integrations.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+var react = require('react');
+var hooks = require('./hooks.js');
+
+/**
+ * Returns a ref object and a set of helpers that dispatch corresponding dom event.
+ *
+ * @see https://conform.guide/api/react#useinputevent
+ */
+function useInputEvent(options) {
+  var optionsRef = react.useRef(options);
+  var eventDispatched = react.useRef({
+    onInput: false,
+    onFocus: false,
+    onBlur: false
+  });
+  hooks.useSafeLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  hooks.useSafeLayoutEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        var _optionsRef$current, _optionsRef$current2, _optionsRef$current3;
+        var element = typeof ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.ref) === 'function' ? (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.ref() : (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.ref.current;
+        if (dom.isFieldElement(element) && (listener === 'onReset' ? event.target === element.form : event.target === element)) {
+          var _optionsRef$current4, _optionsRef$current4$;
+          if (listener !== 'onReset') {
+            eventDispatched.current[listener] = true;
+          }
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+        }
+      };
+    };
+    var inputHandler = createEventListener('onInput');
+    var focusHandler = createEventListener('onFocus');
+    var blurHandler = createEventListener('onBlur');
+    var resetHandler = createEventListener('onReset');
+
+    // focus/blur event does not bubble
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focus', focusHandler, true);
+    document.addEventListener('blur', blurHandler, true);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focus', focusHandler, true);
+      document.removeEventListener('blur', blurHandler, true);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
+  var control = react.useMemo(() => {
+    var dispatch = (listener, fn) => {
+      if (!eventDispatched.current[listener]) {
+        var _optionsRef$current5, _optionsRef$current6, _optionsRef$current7;
+        var _element = typeof ((_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.ref) === 'function' ? (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 ? void 0 : _optionsRef$current6.ref() : (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.ref.current;
+        if (!dom.isFieldElement(_element)) {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to dispatch event; is the input mounted?');
+          return;
+        }
+
+        // To avoid recursion
+        eventDispatched.current[listener] = true;
+        fn(_element);
+      }
+      eventDispatched.current[listener] = false;
+    };
+    return {
+      change(eventOrValue) {
+        dispatch('onInput', element => {
+          if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+            if (typeof eventOrValue !== 'boolean') {
+              throw new Error('You should pass a boolean when changing a checkbox or radio input');
+            }
+            element.checked = eventOrValue;
+          } else {
+            if (typeof eventOrValue === 'boolean') {
+              throw new Error('You can pass a boolean only when changing a checkbox or radio input');
+            }
+            var value = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+
+            // No change event will triggered on React if `element.value` is updated
+            // before dispatching the event
+            if (element.value !== value) {
+              /**
+               * Triggering react custom change event
+               * Solution based on dom-testing-library
+               * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+               * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+               */
+              var {
+                set: valueSetter
+              } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+              var prototype = Object.getPrototypeOf(element);
+              var {
+                set: prototypeValueSetter
+              } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+              if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+                prototypeValueSetter.call(element, value);
+              } else {
+                if (valueSetter) {
+                  valueSetter.call(element, value);
+                } else {
+                  throw new Error('The given element does not have a value setter');
+                }
+              }
+            }
+          }
+
+          // Dispatch input event with the updated input value
+          element.dispatchEvent(new InputEvent('input', {
+            bubbles: true
+          }));
+          // Dispatch change event (necessary for select to update the selected option)
+          element.dispatchEvent(new Event('change', {
+            bubbles: true
+          }));
+        });
+      },
+      focus() {
+        dispatch('onFocus', element => {
+          element.dispatchEvent(new FocusEvent('focusin', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('focus'));
+        });
+      },
+      blur() {
+        dispatch('onBlur', element => {
+          element.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('blur'));
+        });
+      }
+    };
+  }, [optionsRef]);
+  return control;
+}
+
+exports.useInputEvent = useInputEvent;

package/integrations.mjs

@@ -0,0 +1,141 @@
+import { isFieldElement } from '@conform-to/dom';
+import { useRef, useMemo } from 'react';
+import { useSafeLayoutEffect } from './hooks.mjs';
+
+/**
+ * Returns a ref object and a set of helpers that dispatch corresponding dom event.
+ *
+ * @see https://conform.guide/api/react#useinputevent
+ */
+function useInputEvent(options) {
+  var optionsRef = useRef(options);
+  var eventDispatched = useRef({
+    onInput: false,
+    onFocus: false,
+    onBlur: false
+  });
+  useSafeLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  useSafeLayoutEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        var _optionsRef$current, _optionsRef$current2, _optionsRef$current3;
+        var element = typeof ((_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : _optionsRef$current.ref) === 'function' ? (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : _optionsRef$current2.ref() : (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : _optionsRef$current3.ref.current;
+        if (isFieldElement(element) && (listener === 'onReset' ? event.target === element.form : event.target === element)) {
+          var _optionsRef$current4, _optionsRef$current4$;
+          if (listener !== 'onReset') {
+            eventDispatched.current[listener] = true;
+          }
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+        }
+      };
+    };
+    var inputHandler = createEventListener('onInput');
+    var focusHandler = createEventListener('onFocus');
+    var blurHandler = createEventListener('onBlur');
+    var resetHandler = createEventListener('onReset');
+
+    // focus/blur event does not bubble
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focus', focusHandler, true);
+    document.addEventListener('blur', blurHandler, true);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focus', focusHandler, true);
+      document.removeEventListener('blur', blurHandler, true);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
+  var control = useMemo(() => {
+    var dispatch = (listener, fn) => {
+      if (!eventDispatched.current[listener]) {
+        var _optionsRef$current5, _optionsRef$current6, _optionsRef$current7;
+        var _element = typeof ((_optionsRef$current5 = optionsRef.current) === null || _optionsRef$current5 === void 0 ? void 0 : _optionsRef$current5.ref) === 'function' ? (_optionsRef$current6 = optionsRef.current) === null || _optionsRef$current6 === void 0 ? void 0 : _optionsRef$current6.ref() : (_optionsRef$current7 = optionsRef.current) === null || _optionsRef$current7 === void 0 ? void 0 : _optionsRef$current7.ref.current;
+        if (!isFieldElement(_element)) {
+          // eslint-disable-next-line no-console
+          console.warn('Failed to dispatch event; is the input mounted?');
+          return;
+        }
+
+        // To avoid recursion
+        eventDispatched.current[listener] = true;
+        fn(_element);
+      }
+      eventDispatched.current[listener] = false;
+    };
+    return {
+      change(eventOrValue) {
+        dispatch('onInput', element => {
+          if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
+            if (typeof eventOrValue !== 'boolean') {
+              throw new Error('You should pass a boolean when changing a checkbox or radio input');
+            }
+            element.checked = eventOrValue;
+          } else {
+            if (typeof eventOrValue === 'boolean') {
+              throw new Error('You can pass a boolean only when changing a checkbox or radio input');
+            }
+            var value = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+
+            // No change event will triggered on React if `element.value` is updated
+            // before dispatching the event
+            if (element.value !== value) {
+              /**
+               * Triggering react custom change event
+               * Solution based on dom-testing-library
+               * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+               * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+               */
+              var {
+                set: valueSetter
+              } = Object.getOwnPropertyDescriptor(element, 'value') || {};
+              var prototype = Object.getPrototypeOf(element);
+              var {
+                set: prototypeValueSetter
+              } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+              if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+                prototypeValueSetter.call(element, value);
+              } else {
+                if (valueSetter) {
+                  valueSetter.call(element, value);
+                } else {
+                  throw new Error('The given element does not have a value setter');
+                }
+              }
+            }
+          }
+
+          // Dispatch input event with the updated input value
+          element.dispatchEvent(new InputEvent('input', {
+            bubbles: true
+          }));
+          // Dispatch change event (necessary for select to update the selected option)
+          element.dispatchEvent(new Event('change', {
+            bubbles: true
+          }));
+        });
+      },
+      focus() {
+        dispatch('onFocus', element => {
+          element.dispatchEvent(new FocusEvent('focusin', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('focus'));
+        });
+      },
+      blur() {
+        dispatch('onBlur', element => {
+          element.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true
+          }));
+          element.dispatchEvent(new FocusEvent('blur'));
+        });
+      }
+    };
+  }, [optionsRef]);
+  return control;
+}
+
+export { useInputEvent };

package/intent.d.ts

@@ -0,0 +1,38 @@
+import { type ListIntentPayload } from '@conform-to/dom';
+import type { Field, Pretty } from './context';
+declare function createIntentButtonProps(value: string, form?: string): {
+    name: string;
+    value: string;
+    form: string | undefined;
+    formNoValidate: boolean;
+};
+export declare function validate(field: Field<unknown>): {
+    name: string;
+    value: string;
+    form: string | undefined;
+    formNoValidate: boolean;
+};
+type ExtractListIntentPayload<Operation, Schema = unknown> = Pretty<Omit<Extract<ListIntentPayload<Schema>, {
+    operation: Operation;
+}>, 'name' | 'operation'>>;
+type ListIntent<Operation> = {} extends ExtractListIntentPayload<Operation> ? <Item>(name: Field<Array<Item>>, payload?: ExtractListIntentPayload<Operation, Item>) => ReturnType<typeof createIntentButtonProps> : <Item>(field: Field<Array<Item>>, payload: ExtractListIntentPayload<Operation, Item>) => ReturnType<typeof createIntentButtonProps>;
+/**
+ * Helpers to configure an intent button for modifying a list
+ *
+ * @see https://conform.guide/api/react#list
+ */
+export declare const list: {
+    /**
+     * @deprecated You can use `insert` without specifying an index instead
+     */
+    append: ListIntent<'append'>;
+    /**
+     * @deprecated You can use `insert` with zero index instead
+     */
+    prepend: ListIntent<'prepend'>;
+    insert: ListIntent<'insert'>;
+    replace: ListIntent<'replace'>;
+    remove: ListIntent<'remove'>;
+    reorder: ListIntent<'reorder'>;
+};
+export {};

package/intent.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var dom = require('@conform-to/dom');
+
+function createIntentButtonProps(value, form) {
+  return {
+    name: dom.INTENT,
+    value,
+    form,
+    formNoValidate: true
+  };
+}
+function validate(field) {
+  return createIntentButtonProps(dom.validate.serialize(field.name), field.formId);
+}
+/**
+ * Helpers to configure an intent button for modifying a list
+ *
+ * @see https://conform.guide/api/react#list
+ */
+var list = new Proxy({}, {
+  get(_target, operation) {
+    return function (field) {
+      var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return createIntentButtonProps(dom.list.serialize(_rollupPluginBabelHelpers.objectSpread2({
+        name: field.name,
+        operation
+      }, payload)), field.formId);
+    };
+  }
+});
+
+exports.list = list;
+exports.validate = validate;

package/intent.mjs

@@ -0,0 +1,32 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { validate as validate$1, list as list$1, INTENT } from '@conform-to/dom';
+
+function createIntentButtonProps(value, form) {
+  return {
+    name: INTENT,
+    value,
+    form,
+    formNoValidate: true
+  };
+}
+function validate(field) {
+  return createIntentButtonProps(validate$1.serialize(field.name), field.formId);
+}
+/**
+ * Helpers to configure an intent button for modifying a list
+ *
+ * @see https://conform.guide/api/react#list
+ */
+var list = new Proxy({}, {
+  get(_target, operation) {
+    return function (field) {
+      var payload = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      return createIntentButtonProps(list$1.serialize(_objectSpread2({
+        name: field.name,
+        operation
+      }, payload)), field.formId);
+    };
+  }
+});
+
+export { list, validate };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.9.0",
+	"version": "1.0.0-pre.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,10 +30,10 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.9.0"
+		"@conform-to/dom": "1.0.0-pre.0"
 	},
 	"peerDependencies": {
-		"react": ">=16.8"
+		"react": ">=18"
 	},
 	"keywords": [
 		"constraint-validation",