@conform-to/react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

context.d.ts

@@ -1,2 +0,2 @@
-import { type Constraint, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType, type FormOptions as BaseFormOptions } from '@conform-to/dom';
+import { type Constraint, type Combine, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type FormOptions as BaseFormOptions } from '@conform-to/dom';
 import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
@@ -24,15 +24,18 @@ export type Pretty<T> = {
     status?: 'success' | 'error';
-    getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Schema, FormError>;
-    };
+    getFieldset: () => Required<{
+        [Key in keyof Combine<Schema>]: FieldMetadata<Combine<Schema>[Key], Schema, FormError>;
+    }>;
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
+type SubfieldMetadata<Schema, FormSchema extends Record<string, any>, FormError, CombinedSchema = Combine<Schema>> = Exclude<Schema, undefined> extends Array<infer Item> ? {
+    getFieldList: () => Array<FieldMetadata<Item, FormSchema, FormError>>;
+} : Exclude<Schema, undefined> extends Record<string, unknown> ? {
+    getFieldset: () => Required<{
+        [Key in keyof CombinedSchema]: FieldMetadata<CombinedSchema[Key], FormSchema, FormError>;
+    }>;
+} : {};
 export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
     formId: FormId<FormSchema, FormError>;
-    getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
-    };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
-};
+} & SubfieldMetadata<Schema, FormSchema, FormError>;
 export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
@@ -39,0 +42,0 @@ declare const wrappedSymbol: unique symbol;

helpers.d.ts

 /// <reference types="react" />
-import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
+import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 type FormControlProps = {
@@ -141,3 +141,3 @@ key: string | undefined;
  */
-export declare function getInputProps<Schema extends Primitive | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
+export declare function getInputProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions): InputProps;
 /**
@@ -158,3 +158,3 @@ * Derives the properties of a select element based on the field metadata,
  */
-export declare function getSelectProps<Schema extends Exclude<Primitive, File> | Array<Exclude<Primitive, File>> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: SelectOptions): SelectProps;
+export declare function getSelectProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: SelectOptions): SelectProps;
 /**
@@ -175,3 +175,3 @@ * Derives the properties of a textarea element based on the field metadata,
  */
