@ttoss/forms 0.32.2 → 0.32.3

package/README.md

@@ -226,6 +226,55 @@ All form field components share common props:
 - `warning`: Warning message displayed below the field
 - `sx`: Theme-UI styling object
 
+### Disabling Form Fields
+
+You can disable form fields in two ways:
+
+**1. Disable the entire form:**
+
+Set `disabled: true` in `useForm` to disable all fields at once:
+
+```tsx
+const formMethods = useForm({
+  disabled: true, // Disables all fields
+});
+```
+
+This is particularly useful for preventing user interaction during asynchronous operations:
+
+```tsx
+const [isSubmitting, setIsSubmitting] = useState(false);
+
+const formMethods = useForm({
+  disabled: isSubmitting, // Disable form during submission
+});
+
+const onSubmit = async (data) => {
+  setIsSubmitting(true);
+  await saveData(data);
+  setIsSubmitting(false);
+};
+```
+
+**2. Disable individual fields:**
+
+Use the `disabled` prop on specific form field components:
+
+```tsx
+<FormFieldInput name="email" label="Email" disabled />
+```
+
+Field-level `disabled` props override the form-level setting:
+
+```tsx
+const formMethods = useForm({
+  disabled: false,
+});
+
+// This field will be disabled even though the form is enabled
+<FormFieldInput name="id" label="ID" disabled />;
+```
+
 ### FormFieldInput
 
 Text input field supporting all HTML input types.

package/dist/Brazil/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath } from 'react-hook-form';
 import { PatternFormatProps } from 'react-number-format';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CxkCeniP.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-SKHmLjAO.js';
 import '@ttoss/ui';
 import 'react';
 

package/dist/{FormFieldPatternFormat-CxkCeniP.d.ts → FormFieldPatternFormat-SKHmLjAO.d.ts}

@@ -31,7 +31,7 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, inputTooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled: propsDisabled, tooltip, inputTooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 type FormFieldPatternFormatProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<PatternFormatProps, 'name'>;
 declare const FormFieldPatternFormat: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldPatternFormatProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;

package/dist/esm/Brazil/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-X42ZUF2A.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-A5YD5USY.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";
@@ -50,7 +50,7 @@ var FormFieldPhone = /* @__PURE__ */__name(({
         format,
         customInput: Input,
         placeholder,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });

package/dist/esm/MultistepForm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-WZLEU3SB.js";
-import { __name } from "../chunk-X42ZUF2A.js";
+import { Form, useForm, yupResolver } from "../chunk-HUZSVTQD.js";
+import { __name } from "../chunk-A5YD5USY.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-X42ZUF2A.js → chunk-A5YD5USY.js}

@@ -54,7 +54,7 @@ var FormField = /* @__PURE__ */__name(({
   id: idProp,
   name,
   defaultValue,
-  disabled,
+  disabled: propsDisabled,
   tooltip,
   inputTooltip,
   sx,
@@ -73,6 +73,7 @@ var FormField = /* @__PURE__ */__name(({
       errors
     }
   } = useFormContext2();
+  const disabled = propsDisabled ?? controllerReturn.field.disabled;
   const hasError = !!errors[name];
   const uniqueId = React2.useId();
   const id = idProp || `form-field-${name}-${uniqueId}`;
@@ -138,8 +139,17 @@ var FormField = /* @__PURE__ */__name(({
       return element.type === component;
     });
   }, "isCheckboxOrSwitch");
+  const controllerReturnWithDisabled = React2.useMemo(() => {
+    return {
+      ...controllerReturn,
+      field: {
+        ...controllerReturn.field,
+        disabled
+      }
+    };
+  }, [controllerReturn, disabled]);
   const memoizedRender = React2.useMemo(() => {
-    return React2.Children.map(render(controllerReturn), child => {
+    return React2.Children.map(render(controllerReturnWithDisabled), child => {
       if (! /* @__PURE__ */React2.isValidElement(child)) {
         return null;
       }
@@ -192,7 +202,7 @@ var FormField = /* @__PURE__ */__name(({
         tooltip
       }, label), /* @__PURE__ */React2.createElement(child.type, elementProps), tooltipElement);
     });
-  }, [render, controllerReturn, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId, handleInputClick, handleInputFocus, handleInputBlur, tooltipElement]);
+  }, [render, controllerReturnWithDisabled, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId, handleInputClick, handleInputFocus, handleInputBlur, tooltipElement]);
   return /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       flexDirection: "column",
@@ -260,7 +270,7 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
           field.onChange(values.value);
         }, "onValueChange"),
         customInput: Input,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -352,7 +362,7 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
         format: "##.###.###/####-##",
         customInput: Input2,
         placeholder,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });

package/dist/esm/{chunk-WZLEU3SB.js → chunk-HUZSVTQD.js}

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-X42ZUF2A.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-A5YD5USY.js";
 
 // src/Form.tsx
 import { Box } from "@ttoss/ui";
@@ -60,7 +60,7 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Checkbox, {
         ...checkboxProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": !!fieldState.error
       });
     }, "render")
@@ -124,7 +124,7 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
           field.onChange(values.floatValue);
         }, "onValueChange"),
         customInput: Input,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });
@@ -187,7 +187,7 @@ var FormFieldInput = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Input2, {
         ...inputProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -232,7 +232,7 @@ var FormFieldPassword = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(InputPassword, {
         ...inputProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -293,7 +293,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
           value: option.value,
           checked: field.value === option.value,
           name,
-          disabled,
+          disabled: disabled ?? field.disabled,
           ...radioProps
         }), option.label);
       }));
@@ -368,7 +368,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
           value: option.value,
           checked: field.value === option.value,
           name,
-          disabled
+          disabled: disabled ?? field.disabled
         }), /* @__PURE__ */React.createElement(Flex2, {
           sx: {
             flexDirection: "column",
@@ -385,8 +385,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
 }, "FormFieldRadioCard");
 
 // src/FormFieldRadioCardIcony.tsx
-import { Box as Box3, Flex as Flex3, Text as Text2 } from "@ttoss/ui";
-import { Tag } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex3, Tag, Text as Text2 } from "@ttoss/ui";
 import * as React3 from "react";
 var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
   disabled,
@@ -422,8 +421,9 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
+      const isDisabled = disabled ?? field.disabled;
       const handleOptionClick = /* @__PURE__ */__name(optionValue => {
-        if (!disabled) {
+        if (!isDisabled) {
           field.onChange(optionValue);
           field.onBlur();
         }
@@ -455,8 +455,8 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
             alignItems: "center",
             justifyContent: "center",
             textAlign: "center",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.5 : 1,
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            opacity: isDisabled ? 0.5 : 1,
             transition: "all 0.2s ease-in-out"
           }
         }, IconComponent && /* @__PURE__ */React3.createElement(Box3, {
@@ -534,7 +534,7 @@ var FormFieldSelect = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Select, {
         ...selectProps,
         ...field,
-        isDisabled: disabled,
+        isDisabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -579,7 +579,7 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Switch, {
         ...switchProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": !!fieldState.error
       });
     }, "render")
@@ -624,7 +624,7 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Textarea, {
         ...textareaProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-WZLEU3SB.js";
-import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-X42ZUF2A.js";
+import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-HUZSVTQD.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-A5YD5USY.js";
 export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CxkCeniP.js';
-export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-CxkCeniP.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-SKHmLjAO.js';
+export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-SKHmLjAO.js';
 import { NumericFormatProps } from 'react-number-format';
 import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.21",
-    "@ttoss/ui": "^5.10.7"
+    "@ttoss/ui": "^5.10.7",
+    "@ttoss/react-i18n": "^2.0.21"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -52,10 +52,10 @@
     "yup": "^1.7.1",
     "@ttoss/config": "^1.35.11",
     "@ttoss/i18n-cli": "^0.7.37",
-    "@ttoss/react-i18n": "^2.0.21",
-    "@ttoss/react-icons": "^0.5.2",
     "@ttoss/test-utils": "^3.0.3",
-    "@ttoss/ui": "^5.10.7"
+    "@ttoss/ui": "^5.10.7",
+    "@ttoss/react-icons": "^0.5.2",
+    "@ttoss/react-i18n": "^2.0.21"
   },
   "publishConfig": {
     "access": "public",