@conform-to/react 0.1.1 → 0.2.0

package/hooks.js

@@ -49,7 +49,7 @@ function useForm() {
     var handleChange = event => {
       var _event$target;
 
-      if (!dom.isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
+      if (!ref.current || !dom.isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
         return;
       }
 
@@ -59,15 +59,13 @@ function useForm() {
         });
       }
 
-      if (ref.current) {
-        dom.reportValidity(ref.current);
-      }
+      dom.reportValidity(ref.current);
     };
 
     var handleBlur = event => {
       var _event$target2;
 
-      if (!dom.isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
+      if (!ref.current || !dom.isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
         return;
       }
 
@@ -77,16 +75,14 @@ function useForm() {
         });
       }
 
-      if (ref.current) {
-        dom.reportValidity(ref.current);
-      }
+      dom.reportValidity(ref.current);
     };
 
-    document.body.addEventListener('input', handleChange);
-    document.body.addEventListener('focusout', handleBlur);
+    document.addEventListener('input', handleChange);
+    document.addEventListener('focusout', handleBlur);
     return () => {
-      document.body.removeEventListener('input', handleChange);
-      document.body.removeEventListener('focusout', handleBlur);
+      document.removeEventListener('input', handleChange);
+      document.removeEventListener('focusout', handleBlur);
     };
   }, [noValidate, initialReport]);
   return {
@@ -202,6 +198,27 @@ function useFieldset(schema) {
         fieldset
       }
     });
+
+    var resetHandler = e => {
+      if (e.target !== fieldset.form) {
+        return;
+      }
+
+      dispatch({
+        type: 'reset'
+      });
+      setTimeout(() => {
+        var _schema$validate2;
+
+        // Delay revalidation until reset is completed
+        (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      }, 0);
+    };
+
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('reset', resetHandler);
+    };
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [schema.validate]);
   react.useEffect(() => {
@@ -219,10 +236,10 @@ function useFieldset(schema) {
     form: config.form,
 
     onInput(e) {
-      var _schema$validate2;
+      var _schema$validate3;
 
       var fieldset = e.currentTarget;
-      (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      (_schema$validate3 = schema.validate) === null || _schema$validate3 === void 0 ? void 0 : _schema$validate3.call(schema, fieldset);
       dispatch({
         type: 'cleanup',
         payload: {
@@ -231,15 +248,6 @@ function useFieldset(schema) {
       });
     },
 
-    onReset(e) {
-      dom.setFieldState(e.currentTarget, {
-        touched: false
-      });
-      dispatch({
-        type: 'reset'
-      });
-    },
-
     onInvalid(e) {
       var element = dom.isFieldElement(e.target) ? e.target : null;
       var key = Object.keys(schema.fields).find(key => (element === null || element === void 0 ? void 0 : element.name) === dom.getName([e.currentTarget.name, key]));
@@ -259,45 +267,69 @@ function useFieldset(schema) {
       });
     }
 
-  }, dom.createFieldConfig(schema, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
+  }, dom.getFieldProps(schema, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
     error: Object.assign({}, config.error, errorMessage)
   }))];
 }
-function useFieldList(config) {
-  var _config$initialValue$, _config$initialValue;
+function useFieldList(props) {
+  var [entries, setEntries] = react.useState(() => {
+    var _props$defaultValue;
 
-  var size = (_config$initialValue$ = (_config$initialValue = config.initialValue) === null || _config$initialValue === void 0 ? void 0 : _config$initialValue.length) !== null && _config$initialValue$ !== void 0 ? _config$initialValue$ : 1;
-  var [keys, setKeys] = react.useState(() => [...Array(size).keys()]);
-  var list = react.useMemo(() => keys.map((key, index) => {
-    var _config$initialValue2, _config$error2;
+    return Object.entries((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : [undefined]);
+  });
+  var list = entries.map((_ref, index) => {
+    var _props$defaultValue2, _props$error;
 
+    var [key, defaultValue] = _ref;
     return {
       key: "".concat(key),
-      config: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
-        name: "".concat(config.name, "[").concat(index, "]"),
-        initialValue: (_config$initialValue2 = config.initialValue) === null || _config$initialValue2 === void 0 ? void 0 : _config$initialValue2[index],
-        error: (_config$error2 = config.error) === null || _config$error2 === void 0 ? void 0 : _config$error2[index],
-        constraint: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config.constraint), {}, {
-          multiple: false
-        })
+      props: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+        name: "".concat(props.name, "[").concat(index, "]"),
+        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : (_props$defaultValue2 = props.defaultValue) === null || _props$defaultValue2 === void 0 ? void 0 : _props$defaultValue2[index],
+        error: (_props$error = props.error) === null || _props$error === void 0 ? void 0 : _props$error[index],
+        multiple: false
       })
     };
-  }), [keys, config]);
+  });
   var controls = {
-    prepend() {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'prepend', {})), {}, {
+    prepend(defaultValue) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'prepend', {
+        defaultValue
+      })), {}, {
+        onClick(e) {
+          setEntries(entries => dom.applyControlCommand([...entries], 'prepend', {
+            defaultValue: ["".concat(Date.now()), defaultValue]
+          }));
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    append(defaultValue) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'append', {
+        defaultValue
+      })), {}, {
         onClick(e) {
-          setKeys(keys => [Date.now(), ...keys]);
+          setEntries(entries => dom.applyControlCommand([...entries], 'append', {
+            defaultValue: ["".concat(Date.now()), defaultValue]
+          }));
           e.preventDefault();
         }
 
       });
     },
 