-export declare function getTextareaProps<Schema extends Exclude<Primitive, File> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: TextareaOptions): TextareaProps;
+export declare function getTextareaProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: TextareaOptions): TextareaProps;
 /**
@@ -178,0 +178,0 @@ * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,

helpers.js

@@ -144,3 +144,4 @@ 'use strict';
   if (typeof options.value === 'undefined' || options.value) {
-    props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
+    var _metadata$initialValu;
+    props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : (_metadata$initialValu = metadata.initialValue) === null || _metadata$initialValu === void 0 ? void 0 : _metadata$initialValu.toString();
   }
@@ -172,3 +173,4 @@ return simplify(props);
   if (typeof options.value === 'undefined' || options.value) {
-    props.defaultValue = metadata.initialValue;
+    var _metadata$initialValu2;
+    props.defaultValue = (_metadata$initialValu2 = metadata.initialValue) === null || _metadata$initialValu2 === void 0 ? void 0 : _metadata$initialValu2.toString();
   }
@@ -175,0 +177,0 @@ return simplify(props);

index.d.ts

 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 { Control as unstable_Control, useControl as unstable_useControl, useInputControl, } from './integrations';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

index.js

@@ -22,2 +22,4 @@ 'use strict';
 exports.useFormMetadata = hooks.useFormMetadata;
+exports.unstable_Control = integrations.Control;
+exports.unstable_useControl = integrations.useControl;
 exports.useInputControl = integrations.useInputControl;
@@ -24,0 +26,0 @@ exports.getCollectionProps = helpers.getCollectionProps;

integrations.d.ts

@@ -1,19 +0,45 @@
-import { type Key } from 'react';
-export type InputControl<Value> = {
-    value: Value | undefined;
-    change: (value: Value) => void;
-    focus: () => void;
-    blur: () => void;
-};
-export declare function getFormElement(formId: string): HTMLFormElement;
-export declare function getFieldElements(form: HTMLFormElement, name: string): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
-export declare function getEventTarget(form: HTMLFormElement, name: string): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
+import { type Key, type RefCallback } from 'react';
+export declare function getFormElement(formId: string): HTMLFormElement | null;
+export declare function getFieldElements(form: HTMLFormElement | null, name: string): Array<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+export declare function getEventTarget(form: HTMLFormElement | null, name: string, value?: string | string[]): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
 export declare function createDummySelect(form: HTMLFormElement, name: string, value?: string | string[] | undefined): HTMLSelectElement;
 export declare function isDummySelect(element: HTMLElement): element is HTMLSelectElement;
 export declare function updateFieldValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, value: string | string[]): void;
-export declare function useInputControl<Value>(metaOrOptions: {
+export declare function useInputEvent(): {
+    change(value: string | string[]): void;
+    focus(): void;
+    blur(): void;
+    register: RefCallback<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>;
+};
+export declare function useInputValue<Value extends string | string[] | Array<string | undefined>>(options: {
     key?: Key | null | undefined;
+    initialValue?: Value | undefined;
+}): readonly [(Value extends string ? Value : string | string[]) | undefined, import("react").Dispatch<import("react").SetStateAction<(Value extends string ? Value : string | string[]) | undefined>>];
+export declare function useControl<Value extends string | string[] | Array<string | undefined>>(meta: {
+    key?: Key | null | undefined;
+    initialValue?: Value | undefined;
+}): {
+    register: RefCallback<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | undefined>;
+    value: (Value extends string ? Value : string | string[]) | undefined;
+    change: (value: Value extends string ? Value : string | string[]) => void;
+    focus: () => void;
+    blur: () => void;
+};
+export declare function useInputControl<Value extends string | string[] | Array<string | undefined>>(meta: {
+    key?: Key | null | undefined;
     name: string;
     formId: string;
     initialValue?: Value | undefined;
-}): InputControl<Value extends string ? string : string | string[]>;
+}): {
+    value: (Value extends string ? Value : string | string[]) | undefined;
+    change: import("react").Dispatch<import("react").SetStateAction<(Value extends string ? Value : string | string[]) | undefined>>;
+    focus: () => void;
+    blur: () => void;
+};
+export declare function Control<Value extends string | string[] | Array<string | undefined>>(props: {
+    meta: {
+        key?: Key | null | undefined;
+        initialValue?: Value | undefined;
+    };
+    render: (control: ReturnType<typeof useControl<Value>>) => React.ReactNode;
+}): import("react").ReactNode;

integrations.js

@@ -5,20 +5,24 @@ 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var react = require('react');
 
 function getFormElement(formId) {
-  var element = document.forms.namedItem(formId);
-  if (!element) {
-    throw new Error('Form not found');
-  }
-  return element;
+  return document.forms.namedItem(formId);
 }
 function getFieldElements(form, name) {
-  var field = form.elements.namedItem(name);
+  var field = form === null || form === void 0 ? void 0 : form.elements.namedItem(name);
   var elements = !field ? [] : field instanceof Element ? [field] : Array.from(field.values());
   return elements.filter(element => element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement);
 }
-function getEventTarget(form, name) {
+function getEventTarget(form, name, value) {
   var _elements$;
   var elements = getFieldElements(form, name);
+  if (elements.length > 1) {
+    var options = typeof value === 'string' ? [value] : value;
+    for (var element of elements) {
+      if (typeof options !== 'undefined' && element instanceof HTMLInputElement && element.type === 'checkbox' && (element.checked ? options.includes(element.value) : !options.includes(element.value))) {
+        continue;
+      }
+      return element;
+    }
+  }
   return (_elements$ = elements[0]) !== null && _elements$ !== void 0 ? _elements$ : null;
@@ -56,3 +60,3 @@ }
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    element.checked = element.value === value;
+    element.checked = Array.isArray(value) ? value.includes(element.value) : element.value === value;
   } else if (element instanceof HTMLSelectElement && element.multiple) {
@@ -105,6 +109,4 @@ var selectedValue = Array.isArray(value) ? [...value] : [value];
 }
-function useInputControl(metaOrOptions) {
-  // If the initialValue is an array, it must be a string array without undefined values
-  // as there is no way to skip an entry in a multiple select when they all share the same name
-  var inputInitialValue = metaOrOptions.initialValue;
+function useInputEvent() {
+  var ref = react.useRef(null);
   var eventDispatched = react.useRef({
@@ -115,31 +117,7 @@ change: false,
   });
-  var [key, setKey] = react.useState(metaOrOptions.key);
-  var [initialValue, setInitialValue] = react.useState(inputInitialValue);
-  var [value, setValue] = react.useState(inputInitialValue);
-  if (key !== metaOrOptions.key) {
-    setValue(inputInitialValue);
-    setInitialValue(inputInitialValue);
-    setKey(metaOrOptions.key);
-  }
   react.useEffect(() => {
-    var form = getFormElement(metaOrOptions.formId);
-    if (getEventTarget(form, metaOrOptions.name)) {
-      return;
-    }
-    createDummySelect(form, metaOrOptions.name, initialValue);
-    return () => {
-      var elements = getFieldElements(form, metaOrOptions.name);
-      for (var element of elements) {
-        if (isDummySelect(element)) {
-          element.remove();
-        }
-      }
-    };
-  }, [metaOrOptions.formId, metaOrOptions.name, initialValue]);
-  react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var _element$form;
-        var element = event.target;
-        if ((element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && element.name === metaOrOptions.name && ((_element$form = element.form) === null || _element$form === void 0 ? void 0 : _element$form.id) === metaOrOptions.formId) {
+        var element = ref.current;
+        if (element && event.target === element) {
           eventDispatched.current[listener] = true;
@@ -160,4 +138,4 @@ }
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  var handlers = react.useMemo(() => {
+  }, [ref]);
+  return react.useMemo(() => {
     return {
@@ -167,4 +145,3 @@ change(value) {
           eventDispatched.current.change = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
@@ -183,3 +160,2 @@ updateFieldValue(element, value);
         }
-        setValue(value);
         eventDispatched.current.change = false;
@@ -190,4 +166,3 @@ },
           eventDispatched.current.focus = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
@@ -205,4 +180,3 @@ element.dispatchEvent(new FocusEvent('focusin', {
           eventDispatched.current.blur = true;
-          var form = getFormElement(metaOrOptions.formId);
-          var element = getEventTarget(form, metaOrOptions.name);
+          var element = ref.current;
           if (element) {
@@ -216,10 +190,97 @@ element.dispatchEvent(new FocusEvent('focusout', {
         eventDispatched.current.blur = false;
+      },
+      register(element) {
+        ref.current = element;
       }
     };
-  }, [metaOrOptions.formId, metaOrOptions.name]);
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
-    value
-  });
+  }, []);
 }
+function useInputValue(options) {
+  var initializeValue = () => {
+    var _options$initialValue;
+    if (typeof options.initialValue === 'string') {
+      // @ts-expect-error FIXME: To ensure that the type of value is also `string | undefined` if initialValue is not an array
+      return options.initialValue;
+    }
 
+    // @ts-expect-error Same as above
+    return (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue.map(value => value !== null && value !== void 0 ? value : '');
+  };
+  var [key, setKey] = react.useState(options.key);
+  var [value, setValue] = react.useState(initializeValue);
+  if (key !== options.key) {
+    setValue(initializeValue);
+    setKey(options.key);
+  }
+  return [value, setValue];
+}
+function useControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  var handleChange = value => {
+    setValue(value);
+    change(value);
+  };
+  return {
+    register,
+    value,
+    change: handleChange,
+    focus,
+    blur
+  };
+}
+function useInputControl(meta) {
+  var [value, setValue] = useInputValue(meta);
+  var initializedRef = react.useRef(false);
+  var {
+    register,
+    change,
+    focus,
+    blur
+  } = useInputEvent();
+  react.useEffect(() => {
+    var form = getFormElement(meta.formId);
+    if (!form) {
+      // eslint-disable-next-line no-console
+      console.warn("useInputControl is unable to find form#".concat(meta.formId, " and identify if a dummy input is required"));
+      return;
+    }
+    var element = getEventTarget(form, meta.name);
+    if (!element && typeof value !== 'undefined' && (!Array.isArray(value) || value.length > 0)) {
+      element = createDummySelect(form, meta.name, value);
+    }
+    register(element);
+    if (!initializedRef.current) {
+      initializedRef.current = true;
+    } else {
+      change(value !== null && value !== void 0 ? value : '');
+    }
+    return () => {
+      register(null);
+      var elements = getFieldElements(form, meta.name);
+      for (var _element of elements) {
+        if (isDummySelect(_element)) {
+          _element.remove();
+        }
+      }
+    };
+  }, [meta.formId, meta.name, value, change, register]);
+  return {
+    value,
+    change: setValue,
+    focus,
+    blur
+  };
+}
+function Control(props) {
+  var control = useControl(props.meta);
+  return props.render(control);
+}
+
+exports.Control = Control;
 exports.createDummySelect = createDummySelect;
@@ -231,2 +292,5 @@ exports.getEventTarget = getEventTarget;
 exports.updateFieldValue = updateFieldValue;
+exports.useControl = useControl;
 exports.useInputControl = useInputControl;
+exports.useInputEvent = useInputEvent;
+exports.useInputValue = useInputValue;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

88705

increased by5.44%

Lines of code

2108

increased by8.05%

Dependency changes

• + Added@conform-to/dom@1.0.2(transitive)

• + Addedreact@18.2.0(transitive)

• - Removed@conform-to/dom@1.0.1(transitive)

• - Removedreact@18.3.1(transitive)

• Updated@conform-to/dom@1.0.2