@conform-to/react - npm Package Compare versions

Comparing version 1.0.0-pre.1 to 1.0.0-pre.2

context.d.ts

@@ -30,2 +30,3 @@ import { type Constraint, type FormId, type FieldName, type Form, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
     context: Form<Schema, Error>;
+    status?: 'success' | 'error';
     getFieldset: () => {
@@ -32,0 +33,0 @@ [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;

context.js

@@ -53,6 +53,10 @@ 'use strict';
 function updateSubjectRef(ref, name, subject, scope) {
-  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)
-  });
+  if (subject === 'status') {
+    ref.current[subject] = true;
+  } else {
+    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)
+    });
+  }
 }
@@ -172,2 +176,4 @@ function getMetadata(formId, state, subjectRef) {
           return form;
+        case 'status':
+          return state.submissionStatus;
         case 'onSubmit':
@@ -174,0 +180,0 @@ return event => {

helpers.d.ts

@@ -32,3 +32,3 @@ /// <reference types="react" />
 type InputProps = Pretty<FormControlProps & {
-    type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | '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;
@@ -154,3 +154,3 @@ maxLength?: number;
 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[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
+export declare function getInputProps<Schema extends File | File[] | null | undefined>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
     type: 'file';
@@ -157,0 +157,0 @@ }): InputProps;

integrations.d.ts

@@ -1,2 +0,2 @@
-import { type FieldElement, type FormValue } from '@conform-to/dom';
+import { type FieldElement, type FormValue, FieldName, FormId } from '@conform-to/dom';
 import { type FieldMetadata } from './context';
@@ -14,2 +14,9 @@ export type InputControl<Value> = {
 }): InputControl<string | undefined>;
+export declare function useInputControl<Schema>(options: {
+    key?: string;
+    name: FieldName<Schema>;
+    formId: FormId<any, any>;
+    initialValue: FormValue<Schema>;
+    onFocus?: (event: Event) => void;
+}): InputControl<string | undefined>;
 export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
@@ -20,1 +27,10 @@ initialize: (value: FormValue<Schema> | undefined) => Value;
 }): InputControl<Value>;
+export declare function useInputControl<Schema, Value>(options: {
+    key?: string;
+    name: FieldName<Schema>;
+    formId: FormId<any, any>;
+    initialValue: FormValue<Schema>;
+    initialize: (value: FormValue<Schema> | undefined) => Value;
+    serialize?: (value: Value) => string;
+    onFocus?: (event: Event) => void;
+}): InputControl<Value>;

integrations.js

@@ -36,3 +36,3 @@ 'use strict';
 function useInputControl(metadata, options) {
-  var _options$initialize;
+  var _options$initialize, _options$serialize, _options$onFocus;
   var eventDispatched = react.useRef({
@@ -44,4 +44,10 @@ change: false,
   var [key, setKey] = react.useState(metadata.key);
-  var optionsRef = react.useRef(options);
-  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : value => value === null || value === void 0 ? void 0 : value.toString();
+  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
+  var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
+  var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
+  var optionsRef = react.useRef({
+    initialize,
+    serialize,
+    onFocus
+  });
   var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
@@ -53,3 +59,7 @@ if (key !== metadata.key) {
   react.useEffect(() => {
-    optionsRef.current = options;
+    optionsRef.current = {
+      initialize,
+      serialize,
+      onFocus
+    };
   });
@@ -85,5 +95,5 @@ react.useEffect(() => {
         if (!eventDispatched.current.change) {
-          var _ref, _optionsRef$current$s, _optionsRef$current2, _optionsRef$current2$;
+          var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
           var _element = getEventTarget(metadata.formId, metadata.name);
-          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 || (_optionsRef$current2$ = _optionsRef$current2.serialize) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
           eventDispatched.current.change = true;
@@ -90,0 +100,0 @@ if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

101833

increased by2.21%

Lines of code

1955

increased by2.68%

Dependency changes

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

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

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