@symply.io/basic-components 1.0.0-beta.2 → 1.0.0-beta.4

package/BasicModal/Content.js

@@ -24,14 +24,14 @@ function Content(props) {
     var children = props.children, title = props.title, desc = props.desc, _a = props.color, color = _a === void 0 ? "primary" : _a, loading = props.loading, disabled = props.disabled, buttons = props.buttons, _b = props.submitText, submitText = _b === void 0 ? "Save" : _b, _c = props.cancelText, cancelText = _c === void 0 ? "Cancel" : _c, _d = props.showTopRightCloseButton, showTopRightCloseButton = _d === void 0 ? false : _d, _e = props.hideBottomButtons, hideBottomButtons = _e === void 0 ? false : _e, _f = props.noForm, noForm = _f === void 0 ? false : _f, onClose = props.onClose, onSubmit = props.onSubmit;
     var theme = useTheme();
     return (_jsxs(_Fragment, { children: [_jsxs(DialogTitle, __assign({ id: "form-dialog-title", sx: {
-                    "& > h6": {
-                        fontWeight: "700",
-                    },
-                } }, { children: [title, showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
+                    "& > span": {
+                        fontWeight: "700!important"
+                    }
+                } }, { children: [_jsx("span", { children: title }), showTopRightCloseButton ? (_jsx(IconButton, __assign({ "aria-label": "close", onClick: onClose, sx: {
                             position: "absolute",
                             right: 8,
                             top: 8,
-                            color: theme.palette.grey[500],
+                            color: theme.palette.grey[500]
                         } }, { children: _jsx(CloseIcon, {}) }))) : null] })), _jsxs(DialogContent, __assign({ sx: { paddingTop: theme.spacing(1.25) } }, { children: [desc && _jsx(DialogContentText, { children: desc }), Boolean(children) && cloneElement(children)] })), !hideBottomButtons && (_jsx(DialogActions, __assign({ sx: { padding: theme.spacing(1.25) } }, { children: _jsx(Grid, __assign({ container: true, spacing: 2, justifyContent: "flex-end", alignItems: "center", sx: { margin: 0 } }, { children: buttons || (_jsxs(_Fragment, { children: [_jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ onClick: onClose, variant: "outlined", color: color, disabled: loading, fullWidth: true }, { children: cancelText })) })), _jsx(Grid, __assign({ item: true, xs: 12, md: 3, xl: 2 }, { children: _jsx(Button, __assign({ type: noForm ? "button" : "submit", onClick: noForm ? onSubmit : undefined, variant: "contained", color: color, disabled: loading || disabled, fullWidth: true }, { children: submitText })) }))] })) })) })))] }));
 }
 export default Content;

package/DateInput/FullDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthDayYearFormat(str: string): string;
-export declare function verifyDate(dateString: string): boolean;
+export declare function onValidateDate(dateString: string): boolean;
 declare function FullDateInput(props: DateInputprops): JSX.Element;
 export default FullDateInput;

package/DateInput/FullDateInput/index.js

@@ -30,7 +30,7 @@ export function MonthDayYearFormat(str) {
         }
     }, "");
 }
-export function verifyDate(dateString) {
+export function onValidateDate(dateString) {
     var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1}|[1-2]{1}\d{1})))\s?\/\s?\d{4}$/g;
     if (reg.test(dateString)) {
         var tmpArr = dateString.split("/");
@@ -46,7 +46,7 @@ export function verifyDate(dateString) {
     return false;
 }
 function FullDateInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -57,7 +57,9 @@ function FullDateInput(props) {
         format: MonthDayYearFormat
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD / YYYY", error: error ||
-                (valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))
+                (valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateDate(value))
                 ? helperText
                 : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
                 shrink: true

package/DateInput/FullDateInput/types.d.ts

@@ -4,7 +4,7 @@ export interface DateInputprops {
     onChange: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     helperText?: string;
     margin?: "none" | "normal" | "dense" | undefined;
     error?: boolean;

package/DateInput/MonthDayInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthDayFormat(str: string): string;
-export declare function verifyMonthDayDate(monthDayString: string): boolean;
+export declare function onValidateMonthDay(monthDayString: string): boolean;
 declare function MonthDayInput(props: DateInputprops): JSX.Element;
 export default MonthDayInput;

package/DateInput/MonthDayInput/index.js

@@ -27,12 +27,12 @@ export function MonthDayFormat(str) {
         }
     }, "");
 }
