formik-material - npm Package Compare versions

Comparing version 1.5.2 to 2.0.0

BrazilianPhoneField/BrazilianPhoneField.js

@@ -0,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormikContext } from 'formik';
 import get from 'lodash.get';
 import { nanoid } from 'nanoid/non-secure';
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import FormattedField from '../FormattedField';
@@ -24,5 +25,5 @@ const NINTH_DIGIT = '9';
     }, [name, format, setFieldValue]);
-    return (React.createElement(FormattedField, { type: "tel", mask: "", onValueChange: onValueChange, format: format, ...props, name: name }));
+    return (_jsx(FormattedField, { type: "tel", mask: "", onValueChange: onValueChange, format: format, ...props, name: name }, void 0));
 };
 export default BrazilianPhoneField;
 //# sourceMappingURL=BrazilianPhoneField.js.map

CheckboxField/CheckboxField.d.ts

@@ -1,6 +0,6 @@
-import { CheckboxProps } from '@material-ui/core';
-import { ReactNode } from 'react';
+import { CheckboxProps } from '@mui/material/Checkbox';
+import type { ReactElement } from 'react';
 export declare type CheckboxFieldProps = Omit<CheckboxProps, 'form' | 'checked' | 'defaultChecked'> & {
-    label?: ReactNode;
+    label?: string | ReactElement;
 };
 export default function CheckboxField({ label, name, className, color, onBlur, onChange, ...checkBoxProps }: CheckboxFieldProps): JSX.Element;

CheckboxField/CheckboxField.js

@@ -1,22 +0,22 @@
-import { Checkbox, FormControl, FormControlLabel } from '@material-ui/core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { Field } from 'formik';
 import { nanoid } from 'nanoid/non-secure';
-import React from 'react';
 import ErrorLabel from '../ErrorLabel';
 export default function CheckboxField({ label = '', name = nanoid(), className, color = 'primary', onBlur = identity, onChange = identity, ...checkBoxProps }) {
-    return (React.createElement(Field, { type: "checkbox", name: name }, ({ field, meta: { error, touched } }) => {
-        const { value, checked = false } = field;
-        const indeterminate = !Array.isArray(value) && value === null;
-        const isErrorState = Boolean(error && touched);
-        const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
-        return (React.createElement(FormControl, { error: isErrorState, className: className },
-            React.createElement(FormControlLabel, { label: label, control: React.createElement(Checkbox, { indeterminate: indeterminate, checked: checked, ...checkBoxProps, ...formikFieldProps, onBlur: (e) => {
-                        formikOnBlur(e);
-                        onBlur(e);
-                    }, onChange: (e, newValue) => {
-                        formikOnChange(e);
-                        onChange(e, newValue);
-                    }, color: color }) }),
-            isErrorState && React.createElement(ErrorLabel, { error: error })));
-    }));
+    return (_jsx(Field, { type: "checkbox", name: name, children: ({ field, meta: { error, touched } }) => {
+            const { value, checked = false } = field;
+            const indeterminate = !Array.isArray(value) && value === null;
+            const isErrorState = Boolean(error && touched);
+            const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
+            return (_jsxs(FormControl, { error: isErrorState, className: className, children: [_jsx(FormControlLabel, { label: label, control: _jsx(Checkbox, { indeterminate: indeterminate, checked: checked, ...checkBoxProps, ...formikFieldProps, onBlur: (e) => {
+                                formikOnBlur(e);
+                                onBlur(e);
+                            }, onChange: (e, newValue) => {
+                                formikOnChange(e);
+                                onChange(e, newValue);
+                            }, color: color }, void 0) }, void 0), isErrorState && _jsx(ErrorLabel, { error: error }, void 0)] }, void 0));
+        } }, void 0));
 }
