@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-bata.7

package/MenuButtonGroup/index.js

@@ -75,7 +75,7 @@ function MenuButtonGroup(props) {
     var onClose = function () {
         setAnchorEl(null);
     };
-    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+    return (_jsxs(ThemeProvider, __assign({ theme: theme }, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }), disabled: disabled }, { children: buttonText })), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "center"
                 }, transformOrigin: {
@@ -98,6 +98,6 @@ function MenuButtonGroup(props) {
                                 }
                             });
                         }); } }), buttonText));
-                }) }), void 0)] }), void 0));
+                }) }))] })));
 }
 export default MenuButtonGroup;

package/NumberInput/index.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextProps = Omit<TextFieldProps, "onChange">;
-export interface NumberInputProps {
+export interface NumberInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;
     integerOnly?: boolean;
@@ -11,5 +10,5 @@ export interface NumberInputProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
+declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

package/NumberInput/index.js

@@ -36,6 +36,6 @@ function NumberInput(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
                     onCloseTooltip();
                     handleBlur();
-                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0) }), void 0));
+                }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest)) })) })));
 }
 export default NumberInput;

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,12 +1,11 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface ConfirmPasswordProps {
+export interface ConfirmPasswordProps extends Omit<TextFieldProps, "onChange"> {
     password: string;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
 }
-declare function ConfirmPassword(props: ConfirmPasswordProps & TextInputProps): JSX.Element;
+declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
 export default ConfirmPassword;

package/PasswordInput/ConfirmPassword.js

@@ -36,6 +36,6 @@ function ConfirmPassword(props) {
     }, [value, password]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default ConfirmPassword;

package/PasswordInput/Password.d.ts

@@ -1,20 +1,20 @@
 import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
         regex: RegExp;
     };
 }
-export interface PasswordProps {
-    strategies: PasswordStrategyProps;
+export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
+    strategies?: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
-    onVerify?: (value: string) => boolean;
+    onValidate?: (value: string) => boolean;
 }
-declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+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;
@@ -67,10 +68,10 @@ function Password(props) {
         return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
                 var label = strategies[key].label;
                 return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
-            }) }, void 0));
+            }) }));
     }, [helperTextColor, strategies]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
                 onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest), void 0) }), void 0));
+            }, fullWidth: true, required: true }, rest)) })));
 }
 export default Password;

package/PhoneNumberInput/index.d.ts

@@ -1,14 +1,15 @@
 import { CSSProperties } from "react";
 import { InputProps } from "@mui/material/Input";
 import { TextFieldProps } from "@mui/material/TextField";
-declare type TextInputProps = Omit<TextFieldProps, "onChange">;
-export interface PhoneInputProps {
+export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     value: string;
     endAdornment?: InputProps["endAdornment"];
     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: TextInputProps & PhoneInputProps): JSX.Element;
+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),
@@ -55,8 +59,15 @@ function PhoneInput(props) {
         format: phoneFormat
     });
     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" }), void 0) }), void 0)),
+                startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" })) }))),
                 endAdornment: endAdornment
-            }, onChange: rifm.onChange }, rest), void 0) }), void 0));
+            }, 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;