-    append() {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'append', {})), {}, {
+    replace(index, defaultValue) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'replace', {
+        index,
+        defaultValue
+      })), {}, {
         onClick(e) {
-          setKeys(keys => [...keys, Date.now()]);
+          setEntries(entries => dom.applyControlCommand([...entries], 'replace', {
+            defaultValue: ["".concat(Date.now()), defaultValue],
+            index
+          }));
           e.preventDefault();
         }
 
@@ -305,11 +337,32 @@ function useFieldList(config) {
     },
 
     remove(index) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'remove', {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'remove', {
         index
       })), {}, {
         onClick(e) {
-          setKeys(keys => [...keys.slice(0, index), ...keys.slice(index + 1)]);
+          setEntries(entries => dom.applyControlCommand([...entries], 'remove', {
+            index
+          }));
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    reorder(fromIndex, toIndex) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.getControlButtonProps(props.name, 'reorder', {
+        from: fromIndex,
+        to: toIndex
+      })), {}, {
+        onClick(e) {
+          if (fromIndex !== toIndex) {
+            setEntries(entries => dom.applyControlCommand([...entries], 'reorder', {
+              from: fromIndex,
+              to: toIndex
+            }));
+          }
+
           e.preventDefault();
         }
 
@@ -318,60 +371,49 @@ function useFieldList(config) {
 
   };
   react.useEffect(() => {
-    setKeys(keys => {
-      if (keys.length === size) {
-        return keys;
-      }
+    var _props$defaultValue3;
 
-      return [...Array(size).keys()];
-    });
-  }, [size]);
+    setEntries(Object.entries((_props$defaultValue3 = props.defaultValue) !== null && _props$defaultValue3 !== void 0 ? _props$defaultValue3 : [undefined]));
+  }, [props.defaultValue]);
   return [list, controls];
 }
 function useControlledInput(field) {
-  var _field$initialValue;
+  var _ref$current$value, _ref$current, _field$defaultValue;
 
-  var [value, setValue] = react.useState("".concat((_field$initialValue = field.initialValue) !== null && _field$initialValue !== void 0 ? _field$initialValue : ''));
-  var [shouldBlur, setShouldBlur] = react.useState(false);
   var ref = react.useRef(null);
-  var input = react.useMemo(() => /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, field.constraint), {}, {
+  var input = react.useMemo(() => /*#__PURE__*/react.createElement('input', {
     ref,
     name: field.name,
-    defaultValue: field.initialValue,
-    style: {
-      display: 'none'
-    },
+    form: field.form,
+    defaultValue: field.defaultValue,
+    required: field.required,
+    minLength: field.minLength,
+    maxLength: field.maxLength,
+    min: field.min,
+    max: field.max,
+    step: field.step,
+    pattern: field.pattern,
+    hidden: true,
     'aria-hidden': true
-  })), [field.constraint, field.name, field.initialValue]);
-  react.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-
-    ref.current.value = value;
-    ref.current.dispatchEvent(new InputEvent('input', {
-      bubbles: true
-    }));
-  }, [value]);
-  react.useEffect(() => {
-    var _ref$current;
-
-    if (!shouldBlur) {
-      return;
-    }
-
-    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('focusout', {
-      bubbles: true
-    }));
-    setShouldBlur(false);
-  }, [shouldBlur]);
+  }), [field.name, field.form, field.defaultValue, field.required, field.minLength, field.maxLength, field.min, field.max, field.step, field.pattern]);
   return [input, {
-    value,
+    value: (_ref$current$value = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.value) !== null && _ref$current$value !== void 0 ? _ref$current$value : "".concat((_field$defaultValue = field.defaultValue) !== null && _field$defaultValue !== void 0 ? _field$defaultValue : ''),
     onChange: value => {
-      setValue(value);
+      if (!ref.current) {
+        return;
+      }
+
+      ref.current.value = value;
+      ref.current.dispatchEvent(new InputEvent('input', {
+        bubbles: true
+      }));
     },
     onBlur: () => {
-      setShouldBlur(true);
+      var _ref$current2;
+
+      (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.dispatchEvent(new FocusEvent('focusout', {
+        bubbles: true
+      }));
     }
   }];
 }

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldConfig, type Schema, parse, getFieldElements, } from '@conform-to/dom';
+export { type FieldProps, type FormState, type Schema, type Submission, parse, getFieldElements, } from '@conform-to/dom';
 export * from './hooks';
 export * as conform from './helpers';