-export function verifyMonthDayDate(monthDayString) {
+export function onValidateMonthDay(monthDayString) {
     var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1})|([1-2]{1}\d{1})))$/g;
     return reg.test(monthDayString);
 }
 function MonthDayInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -44,8 +44,8 @@ function MonthDayInput(props) {
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))
+                    (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
                 ? helperText
                 : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
                 shrink: true

package/DateInput/MonthDayInput/types.d.ts

@@ -4,7 +4,7 @@ export interface DateInputprops {
     onChange: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     helperText?: string;
     margin?: "none" | "normal" | "dense" | undefined;
     error?: boolean;

package/DateInput/MonthYearInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthYearFormat(str: string): string;
-export declare function verifyMonthYearDate(monthYearString: string): boolean;
+export declare function onValidateMonthYear(monthYearString: string): boolean;
 declare function MonthYearInput(props: DateInputprops): JSX.Element;
 export default MonthYearInput;

package/DateInput/MonthYearInput/index.js

@@ -27,13 +27,13 @@ export function MonthYearFormat(str) {
         }
     }, "");
 }
-export function verifyMonthYearDate(monthYearString) {
+export function onValidateMonthYear(monthYearString) {
     var reg = /^(((0[1-9]{1})|(1[0-2]{1}))\s?\/\s?([1-2]{1}\d{3}))$/g;
     reg.lastIndex = 0;
     return reg.test(monthYearString);
 }
 function MonthYearInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -45,8 +45,8 @@ function MonthYearInput(props) {
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / YYYY", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))
+                    (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
                 ? helperText
                 : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
                 shrink: true

package/DateInput/MonthYearInput/types.d.ts

@@ -4,7 +4,7 @@ export interface DateInputprops {
     onChange: (value: string) => void;
     onFocus?: () => void;
     onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     helperText?: string;
     margin?: "none" | "normal" | "dense" | undefined;
     error?: boolean;

package/DynamicHeaderBar/HeaderButtons.js

@@ -29,8 +29,8 @@ function HeaderButtons(props) {
                         return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
                     }
                     case HeaderButtonCategory.IconButton: {
-                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
-                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon })) }), title));
+                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon, disabled = button.disabled, variant = button.variant;
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.MenuButton: {
                         var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;

package/DynamicHeaderBar/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { ButtonProps } from "@mui/material/Button";
 import { IconButtonProps } from "@mui/material/IconButton";
+import { FabProps } from "@mui/material/Fab";
 import { MenuButtonGroupProps } from "../MenuButtonGroup";
 export declare enum HeaderButtonCategory {
     IconButton = "icon",
@@ -21,7 +22,9 @@ interface HeaderTextButtonProps {
 interface HeaderIconButtonProps {
     title: string;
     icon: ReactElement;
+    disabled?: boolean;
     type: HeaderButtonCategory.IconButton;
+    variant?: FabProps["variant"];
     color?: IconButtonProps["color"];
     size?: IconButtonProps["size"];
     onClick: IconButtonProps["onClick"];

package/FeinInput/index.d.ts

@@ -1,6 +1,6 @@
 import { FeinInputProps } from "./types";
 export declare function FeinInputFormat(str: string): string;
-export declare function verifyFein(feinString: string): boolean;
+export declare function onValidateFein(feinString: string): boolean;
 declare function FeinInput(props: FeinInputProps): JSX.Element;
 export default FeinInput;
 export * from "./types";

package/FeinInput/index.js

@@ -38,12 +38,12 @@ export function FeinInputFormat(str) {
         }
     }, "");
 }
-export function verifyFein(feinString) {
+export function onValidateFein(feinString) {
     var reg = /^\d{2}\s?-\s?\d{7}$/g;
     return reg.test(feinString);
 }
 function FeinInput(props) {
-    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onChange = props.onChange, verifyFn = props.verifyFn, onFocus = props.onFocus, onBlur = props.onBlur, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onChange", "verifyFn", "onFocus", "onBlur", "primaryColor", "secondaryColor"]);
+    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onBlur = props.onBlur, onFocus = props.onFocus, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onBlur", "onFocus", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -54,7 +54,9 @@ function FeinInput(props) {
         format: FeinInputFormat
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
-                (valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))), helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))
+                (valLength > 0 &&
+                    (onValidate ? !onValidate(value) : onValidateFein(value))), helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : onValidateFein(value))
                 ? helperText
                 : "", onFocus: function (event) {
                 if (onFocus) {

package/FeinInput/types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/PasswordInput/Password.d.ts

@@ -13,7 +13,8 @@ export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
-    onVerify?: (value: string) => boolean;
+    onValidate?: (value: string) => boolean;
 }
+export declare function onValidatePassword(password: string): boolean;
 declare function Password(props: PasswordProps): JSX.Element;
 export default Password;

package/PasswordInput/Password.js

@@ -26,6 +26,10 @@ import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
+export function onValidatePassword(password) {
+    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
+    return reg.test(password);
+}
 function Password(props) {
     var _a = props.strategies, strategies = _a === void 0 ? {
         uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
@@ -36,17 +40,14 @@ function Password(props) {
         },
         number: { label: "1 Number", regex: /\d+/ },
         minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
-        var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
-        return reg.test(password);
-    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onVerify", "onChange"]);
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isValidPassword = useMemo(function () {
         if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
-            return onVerify(value);
+            return onValidate ? onValidate(value) : onValidatePassword(value);
         }
         return true;
-    }, [value, onVerify]);
+    }, [value, onValidate, onValidatePassword]);
     var helperTextColor = useMemo(function () {
         var textColors = Object.keys(strategies).reduce(function (temp, key) {
             var regex = strategies[key].regex;

package/PhoneNumberInput/index.d.ts

@@ -7,7 +7,9 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (val: string) => void;
+    onValidate?: (val: string) => boolean;
 }
+export declare function onValidatePhone(str: string): boolean;
 export declare function phoneFormat(str: string): string;
 declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -28,6 +28,10 @@ import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
+export function onValidatePhone(str) {
+    var reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
+    return reg.test(str);
+}
 export function phoneFormat(str) {
     var digits = (str.match(/\d+/g) || []).join("");
     var chars = digits.split("");
@@ -44,9 +48,9 @@ export function phoneFormat(str) {
     }, "(");
 }
 function PhoneInput(props) {
-    var value = props.value, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "primaryColor", "secondaryColor", "onChange"]);
+    var value = props.value, error = props.error, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid phone number" : _a, onChange = props.onChange, onValidate = props.onValidate, rest = __rest(props, ["value", "error", "endAdornment", "primaryColor", "secondaryColor", "helperText", "onChange", "onValidate"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var addMask = useInteractions({ value: value }).addMask;
+    var _b = useInteractions({ value: value }), valLength = _b.valLength, addMask = _b.addMask;
     var rifm = useRifm({
         mask: true,
         value: String(value),
@@ -57,6 +61,13 @@ function PhoneInput(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
                 startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" })) }))),
                 endAdornment: endAdornment
-            }, onChange: rifm.onChange }, rest)) })));
+            }, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(rifm.value) : !onValidatePhone(rifm.value))
+                ? helperText
+                : "", error: error ||
+                (valLength > 0 &&
+                    (onValidate
+                        ? !onValidate(rifm.value)
+                        : !onValidatePhone(rifm.value))) }, rest)) })));
 }
 export default PhoneInput;

