@conform-to/react - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

helpers.d.ts

 import { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from '@conform-to/dom';
 import type { FieldConfig, Primitive } from './hooks.js';
 import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
-interface FormControlProps {
+interface FormElementProps {
     id?: string;
     name: string;
     form?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+}
+interface FormControlProps extends FormElementProps {
     required?: boolean;
@@ -12,4 +16,2 @@ autoFocus?: boolean;
     style?: CSSProperties;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
     'aria-hidden'?: boolean;
@@ -41,9 +43,10 @@ }
     ariaAttributes?: false;
-    hidden?: boolean;
 } | {
     ariaAttributes: true;
     description?: boolean;
+};
+type ControlOptions = BaseOptions & {
     hidden?: boolean;
 };
-type InputOptions = BaseOptions & ({
+type InputOptions = ControlOptions & ({
     type: 'checkbox' | 'radio';
@@ -64,4 +67,5 @@ value?: string;
 }): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): SelectProps;
-export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): TextareaProps;
+export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): SelectProps;
+export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): TextareaProps;
+export declare function fieldset<Schema extends Record<string, any> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
 export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };

helpers.js

@@ -8,22 +8,6 @@ 'use strict';
 
-function getFormControlProps(config, options) {
-  var props = {
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  };
-  if (options !== null && options !== void 0 && options.ariaAttributes) {
-    var _config$error;
-    if (config.descriptionId && options !== null && options !== void 0 && options.description) {
-      props['aria-describedby'] = config.descriptionId;
-    }
-    if (config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length) {
-      props['aria-invalid'] = true;
-      props['aria-describedby'] = config.descriptionId && options !== null && options !== void 0 && options.description ? "".concat(config.errorId, " ").concat(config.descriptionId) : config.errorId;
-    }
-  }
-  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), options !== null && options !== void 0 && options.hidden ? hiddenProps : {});
-}
+/**
+ * Cleanup `undefined` from the dervied props
+ * To minimize conflicts when merging with user defined props
+ */
 function cleanup(props) {
@@ -37,2 +21,26 @@ for (var key in props) {
 }
+function getFormElementProps(config, options) {
+  var _config$error, _config$error2;
+  return cleanup({
+    id: config.id,
+    name: config.name,
+    form: config.form,
+    'aria-invalid': options !== null && options !== void 0 && options.ariaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
+    'aria-describedby': options !== null && options !== void 0 && options.ariaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options !== null && options !== void 0 && options.description ? config.descriptionId : undefined].reduce((result, id) => {
+      if (!result) {
+        return id;
+      }
+      if (!id) {
+        return result;
+      }
+      return "".concat(result, " ").concat(id);
+    }) : undefined
+  });
+}
+function getFormControlProps(config, options) {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormElementProps(config, options)), {}, {
+    required: config.required,
+    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
+  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+}
 var hiddenProps = {
@@ -79,16 +87,17 @@ /**
 function select(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     multiple: config.multiple
-  });
-  return cleanup(props);
+  }));
 }
 function textarea(config, options) {
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
     defaultValue: config.defaultValue,
     minLength: config.minLength,
     maxLength: config.maxLength
-  });
-  return cleanup(props);
+  }));
 }
+function fieldset(config, options) {
+  return getFormElementProps(config, options);
+}
 
@@ -107,2 +116,3 @@ Object.defineProperty(exports, 'INTENT', {
 });
+exports.fieldset = fieldset;
 exports.hiddenProps = hiddenProps;
@@ -109,0 +119,0 @@ exports.input = input;

hooks.js

@@ -10,2 +10,6 @@ 'use strict';
 /**
+ * Properties to be applied to the form element
+ */
+
+/**
  * Normalize error to an array of string.
@@ -306,2 +310,8 @@ */
 
+/**
+ * Returns all the information about the fieldset.
+ *
+ * @see https://conform.guide/api/react#usefieldset
+ */
+
 function useFieldset(ref, config) {
@@ -493,3 +503,3 @@ var [error] = useFormError(ref, {
           }
-          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 ? void 0 : (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
+          (_optionsRef$current4 = optionsRef.current) === null || _optionsRef$current4 === void 0 || (_optionsRef$current4$ = _optionsRef$current4[listener]) === null || _optionsRef$current4$ === void 0 ? void 0 : _optionsRef$current4$.call(_optionsRef$current4, event);
         }
@@ -668,3 +678,3 @@ };
           });
-          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 ? void 0 : (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
+          var shouldAcceptMultipleErrors = (_options$acceptMultip = options === null || options === void 0 || (_options$acceptMultip2 = options.acceptMultipleErrors) === null || _options$acceptMultip2 === void 0 ? void 0 : _options$acceptMultip2.call(options, {
             name,
@@ -671,0 +681,0 @@ payload,

package.json

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

README.md

@@ -159,3 +159,3 @@ # @conform-to/react
 
-This hook enables you to work with [nested object](/docs/configuration.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
+This hook enables you to work with [nested object](/docs/complex-structures.md#nested-object) by monitoring the state of each nested field and prepraing the config required.
 
@@ -242,3 +242,3 @@ ```tsx
 
-This hook enables you to work with [array](/docs/configuration.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/configuration.md#nested-list) at the same time.
+This hook enables you to work with [array](/docs/complex-structures.md#array) and support the [list](#list) intent button builder to modify a list. It can also be used with [useFieldset](#usefieldset) for [nested list](/docs/complex-structures.md#nested-list) at the same time.
 
@@ -390,3 +390,3 @@ ```tsx
 
-It parses the formData based on the [naming convention](/docs/configuration.md#naming-convention) with the validation result from the resolver.
+It parses the formData based on the [naming convention](/docs/complex-structures.md#naming-convention) with the validation result from the resolver.
 
@@ -393,0 +393,0 @@ ```tsx

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100111

increased by1.54%

Lines of code

2106

increased by1.99%

Dependency changes

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

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

• Updated@conform-to/dom@0.7.4