@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-beta.1

package/HelpCaption/index.js

@@ -20,7 +20,7 @@ function HelpCaption(props) {
     var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption })) })), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption })), "\u00A0"] })), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
                                 ? function () {
                                     window.open(linkUrl);
                                 }
@@ -30,6 +30,6 @@ function HelpCaption(props) {
                                     color: theme.palette.primary.dark,
                                     textDecoration: "underline"
                                 }
-                            } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0) }), void 0));
+                            } }, { children: _jsx("b", { children: linkText }) })))] })), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }))] })) })));
 }
 export default HelpCaption;

package/LoadingModal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LoadingModalProps } from "./types";
 declare function LoadingModal(props: LoadingModalProps): JSX.Element;
 export default LoadingModal;

package/LoadingModal/index.js

@@ -24,7 +24,7 @@ function LoadingModal(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
                 if (reason === "backdropClick")
                     return;
-            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }, void 0), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] }), void 0) }), void 0))] }), void 0), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }), void 0)] }), void 0) }, void 0) }), void 0) }), void 0));
+            }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] })) })))] })), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }))] })) }) })) })));
 }
 export default LoadingModal;
 export * from "./types";

package/MenuButtonGroup/MenuItem.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItemProps } from "@mui/material/MenuItem";
 import { ListItemIconProps } from "@mui/material/ListItemIcon";
 export interface ButtonItemProps {

package/MenuButtonGroup/MenuItem.js

@@ -18,6 +18,6 @@ import useCustomTheme from "../useCustomTheme";
 function ButtonMenuItem(props) {
     var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
     var theme = useCustomTheme();
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0) }), void 0));
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }), _jsx(ListItemText, { primary: buttonText })] })) })));
 }
 export default ButtonMenuItem;

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,14 +1,13 @@
 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"];
@@ -16,5 +15,5 @@ export interface PasswordProps {
     onChange: (value: string) => void;
     onVerify?: (value: string) => boolean;
 }
-declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+declare function Password(props: PasswordProps): JSX.Element;
 export default Password;

package/PasswordInput/Password.js

@@ -67,10 +67,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,8 +1,7 @@
 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"];
@@ -10,5 +9,5 @@ export interface PhoneInputProps {
     onChange: (val: string) => void;
 }
 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

@@ -55,8 +55,8 @@ 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 }, rest)) })));
 }
 export default PhoneInput;