@conform-to/react 0.6.0-pre.0 → 0.6.0

package/module/hooks.js

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { getValidationMessage, shouldValidate, parseListCommand, reportSubmission, getFormData, parse, VALIDATION_UNDEFINED, getFormAttributes, getPaths, getName, getErrors, isFieldElement, requestIntent, validate, getFormElement, updateList } from '@conform-to/dom';
+import { getScope, parseListCommand, reportSubmission, getFormData, parse, VALIDATION_UNDEFINED, getFormAttributes, getPaths, getName, isFieldElement, requestIntent, validate, getFormElement, FORM_ERROR_ELEMENT_NAME, getErrors, getValidationMessage, updateList } from '@conform-to/dom';
 import { useRef, useState, useEffect, useMemo, useLayoutEffect } from 'react';
 
 /**
@@ -9,30 +9,30 @@ import { useRef, useState, useEffect, useMemo, useLayoutEffect } from 'react';
  * @see https://conform.guide/api/react#useform
  */
 function useForm() {
-  var _config$state;
+  var _config$lastSubmissio;
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var configRef = useRef(config);
   var ref = useRef(null);
-  var [lastSubmission, setLastSubmission] = useState((_config$state = config.state) !== null && _config$state !== void 0 ? _config$state : null);
-  var [error, setError] = useState(() => {
-    if (!config.state) {
-      return '';
+  var [lastSubmission, setLastSubmission] = useState((_config$lastSubmissio = config.lastSubmission) !== null && _config$lastSubmissio !== void 0 ? _config$lastSubmissio : null);
+  var [errors, setErrors] = useState(() => {
+    if (!config.lastSubmission) {
+      return [];
     }
-    var message = config.state.error[''];
-    return getValidationMessage(message);
+    return [].concat(config.lastSubmission.error['']);
   });
   var [uncontrolledState, setUncontrolledState] = useState(() => {
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!submission) {
       return {
         defaultValue: config.defaultValue
       };
     }
+    var scope = getScope(submission.intent);
     return {
       defaultValue: submission.payload,
       initialError: Object.entries(submission.error).reduce((result, _ref) => {
         var [name, message] = _ref;
-        if (name !== '' && shouldValidate(submission.intent, name)) {
+        if (name !== '' && (scope === null || scope === name)) {
           result[name] = message;
         }
         return result;
@@ -53,7 +53,7 @@ function useForm() {
   }, []);
   useEffect(() => {
     var form = ref.current;
-    var submission = config.state;
+    var submission = config.lastSubmission;
     if (!form || !submission) {
       return;
     }
@@ -64,7 +64,7 @@ function useForm() {
       }));
     }
     setLastSubmission(submission);
-  }, [config.state]);
+  }, [config.lastSubmission]);
   useEffect(() => {
     var form = ref.current;
     if (!form || !lastSubmission) {
@@ -99,12 +99,12 @@ function useForm() {
     var handleInvalid = event => {
       var form = getFormElement(ref.current);
       var field = event.target;
-      if (!form || !isFieldElement(field) || field.form !== form || field.name !== '__form__') {
+      if (!form || !isFieldElement(field) || field.form !== form || field.name !== FORM_ERROR_ELEMENT_NAME) {
         return;
       }
       event.preventDefault();
       if (field.dataset.conformTouched) {
-        setError(field.validationMessage);
+        setErrors(getErrors(field.validationMessage));
       }
     };
     var handleReset = event => {
@@ -118,11 +118,10 @@ function useForm() {
       for (var field of form.elements) {
         if (isFieldElement(field)) {
           delete field.dataset.conformTouched;
-          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
-      setError('');
+      setErrors([]);
       setUncontrolledState({
         defaultValue: formConfig.defaultValue
       });
@@ -146,12 +145,11 @@ function useForm() {
     };
   }, []);
   var form = {
-    id: config.id,
     ref,
-    error,
+    error: errors[0],
+    errors,
     props: {
       ref,
-      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -194,14 +192,22 @@ function useForm() {
           console.warn(e);
         }
       }
-    },
-    config: fieldsetConfig
+    }
   };
+  if (config.id) {
+    form.id = config.id;
+    form.errorId = "".concat(config.id, "-error");
+    form.props.id = form.id;
+    form.props['aria-describedby'] = form.errorId;
+  }
+  if (form.errorId && form.errors.length > 0) {
+    form.props['aria-invalid'] = 'true';
+  }
   return [form, fieldset];
 }
 
 /**
- * All the information of the field, including state and config.
+ * A set of field configuration
  */
 
 function useFieldset(ref, config) {
@@ -229,7 +235,8 @@ function useFieldset(ref, config) {
   var [error, setError] = useState(() => {
     var result = {};
     for (var [key, _error] of Object.entries(uncontrolledState.initialError)) {
-      result[key] = getErrors(getValidationMessage(_error === null || _error === void 0 ? void 0 : _error['']));
+      var _error$;
+      result[key] = [].concat((_error$ = _error === null || _error === void 0 ? void 0 : _error['']) !== null && _error$ !== void 0 ? _error$ : []);
     }
     return result;
   });
@@ -250,10 +257,6 @@ function useFieldset(ref, config) {
       // Update the error only if the field belongs to the fieldset
       if (typeof key === 'string' && paths.length === 0) {
         if (field.dataset.conformTouched) {
-          // Update the aria attribute only if it is set
-          if (field.getAttribute('aria-invalid')) {
-            field.setAttribute('aria-invalid', field.validationMessage !== '' ? 'true' : 'false');
-          }
           setError(prev => {
             var prevMessage = getValidationMessage(prev === null || prev === void 0 ? void 0 : prev[key]);
             if (prevMessage === field.validationMessage) {
@@ -305,19 +308,17 @@ function useFieldset(ref, config) {
       var fieldsetConfig = config !== null && config !== void 0 ? config : {};
       var constraint = (_fieldsetConfig$const = fieldsetConfig.constraint) === null || _fieldsetConfig$const === void 0 ? void 0 : _fieldsetConfig$const[key];
       var errors = error === null || error === void 0 ? void 0 : error[key];
-      var field = {
-        config: _objectSpread2({
-          name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          defaultValue: uncontrolledState.defaultValue[key],
-          initialError: uncontrolledState.initialError[key]
-        }, constraint),
+      var field = _objectSpread2(_objectSpread2({}, constraint), {}, {
+        name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
+        defaultValue: uncontrolledState.defaultValue[key],
+        initialError: uncontrolledState.initialError[key],
         error: errors === null || errors === void 0 ? void 0 : errors[0],
         errors
-      };
+      });
       if (fieldsetConfig.form) {
-        field.config.form = fieldsetConfig.form;
-        field.config.id = "".concat(fieldsetConfig.form, "-").concat(field.config.name);
-        field.config.errorId = "".concat(field.config.id, "-error");
+        field.form = fieldsetConfig.form;
+        field.id = "".concat(fieldsetConfig.form, "-").concat(field.name);
+        field.errorId = "".concat(field.id, "-error");
       }
       return field;
     }
@@ -350,7 +351,10 @@ function useFieldList(ref, config) {
       initialError
     };
   });
-  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => getErrors(getValidationMessage(error === null || error === void 0 ? void 0 : error['']))));
+  var [error, setError] = useState(() => uncontrolledState.initialError.map(error => {
+    var _error$2;
+    return [].concat((_error$2 = error === null || error === void 0 ? void 0 : error['']) !== null && _error$2 !== void 0 ? _error$2 : []);
+  }));
   var [entries, setEntries] = useState(() => {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
@@ -460,19 +464,18 @@ function useFieldList(ref, config) {
     var fieldConfig = {
       name: "".concat(config.name, "[").concat(index, "]"),
       defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-      initialError: uncontrolledState.initialError[index]
+      initialError: uncontrolledState.initialError[index],
+      error: errors === null || errors === void 0 ? void 0 : errors[0],
+      errors
     };
     if (config.form) {
       fieldConfig.form = config.form;
       fieldConfig.id = "".concat(config.form, "-").concat(config.name);
       fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
     }
-    return {
-      key,
-      error: errors === null || errors === void 0 ? void 0 : errors[0],
-      errors,
-      config: fieldConfig
-    };
+    return _objectSpread2({
+      key
+    }, fieldConfig);
   });
 }
 

package/module/index.js

@@ -1,4 +1,4 @@
-export { getFormElements, list, parse, requestIntent, requestSubmit, validate, validateConstraint } from '@conform-to/dom';
+export { isFieldElement, list, parse, requestIntent, validate, validateConstraint } from '@conform-to/dom';
 export { useFieldList, useFieldset, useForm, useInputEvent } from './hooks.js';
 import * as helpers from './helpers.js';
 export { helpers as conform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/react",
 	"description": "Conform view adapter for react",
 	"license": "MIT",
-	"version": "0.6.0-pre.0",
+	"version": "0.6.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {
@@ -19,7 +19,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.6.0-pre.0"
+		"@conform-to/dom": "0.6.0"
 	},
 	"peerDependencies": {
 		"react": ">=16.8"

package/base.d.ts

@@ -1,17 +0,0 @@
-import { type InputHTMLAttributes, type RefObject } from 'react';
-declare type EventLikeOrString = {
-    target: {
-        value: string;
-    };
-} | string;
-declare type InputControl = {
-    onChange: (eventLikeOrString: EventLikeOrString) => void;
-    onInput: (eventLikeOrString: EventLikeOrString) => void;
-    onFocus: () => void;
-    onBlur: () => void;
-};
-export declare function useInputControl(ref: RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): InputControl;
-export declare const BaseInput: import("react").ForwardRefExoticComponent<{
-    name: string;
-} & Omit<InputHTMLAttributes<HTMLInputElement>, "name" | "type" | "value" | "defaultValue"> & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/base.js

@@ -1,112 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var react = require('react');
-
-var _excluded = ["hidden", "className", "style"];
-/**
- * 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
- */
-function setNativeValue(element, value) {
-  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');
-    }
-  }
-}
-function useInputControl(ref) {
-  function getInputElement() {
-    var $input = ref.current;
-    if (!$input) {
-      console.warn('input ref is not available; Maybe you forget to setup the ref?');
-    }
-    return $input;
-  }
-  return {
-    onChange(eventLikeOrString) {
-      var $input = getInputElement();
-      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
-      if ($input && $input.value !== value) {
-        $input.dispatchEvent(new InputEvent('beforeinput', {
-          bubbles: true,
-          cancelable: true
-        }));
-        setNativeValue($input, value);
-        $input.dispatchEvent(new InputEvent('input', {
-          bubbles: true,
-          cancelable: true
-        }));
-      }
-    },
-    onInput(eventLikeOrString) {
-      this.onChange(eventLikeOrString);
-    },
-    onFocus() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusin', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('focus', {
-          cancelable: true
-        }));
-      }
-    },
-    onBlur() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusout', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('blur', {
-          cancelable: true
-        }));
-      }
-    }
-  };
-}
-function BaseInputImpl(_ref, ref) {
-  var {
-      hidden = true,
-      className,
-      style
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2({
-    ref,
-    className: hidden ? '' : className,
-    style: hidden ? {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    } : style
-  }, props));
-}
-var BaseInput = /*#__PURE__*/react.forwardRef(BaseInputImpl);
-
-exports.BaseInput = BaseInput;
-exports.useInputControl = useInputControl;

