@symply.io/basic-components 1.4.0-alpha.9 → 1.4.0-beta.10

package/FileUploader/index.d.ts

@@ -1,4 +1,4 @@
-import { FileUploaderProps } from "./types";
+import type { FileUploaderProps } from "./types";
 declare function FileUploader(props: FileUploaderProps): JSX.Element;
 export default FileUploader;
-export * from "./types";
+export type { FileUploaderProps };

package/FileUploader/index.js

@@ -60,4 +60,3 @@ function FileUploader(props) {
                             }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))), _jsx(AlertDialog, __assign({ open: alertArgs.open, primaryColor: primaryColor, secondaryColor: secondaryColor, onClose: onCloseAlert }, { children: alertArgs.message }))] })));
 }
 export default FileUploader;
-export * from "./types";

package/FormRadioGroup/index.d.ts

@@ -1,4 +1,4 @@
-import { FormRadioGroupProps } from "./types";
+import type { RadioOption, FormRadioGroupProps } from "./types";
 declare function FormRadioGroup(props: FormRadioGroupProps): JSX.Element;
 export default FormRadioGroup;
-export * from "./types";
+export type { RadioOption, FormRadioGroupProps };

package/FormRadioGroup/index.js

@@ -41,4 +41,3 @@ function FormRadioGroup(props) {
                     }) }))] })) })));
 }
 export default FormRadioGroup;
-export * from "./types";

package/FormRadioGroup/types.d.ts

@@ -1,14 +1,14 @@
 import { CSSProperties } from "react";
 import { FormControlProps } from "@mui/material/FormControl";
 import { FormControlLabelProps } from "@mui/material/FormControlLabel";
-interface IRadioOption {
+export declare type RadioOption = {
     label: string;
     value: string | boolean | number;
     disabled?: boolean;
-}
+};
 export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange"> {
     formLabel: string;
-    options: Array<IRadioOption>;
+    options: Array<RadioOption>;
     value: string | boolean | number;
     tooltip?: string;
     primaryColor?: CSSProperties["color"];
@@ -16,4 +16,3 @@ export interface FormRadioGroupProps extends Omit<FormControlProps, "onChange">
     radioLabelPlacement?: FormControlLabelProps["labelPlacement"];
     onChange: (value: string | boolean | number) => void;
 }
-export {};

