form-input-fields 1.0.10 → 1.0.11

package/README.md

@@ -173,6 +173,7 @@ If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.
     - [Basic Date Text Input](#basic-date-text-input)
     - [Date Text Field with Formik](#date-text-field-with-formik)
     - [Custom Date Format](#custom-date-format)
+- [History](#history)
 
 ---
 
@@ -218,6 +219,7 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
 |------------|------------|---------|-----------------------------------------------|
 | `onChange` | `function` | -       | Custom change handler that overrides Formik's |
 | `onBlur`   | `function` | -       | Custom blur handler that overrides Formik's   |
+| `variant`  | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
 
 #### Common Props (from FieldProps & TextFieldProps)
 
@@ -244,6 +246,7 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
   placeholder="Enter your username"
   fullWidth
   margin="normal"
+  variant="outlined" // <-- Example with outlined variant
 />
 ```
 
@@ -354,6 +357,7 @@ The FormDropDownField component accepts all props from `FormDropDownFieldProps`,
 | `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
 | `onChange` | `(value: any) => void` | - | Custom change handler |
 | `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
+| `variant` | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
 
 ### Examples
 
@@ -372,6 +376,7 @@ const items = [
   label="Country"
   items={items}
   fullWidth
+  variant="outlined" // <-- Example with outlined variant
 />
 ```
 
@@ -1267,6 +1272,7 @@ import { FormMaskField } from "form-input-mask-field";
 | `showMaskPattern`  | `boolean`  | `false` | Show the mask pattern as helper text below the input field     |
 | `showPlaceholder`  | `boolean`  | `false` | Show placeholder text with mask pattern in the input field     |
 | `onChange`         | `function` | -       | Custom change handler with masked, clean, and raw values       |
+| `variant`         | `'standard' | 'outlined' | 'filled'` | 'standard' | The variant of the MUI TextField. |
 
 Plus all standard Material-UI TextField props and Formik FieldProps.
 
@@ -1281,6 +1287,7 @@ Plus all standard Material-UI TextField props and Formik FieldProps.
   label="Phone Number"
   mask="(999) 999-9999"
   placeholder="(555) 123-4567"
+  variant="outlined" // <-- Example with outlined variant
 />
 ```
 
@@ -1334,6 +1341,7 @@ Plus all standard Material-UI TextField props and Formik FieldProps.
     console.log("Clean value:", event.target.cleanValue);
     console.log("Raw input:", event.target.rawValue);
   }}
+  variant="outlined" // <-- Example with outlined variant
 />
 ```
 
@@ -1522,6 +1530,7 @@ function App() {
                           showPlaceholder={true}
                           helperText="US phone number format"
                           onChange={handleCustomChange("phone")}
+                          variant="outlined" // <-- Example with outlined variant
                         />
                       </Grid>
 
@@ -1791,3 +1800,15 @@ The example demonstrates how FormMaskField seamlessly integrates with existing M
 If you like my work, you can support me here:
 
 [![Buy Me a book](https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png)](https://coff.ee/vavanv)
+
+## History
+
+### Added `variant` prop to controls
+
+The following controls now accept a `variant` prop (`'standard' | 'outlined' | 'filled'`), which is passed to the underlying MUI TextField. The default is `'standard'`:
+
+- `FormTextField`
+- `FormDropDownField`
+- `FormMaskField`
+
+This allows you to easily switch between Material-UI's standard, outlined, and filled input styles for these components.

package/dist/controls/FormDropDownField/FormDropDownField.d.ts

@@ -49,8 +49,13 @@ export interface FormDropDownFieldProps {
      * Custom onBlur handler
      */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * The variant to use for the MUI TextField ('standard', 'outlined', 'filled')
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'outlined' | 'filled';
 }
 type FormDropDownFieldComponentProps = FormDropDownFieldProps & FieldProps & Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'name' | 'defaultValue' | 'onError' | 'onFocus' | 'InputProps' | 'select' | 'SelectProps'>;
-export declare const FormDropDownField: ({ field, form, items, addInputSelect, selectText, required, disabled, className, helperText, error, onChange, onBlur, ...props }: FormDropDownFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDropDownField: ({ field, form, items, addInputSelect, selectText, required, disabled, className, helperText, error, onChange, onBlur, variant, ...props }: FormDropDownFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=FormDropDownField.d.ts.map

package/dist/controls/FormDropDownField/FormDropDownField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormDropDownField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/FormDropDownField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAoC,MAAM,eAAe,CAAC;AAGjF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,aAAa,CAChB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,kIAc/B,+BAA+B,4CAiEjC,CAAC"}
+{"version":3,"file":"FormDropDownField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/FormDropDownField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAoC,MAAM,eAAe,CAAC;AAGjF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAE7D;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC9C;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,aAAa,CAChB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,2IAe/B,+BAA+B,4CAiEjC,CAAC"}

package/dist/controls/FormMaskField/FormMaskField.d.ts

@@ -36,6 +36,11 @@ export interface FormMaskFieldProps {
     showMaskPattern?: boolean;
     /** Show the placeholder text (default: false) */
     showPlaceholder?: boolean;
+    /**
+     * The variant to use for the MUI TextField ('standard', 'outlined', 'filled')
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'outlined' | 'filled';
 }
 export type FormMaskFieldComponentProps = FieldProps & TextFieldProps & FormMaskFieldProps;
 export declare const FormMaskField: (props: FormMaskFieldComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/FormMaskField/FormMaskField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormMaskField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;KACH,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IAEV,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE3F,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CA8H/D,CAAC"}
+{"version":3,"file":"FormMaskField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormMaskField/FormMaskField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAE3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAI9D,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,yEAAyE;IACzE,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE;QACL,MAAM,EAAE;YACN,KAAK,EAAE,MAAM,CAAC;YACd,UAAU,EAAE,MAAM,CAAC;YACnB,QAAQ,EAAE,MAAM,CAAC;SAClB,CAAC;KACH,GAAG,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KACpC,IAAI,CAAC;IAEV,4DAA4D;IAC5D,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,iDAAiD;IACjD,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC9C;AAED,MAAM,MAAM,2BAA2B,GAAG,UAAU,GAAG,cAAc,GAAG,kBAAkB,CAAC;AAE3F,eAAO,MAAM,aAAa,GAAI,OAAO,2BAA2B,4CA+H/D,CAAC"}

package/dist/controls/FormTextField/FormTextField.d.ts

@@ -5,6 +5,11 @@ export interface FormTextFieldProps extends FieldProps, Omit<TextFieldProps, 'na
     onChange?: (value: any) => void;
     /** Custom onBlur handler that will override Formik's default */
     onBlur?: (e: React.FocusEvent<any, Element>) => void;
+    /**
+     * The variant to use for the MUI TextField ('standard', 'outlined', 'filled')
+     * @default 'standard'
+     */
+    variant?: 'standard' | 'outlined' | 'filled';
 }
 export declare const FormTextField: (props: FormTextFieldProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FormTextField.d.ts.map

package/dist/controls/FormTextField/FormTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormTextField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormTextField/FormTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAA0B,MAAM,eAAe,CAAC;AAEvE,MAAM,WAAW,kBAAmB,SAAQ,UAAU,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IACpH,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAyBtD,CAAC"}
+{"version":3,"file":"FormTextField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormTextField/FormTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAA0B,MAAM,eAAe,CAAC;AAEvE,MAAM,WAAW,kBAAmB,SAAQ,UAAU,EAAE,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;IACpH,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAErD;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,UAAU,GAAG,QAAQ,CAAC;CAC9C;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CA0BtD,CAAC"}