@conform-to/react 0.5.0-pre.0 → 0.5.1

package/hooks.js

@@ -11,7 +11,7 @@ var helpers = require('./helpers.js');
  * Returns properties required to hook into form events.
  * Applied custom validation and define when error should be reported.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#useform
+ * @see https://conform.guide/api/react#useform
  */
 function useForm() {
   var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -25,17 +25,26 @@ function useForm() {
     })) !== null && _config$state$error$f !== void 0 ? _config$state$error$f : [];
     return message !== null && message !== void 0 ? message : '';
   });
-  var [fieldsetConfig, setFieldsetConfig] = react.useState(() => {
-    var _config$state$error2, _config$state2, _config$state$value, _config$state3;
-    var error = (_config$state$error2 = (_config$state2 = config.state) === null || _config$state2 === void 0 ? void 0 : _config$state2.error) !== null && _config$state$error2 !== void 0 ? _config$state$error2 : [];
+  var [uncontrolledState, setUncontrolledState] = react.useState(() => {
+    var submission = config.state;
+    if (!submission) {
+      return {
+        defaultValue: config.defaultValue
+      };
+    }
     return {
-      defaultValue: (_config$state$value = (_config$state3 = config.state) === null || _config$state3 === void 0 ? void 0 : _config$state3.value) !== null && _config$state$value !== void 0 ? _config$state$value : config.defaultValue,
-      initialError: error.filter(_ref2 => {
+      defaultValue: submission.value,
+      initialError: submission.error.filter(_ref2 => {
         var [name] = _ref2;
-        return name !== '' && dom.getSubmissionType(name) === null;
+        return name !== '' && dom.shouldValidate(submission, name);
       })
     };
   });
+  var fieldsetConfig = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, uncontrolledState), {}, {
+    constraint: config.constraint,
+    form: config.id
+  });
+  var fieldset = useFieldset(ref, fieldsetConfig);
   var [noValidate, setNoValidate] = react.useState(config.noValidate || !config.fallbackNative);
   react.useEffect(() => {
     configRef.current = config;
@@ -59,11 +68,8 @@ function useForm() {
       if (!form || !dom.isFieldElement(field) || field.form !== form) {
         return;
       }
-      if (formConfig.initialReport === 'onChange') {
-        field.dataset.conformTouched = 'true';
-      }
-      if (field.dataset.conformTouched) {
-        dom.requestValidate(form, field.name);
+      if (field.dataset.conformTouched || formConfig.initialReport === 'onChange') {
+        dom.requestCommand(form, dom.validate(field.name));
       }
     };
     var handleBlur = event => {
@@ -74,8 +80,7 @@ function useForm() {
         return;
       }
       if (formConfig.initialReport === 'onBlur' && !field.dataset.conformTouched) {
-        field.dataset.conformTouched = 'true';
-        dom.requestValidate(form, field.name);
+        dom.requestCommand(form, dom.validate(field.name));
       }
     };
     var handleInvalid = event => {
@@ -100,11 +105,12 @@ function useForm() {
       for (var field of form.elements) {
         if (dom.isFieldElement(field)) {
           delete field.dataset.conformTouched;
+          field.setAttribute('aria-invalid', 'false');
           field.setCustomValidity('');
         }
       }
       setError('');
-      setFieldsetConfig({
+      setUncontrolledState({
         defaultValue: formConfig.defaultValue,
         initialError: []
       });
@@ -127,11 +133,13 @@ function useForm() {
       document.removeEventListener('reset', handleReset);
     };
   }, []);
-  return {
+  var form = {
+    id: config.id,
     ref,
     error,
     props: {
       ref,
+      id: config.id,
       noValidate,
       onSubmit(event) {
         var form = event.currentTarget;
@@ -173,16 +181,6 @@ function useForm() {
               }
             }
           }
-
-          // Touch all fields only if the submitter is not a command button
-          if (submission.type === 'submit') {
-            for (var field of form.elements) {
-              if (dom.isFieldElement(field)) {
-                // Mark the field as touched
-                field.dataset.conformTouched = 'true';
-              }
-            }
-          }
           if (!config.noValidate && !(submitter !== null && submitter !== void 0 && submitter.formNoValidate) && dom.hasError(submission.error) || submission.type === 'validate' && config.mode !== 'server-validation') {
             event.preventDefault();
           } else {
@@ -202,6 +200,7 @@ function useForm() {
     },
     config: fieldsetConfig
   };
+  return [form, fieldset];
 }
 
 /**
@@ -262,6 +261,10 @@ 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 _prev$key;
             var prevMessage = (_prev$key = prev === null || prev === void 0 ? void 0 : prev[key]) !== null && _prev$key !== void 0 ? _prev$key : '';
@@ -316,21 +319,26 @@ function useFieldset(ref, config) {
       var field = {
         config: _rollupPluginBabelHelpers.objectSpread2({
           name: fieldsetConfig.name ? "".concat(fieldsetConfig.name, ".").concat(key) : key,
-          form: fieldsetConfig.form,
           defaultValue: uncontrolledState.defaultValue[key],
           initialError: uncontrolledState.initialError[key]
         }, constraint),
         error: (_error$key = error === null || error === void 0 ? void 0 : error[key]) !== null && _error$key !== void 0 ? _error$key : ''
       };
+      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");
+      }
       return field;
     }
   });
 }
+
 /**
  * Returns a list of key and config, with a group of helpers
  * configuring buttons for list manipulation
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usefieldlist
+ * @see https://conform.guide/api/react#usefieldlist
  */
 function useFieldList(ref, config) {
   var configRef = react.useRef(config);
@@ -361,41 +369,6 @@ function useFieldList(ref, config) {
     var _config$defaultValue3;
     return Object.entries((_config$defaultValue3 = config.defaultValue) !== null && _config$defaultValue3 !== void 0 ? _config$defaultValue3 : [undefined]);
   });
-  var list = entries.map((_ref3, index) => {
-    var [key, defaultValue] = _ref3;
-    return {
-      key,
-      error: error[index],
-      config: {
-        name: "".concat(config.name, "[").concat(index, "]"),
-        form: config.form,
-        defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
-        initialError: uncontrolledState.initialError[index]
-      }
-    };
-  });
-
-  /***
-   * This use proxy to capture all information about the command and
-   * have it encoded in the value.
-   */
-  var command = new Proxy({}, {
-    get(_target, type) {
-      return function () {
-        var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return {
-          name: 'conform/list',
-          value: JSON.stringify({
-            type,
-            scope: config.name,
-            payload
-          }),
-          form: config.form,
-          formNoValidate: true
-        };
-      };
-    }
-  });
   react.useEffect(() => {
     configRef.current = config;
   });
@@ -492,16 +465,32 @@ function useFieldList(ref, config) {
       document.removeEventListener('reset', resetHandler);
     };
   }, [ref]);
-  return [list,
-  // @ts-expect-error proxy type
-  command];
+  return entries.map((_ref3, index) => {
+    var [key, defaultValue] = _ref3;
+    var fieldConfig = {
+      name: "".concat(config.name, "[").concat(index, "]"),
+      defaultValue: defaultValue !== null && defaultValue !== void 0 ? defaultValue : uncontrolledState.defaultValue[index],
+      initialError: uncontrolledState.initialError[index]
+    };
+    if (config.form) {
+      fieldConfig.form = config.form;
+      fieldConfig.id = "".concat(config.form, "-").concat(config.name);
+      fieldConfig.errorId = "".concat(fieldConfig.id, "-error");
+    }
+    return {
+      key,
+      error: error[index],
+      config: fieldConfig
+    };
+  });
 }
 /**
  * Returns the properties required to configure a shadow input for validation.
  * This is particular useful when integrating dropdown and datepicker whichs
  * introduces custom input mode.
  *
- * @see https://github.com/edmundhung/conform/tree/v0.4.1/packages/conform-react/README.md#usecontrolledinput
+ * @deprecated Please use the `useInputEvent` hook instead
+ * @see https://conform.guide/api/react#usecontrolledinput
  */
 function useControlledInput(config) {
   var _config$defaultValue4;
@@ -556,24 +545,13 @@ function useControlledInput(config) {
   }, []);
   return [_rollupPluginBabelHelpers.objectSpread2({
     ref,
-    style: {
-      position: 'absolute',
-      width: '1px',
-      height: '1px',
-      padding: 0,
-      margin: '-1px',
-      overflow: 'hidden',
-      clip: 'rect(0,0,0,0)',
-      whiteSpace: 'nowrap',
-      borderWidth: 0
-    },
-    tabIndex: -1,
-    'aria-hidden': true,
     onFocus() {
       var _inputRef$current;
       (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
     }
-  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState))), {
+  }, helpers.input(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), uncontrolledState), {
+    hidden: true
+  })), {
     ref: inputRef,
     value,
     onChange: handleChange,
@@ -582,7 +560,183 @@ function useControlledInput(config) {
   }];
 }
 
+/**
+ * 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) {
+  if (element.value === value) {
+    // It will not trigger a change event if `element.value` is the same as the set value
+    return;
+  }
+  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');
+    }
+  }
+}
+
+/**
+ * useLayoutEffect is client-only.
+ * This basically makes it a no-op on server
+ */
+var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;
+function useInputEvent(options) {
+  var ref = react.useRef(null);
+  var optionsRef = react.useRef(options);
+  var changeDispatched = react.useRef(false);
+  var focusDispatched = react.useRef(false);
+  var blurDispatched = react.useRef(false);
+  useSafeLayoutEffect(() => {
+    optionsRef.current = options;
+  });
+  useSafeLayoutEffect(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g, _optionsRef$current, _optionsRef$current$g2;
+      return (_optionsRef$current$g = (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 ? void 0 : (_optionsRef$current$g2 = _optionsRef$current.getElement) === null || _optionsRef$current$g2 === void 0 ? void 0 : _optionsRef$current$g2.call(_optionsRef$current, ref.current)) !== null && _optionsRef$current$g !== void 0 ? _optionsRef$current$g : ref.current;
+    };
+    var inputHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        changeDispatched.current = true;
+      }
+    };
+    var focusHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        focusDispatched.current = true;
+      }
+    };
+    var blurHandler = event => {
+      var input = getInputElement();
+      if (input && event.target === input) {
+        blurDispatched.current = true;
+      }
+    };
+    var submitHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current2, _optionsRef$current2$;
+        (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 ? void 0 : (_optionsRef$current2$ = _optionsRef$current2.onSubmit) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, event);
+      }
+    };
+    var resetHandler = event => {
+      var input = getInputElement();
+      if (input !== null && input !== void 0 && input.form && event.target === input.form) {
+        var _optionsRef$current3, _optionsRef$current3$;
+        (_optionsRef$current3 = optionsRef.current) === null || _optionsRef$current3 === void 0 ? void 0 : (_optionsRef$current3$ = _optionsRef$current3.onReset) === null || _optionsRef$current3$ === void 0 ? void 0 : _optionsRef$current3$.call(_optionsRef$current3, event);
+      }
+    };
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focus', focusHandler, true);
+    document.addEventListener('blur', blurHandler, true);
+    document.addEventListener('submit', submitHandler);
+    document.addEventListener('reset', resetHandler);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focus', focusHandler, true);
+      document.removeEventListener('blur', blurHandler, true);
+      document.removeEventListener('submit', submitHandler);
+      document.removeEventListener('reset', resetHandler);
+    };
+  }, []);
+  var control = react.useMemo(() => {
+    var getInputElement = () => {
+      var _optionsRef$current$g3, _optionsRef$current4, _optionsRef$current4$;
+      return (_optionsRef$current$g3 = (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4.getElement) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, ref.current)) !== null && _optionsRef$current$g3 !== void 0 ? _optionsRef$current$g3 : ref.current;
+    };
+    return {
+      change(eventOrValue) {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No change-related events will be dispatched');
+          return;
+        }
+        if (changeDispatched.current) {
+          changeDispatched.current = false;
+          return;
+        }
+        var previousValue = input.value;
+        var nextValue = typeof eventOrValue === 'string' ? eventOrValue : eventOrValue.target.value;
+
+        // This make sure no event is dispatched on the first effect run
+        if (nextValue === previousValue) {
+          return;
+        }
+
+        // Dispatch beforeinput event before updating the input value
+        input.dispatchEvent(new Event('beforeinput', {
+          bubbles: true
+        }));
+        // Update the input value to trigger a change event
+        setNativeValue(input, nextValue);
+        // Dispatch input event with the updated input value
+        input.dispatchEvent(new InputEvent('input', {
+          bubbles: true
+        }));
+        // Reset the dispatched flag
+        changeDispatched.current = false;
+      },
+      focus() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No focus-related events will be dispatched');
+          return;
+        }
+        if (focusDispatched.current) {
+          focusDispatched.current = false;
+          return;
+        }
+        var focusinEvent = new FocusEvent('focusin', {
+          bubbles: true
+        });
+        var focusEvent = new FocusEvent('focus');
+        input.dispatchEvent(focusinEvent);
+        input.dispatchEvent(focusEvent);
+
+        // Reset the dispatched flag
+        focusDispatched.current = false;
+      },
+      blur() {
+        var input = getInputElement();
+        if (!input) {
+          console.warn('Missing input ref; No blur-related events will be dispatched');
+          return;
+        }
+        if (blurDispatched.current) {
+          blurDispatched.current = false;
+          return;
+        }
+        var focusoutEvent = new FocusEvent('focusout', {
+          bubbles: true
+        });
+        var blurEvent = new FocusEvent('blur');
+        input.dispatchEvent(focusoutEvent);
+        input.dispatchEvent(blurEvent);
+
+        // Reset the dispatched flag
+        blurDispatched.current = false;
+      }
+    };
+  }, []);
+  return [ref, control];
+}
+
 exports.useControlledInput = useControlledInput;
 exports.useFieldList = useFieldList;
 exports.useFieldset = useFieldset;
 exports.useForm = useForm;