package/module/helpers.js

@@ -1,6 +1,4 @@
-function input(config) {
-  var _config$constraint, _config$constraint2, _config$constraint3, _config$constraint4, _config$constraint5, _config$constraint6, _config$constraint7;
-
+function input(props) {
   var {
     type,
     value
@@ -8,49 +6,50 @@ function input(config) {
   var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
   var attributes = {
     type,
-    name: config.name,
-    form: config.form,
-    required: (_config$constraint = config.constraint) === null || _config$constraint === void 0 ? void 0 : _config$constraint.required,
-    minLength: (_config$constraint2 = config.constraint) === null || _config$constraint2 === void 0 ? void 0 : _config$constraint2.minLength,
-    maxLength: (_config$constraint3 = config.constraint) === null || _config$constraint3 === void 0 ? void 0 : _config$constraint3.maxLength,
-    min: (_config$constraint4 = config.constraint) === null || _config$constraint4 === void 0 ? void 0 : _config$constraint4.min,
-    max: (_config$constraint5 = config.constraint) === null || _config$constraint5 === void 0 ? void 0 : _config$constraint5.max,
-    step: (_config$constraint6 = config.constraint) === null || _config$constraint6 === void 0 ? void 0 : _config$constraint6.step,
-    pattern: (_config$constraint7 = config.constraint) === null || _config$constraint7 === void 0 ? void 0 : _config$constraint7.pattern
+    name: props.name,
+    form: props.form,
+    required: props.required,
+    minLength: props.minLength,
+    maxLength: props.maxLength,
+    min: props.min,
+    max: props.max,
+    step: props.step,
+    pattern: props.pattern,
+    multiple: props.multiple
   };
 
   if (isCheckboxOrRadio) {
     attributes.value = value !== null && value !== void 0 ? value : 'on';
-    attributes.defaultChecked = config.initialValue === attributes.value;
+    attributes.defaultChecked = props.defaultValue === attributes.value;
   } else {
-    var _config$initialValue;
+    var _props$defaultValue;
 
-    attributes.defaultValue = "".concat((_config$initialValue = config.initialValue) !== null && _config$initialValue !== void 0 ? _config$initialValue : '');
+    attributes.defaultValue = "".concat((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : '');
   }
 
   return attributes;
 }
-function select(config) {
-  var _config$initialValue2, _config$constraint8, _config$constraint9;
+function select(props) {
+  var _props$defaultValue2;
 
   return {
-    name: config.name,
-    form: config.form,
-    defaultValue: "".concat((_config$initialValue2 = config.initialValue) !== null && _config$initialValue2 !== void 0 ? _config$initialValue2 : ''),
-    required: (_config$constraint8 = config.constraint) === null || _config$constraint8 === void 0 ? void 0 : _config$constraint8.required,
-    multiple: (_config$constraint9 = config.constraint) === null || _config$constraint9 === void 0 ? void 0 : _config$constraint9.multiple
+    name: props.name,
+    form: props.form,
+    defaultValue: props.multiple ? Array.isArray(props.defaultValue) ? props.defaultValue : [] : "".concat((_props$defaultValue2 = props.defaultValue) !== null && _props$defaultValue2 !== void 0 ? _props$defaultValue2 : ''),
+    required: props.required,
+    multiple: props.multiple
   };
 }
-function textarea(config) {
-  var _config$initialValue3, _config$constraint10, _config$constraint11, _config$constraint12;
+function textarea(props) {
+  var _props$defaultValue3;
 
   return {
-    name: config.name,
-    form: config.form,
-    defaultValue: "".concat((_config$initialValue3 = config.initialValue) !== null && _config$initialValue3 !== void 0 ? _config$initialValue3 : ''),
-    required: (_config$constraint10 = config.constraint) === null || _config$constraint10 === void 0 ? void 0 : _config$constraint10.required,
-    minLength: (_config$constraint11 = config.constraint) === null || _config$constraint11 === void 0 ? void 0 : _config$constraint11.minLength,
-    maxLength: (_config$constraint12 = config.constraint) === null || _config$constraint12 === void 0 ? void 0 : _config$constraint12.maxLength
+    name: props.name,
+    form: props.form,
+    defaultValue: "".concat((_props$defaultValue3 = props.defaultValue) !== null && _props$defaultValue3 !== void 0 ? _props$defaultValue3 : ''),
+    required: props.required,
+    minLength: props.minLength,
+    maxLength: props.maxLength
   };
 }