@conform-to/react - npm Package Compare versions

Comparing version 1.0.0-pre.6 to 1.0.0-pre.7

context.d.ts

@@ -1,2 +0,2 @@
-import { type Constraint, type ControlButtonProps, type FormId, type FieldName, type FormContext, type FormControl, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
 import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
@@ -7,3 +7,3 @@ export type Pretty<T> = {
 export type Primitive = string | number | boolean | Date | File | null | undefined;
-export type Metadata<Schema, FormError, FormSchema extends Record<string, unknown>> = {
+export type Metadata<Schema, FormSchema extends Record<string, unknown>, FormError = string[]> = {
     key: string | undefined;
@@ -13,3 +13,3 @@ id: string;
     descriptionId: string;
-    name: FieldName<Schema, FormError, FormSchema>;
+    name: FieldName<Schema, FormSchema, FormError>;
     initialValue: FormValue<Schema>;
@@ -19,32 +19,33 @@ value: FormValue<Schema>;
     allErrors: Record<string, FormError>;
-    allValid: boolean;
     valid: boolean;
     dirty: boolean;
 };
-export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, FormError, Schema>, 'id'> & {
+export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, Schema, FormError>, 'id'> & Pick<FormContext<Schema, FormError>, Intent['type']> & {
     id: FormId<Schema, FormError>;
-    context: FormContext<Schema, FormError>;
+    context: Wrapped<FormContext<Schema, FormError>>;
     status?: 'success' | 'error';
-    dispatch(control: FormControl): void;
-    getControlButtonProps(control: FormControl): ControlButtonProps;
     getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError, Schema>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Schema, FormError>;
     };
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
-    onReset: (event: React.FormEvent<HTMLFormElement>) => void;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema = unknown, FormError = string[], FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, FormError, FormSchema> & {
+export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & {
     formId: FormId<FormSchema, FormError>;
     constraint?: Constraint;
     getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
     };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormError>> : never;
+    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
 };
 export declare const Form: import("react").Context<FormContext[]>;
-export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
-export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
+declare const wrappedSymbol: unique symbol;
+export type Wrapped<Type> = {
+    [wrappedSymbol]: Type;
+};
+export declare function getWrappedFormContext(context: Wrapped<FormContext>): FormContext;
+export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, unknown, FormError>;
+export declare function useFormState<FormError>(form: FormContext<any, any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
 export declare function FormProvider(props: {
-    context: FormContext<any, any, any>;
+    context: Wrapped<FormContext<any, any, any>>;
     children: ReactNode;
@@ -57,4 +58,5 @@ }): ReactElement;
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormError, FormSchema>): Metadata<Schema, FormError, FormSchema>;
-export declare function getFieldMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormError, FormSchema>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, any>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
+export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormValue, FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export {};

context.js

@@ -11,2 +11,8 @@ 'use strict';
 var Form = /*#__PURE__*/react.createContext([]);
+
+// To hide the FormContext type from the public API
+var wrappedSymbol = Symbol('wrapped');
+function getWrappedFormContext(context) {
+  return context[wrappedSymbol];
+}
 function useFormContext(formId) {
@@ -26,5 +32,6 @@ var contexts = react.useContext(Form);
   var forms = react.useContext(Form);
-  var value = react.useMemo(() => [props.context].concat(forms),
+  var context = getWrappedFormContext(props.context);
+  var value = react.useMemo(() => [context].concat(forms),
   // Put the latest form context first
-  [forms, props.context]);
+  [forms, context]);
   return /*#__PURE__*/jsxRuntime.jsx(Form.Provider, {
@@ -83,14 +90,2 @@ value: value,
     },
-    get allValid() {
-      var keys = Object.keys(state.error);
-      if (name === '') {
-        return keys.length === 0;
-      }
-      for (var key of Object.keys(state.error)) {
-        if (dom.isPrefix(key, name) && !state.valid[key]) {
-          return false;
-        }
-      }
-      return true;
-    },
     get allErrors() {
@@ -122,3 +117,2 @@ if (name === '') {
         case 'key':
-        case 'errors':
         case 'initialValue':
@@ -128,10 +122,8 @@ case 'value':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
+          updateSubjectRef(subjectRef, name, key, 'name');
           break;
+        case 'errors':
         case 'allErrors':
-          updateSubjectRef(subjectRef, name, 'error', 'prefix');
+          updateSubjectRef(subjectRef, name, 'error', key === 'errors' ? 'name' : 'prefix');
           break;
-        case 'allValid':
-          updateSubjectRef(subjectRef, name, 'valid', 'prefix');
-          break;
       }
@@ -177,7 +169,13 @@ return Reflect.get(target, key, receiver);
         case 'context':
-          return context;
+          return {
+            [wrappedSymbol]: context
+          };
         case 'status':
           return state.submissionStatus;
-        case 'dispatch':
-        case 'getControlButtonProps':
+        case 'validate':
+        case 'update':
+        case 'reset':
+        case 'insert':
+        case 'remove':
+        case 'reorder':
           return context[key];
@@ -187,4 +185,4 @@ case 'onSubmit':
             var submitEvent = event.nativeEvent;
-            context.submit(submitEvent);
-            if (submitEvent.defaultPrevented) {
+            var submission = context.submit(submitEvent);
+            if (submission && submission.status !== 'success' && submission.error !== null) {
               event.preventDefault();
@@ -207,2 +205,3 @@ }
 exports.getMetadata = getMetadata;
+exports.getWrappedFormContext = getWrappedFormContext;
 exports.updateSubjectRef = updateSubjectRef;
@@ -209,0 +208,0 @@ exports.useFormContext = useFormContext;

helpers.d.ts

@@ -9,3 +9,2 @@ /// <reference types="react" />
     required?: boolean;
-    autoFocus?: boolean;
     'aria-describedby'?: string;
@@ -20,10 +19,10 @@ 'aria-invalid'?: boolean;
     /**
-     * Decide whether the aria attributes should be based on `field.valid` or `field.allValid`.
-     * @default 'field'
+     * Decide whether the aria-invalid attributes should be based on `meta.errors` or `meta.allErrors`.
+     * @default 'errors'
      */
-    ariaInvalid?: 'all' | 'field';
+    ariaInvalid?: 'errors' | 'allErrors';
     /**
-     * Assign additional `id` to the `aria-describedby` attribute. If `true`, it will use the `descriptionId` from the metadata.
+     * Assign additional `id` to the `aria-describedby` attribute.
      */
-    ariaDescribedBy?: boolean | string;
+    ariaDescribedBy?: string;
 } | {
@@ -33,3 +32,3 @@ ariaAttributes: false;
 type InputProps = Pretty<FormControlProps & {
-    type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
     minLength?: number;
@@ -54,3 +53,3 @@ maxLength?: number;
 } | {
-    type?: Exclude<InputProps['type'], 'checkbox' | 'radio'>;
+    type: Exclude<InputProps['type'], 'checkbox' | 'radio'>;
     /**
@@ -137,3 +136,3 @@ * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
  * // To setup an uncontrolled input
- * <input {...getInputProps(metadata)} />
+ * <input {...getInputProps(metadata, { type: 'text' })} />
  * // To setup an uncontrolled checkbox
@@ -147,6 +146,3 @@ * <input {...getInputProps(metadata, { type: 'checkbox' })} />
  */
-export declare function getInputProps<Schema extends Exclude<Primitive, File>>(metadata: FieldMetadata<Schema, any, any>, options?: InputOptions): InputProps;
-export declare function getInputProps<Schema extends File | File[] | null | undefined>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
-    type: 'file';
-}): InputProps;
+export declare function getInputProps<Schema extends Primitive | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
 /**
@@ -153,0 +149,0 @@ * Derives the properties of a select element based on the field metadata,

helpers.js

@@ -28,4 +28,4 @@ 'use strict';
   }
-  var invalid = options.ariaInvalid === 'all' ? !metadata.allValid : !metadata.valid;
-  var ariaDescribedBy = typeof options.ariaDescribedBy === 'string' ? options.ariaDescribedBy : options.ariaDescribedBy ? metadata.descriptionId : undefined;
+  var invalid = options.ariaInvalid === 'allErrors' ? !metadata.valid : typeof metadata.errors !== 'undefined';
+  var ariaDescribedBy = options.ariaDescribedBy;
   return simplify({
@@ -79,4 +79,3 @@ 'aria-invalid': invalid || undefined,
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined,
-    autoFocus: !metadata.valid || undefined
+    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
   }, getFieldsetProps(metadata, options)));
@@ -96,3 +95,3 @@ }
  * // To setup an uncontrolled input
- * <input {...getInputProps(metadata)} />
+ * <input {...getInputProps(metadata, { type: 'text' })} />
  * // To setup an uncontrolled checkbox
@@ -106,6 +105,4 @@ * <input {...getInputProps(metadata, { type: 'checkbox' })} />
  */
-
-function getInputProps(metadata) {
+function getInputProps(metadata, options) {
   var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
@@ -112,0 +109,0 @@ type: options.type,

hooks.d.ts

@@ -11,3 +11,3 @@ import { type FormId, type FieldName, type FormOptions } from '@conform-to/dom';
 export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
-export declare function useForm<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
+export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
     /**
@@ -27,10 +27,10 @@ * The form id. If not provided, a random id will be generated.
 ];
-export declare function useFormMetadata<Schema extends Record<string, any>, FormError>(formId: FormId<Schema, FormError>, options?: {
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
 }): FormMetadata<Schema, FormError>;
-export declare function useField<FieldSchema, FormError = string[], FormSchema extends Record<string, unknown> = Record<string, unknown>>(name: FieldName<FieldSchema, FormError, FormSchema>, options?: {
+export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {
     formId?: FormId<FormSchema, FormError>;
 }): [
-    FieldMetadata<FieldSchema, FormError, FormSchema>,
+    FieldMetadata<FieldSchema, FormSchema, FormError>,
     FormMetadata<FormSchema, FormError>
 ];

hooks.js

@@ -40,17 +40,17 @@ 'use strict';
   var formId = useFormId(id);
-  var [context$1] = react.useState(() => dom.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+  var [context$1] = react.useState(() => dom.unstable_createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
     formId
   })));
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', context$1.input);
-    document.addEventListener('focusout', context$1.blur);
-    document.addEventListener('reset', context$1.reset);
+    document.addEventListener('input', context$1.onInput);
+    document.addEventListener('focusout', context$1.onBlur);
+    document.addEventListener('reset', context$1.onReset);
     return () => {
-      document.removeEventListener('input', context$1.input);
-      document.removeEventListener('focusout', context$1.blur);
-      document.removeEventListener('reset', context$1.reset);
+      document.removeEventListener('input', context$1.onInput);
+      document.removeEventListener('focusout', context$1.onBlur);
+      document.removeEventListener('reset', context$1.onReset);
     };
   }, [context$1]);
   useSafeLayoutEffect(() => {
-    context$1.update(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+    context$1.onUpdate(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
       formId
@@ -57,0 +57,0 @@ }));

index.d.ts

@@ -1,6 +0,5 @@
-export { type Submission, type SubmissionResult, type DefaultValue, type FormControl, type FormId, type FieldName, requestSubmit, isFieldElement, control, } from '@conform-to/dom';
+export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
 export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
 export { useInputControl } from './integrations';
-export { validateConstraint } from './validitystate';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

index.js

@@ -9,3 +9,2 @@ 'use strict';
 var integrations = require('./integrations.js');
-var validitystate = require('./validitystate.js');
 var helpers = require('./helpers.js');
@@ -15,14 +14,6 @@
 
-Object.defineProperty(exports, 'control', {
+Object.defineProperty(exports, 'parse', {
 	enumerable: true,
-	get: function () { return dom.control; }
+	get: function () { return dom.parse; }
 });
-Object.defineProperty(exports, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
-Object.defineProperty(exports, 'requestSubmit', {
-	enumerable: true,
-	get: function () { return dom.requestSubmit; }
-});
 exports.FormProvider = context.FormProvider;
@@ -34,3 +25,2 @@ exports.FormStateInput = context.FormStateInput;
 exports.useInputControl = integrations.useInputControl;
-exports.validateConstraint = validitystate.validateConstraint;
 exports.getCollectionProps = helpers.getCollectionProps;
@@ -37,0 +27,0 @@ exports.getFieldsetProps = helpers.getFieldsetProps;

integrations.d.ts

@@ -10,7 +10,7 @@ import { type FieldElement } from '@conform-to/dom';
 export declare function getEventTarget(formId: string, name: string): FieldElement;
-export declare function useInputControl(options: {
-    key?: string | undefined;
+export declare function useInputControl(meta: {
+    key?: string | null | undefined;
     name: string;
     formId: string;
-    initialValue: string | undefined;
+    initialValue?: string | undefined;
 }): InputControl;

integrations.js

@@ -35,3 +35,3 @@ 'use strict';
 }
-function useInputControl(options) {
+function useInputControl(meta) {
   var eventDispatched = react.useRef({
@@ -42,7 +42,7 @@ change: false,
   });
-  var [key, setKey] = react.useState(options.key);
-  var [value, setValue] = react.useState(() => options.initialValue);
-  if (key !== options.key) {
-    setValue(options.initialValue);
-    setKey(options.key);
+  var [key, setKey] = react.useState(meta.key);
+  var [value, setValue] = react.useState(() => meta.initialValue);
+  if (key !== meta.key) {
+    setValue(meta.initialValue);
+    setKey(meta.key);
   }
@@ -52,3 +52,3 @@ react.useEffect(() => {
       return event => {
-        var element = getFieldElement(options.formId, options.name, element => element === event.target);
+        var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
         if (element) {
@@ -70,3 +70,3 @@ eventDispatched.current[listener] = true;
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.name]);
   var handlers = react.useMemo(() => {
@@ -76,3 +76,3 @@ return {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(options.formId, options.name);
+          var _element = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.change = true;
@@ -122,3 +122,3 @@ if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(options.formId, options.name);
+          var _element2 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.focus = true;
@@ -134,3 +134,3 @@ _element2.dispatchEvent(new FocusEvent('focusin', {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(options.formId, options.name);
+          var _element3 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.blur = true;
@@ -145,3 +145,3 @@ _element3.dispatchEvent(new FocusEvent('focusout', {
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.name]);
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
@@ -148,0 +148,0 @@ value

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.0-pre.6",
+	"version": "1.0.0-pre.7",
 	"main": "index.js",
@@ -34,3 +34,3 @@ "module": "index.mjs",
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-pre.6"
+		"@conform-to/dom": "1.0.0-pre.7"
 	},
@@ -37,0 +37,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

78245

decreased by-18.25%

Number of package files

20

decreased by-13.04%

Lines of code

1740

decreased by-5.49%

Number of lines in readme file

33

decreased by-94.56%

Dependency changes

• + Added@conform-to/dom@1.0.0-pre.7(transitive)

• - Removed@conform-to/dom@1.0.0-pre.6(transitive)

• Updated@conform-to/dom@1.0.0-pre.7