+exports.useInputEvent = useInputEvent;

package/index.d.ts

@@ -1,3 +1,3 @@
-export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, parse, shouldValidate, } from '@conform-to/dom';
+export { type FieldConfig, type FieldsetConstraint, type Submission, getFormElements, hasError, list, validate, requestCommand, requestSubmit, parse, shouldValidate, } from '@conform-to/dom';
 export * from './hooks';
 export * as conform from './helpers';

package/index.js

@@ -16,16 +16,33 @@ Object.defineProperty(exports, 'hasError', {
 	enumerable: true,
 	get: function () { return dom.hasError; }
 });
+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, 'requestCommand', {
+	enumerable: true,
+	get: function () { return dom.requestCommand; }
+});
+Object.defineProperty(exports, 'requestSubmit', {
+	enumerable: true,
+	get: function () { return dom.requestSubmit; }
+});
 Object.defineProperty(exports, 'shouldValidate', {
 	enumerable: true,
 	get: function () { return dom.shouldValidate; }
 });
+Object.defineProperty(exports, 'validate', {
+	enumerable: true,
+	get: function () { return dom.validate; }
+});
 exports.useControlledInput = hooks.useControlledInput;
 exports.useFieldList = hooks.useFieldList;
 exports.useFieldset = hooks.useFieldset;
 exports.useForm = hooks.useForm;