package/README.md

@@ -116,7 +116,7 @@ import { Autocomplete } from '@symply.io/basic-components/';
 import Autocomplete from '@symply.io/basic-components/Autocomplete'; 
 ```
 
-<h5>Option Props (AutocompleteOptionType)</h5>
+<h5>Option Props (IOption)</h5>
 
 | Name   | Type    | Default | Required | Description                |
 | ------ | ------- | ------- | -------- | -------------------------- |
@@ -125,12 +125,12 @@ import Autocomplete from '@symply.io/basic-components/Autocomplete';
 
 <h5>Props</h5>
 
-| Name     | Type                            | Default | Required | Description                                                  |
-| -------- | ------------------------------- | ------- | -------- | ------------------------------------------------------------ |
-| multiple | bool                            | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
-| onChange | func                            |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<AutocompleteOptionType)|AutocompleteOptionType|null => void`<br/>*value:* The value of the `Input` element. |
-| options  | Array\<AutocompleteOptionType\> |         | true     | Array of suggestion options.                                 |
-| value    | AutocompleteOptionType          |         | true     | The value of the `Input` element.                            |
+| Name     | Type                   | Default | Required | Description                                                  |
+| -------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| multiple | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options  | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value    | string                 |         | true     | The value of the `Input` element.                            |
 
 
 
