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

package/README

@@ -8,7 +8,7 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.1.0-pre.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.1.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
 A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 

package/context.d.ts

@@ -53,7 +53,8 @@ export declare function FormStateInput(props: {
     formId?: string;
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
-export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: 'status' | 'formId'): void;
+export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, subject: Exclude<keyof SubscriptionSubject, 'status' | 'formId'>, scope: keyof SubscriptionScope, name: string): void;
 export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
 export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(context: FormContext<FormSchema, FormError, any>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
 export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(context: FormContext<Schema, FormError, FormValue>, subjectRef: MutableRefObject<SubscriptionSubject>, stateSnapshot: FormState<FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;

package/context.js

@@ -17,7 +17,7 @@ function getWrappedFormContext(context) {
 }
 function useFormContext(formId) {
   var contexts = react.useContext(Form);
-  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
+  var form = formId ? contexts.find(context => formId === context.getFormId()) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -56,10 +56,10 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function updateSubjectRef(ref, name, subject, scope) {
-  if (subject === 'status') {
+function updateSubjectRef(ref, subject, scope, name) {
+  if (subject === 'status' || subject === 'formId') {
     ref.current[subject] = true;
-  } else {
+  } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;
     ref.current[subject] = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, ref.current[subject]), {}, {
       [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
@@ -68,7 +68,7 @@ function updateSubjectRef(ref, name, subject, scope) {
 }
 function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var id = name ? "".concat(context.getFormId(), "-").concat(name) : context.getFormId();
   var state = context.getState();
   return new Proxy({
     id,
@@ -122,16 +122,21 @@ function getMetadata(context, subjectRef, stateSnapshot) {
       // if the stateSnapshot is not the latest, then it must be accessed in a callback
       if (state === stateSnapshot) {
         switch (key) {
+          case 'id':
+          case 'errorId':
+          case 'descriptionId':
+            updateSubjectRef(subjectRef, 'formId');
+            break;
           case 'key':
           case 'initialValue':
           case 'value':
           case 'valid':
           case 'dirty':
-            updateSubjectRef(subjectRef, name, key, 'name');
+            updateSubjectRef(subjectRef, key, 'name', name);
             break;
           case 'errors':
           case 'allErrors':
-            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            updateSubjectRef(subjectRef, 'error', key === 'errors' ? 'name' : 'prefix', name);
             break;
         }
       }
@@ -150,7 +155,10 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
       var state = context.getState();
       switch (key) {
         case 'formId':
-          return context.formId;
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'formId');
+          }
+          return context.getFormId();
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -166,7 +174,7 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
               if (state === stateSnapshot) {
-                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+                updateSubjectRef(subjectRef, 'initialValue', 'name', name);
               }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
@@ -190,6 +198,9 @@ function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
             [wrappedSymbol]: context
           };
         case 'status':
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'status');
+          }
           return state.submissionStatus;
         case 'validate':
         case 'update':

package/context.mjs

@@ -13,7 +13,7 @@ function getWrappedFormContext(context) {
 }
 function useFormContext(formId) {
   var contexts = useContext(Form);
-  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
+  var form = formId ? contexts.find(context => formId === context.getFormId()) : contexts[0];
   if (!form) {
     throw new Error('Form context is not available');
   }
@@ -52,10 +52,10 @@ function useSubjectRef() {
   subjectRef.current = initialSubject;
   return subjectRef;
 }
-function updateSubjectRef(ref, name, subject, scope) {
-  if (subject === 'status') {
+function updateSubjectRef(ref, subject, scope, name) {
+  if (subject === 'status' || subject === 'formId') {
     ref.current[subject] = true;
-  } else {
+  } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;
     ref.current[subject] = _objectSpread2(_objectSpread2({}, ref.current[subject]), {}, {
       [scope]: ((_ref$current$subject$ = (_ref$current$subject = ref.current[subject]) === null || _ref$current$subject === void 0 ? void 0 : _ref$current$subject[scope]) !== null && _ref$current$subject$ !== void 0 ? _ref$current$subject$ : []).concat(name)
@@ -64,7 +64,7 @@ function updateSubjectRef(ref, name, subject, scope) {
 }
 function getMetadata(context, subjectRef, stateSnapshot) {
   var name = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
-  var id = name ? "".concat(context.formId, "-").concat(name) : context.formId;
+  var id = name ? "".concat(context.getFormId(), "-").concat(name) : context.getFormId();
   var state = context.getState();
   return new Proxy({
     id,
@@ -118,16 +118,21 @@ function getMetadata(context, subjectRef, stateSnapshot) {
       // if the stateSnapshot is not the latest, then it must be accessed in a callback
       if (state === stateSnapshot) {
         switch (key) {
+          case 'id':
+          case 'errorId':
+          case 'descriptionId':
+            updateSubjectRef(subjectRef, 'formId');
+            break;
           case 'key':
           case 'initialValue':
           case 'value':
           case 'valid':
           case 'dirty':
-            updateSubjectRef(subjectRef, name, key, 'name');
+            updateSubjectRef(subjectRef, key, 'name', name);
             break;
           case 'errors':
           case 'allErrors':
-            updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
+            updateSubjectRef(subjectRef, 'error', key === 'errors' ? 'name' : 'prefix', name);
             break;
         }
       }
@@ -146,7 +151,10 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
       var state = context.getState();
       switch (key) {
         case 'formId':
-          return context.formId;
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'formId');
+          }
+          return context.getFormId();
         case 'required':
         case 'minLength':
         case 'maxLength':
@@ -162,7 +170,7 @@ function getFieldMetadata(context, subjectRef, stateSnapshot) {
               var _state$initialValue$n;
               var initialValue = (_state$initialValue$n = state.initialValue[name]) !== null && _state$initialValue$n !== void 0 ? _state$initialValue$n : [];
               if (state === stateSnapshot) {
-                updateSubjectRef(subjectRef, name, 'initialValue', 'name');
+                updateSubjectRef(subjectRef, 'initialValue', 'name', name);
               }
               if (!Array.isArray(initialValue)) {
                 throw new Error('The initial value at the given name is not a list');
@@ -186,6 +194,9 @@ function getFormMetadata(context, subjectRef, stateSnapshot, noValidate) {
             [wrappedSymbol]: context
           };
         case 'status':
+          if (state === stateSnapshot) {
+            updateSubjectRef(subjectRef, 'status');
+          }
           return state.submissionStatus;
         case 'validate':
         case 'update':

package/helpers.d.ts

@@ -175,7 +175,7 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>
@@ -191,7 +191,7 @@ export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema,
  * </fieldset>
  * ```
  */
-export declare function getCollectionProps<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(metadata: FieldMetadata<Schema, any, any>, options: Pretty<FormControlOptions & {
+export declare function getCollectionProps<Schema extends Array<string | boolean> | string | boolean | undefined | unknown, Options extends Pretty<FormControlOptions & {
     /**
      * The input type. Use `checkbox` for multiple selection or `radio` for single selection.
      */
@@ -204,5 +204,5 @@ export declare function getCollectionProps<Schema extends Array<string | boolean
      * Decide whether defaultValue should be returned. Pass `false` if you want to manage the value yourself.
      */
     value?: boolean;
-}>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
+}>>(metadata: FieldMetadata<Schema, any, any>, options: Options): Array<InputProps & Pick<Options, 'type'> & Pick<Required<InputProps>, 'value'>>;
 export {};

package/helpers.js

@@ -179,7 +179,7 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>

package/helpers.mjs

@@ -175,7 +175,7 @@ function getTextareaProps(metadata) {
  * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
  * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
  *
- * @see https://conform.guide/api/react/getTextareaProps
+ * @see https://conform.guide/api/react/getCollectionProps
  * @example
  * ```tsx
  * <fieldset>

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.1.0-pre.0",
+	"version": "1.1.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "1.1.0-pre.0"
+		"@conform-to/dom": "1.1.0"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",