@@ -23,0 +23,0 @@ function identity(v) {

CpfField/CpfField.js

@@ -1,7 +0,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import FormattedField from '../FormattedField';
 const CpfField = (props) => {
-    return React.createElement(FormattedField, { type: "tel", mask: "_", ...props, format: "###.###.###-##" });
+    return _jsx(FormattedField, { type: "tel", mask: "_", ...props, format: "###.###.###-##" }, void 0);
 };
 export default CpfField;
 //# sourceMappingURL=CpfField.js.map

CurrencyField/CurrencyField.js

@@ -1,7 +0,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import NumberField from '../NumberField';
 const CurrencyField = (props) => {
-    return React.createElement(NumberField, { prefix: "R$ ", decimalScale: 2, fixedDecimalScale: true, ...props });
+    return _jsx(NumberField, { prefix: "R$ ", decimalScale: 2, fixedDecimalScale: true, ...props }, void 0);
 };
 export default CurrencyField;
 //# sourceMappingURL=CurrencyField.js.map

DateField/DateField.js

@@ -1,6 +0,6 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import FormattedField from '../FormattedField';
 export default function DateField(props) {
-    return React.createElement(FormattedField, { type: "tel", mask: "_", format: "##/##/####", ...props });
+    return _jsx(FormattedField, { type: "tel", mask: "_", format: "##/##/####", ...props }, void 0);
 }
 //# sourceMappingURL=DateField.js.map

ErrorLabel/ErrorLabel.js

@@ -1,14 +0,7 @@
-import { Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import React from 'react';
-const useClasses = makeStyles({
-    error: {
-        color: 'red',
-    },
-});
+import { jsx as _jsx } from "react/jsx-runtime";
+import Typography from '@mui/material/Typography';
 const ErrorLabel = ({ error }) => {
-    const classes = useClasses();
-    return (React.createElement(Typography, { variant: "body2", component: "div", className: `error-label ${classes.error}` }, error));
+    return (_jsx(Typography, { variant: "body2", component: "div", className: `error-label`, color: "red", children: error }, void 0));
 };
 export default ErrorLabel;
 //# sourceMappingURL=ErrorLabel.js.map

Form/Form.d.ts

 import { FormikErrors, FormikHelpers, FormikProps } from 'formik';
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export declare type OnSubmitFormCallback<T = any, R = any> = {
@@ -4,0 +4,0 @@ (values: T, formikHelpers: FormikHelpers<T>): R | Promise<R>;

Form/Form.js

@@ -0,3 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Form as FormikForm, Formik } from 'formik';
-import React from 'react';
 /**
@@ -13,6 +13,6 @@ * Form Component
     }
-    return (React.createElement(Formik, { initialValues: initialValues, onSubmit: onSubmitForm, validationSchema: validationSchema, validate: validate }, (formikProps) => {
-        return (React.createElement(FormikForm, { noValidate: true, autoComplete: "off", className: className }, typeof children === 'function' ? children(formikProps) : children));
-    }));
+    return (_jsx(Formik, { initialValues: initialValues, onSubmit: onSubmitForm, validationSchema: validationSchema, validate: validate, children: (formikProps) => {
+            return (_jsx(FormikForm, { noValidate: true, autoComplete: "off", className: className, children: typeof children === 'function' ? children(formikProps) : children }, void 0));
+        } }, void 0));
 }
 //# sourceMappingURL=Form.js.map

FormattedField/FormattedField.js

@@ -1,21 +0,19 @@
-import TextField from '@material-ui/core/TextField';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TextField from '@mui/material/TextField';
 import { Field } from 'formik';
 import { nanoid } from 'nanoid/non-secure';
-import React from 'react';
 import NumberFormat from 'react-number-format';
 import ErrorLabel from '../ErrorLabel';
 const FormattedField = ({ name = nanoid(), className, fullWidth = true, onBlur = identity, onChange = identity, ...fieldProps }) => {
-    return (React.createElement(Field, { name: name }, ({ field, meta: { error, touched } }) => {
-        const isErrorState = Boolean(error && touched);
-        const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
-        return (React.createElement("div", { className: className },
-            React.createElement(NumberFormat, { customInput: TextField, ...fieldProps, ...formikFieldProps, fullWidth: fullWidth, error: isErrorState, onBlur: (e) => {
-                    formikOnBlur(e);
-                    onBlur(e);
-                }, onChange: (e) => {
-                    formikOnChange(e);
-                    onChange(e);
-                } }),
-            isErrorState && React.createElement(ErrorLabel, { error: error })));
-    }));
+    return (_jsx(Field, { name: name, children: ({ field, meta: { error, touched } }) => {
+            const isErrorState = Boolean(error && touched);
+            const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
+            return (_jsxs("div", { className: className, children: [_jsx(NumberFormat, { customInput: TextField, ...fieldProps, ...formikFieldProps, fullWidth: fullWidth, error: isErrorState, onBlur: (e) => {
+                            formikOnBlur(e);
+                            onBlur(e);
+                        }, onChange: (e) => {
+                            formikOnChange(e);
+                            onChange(e);
+                        } }, void 0), isErrorState && _jsx(ErrorLabel, { error: error }, void 0)] }, void 0));
+        } }, void 0));
 };
@@ -22,0 +20,0 @@ export default FormattedField;

NumberField/NumberField.js

@@ -0,4 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useFormikContext } from 'formik';
 import { nanoid } from 'nanoid/non-secure';
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import FormattedField from '../FormattedField';
@@ -11,5 +12,5 @@ const NumberField = (props) => {
     }, [name, setFieldValue]);
-    return (React.createElement(FormattedField, { decimalSeparator: ",", thousandSeparator: ".", decimalScale: 0, fixedDecimalScale: true, allowNegative: false, type: "tel", ...props, onValueChange: onValueChange }));
+    return (_jsx(FormattedField, { decimalSeparator: ",", thousandSeparator: ".", decimalScale: 0, fixedDecimalScale: true, allowNegative: false, type: "tel", ...props, onValueChange: onValueChange }, void 0));
 };
 export default NumberField;
 //# sourceMappingURL=NumberField.js.map

package.json

 {
   "name": "formik-material",
-  "version": "1.5.2",
+  "version": "2.0.0",
   "description": "Material-UI Binds for formik fields",
@@ -13,17 +13,17 @@ "repository": "https://github.com/carlos-algms/formik-material.git",
     "lodash.get": "^4.4.2",
-    "nanoid": "^3.1.25",
-    "react-number-format": "^4.7.3"
+    "nanoid": "^3.1.30",
+    "react-number-format": "^4.8.0"
   },
   "peerDependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.1.1",
+    "@mui/material": "^5.1.1",
     "formik": "^2.2.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^17.0.2"
   },
   "keywords": [
     "formik",
-    "material-ui"
+    "material-ui",
+    "mui"
   ],
   "sideEffects": false
 }

PasswordField/PasswordField.d.ts

 /// <reference types="react" />
-import { TextFieldProps } from '@material-ui/core/TextField';
+import type { TextFieldProps } from '@mui/material/TextField';
 export default function PasswordField(props: TextFieldProps): JSX.Element;

PasswordField/PasswordField.js

@@ -1,6 +0,7 @@
-import IconButton from '@material-ui/core/IconButton';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import VisibilityOffOutlinedIcon from '@material-ui/icons/VisibilityOffOutlined';
-import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
-import React, { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import { useState } from 'react';
 import TextField from '../TextField';
@@ -10,8 +11,7 @@ export default function PasswordField(props) {
     const { InputProps = {} } = props;
-    return (React.createElement(TextField, { ...props, type: isVisible ? 'text' : 'password', InputProps: {
+    return (_jsx(TextField, { ...props, type: isVisible ? 'text' : 'password', InputProps: {
             ...InputProps,
-            endAdornment: (React.createElement(InputAdornment, { position: "end" },
-                React.createElement(IconButton, { onClick: () => setIsVisible(!isVisible) }, isVisible ? React.createElement(VisibilityOutlinedIcon, null) : React.createElement(VisibilityOffOutlinedIcon, null)))),
-        } }));
+            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => setIsVisible(!isVisible), size: "large", children: isVisible ? _jsx(VisibilityOutlinedIcon, {}, void 0) : _jsx(VisibilityOffOutlinedIcon, {}, void 0) }, void 0) }, void 0)),
+        } }, void 0));
 }
 //# sourceMappingURL=PasswordField.js.map

shared/FormDemo.d.ts

@@ -1,2 +0,2 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { FormProps } from '../Form';
@@ -3,0 +3,0 @@ declare type Props = Pick<FormProps<object>, 'initialValues' | 'validationSchema'> & {

shared/FormDemo.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Form from '../Form';
@@ -7,8 +7,5 @@ import SubmitButton from '../SubmitButton';
     const handle = useFormSubmittedValues(onSubmit);
-    return (React.createElement(Form, { onSubmitForm: handle, initialValues: initialValues, validationSchema: validationSchema },
-        children,
-        React.createElement("p", null),
-        React.createElement(SubmitButton, null, "Submit")));
+    return (_jsxs(Form, { onSubmitForm: handle, initialValues: initialValues, validationSchema: validationSchema, children: [children, _jsx("p", {}, void 0), _jsx(SubmitButton, { children: "Submit" }, void 0)] }, void 0));
 };
 export default FormDemo;
 //# sourceMappingURL=FormDemo.js.map

SubmitButton/SubmitButton.d.ts

@@ -1,20 +0,22 @@
-import React from 'react';
+/// <reference types="react" />
 import type PropsBase from '../shared/PropsBase';
-declare const _default: React.MemoExoticComponent<({ children, className, ...restProps }: PropsBase<any> & {
-    children?: React.ReactNode;
-    color?: import("@material-ui/core").PropTypes.Color | undefined;
+declare const _default: import("react").MemoExoticComponent<({ children, className, ...restProps }: PropsBase<any> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material/Button").ButtonClasses> | undefined;
+    color?: "error" | "inherit" | "primary" | "secondary" | "info" | "success" | "warning" | undefined;
     disabled?: boolean | undefined;
     disableElevation?: boolean | undefined;
     disableFocusRipple?: boolean | undefined;
-    endIcon?: React.ReactNode;
+    endIcon?: import("react").ReactNode;
     fullWidth?: boolean | undefined;
     href?: string | undefined;
-    size?: "medium" | "large" | "small" | undefined;
-    startIcon?: React.ReactNode;
+    size?: "small" | "medium" | "large" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
     variant?: "text" | "outlined" | "contained" | undefined;
-} & {
-    action?: React.Ref<import("@material-ui/core").ButtonBaseActions> | undefined;
-    buttonRef?: React.Ref<unknown> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
-    children?: React.ReactNode;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
     disabled?: boolean | undefined;
@@ -25,8 +27,10 @@ disableRipple?: boolean | undefined;
     focusVisibleClassName?: string | undefined;
-    onFocusVisible?: React.FocusEventHandler<any> | undefined;
-    tabIndex?: string | number | undefined;
-    TouchRippleProps?: Partial<import("@material-ui/core/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core/Button").ButtonTypeMap<{}, "button">> & Pick<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, "color" | "translate" | "hidden" | "disabled" | "ref" | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "name" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value">) => JSX.Element>;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "variant" | "tabIndex" | "href" | "disabled" | "action" | "size" | "fullWidth" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "disableFocusRipple" | "disableElevation" | "endIcon" | "startIcon">) => JSX.Element>;
 export default _default;

SubmitButton/SubmitButton.js

@@ -1,10 +0,10 @@
-import Button from '@material-ui/core/Button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from '@mui/material/Button';
 import { useFormikContext } from 'formik';
-import React, { memo } from 'react';
+import { memo } from 'react';
 const SubmitButton = ({ children, className, ...restProps }) => {
     const { isSubmitting, isValidating } = useFormikContext();
-    return (React.createElement("div", { className: className },
-        React.createElement(Button, { ...restProps, variant: "contained", color: "primary", role: "button", type: "submit", disabled: isSubmitting && !isValidating }, children)));
+    return (_jsx("div", { className: className, children: _jsx(Button, { ...restProps, variant: "contained", color: "primary", role: "button", type: "submit", disabled: isSubmitting && !isValidating, children: children }, void 0) }, void 0));
 };
 export default memo(SubmitButton);
 //# sourceMappingURL=SubmitButton.js.map

TextField/TextField.d.ts

 /// <reference types="react" />
-import { TextFieldProps } from '@material-ui/core/TextField';
+import { TextFieldProps } from '@mui/material/TextField';
 declare const TextField: ({ name, className, fullWidth, onBlur, onChange, ...textFieldProps }: TextFieldProps) => JSX.Element;
 export default TextField;

TextField/TextField.js

@@ -1,23 +0,21 @@
-import MUITextField from '@material-ui/core/TextField';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import MUITextField from '@mui/material/TextField';
 import { Field } from 'formik';
 import { nanoid } from 'nanoid/non-secure';
-import React from 'react';
 import ErrorLabel from '../ErrorLabel';
 const identity = (a) => a;
 const TextField = ({ name = nanoid(), className, fullWidth = true, onBlur = identity, onChange = identity, ...textFieldProps }) => {
-    return (React.createElement(Field, { name: name }, ({ field, meta: { error, touched } }) => {
-        const isErrorState = Boolean(error && touched);
-        const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
-        return (React.createElement("div", { className: className },
-            React.createElement(MUITextField, { ...textFieldProps, ...formikFieldProps, onBlur: (e) => {
-                    formikOnBlur(e);
-                    onBlur(e);
-                }, onChange: (e) => {
-                    formikOnChange(e);
-                    onChange(e);
-                }, fullWidth: fullWidth, error: isErrorState }),
-            isErrorState && React.createElement(ErrorLabel, { error: error })));
-    }));
+    return (_jsx(Field, { name: name, children: ({ field, meta: { error, touched } }) => {
+            const isErrorState = Boolean(error && touched);
+            const { onBlur: formikOnBlur, onChange: formikOnChange, ...formikFieldProps } = field;
+            return (_jsxs("div", { className: className, children: [_jsx(MUITextField, { ...textFieldProps, ...formikFieldProps, onBlur: (e) => {
+                            formikOnBlur(e);
+                            onBlur(e);
+                        }, onChange: (e) => {
+                            formikOnChange(e);
+                            onChange(e);
+                        }, fullWidth: fullWidth, error: isErrorState }, void 0), isErrorState && _jsx(ErrorLabel, { error: error }, void 0)] }, void 0));
+        } }, void 0));
 };
 export default TextField;
 //# sourceMappingURL=TextField.js.map

Fixed alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176502

increased by308.97%

Dependency count

7

decreased by-12.5%

Number of package files

94

increased by1.08%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

412

decreased by-5.29%

Dependency changes

• + Added@emotion/cache@11.14.0(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/sheet@1.4.0(transitive)

• + Added@emotion/utils@1.4.2(transitive)

• + Added@emotion/weak-memoize@0.4.0(transitive)

• + Added@mui/core-downloads-tracker@5.16.14(transitive)

• + Added@mui/icons-material@5.16.14(transitive)

• + Added@mui/material@5.16.14(transitive)

• + Added@mui/private-theming@5.16.14(transitive)

• + Added@mui/styled-engine@5.16.14(transitive)

• + Added@mui/system@5.16.14(transitive)

• + Added@mui/types@7.2.21(transitive)

• + Added@mui/utils@5.16.14(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Added@types/prop-types@15.7.14(transitive)

• + Addedclsx@2.1.1(transitive)

• + Addedreact@18.3.119.0.0(transitive)

• + Addedreact-dom@18.3.119.0.0(transitive)

• + Addedreact-is@19.0.0(transitive)

• + Addedscheduler@0.23.20.25.0(transitive)

• + Addedstylis@4.2.0(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@material-ui/core@4.12.4(transitive)

• - Removed@material-ui/icons@4.11.3(transitive)

• - Removed@material-ui/styles@4.11.5(transitive)

• - Removed@material-ui/system@4.12.2(transitive)

• - Removed@material-ui/types@5.1.0(transitive)

• - Removed@material-ui/utils@4.11.3(transitive)

• - Removedclsx@1.2.1(transitive)

• - Removedcss-vendor@2.0.8(transitive)

• - Removedcsstype@2.6.21(transitive)

• - Removedhyphenate-style-name@1.1.0(transitive)

• - Removedis-in-browser@1.1.3(transitive)

• - Removedjss@10.10.0(transitive)

• - Removedjss-plugin-camel-case@10.10.0(transitive)

• - Removedjss-plugin-default-unit@10.10.0(transitive)

• - Removedjss-plugin-global@10.10.0(transitive)

• - Removedjss-plugin-nested@10.10.0(transitive)

• - Removedjss-plugin-props-sort@10.10.0(transitive)

• - Removedjss-plugin-rule-value-function@10.10.0(transitive)

• - Removedjss-plugin-vendor-prefixer@10.10.0(transitive)

• - Removedpopper.js@1.16.1-lts(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedreact-is@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updatednanoid@^3.1.30

• Updatedreact-number-format@^4.8.0