+exports.useInputEvent = hooks.useInputEvent;
 exports.conform = helpers;

package/module/helpers.js

@@ -1,6 +1,23 @@
+/**
+ * Style to make the input element visually hidden
+ * Based on the `sr-only` class from tailwindcss
+ */
+var hiddenStyle = {
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  whiteSpace: 'nowrap',
+  border: 0
+};
 function input(config) {
+  var _config$initialError;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var attributes = {
+    id: config.id,
     type: options.type,
     name: config.name,
     form: config.form,
@@ -11,8 +28,15 @@ function input(config) {
     max: config.max,
     step: config.step,
     pattern: config.pattern,
-    multiple: config.multiple
+    multiple: config.multiple,
+    'aria-invalid': Boolean((_config$initialError = config.initialError) === null || _config$initialError === void 0 ? void 0 : _config$initialError.length),
+    'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
@@ -25,31 +49,47 @@ function input(config) {
   }
   return attributes;
 }
-function select(config) {
-  var _config$defaultValue;
+function select(config, options) {
+  var _config$defaultValue, _config$initialError2;
   var attributes = {
+    id: config.id,
     name: config.name,
     form: config.form,
     defaultValue: config.multiple ? Array.isArray(config.defaultValue) ? config.defaultValue : [] : "".concat((_config$defaultValue = config.defaultValue) !== null && _config$defaultValue !== void 0 ? _config$defaultValue : ''),
     required: config.required,
-    multiple: config.multiple
+    multiple: config.multiple,
+    'aria-invalid': Boolean((_config$initialError2 = config.initialError) === null || _config$initialError2 === void 0 ? void 0 : _config$initialError2.length),
+    'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }
   return attributes;
 }
-function textarea(config) {
-  var _config$defaultValue2;
+function textarea(config, options) {
+  var _config$defaultValue2, _config$initialError3;
   var attributes = {
+    id: config.id,
     name: config.name,
     form: config.form,
     defaultValue: "".concat((_config$defaultValue2 = config.defaultValue) !== null && _config$defaultValue2 !== void 0 ? _config$defaultValue2 : ''),
     required: config.required,
     minLength: config.minLength,
     maxLength: config.maxLength,
-    autoFocus: Boolean(config.initialError)
+    autoFocus: Boolean(config.initialError),
+    'aria-invalid': Boolean((_config$initialError3 = config.initialError) === null || _config$initialError3 === void 0 ? void 0 : _config$initialError3.length),
+    'aria-describedby': config.errorId
   };
+  if (options !== null && options !== void 0 && options.hidden) {
+    attributes.style = hiddenStyle;
+    attributes.tabIndex = -1;
+    attributes['aria-hidden'] = true;
+  }
   if (config.initialError && config.initialError.length > 0) {
     attributes.autoFocus = true;
   }