package/module/base.js

@@ -1,107 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
-import { forwardRef, createElement } from 'react';
-
-var _excluded = ["hidden", "className", "style"];
-/**
- * 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
- */
-function setNativeValue(element, value) {
-  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');
-    }
-  }
-}
-function useInputControl(ref) {
-  function getInputElement() {
-    var $input = ref.current;
-    if (!$input) {
-      console.warn('input ref is not available; Maybe you forget to setup the ref?');
-    }
-    return $input;
-  }
-  return {
-    onChange(eventLikeOrString) {
-      var $input = getInputElement();
-      var value = typeof eventLikeOrString === 'string' ? eventLikeOrString : eventLikeOrString.target.value;
-      if ($input && $input.value !== value) {
-        $input.dispatchEvent(new InputEvent('beforeinput', {
-          bubbles: true,
-          cancelable: true
-        }));
-        setNativeValue($input, value);
-        $input.dispatchEvent(new InputEvent('input', {
-          bubbles: true,
-          cancelable: true
-        }));
-      }
-    },
-    onInput(eventLikeOrString) {
-      this.onChange(eventLikeOrString);
-    },
-    onFocus() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusin', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('focus', {
-          cancelable: true
-        }));
-      }
-    },
-    onBlur() {
-      var $input = getInputElement();
-      if ($input) {
-        $input.dispatchEvent(new FocusEvent('focusout', {
-          bubbles: true,
-          cancelable: true
-        }));
-        $input.dispatchEvent(new FocusEvent('blur', {
-          cancelable: true
-        }));
-      }
-    }
-  };
-}
-function BaseInputImpl(_ref, ref) {
-  var {
-      hidden = true,
-      className,
-      style
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/createElement('input', _objectSpread2({
-    ref,
-    className: hidden ? '' : className,
-    style: hidden ? {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    } : style
-  }, props));
-}
-var BaseInput = /*#__PURE__*/forwardRef(BaseInputImpl);
-
-export { BaseInput, useInputControl };