package/HelpCaption/index.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from "react";
-export interface HelpCaptionProps {
+export declare type HelpCaptionProps = {
     mainCaption: string;
     subCaption?: string;
     linkUrl?: string;
@@ -7,6 +7,6 @@ export interface HelpCaptionProps {
     linkType?: "WEBPAGE" | "VIDEO";
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-}
+};
 declare function HelpCaption(props: HelpCaptionProps): JSX.Element;
 export default HelpCaption;

package/README.md

@@ -237,9 +237,7 @@ It is extended from `@mui/material/Checkbox`, so it includes all properties of `
 ```typescript
 import { CheckBox } from '@symply.io/basic-components/';
 // or 
-import { CheckBox } from '@symply.io/basic-components/CheckBox'; 
-// or 
-import CheckBox from '@symply.io/basic-components/CheckBox/CheckBox'; 
+import CheckBox from '@symply.io/basic-components/CheckBox'; 
 ```
 
 <h5>Props</h5>
@@ -262,9 +260,7 @@ It is extended from `@mui/material/FormGroup`, so it includes all properties of
 ```typescript
 import { CheckBoxGroup } from '@symply.io/basic-components/';
 // or 
-import { CheckBoxGroup } from '@symply.io/basic-components/CheckBox'; 
-// or 
-import CheckBoxGroup from '@symply.io/basic-components/CheckBox/CheckBoxGroup'; 
+import CheckBoxGroup from '@symply.io/basic-components/CheckBoxGroup'; 
 ```
 
 <h5>Props</h5>
@@ -701,9 +697,9 @@ It is extended from `@mui/material/TextField`, so it includes all properties of
 
 ```typescript
 // Password
-import { Password } from '@symply.io/basic-components/PasswordInput';
+import Password from '@symply.io/basic-components/PasswordInput';
 // Confirm Password 
-import { ConfirmPassword } from '@symply.io/basic-components/PasswordInput'; 
+import ConfirmPassword from '@symply.io/basic-components/ConfirmPasswordInput'; 
 ```
 
 <h5>Password Props</h5>

package/SocialInput/index.d.ts

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

package/SocialInput/index.js

@@ -74,4 +74,3 @@ function SocialInput(props) {
             } }, rest)) })));
 }
 export default SocialInput;
-export * from "./types";

package/TabGroup/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TabGroupProps } from "./types";
+import type { TabGroupProps } from "./types";
 declare const TabGroup: import("react").ForwardRefExoticComponent<TabGroupProps & import("react").RefAttributes<unknown>>;
 export default TabGroup;
-export * from "./types";
+export type { TabGroupProps };

package/TabGroup/index.js

@@ -48,4 +48,3 @@ var TabGroup = forwardRef(function (props, ref) {
             }) })) })));
 });
 export default TabGroup;
-export * from "./types";

package/TablePagination/index.d.ts

@@ -1,4 +1,4 @@
-import { TablePaginationProps } from "./types";
+import type { TablePaginationProps } from "./types";
 declare function Pagination(props: TablePaginationProps): JSX.Element;
 export default Pagination;
-export * from "./types";
+export type { TablePaginationProps };

package/TablePagination/index.js

@@ -20,4 +20,3 @@ function Pagination(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: count ? (_jsx(TablePagination, { component: "div", colSpan: colSpan, count: count, rowsPerPage: rowsPerPage, page: page, SelectProps: { native: true }, rowsPerPageOptions: rowsPerPageOptions, onPageChange: onPageChange, onRowsPerPageChange: onRowsPerPageChange, ActionsComponent: TablePaginationActions })) : (_jsx(_Fragment, {})) })));
 }
 export default Pagination;
-export * from "./types";

package/TextInput/index.d.ts

@@ -9,5 +9,5 @@ export interface TextInputProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-declare const TextInput: (props: TextInputProps) => JSX.Element;
+declare function TextInput(props: TextInputProps): JSX.Element;
 export default TextInput;

package/TextInput/index.js

@@ -26,7 +26,7 @@ import Field from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
-var TextInput = function (props) {
+function TextInput(props) {
     var _a = props.type, type = _a === void 0 ? "text" : _a, onChange = props.onChange, value = props.value, _b = props.size, size = _b === void 0 ? "small" : _b, tooltip = props.tooltip, _c = props.maxLength, maxLength = _c === void 0 ? 999 : _c, _d = props.minLength, minLength = _d === void 0 ? 0 : _d, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBlur = props.onBlur, onFocus = props.onFocus, rest = __rest(props, ["type", "onChange", "value", "size", "tooltip", "maxLength", "minLength", "primaryColor", "secondaryColor", "onBlur", "onFocus"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _e = useInteractions(), tooltipOpen = _e.tooltipOpen, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
@@ -42,5 +42,5 @@ var TextInput = function (props) {
                     event.preventDefault();
                     onChange(event.target.value);
                 }, inputProps: { maxLength: maxLength, minLength: minLength } }, rest)) })) })));
-};
+}
 export default TextInput;

package/ToastPrompt/Prompt.d.ts

@@ -1,3 +1,4 @@
-import type { PromptProps } from "./types";
-declare function Prompt(props: PromptProps): JSX.Element;
+/// <reference types="react" />
+import { RefProps } from "./types";
+declare const Prompt: import("react").ForwardRefExoticComponent<import("react").RefAttributes<RefProps | null>>;
 export default Prompt;

package/ToastPrompt/Prompt.js

@@ -9,19 +9,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle } from "react";
 import Alert from "@mui/material/Alert";
 import Slide from "@mui/material/Slide";
-import AlertTitle from "@mui/material/AlertTitle";
 import Snackbar from "@mui/material/Snackbar";
+import Typography from "@mui/material/Typography";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
+import useInteractions from "./useInteractions";
 function Transition(args) {
     return _jsx(Slide, __assign({}, args, { direction: "up" }));
 }
-function Prompt(props) {
-    var open = props.open, type = props.type, message = props.message, timeout = props.timeout, onClose = props.onClose;
+var Prompt = forwardRef(function (_, ref) {
     var theme = useCustomTheme();
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onClose, autoHideDuration: timeout, TransitionComponent: Transition, sx: { zIndex: 99999 } }, { children: _jsxs(Alert, __assign({ variant: "filled", severity: type, sx: { width: "100%", fontSize: 14, fontWeight: 700 }, onClose: onClose }, { children: [_jsx(AlertTitle, __assign({ sx: { textTransform: "capitalize", fontSize: 14, fontWeight: 700 } }, { children: type })), message] })) }), "".concat(Date.now() * Math.round(Math.random()))) })));
-}
+    var _a = useInteractions(), open = _a.open, type = _a.type, message = _a.message, timeout = _a.timeout, onShow = _a.onShow, onHide = _a.onHide;
+    useImperativeHandle(ref, function () { return ({ onShow: onShow }); });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: onHide, autoHideDuration: timeout, TransitionComponent: Transition, sx: { zIndex: 99999 } }, { children: _jsx(Alert, __assign({ variant: "filled", severity: type, sx: { width: "100%", fontSize: 14, fontWeight: 700 }, onClose: onHide }, { children: _jsx(Typography, __assign({ sx: { fontWeight: 800, fontSize: 14 } }, { children: message })) })) }), "".concat(Date.now() * Math.round(Math.random()))) })));
+});
 export default Prompt;

package/ToastPrompt/index.js

@@ -10,16 +10,19 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, cloneElement } from "react";
+import { createContext, useContext, useRef, useCallback, cloneElement } from "react";
 import Prompt from "./Prompt";
-import useInteractions from "./useInteractions";
 var PromptContext = createContext({
     showPrompt: function () { }
 });
 export function PromptProvider(props) {
     var children = props.children;
-    var _a = useInteractions(), promptArgs = _a.promptArgs, onShow = _a.onShow, onHide = _a.onHide;
-    return (_jsxs(PromptContext.Provider, __assign({ value: { showPrompt: onShow } }, { children: [children, cloneElement(_jsx(Prompt, __assign({}, promptArgs, { onClose: onHide })))] })));
+    var ref = useRef(null);
+    var showPrompt = useCallback(function (args) {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onShow(args);
+    }, []);
+    return (_jsxs(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt } }, { children: [children, cloneElement(_jsx(Prompt, { ref: ref }))] })));
 }
 export function usePrompt() {
     return useContext(PromptContext);

package/ToastPrompt/types.d.ts

@@ -16,14 +16,13 @@ export interface InterfaceStates {
     onHide: (event: SyntheticEvent | Event, reason?: SnackbarCloseReason) => void;
     onShow: (args: PromptArgs) => void;
 }
-export interface PromptProps extends PromptArgs {
-    open: boolean;
-    onClose: InterfaceStates["onHide"];
-}
 export interface PromptProviderProps {
     children: ReactNode;
 }
 export interface PromptContextProps {
     showPrompt: InterfaceStates["onShow"];
 }
+export interface RefProps {
+    onShow: InterfaceStates["onShow"];
+}
 export {};

package/ToastPrompt/useInteractions.d.ts

@@ -1,15 +1,14 @@
 /// <reference types="react" />
 declare function useInteractions(): {
-    promptArgs: {
-        message: string | 400;
-        type: import("./types").Severity;
-        timeout?: number | undefined;
-    } & Record<"open", boolean>;
     onShow: (args: {
         message: string | 400;
         type: import("./types").Severity;
         timeout?: number | undefined;
     }) => void;
     onHide: (event: Event | import("react").SyntheticEvent<Element, Event>, reason?: import("@mui/material").SnackbarCloseReason | undefined) => void;
+    message: string | 400;
+    type: import("./types").Severity;
+    timeout?: number | undefined;
+    open: boolean;
 };
 export default useInteractions;

package/ToastPrompt/useInteractions.js

@@ -27,13 +27,8 @@ function useInteractions() {
     }, []);
     var onShow = useCallback(function (args) {
         var _a = args.message, message = _a === void 0 ? UNKNOWN_MESSAGE : _a, _b = args.type, type = _b === void 0 ? "error" : _b, _c = args.timeout, timeout = _c === void 0 ? 3500 : _c;
-        setPromptArgs({
-            message: message === 400 ? ERROR_MESSAGE : message,
-            type: type,
-            timeout: timeout,
-            open: true
-        });
+        setPromptArgs(function (args) { return (__assign(__assign({}, args), { message: message === 400 ? ERROR_MESSAGE : message, type: type, timeout: timeout, open: true })); });
     }, []);
-    return { promptArgs: promptArgs, onShow: onShow, onHide: onHide };
+    return __assign(__assign({}, promptArgs), { onShow: onShow, onHide: onHide });
 }
 export default useInteractions;

package/VideoPlayerModal/index.d.ts

@@ -1,4 +1,4 @@
-import { VideoPlayerModalProps } from "./types";
+import type { VideoPlayerModalProps } from "./types";
 declare function VideoPlayerModal(props: VideoPlayerModalProps): JSX.Element;
 export default VideoPlayerModal;
-export * from "./types";
+export type { VideoPlayerModalProps };

package/VideoPlayerModal/index.js

@@ -40,4 +40,3 @@ function VideoPlayerModal(props) {
                         } }, playerProps)) }), _jsx(DialogActions, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 1 }, { children: [extraButtons.map(function (buttonProps, index) { return (_jsx(Grid, __assign({ item: true, xs: 12, md: 3, lg: 2 }, { children: _jsx(Button, __assign({}, buttonProps)) }), "extraButton_".concat(index))); }), _jsx(Grid, __assign({ item: true, xs: 12, md: 2, lg: 1 }, { children: _jsx(Button, __assign({ variant: "outlined", fullWidth: true, color: "secondary", onClick: onClose }, { children: "Close" })) }))] })) })] })) })));
 }
 export default VideoPlayerModal;
-export * from "./types";

package/package.json

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