@symply.io/basic-components 1.4.0-beta.8 → 1.4.0

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: 16, fontWeight: 900 } }, { 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/package.json

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