@@ -148,7 +148,7 @@ import { AutocompleteWithFilter } from '@symply.io/basic-components/';
 import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWithFilter'; 
 ```
 
-<h5>Option Props (AutocompleteOptionType)</h5>
+<h5>Option Props (IOption)</h5>
 
 | Name   | Type    | Default | Required | Description                |
 | ------ | ------- | ------- | -------- | -------------------------- |
@@ -157,13 +157,13 @@ import AutocompleteWithFilter from '@symply.io/basic-components/AutocompleteWith
 
 <h5>Props</h5>
 
-| Name                 | Type                            | Default | Required | Description                                                  |
-| -------------------- | ------------------------------- | ------- | -------- | ------------------------------------------------------------ |
-| disableCloseOnSelect | bool                            | false   | false    | If `true`, the popup won't close when a value is selected.   |
-| multiple             | bool                            | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
-| onChange             | func                            |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<AutocompleteOptionType)|AutocompleteOptionType|null => void`<br/>*value:* The value of the `Input` element. |
-| options              | Array\<AutocompleteOptionType\> |         | true     | Array of suggestion options.                                 |
-| value                | AutocompleteOptionType          |         | true     | The value of the `Input` element.                            |
+| Name                 | Type                   | Default | Required | Description                                                  |
+| -------------------- | ---------------------- | ------- | -------- | ------------------------------------------------------------ |
+| disableCloseOnSelect | bool                   | false   | false    | If `true`, the popup won't close when a value is selected.   |
+| multiple             | bool                   | false   | false    | If `true`, `value` must be an array and the menu will support multiple selections. |
+| onChange             | func                   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: Array<IOption|string>|IOption|string|null) => void`<br/>*value:* The value of the `Input` element. |
+| options              | Array<IOption\|string> |         | true     | Array of suggestion options.                                 |
+| value                | string                 |         | true     | The value of the `Input` element.                            |
 
 
 
@@ -311,8 +311,8 @@ import FullDateInput from '@symply.io/basic-components/DateInput/FullDateInput';
 | onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
 | onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
 | value      | string                        |         | true     | The value of the `Input` element.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 <h4>MonthDayInput</h4>
 
@@ -339,8 +339,8 @@ import MonthDayInput from '@symply.io/basic-components/DateInput/MonthDayInput';
 | onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
 | onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
 | value      | string                        |         | true     | The value of the `Input` element.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 <h4>MonthYearInput</h4>
 
@@ -367,8 +367,8 @@ import MonthYearInput from '@symply.io/basic-components/DateInput/MonthYearInput
 | onBlur     | func                          |         | false    | Callback fired when the `input` is blurred. Notice that the first argument (event) might be undefined. |
 | onChange   | func                          |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | onFocus    | func                          |         | false    | Callback fired when the `input` is focused.                  |
+| onValidate | func                          |         | false    | Customized validation function.                              |
 | value      | string                        |         | true     | The value of the `Input` element.                            |
-| verifyFn   | func                          |         | false    | Customized verification function.                            |
 
 
 
@@ -415,11 +415,11 @@ import FeinInput from '@symply.io/basic-components/FeinInput';
 
 <h5>Props</h5>
 
-| Name     | Type   | Default | Required | Description                                                  |
-| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
-| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| value    | string |         | true     | The value of the `Input` element.                            |
-| verifyFn | func   |         | false    | Customized verification function.                            |
+| Name       | Type   | Default | Required | Description                                                  |
+| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange   | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
 
 
 
@@ -637,7 +637,7 @@ import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput';
 | Name         | Type                                               | Default                                                      | Required | Description                                                  |
 | ------------ | -------------------------------------------------- | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
 | onChange     | func                                               |                                                              | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| onVerify     | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate   | func                                               |                                                              | false    | Customized verify function when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
 | strategies   | { [key: string]: { label: string, regex: RegExp }} | {<br />uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },<br />lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },<br />specialCharacter: { label: "1 Special Character", regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{}~]/ },<br />number: { label: "1 Number", regex: /\d+/ },<br />minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }<br />} | false    | The strategies of the password                               |
 | successColor | Color                                              | 'green'                                                      | false    | The color of component when success.                         |
 | value        | string                                             |                                                              | true     | The password value.                                          |
@@ -672,6 +672,7 @@ import PhoneNumberInput from '@symply.io/basic-components/PhoneNumberInput';
 | ------------ | ------ | ------- | -------- | ------------------------------------------------------------ |
 | endAdornment | node   |         | false    | An end adornment element for the `Input` element.            |
 | onChange     | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate   | func   |         | false    | Customized validation function.                              |
 | value        | string |         | true     | The value of the `Input` element.                            |
 
 
@@ -725,11 +726,11 @@ import SocialInput from '@symply.io/basic-components/SocialInput';
 
 <h5>Props</h5>
 
-| Name     | Type   | Default | Required | Description                                                  |
-| -------- | ------ | ------- | -------- | ------------------------------------------------------------ |
-| onChange | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
-| value    | string |         | true     | The value of the `Input` element.                            |
-| verifyFn | func   |         | false    | Customized verification function.                            |
+| Name       | Type   | Default | Required | Description                                                  |
+| ---------- | ------ | ------- | -------- | ------------------------------------------------------------ |
+| onChange   | func   |         | true     | Callback fired when the `Input` value is changed.<br />**Signature:**<br/>`function(value: string) => void`<br/>*value:* The value of the `Input` element. |
+| onValidate | func   |         | false    | Customized validation function.                              |
+| value      | string |         | true     | The value of the `Input` element.                            |
 
 
 

package/SocialInput/index.d.ts

@@ -1,6 +1,6 @@
 import { SocialInputProps } from "./types";
 export declare function SocialInputFormat(str: string): string;
-export declare function verifySocial(socialString: string): boolean;
+export declare function onValidateSocial(socialString: string): boolean;
 declare function SocialInput(props: SocialInputProps): JSX.Element;
 export default SocialInput;
 export * from "./types";

package/SocialInput/index.js

@@ -45,12 +45,12 @@ export function SocialInputFormat(str) {
         }
     }, "");
 }
-export function verifySocial(socialString) {
+export function onValidateSocial(socialString) {
     var reg = /^\d{3}\s?-\s?\d{2}\s?-\s?\d{4}$/g;
     return reg.test(socialString);
 }
 function SocialInput(props) {
-    var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, verifyFn = props.verifyFn, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "verifyFn", "onChange", "primaryColor", "secondaryColor"]);
+    var value = props.value, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid SSN" : _a, error = props.error, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "helperText", "error", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _b = useInteractions({
         value: value
@@ -62,11 +62,12 @@ function SocialInput(props) {
         replace: addMask,
         format: SocialInputFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : !verifySocial(value))
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateSocial(value))
                 ? helperText
                 : "", value: rifm.value, onChange: rifm.onChange, type: visible ? "text" : "password", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifySocial(value))), InputProps: {
+                    (onValidate ? !onValidate(value) : !onValidateSocial(value))), InputProps: {
                 endAdornment: (_jsx(InputAdornment, __assign({ position: "end" }, { children: valLength === 9 && (_jsx(IconButton, __assign({ "aria-label": "Toggle SSN visibility", onClick: onSwitching }, { children: visible ? _jsx(Visibility, {}) : _jsx(VisibilityOff, {}) }))) })))
             }, InputLabelProps: {
                 shrink: true

package/SocialInput/types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface SocialInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",