formik-material-ui - npm Package Compare versions

Comparing version 2.0.0-alpha.3 to 2.0.0-beta.0

dist/Checkbox.d.ts

 /// <reference types="react" />
 import { CheckboxProps as MuiCheckboxProps } from '@material-ui/core/Checkbox';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export interface CheckboxProps extends Omit<MuiCheckboxProps, 'name' | 'value' | 'error' | 'form' | 'checked' | 'defaultChecked'> {
-    name: string;
+import { FieldProps } from 'formik';
+export interface CheckboxProps extends FieldProps, Omit<MuiCheckboxProps, 'name' | 'value' | 'error' | 'form' | 'checked' | 'defaultChecked' | 'type'> {
+    type?: string;
 }
-export declare function useFieldToCheckbox<Val = unknown>({ disabled, name, ...props }: CheckboxProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<CheckboxProps, 'name'>>): MuiCheckboxProps;
+export declare function fieldToCheckbox({ disabled, field, form: { isSubmitting }, type, ...props }: CheckboxProps): MuiCheckboxProps;
 export declare function Checkbox(props: CheckboxProps): JSX.Element;
@@ -9,0 +9,0 @@ export declare namespace Checkbox {

dist/CheckboxWithLabel.d.ts

 /// <reference types="react" />
 import { FormControlLabelProps as MuiFormControlLabelProps } from '@material-ui/core/FormControlLabel';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
+import { FieldProps } from 'formik';
 import { CheckboxProps } from './Checkbox';
-export interface CheckboxWithLabelProps extends CheckboxProps {
+export interface CheckboxWithLabelProps extends FieldProps, CheckboxProps {
     Label: Omit<MuiFormControlLabelProps, 'checked' | 'name' | 'onChange' | 'value' | 'control'>;
 }
-export declare function CheckboxWithLabel<Val = unknown>({ Label, customize, ...props }: CheckboxWithLabelProps & {
-    customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<CheckboxProps, 'name'>>;
-}): JSX.Element;
+export declare function CheckboxWithLabel<Val = unknown>({ Label, ...props }: CheckboxWithLabelProps): JSX.Element;
 export declare namespace CheckboxWithLabel {
     var displayName: string;
 }

dist/formik-material-ui.es6.js

 import MuiTextField from '@material-ui/core/TextField';
 import MuiSwitch from '@material-ui/core/Switch';
+import invariant from 'tiny-warning';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import MuiSelect from '@material-ui/core/Select';
+import { getIn } from 'formik';
 import FormControl from '@material-ui/core/FormControl';
@@ -11,5 +13,4 @@ import InputLabel from '@material-ui/core/InputLabel';
 import MuiRadioGroup from '@material-ui/core/RadioGroup';
-import { createElement, useCallback } from 'react';
+import { createElement } from 'react';
 import MuiInputBase from '@material-ui/core/InputBase';
-import { useField, useFormikContext } from 'formik';
 
@@ -52,41 +53,36 @@ /*! *****************************************************************************
 
-function useFieldToTextField(_a, customize) {
-    var _b, _c;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var fieldProps = useField(name);
-    var field = fieldProps[0], meta = fieldProps[1];
-    var fieldError = meta.error;
-    var showError = meta.touched && !!fieldError;
-    return __assign(__assign(__assign(__assign({}, props), field), { error: showError, helperText: showError ? fieldError : props.helperText, disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), variant: (_b = props.variant, (_b !== null && _b !== void 0 ? _b : 'standard')) }), (_c = customize) === null || _c === void 0 ? void 0 : _c(fieldProps));
+function fieldToTextField(_a) {
+    var disabled = _a.disabled, field = _a.field, _b = _a.form, isSubmitting = _b.isSubmitting, touched = _b.touched, errors = _b.errors, props = __rest(_a, ["disabled", "field", "form"]);
+    var fieldError = getIn(errors, field.name);
+    var showError = getIn(touched, field.name) && !!fieldError;
+    return __assign(__assign(__assign({}, props), field), { error: showError, helperText: showError ? fieldError : props.helperText, disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), variant: props.variant });
 }
 function TextField(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (createElement(MuiTextField, __assign({}, useFieldToTextField(props)), children));
+    return createElement(MuiTextField, __assign({}, fieldToTextField(props)), children);
 }
 TextField.displayName = 'FormikMaterialUITextField';
 
-function useFieldToSwitch(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var fieldProps = useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { value: field.name, checked: field.value }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToSwitch(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, type = _a.type, props = __rest(_a, ["disabled", "field", "form", "type"]);
+    if (process.env.NODE_ENV !== 'production') {
+        invariant(type === 'checkbox', "property type=checkbox is missing from field " + field.name + ", this can caused unexpected behaviour");
+    }
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function Switch(props) {
-    return createElement(MuiSwitch, __assign({}, useFieldToSwitch(props)));
+    return createElement(MuiSwitch, __assign({}, fieldToSwitch(props)));
 }
 Switch.displayName = 'FormikMaterialUISwitch';
 
-function useFieldToCheckbox(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var fieldProps = useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { checked: field.value, value: field.value ? 'checked' : '' }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToCheckbox(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, type = _a.type, props = __rest(_a, ["disabled", "field", "form", "type"]);
+    var indeterminate = !Array.isArray(field.value) && field.value == null;
+    if (process.env.NODE_ENV !== 'production') {
+        invariant(type === 'checkbox', "property type=checkbox is missing from field " + field.name + ", this can caused unexpected behaviour");
+    }
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), indeterminate: indeterminate }, props), field);
 }
 function Checkbox(props) {
-    return createElement(MuiCheckbox, __assign({}, useFieldToCheckbox(props)));
+    return createElement(MuiCheckbox, __assign({}, fieldToCheckbox(props)));
 }
@@ -96,32 +92,13 @@ Checkbox.displayName = 'FormikMaterialUICheckbox';
 function CheckboxWithLabel(_a) {
-    var Label = _a.Label, customize = _a.customize, props = __rest(_a, ["Label", "customize"]);
-    return (createElement(FormControlLabel, __assign({ control: createElement(MuiCheckbox, __assign({}, useFieldToCheckbox(props, customize))) }, Label)));
+    var Label = _a.Label, props = __rest(_a, ["Label"]);
+    return (createElement(FormControlLabel, __assign({ control: createElement(MuiCheckbox, __assign({}, fieldToCheckbox(props))) }, Label)));
 }
 CheckboxWithLabel.displayName = 'FormikMaterialUICheckboxWithLabel';
 
-function useFieldToSelect(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var fieldProps = useField(name);
-    var field = fieldProps[0], helpers = fieldProps[2];
-    var onChange = useCallback(function (event) {
-        if (props.multiple && props.native) {
-            var options = event.target.options;
-            var value = [];
-            for (var i = 0, l = options.length; i < l; i += 1) {
-                if (options[i].selected) {
-                    value.push(options[i].value);
-                }
-            }
-            helpers.setValue(value);
-        }
-        else {
-            field.onChange(event);
-        }
-    }, [field.name, props.multiple, props.native]);
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { onChange: onChange }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToSelect(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, props = __rest(_a, ["disabled", "field", "form"]);
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function Select(props) {
-    return createElement(MuiSelect, __assign({}, useFieldToSelect(props)));
+    return createElement(MuiSelect, __assign({}, fieldToSelect(props)));
 }
@@ -131,6 +108,4 @@ Select.displayName = 'FormikMaterialUISelect';
 var SimpleFileUpload = function (_a) {
-    var name = _a.name, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, inputProps = _a.InputProps, inputLabelProps = _a.InputLabelProps;
-    var isSubmitting = useFormikContext().isSubmitting;
-    var _c = useField(name), field = _c[0], meta = _c[1], helpers = _c[2];
-    var error = meta.touched && meta.error;
+    var field = _a.field, _b = _a.form, isSubmitting = _b.isSubmitting, touched = _b.touched, errors = _b.errors, setFieldValue = _b.setFieldValue, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, inputProps = _a.InputProps, inputLabelProps = _a.InputLabelProps;
+    var error = getIn(touched, field.name) && getIn(errors, field.name);
     return (createElement("div", null,
@@ -145,3 +120,3 @@ createElement(FormControl, null,
                         var file = event.currentTarget.files[0];
-                        helpers.setValue(file);
+                        setFieldValue(field.name, file);
                     },
@@ -152,28 +127,21 @@ } }, inputProps)),
 
-function useFieldToRadioGroup(_a, customize) {
-    var _b;
-    var name = _a.name, props = __rest(_a, ["name"]);
-    var fieldProps = useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign({}, props), field), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToRadioGroup(_a) {
+    var field = _a.field, form = _a.form, props = __rest(_a, ["field", "form"]);
+    return __assign(__assign({}, props), field);
 }
 function RadioGroup(props) {
-    return createElement(MuiRadioGroup, __assign({}, useFieldToRadioGroup(props)));
+    return createElement(MuiRadioGroup, __assign({}, fieldToRadioGroup(props)));
 }
 RadioGroup.displayName = 'FormikMaterialUIRadioGroup';
 
-function useFieldToInputBase(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = useFormikContext().isSubmitting;
-    var fieldProps = useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToInputBase(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, props = __rest(_a, ["disabled", "field", "form"]);
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function InputBase(props) {
-    return createElement(MuiInputBase, __assign({}, useFieldToInputBase(props)));
+    return createElement(MuiInputBase, __assign({}, fieldToInputBase(props)));
 }
 InputBase.displayName = 'FormikMaterialUIInputBase';
 
-export { useFieldToTextField, TextField, useFieldToSwitch, Switch, useFieldToCheckbox, Checkbox, CheckboxWithLabel, useFieldToSelect, Select, SimpleFileUpload, useFieldToRadioGroup, RadioGroup, useFieldToInputBase, InputBase };
+export { fieldToTextField, TextField, fieldToSwitch, Switch, fieldToCheckbox, Checkbox, CheckboxWithLabel, fieldToSelect, Select, SimpleFileUpload, fieldToRadioGroup, RadioGroup, fieldToInputBase, InputBase };
 //# sourceMappingURL=formik-material-ui.es6.js.map

dist/index.js

@@ -9,5 +9,7 @@ 'use strict';
 var MuiSwitch = _interopDefault(require('@material-ui/core/Switch'));
+var invariant = _interopDefault(require('tiny-warning'));
 var MuiCheckbox = _interopDefault(require('@material-ui/core/Checkbox'));
 var FormControlLabel = _interopDefault(require('@material-ui/core/FormControlLabel'));
 var MuiSelect = _interopDefault(require('@material-ui/core/Select'));
+var formik = require('formik');
 var FormControl = _interopDefault(require('@material-ui/core/FormControl'));
@@ -20,3 +22,2 @@ var InputLabel = _interopDefault(require('@material-ui/core/InputLabel'));
 var MuiInputBase = _interopDefault(require('@material-ui/core/InputBase'));
-var formik = require('formik');
 
@@ -59,41 +60,36 @@ /*! *****************************************************************************
 
-function useFieldToTextField(_a, customize) {
-    var _b, _c;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0], meta = fieldProps[1];
-    var fieldError = meta.error;
-    var showError = meta.touched && !!fieldError;
-    return __assign(__assign(__assign(__assign({}, props), field), { error: showError, helperText: showError ? fieldError : props.helperText, disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), variant: (_b = props.variant, (_b !== null && _b !== void 0 ? _b : 'standard')) }), (_c = customize) === null || _c === void 0 ? void 0 : _c(fieldProps));
+function fieldToTextField(_a) {
+    var disabled = _a.disabled, field = _a.field, _b = _a.form, isSubmitting = _b.isSubmitting, touched = _b.touched, errors = _b.errors, props = __rest(_a, ["disabled", "field", "form"]);
+    var fieldError = formik.getIn(errors, field.name);
+    var showError = formik.getIn(touched, field.name) && !!fieldError;
+    return __assign(__assign(__assign({}, props), field), { error: showError, helperText: showError ? fieldError : props.helperText, disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), variant: props.variant });
 }
 function TextField(_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
-    return (React.createElement(MuiTextField, __assign({}, useFieldToTextField(props)), children));
+    return React.createElement(MuiTextField, __assign({}, fieldToTextField(props)), children);
 }
 TextField.displayName = 'FormikMaterialUITextField';
 
-function useFieldToSwitch(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { value: field.name, checked: field.value }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToSwitch(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, type = _a.type, props = __rest(_a, ["disabled", "field", "form", "type"]);
+    if (process.env.NODE_ENV !== 'production') {
+        invariant(type === 'checkbox', "property type=checkbox is missing from field " + field.name + ", this can caused unexpected behaviour");
+    }
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function Switch(props) {
-    return React.createElement(MuiSwitch, __assign({}, useFieldToSwitch(props)));
+    return React.createElement(MuiSwitch, __assign({}, fieldToSwitch(props)));
 }
 Switch.displayName = 'FormikMaterialUISwitch';
 
-function useFieldToCheckbox(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { checked: field.value, value: field.value ? 'checked' : '' }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToCheckbox(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, type = _a.type, props = __rest(_a, ["disabled", "field", "form", "type"]);
+    var indeterminate = !Array.isArray(field.value) && field.value == null;
+    if (process.env.NODE_ENV !== 'production') {
+        invariant(type === 'checkbox', "property type=checkbox is missing from field " + field.name + ", this can caused unexpected behaviour");
+    }
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting), indeterminate: indeterminate }, props), field);
 }
 function Checkbox(props) {
-    return React.createElement(MuiCheckbox, __assign({}, useFieldToCheckbox(props)));
+    return React.createElement(MuiCheckbox, __assign({}, fieldToCheckbox(props)));
 }
@@ -103,32 +99,13 @@ Checkbox.displayName = 'FormikMaterialUICheckbox';
 function CheckboxWithLabel(_a) {
-    var Label = _a.Label, customize = _a.customize, props = __rest(_a, ["Label", "customize"]);
-    return (React.createElement(FormControlLabel, __assign({ control: React.createElement(MuiCheckbox, __assign({}, useFieldToCheckbox(props, customize))) }, Label)));
+    var Label = _a.Label, props = __rest(_a, ["Label"]);
+    return (React.createElement(FormControlLabel, __assign({ control: React.createElement(MuiCheckbox, __assign({}, fieldToCheckbox(props))) }, Label)));
 }
 CheckboxWithLabel.displayName = 'FormikMaterialUICheckboxWithLabel';
 
-function useFieldToSelect(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0], helpers = fieldProps[2];
-    var onChange = React.useCallback(function (event) {
-        if (props.multiple && props.native) {
-            var options = event.target.options;
-            var value = [];
-            for (var i = 0, l = options.length; i < l; i += 1) {
-                if (options[i].selected) {
-                    value.push(options[i].value);
-                }
-            }
-            helpers.setValue(value);
-        }
-        else {
-            field.onChange(event);
-        }
-    }, [field.name, props.multiple, props.native]);
-    return __assign(__assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), { onChange: onChange }), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToSelect(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, props = __rest(_a, ["disabled", "field", "form"]);
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function Select(props) {
-    return React.createElement(MuiSelect, __assign({}, useFieldToSelect(props)));
+    return React.createElement(MuiSelect, __assign({}, fieldToSelect(props)));
 }
@@ -138,6 +115,4 @@ Select.displayName = 'FormikMaterialUISelect';
 var SimpleFileUpload = function (_a) {
-    var name = _a.name, label = _a.label, _b = _a.disabled, disabled = _b === void 0 ? false : _b, inputProps = _a.InputProps, inputLabelProps = _a.InputLabelProps;
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var _c = formik.useField(name), field = _c[0], meta = _c[1], helpers = _c[2];
-    var error = meta.touched && meta.error;
+    var field = _a.field, _b = _a.form, isSubmitting = _b.isSubmitting, touched = _b.touched, errors = _b.errors, setFieldValue = _b.setFieldValue, label = _a.label, _c = _a.disabled, disabled = _c === void 0 ? false : _c, inputProps = _a.InputProps, inputLabelProps = _a.InputLabelProps;
+    var error = formik.getIn(touched, field.name) && formik.getIn(errors, field.name);
     return (React.createElement("div", null,
@@ -152,3 +127,3 @@ React.createElement(FormControl, null,
                         var file = event.currentTarget.files[0];
-                        helpers.setValue(file);
+                        setFieldValue(field.name, file);
                     },
@@ -159,41 +134,34 @@ } }, inputProps)),
 
-function useFieldToRadioGroup(_a, customize) {
-    var _b;
-    var name = _a.name, props = __rest(_a, ["name"]);
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign({}, props), field), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToRadioGroup(_a) {
+    var field = _a.field, form = _a.form, props = __rest(_a, ["field", "form"]);
+    return __assign(__assign({}, props), field);
 }
 function RadioGroup(props) {
-    return React.createElement(MuiRadioGroup, __assign({}, useFieldToRadioGroup(props)));
+    return React.createElement(MuiRadioGroup, __assign({}, fieldToRadioGroup(props)));
 }
 RadioGroup.displayName = 'FormikMaterialUIRadioGroup';
 
-function useFieldToInputBase(_a, customize) {
-    var _b;
-    var disabled = _a.disabled, name = _a.name, props = __rest(_a, ["disabled", "name"]);
-    var isSubmitting = formik.useFormikContext().isSubmitting;
-    var fieldProps = formik.useField(name);
-    var field = fieldProps[0];
-    return __assign(__assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field), (_b = customize) === null || _b === void 0 ? void 0 : _b(fieldProps));
+function fieldToInputBase(_a) {
+    var disabled = _a.disabled, field = _a.field, isSubmitting = _a.form.isSubmitting, props = __rest(_a, ["disabled", "field", "form"]);
+    return __assign(__assign({ disabled: (disabled !== null && disabled !== void 0 ? disabled : isSubmitting) }, props), field);
 }
 function InputBase(props) {
-    return React.createElement(MuiInputBase, __assign({}, useFieldToInputBase(props)));
+    return React.createElement(MuiInputBase, __assign({}, fieldToInputBase(props)));
 }
 InputBase.displayName = 'FormikMaterialUIInputBase';
 
-exports.useFieldToTextField = useFieldToTextField;
+exports.fieldToTextField = fieldToTextField;
 exports.TextField = TextField;
-exports.useFieldToSwitch = useFieldToSwitch;
+exports.fieldToSwitch = fieldToSwitch;
 exports.Switch = Switch;
-exports.useFieldToCheckbox = useFieldToCheckbox;
+exports.fieldToCheckbox = fieldToCheckbox;
 exports.Checkbox = Checkbox;
 exports.CheckboxWithLabel = CheckboxWithLabel;
-exports.useFieldToSelect = useFieldToSelect;
+exports.fieldToSelect = fieldToSelect;
 exports.Select = Select;
 exports.SimpleFileUpload = SimpleFileUpload;
-exports.useFieldToRadioGroup = useFieldToRadioGroup;
+exports.fieldToRadioGroup = fieldToRadioGroup;
 exports.RadioGroup = RadioGroup;
-exports.useFieldToInputBase = useFieldToInputBase;
+exports.fieldToInputBase = fieldToInputBase;
 exports.InputBase = InputBase;
 //# sourceMappingURL=index.js.map

dist/InputBase.d.ts

 /// <reference types="react" />
 import { InputBaseProps as MuiInputBaseProps } from '@material-ui/core/InputBase';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export interface InputBaseProps extends Omit<MuiInputBaseProps, 'name' | 'value' | 'error'> {
-    name: string;
+import { FieldProps } from 'formik';
+export interface InputBaseProps extends FieldProps, Omit<MuiInputBaseProps, 'name' | 'value' | 'error'> {
 }
-export declare function useFieldToInputBase<Val = unknown>({ disabled, name, ...props }: InputBaseProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<InputBaseProps, 'name'>>): MuiInputBaseProps;
+export declare function fieldToInputBase({ disabled, field, form: { isSubmitting }, ...props }: InputBaseProps): MuiInputBaseProps;
 export declare function InputBase(props: InputBaseProps): JSX.Element;
@@ -9,0 +8,0 @@ export declare namespace InputBase {

dist/RadioGroup.d.ts

 /// <reference types="react" />
 import { RadioGroupProps as MuiRadioGroupProps } from '@material-ui/core/RadioGroup';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'value'> {
-    name: string;
+import { FieldProps } from 'formik';
+export interface RadioGroupProps extends FieldProps, Omit<MuiRadioGroupProps, 'name' | 'value'> {
 }
-export declare function useFieldToRadioGroup<Val = unknown>({ name, ...props }: RadioGroupProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<RadioGroupProps, 'name'>>): MuiRadioGroupProps;
+export declare function fieldToRadioGroup({ field, form, ...props }: RadioGroupProps): MuiRadioGroupProps;
 export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
@@ -9,0 +8,0 @@ export declare namespace RadioGroup {

dist/Select.d.ts

 /// <reference types="react" />
 import { SelectProps as MuiSelectProps } from '@material-ui/core/Select';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export interface SelectProps extends Omit<MuiSelectProps, 'name' | 'value'> {
-    name: string;
+import { FieldProps } from 'formik';
+export interface SelectProps extends FieldProps, Omit<MuiSelectProps, 'name' | 'value'> {
 }
-export declare function useFieldToSelect<Val = unknown>({ disabled, name, ...props }: SelectProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<SelectProps, 'name'>>): MuiSelectProps;
+export declare function fieldToSelect({ disabled, field, form: { isSubmitting }, ...props }: SelectProps): MuiSelectProps;
 export declare function Select(props: SelectProps): JSX.Element;
@@ -9,0 +8,0 @@ export declare namespace Select {

dist/SimpleFileUpload.d.ts

 /// <reference types="react" />
+import { FieldProps } from 'formik';
 import { InputLabelProps } from '@material-ui/core/InputLabel';
 import { InputProps } from '@material-ui/core/Input';
-export interface SimpleFileUploadProps {
-    name: string;
+export interface SimpleFileUploadProps extends FieldProps {
     label: string;
     disabled?: boolean;
-    InputProps?: Omit<InputProps, 'name' | 'type' | 'onChange'>;
+    InputProps?: Omit<InputProps, 'name' | 'type' | 'onChange' | 'label'>;
     InputLabelProps?: InputLabelProps;
 }
-export declare const SimpleFileUpload: ({ name, label, disabled, InputProps: inputProps, InputLabelProps: inputLabelProps, }: SimpleFileUploadProps) => JSX.Element;
+export declare const SimpleFileUpload: ({ field, form: { isSubmitting, touched, errors, setFieldValue }, label, disabled, InputProps: inputProps, InputLabelProps: inputLabelProps, }: SimpleFileUploadProps) => JSX.Element;

dist/Switch.d.ts

 /// <reference types="react" />
 import { SwitchProps as MuiSwitchProps } from '@material-ui/core/Switch';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export interface SwitchProps extends Omit<MuiSwitchProps, 'checked' | 'name' | 'value' | 'defaultChecked'> {
-    name: string;
+import { FieldProps } from 'formik';
+export interface SwitchProps extends FieldProps, Omit<MuiSwitchProps, 'checked' | 'name' | 'value' | 'defaultChecked' | 'form' | 'type'> {
+    type?: string;
 }
-export declare function useFieldToSwitch<Val = unknown>({ disabled, name, ...props }: SwitchProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<SwitchProps, 'name'>>): MuiSwitchProps;
+export declare function fieldToSwitch({ disabled, field, form: { isSubmitting }, type, ...props }: SwitchProps): MuiSwitchProps;
 export declare function Switch(props: SwitchProps): JSX.Element;
@@ -9,0 +9,0 @@ export declare namespace Switch {

dist/TextField.d.ts

 /// <reference types="react" />
 import { TextFieldProps as MuiTextFieldProps } from '@material-ui/core/TextField';
-import { FieldInputProps, FieldMetaProps, FieldHelperProps } from 'formik';
-export declare type TextFieldProps = Omit<MuiTextFieldProps, 'name' | 'value' | 'error'> & {
-    name: string;
-};
-export declare function useFieldToTextField<Val = unknown>({ disabled, name, ...props }: TextFieldProps, customize?: (props: [FieldInputProps<Val>, FieldMetaProps<Val>, FieldHelperProps<Val>]) => Partial<Omit<TextFieldProps, 'name'>>): MuiTextFieldProps;
+import { FieldProps } from 'formik';
+export interface TextFieldProps extends FieldProps, Omit<MuiTextFieldProps, 'name' | 'value' | 'error'> {
+}
+export declare function fieldToTextField({ disabled, field, form: { isSubmitting, touched, errors }, ...props }: TextFieldProps): MuiTextFieldProps;
 export declare function TextField({ children, ...props }: TextFieldProps): JSX.Element;
@@ -9,0 +8,0 @@ export declare namespace TextField {

package.json

 {
   "name": "formik-material-ui",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-beta.0",
   "license": "MIT",
@@ -26,2 +26,5 @@ "typings": "dist/main.d.ts",
   "jest": {
+    "globals": {
+      "__DEV__": "boolean"
+    },
     "testURL": "http://localhost/",
@@ -61,3 +64,3 @@ "transform": {
   },
-  "gitHead": "80722efe46b725fc2ada4d3a1d1a20cd0360171e"
+  "gitHead": "543e90cf1d49dae8b72a85af6a05bdfbb84dd63d"
 }

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Worsened metrics

Total package byte prevSize

47055

decreased by-17.57%

Lines of code

362

decreased by-16.59%

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes