@symply.io/basic-components 1.7.13 → 1.8.0

package/README.md

@@ -935,7 +935,7 @@ import { usePrompt } from '@symply.io/basic-components';
 
 <h5>Usage</h5>
 ```typescript
-const { showPrompt } = usePrompt();
+const { showPrompt, hidePrompt } = usePrompt();
 ```
 
 <h5>Props</h5>
@@ -945,6 +945,7 @@ const { showPrompt } = usePrompt();
 | message | string \| 400                               |         | true     | The prompt message you want to show.                         |
 | timeout | number                                      | 3500    | false    | The number of milliseconds to wait before automatically calling the `onClose` function. |
 | type    | 'success' \| 'warning' \| 'info' \| 'error' |         | true     | The type of prompt.                                          |
+| action  | ReactNode \| null                           |         | false    | Customized button(s) at the end of the prompt. If this property is set, the default close icon button will be replaced directly. |
 
 
 

package/ToastPrompt/Prompt.js

@@ -23,8 +23,12 @@ function Transition(args) {
 }
 var Prompt = forwardRef(function (_, ref) {
     var theme = useCustomTheme();
-    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()))) })));
+    var _a = useInteractions(), open = _a.open, type = _a.type, message = _a.message, timeout = _a.timeout, action = _a.action, onShow = _a.onShow, onHide = _a.onHide;
+    useImperativeHandle(ref, function () { return ({ onShow: onShow, onHide: onHide }); });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Snackbar, __assign({ anchorOrigin: { vertical: "bottom", horizontal: "left" }, open: open, onClose: function (_, reason) {
+                if (reason !== "clickaway") {
+                    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, action: action }, { children: _jsx(Typography, __assign({ sx: { fontWeight: 800, fontSize: 14 } }, { children: message })) })) }), "".concat(Date.now() * Math.round(Math.random()))) })));
 });
 export default Prompt;

package/ToastPrompt/index.d.ts

@@ -1,3 +1,3 @@
-import type { PromptProviderProps, PromptContextProps } from "./types";
+import type { PromptContextProps, PromptProviderProps } from "./types";
 export declare function PromptProvider(props: PromptProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function usePrompt(): PromptContextProps;

package/ToastPrompt/index.js

@@ -10,10 +10,11 @@ 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, useRef, useCallback, cloneElement } from "react";
+import { useRef, useContext, useCallback, cloneElement, createContext, } from "react";
 import Prompt from "./Prompt";
 var PromptContext = createContext({
-    showPrompt: function () { }
+    showPrompt: function () { },
+    hidePrompt: function () { },
 });
 export function PromptProvider(props) {
     var children = props.children;
@@ -22,7 +23,11 @@ export function PromptProvider(props) {
         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 }))] })));
+    var hidePrompt = useCallback(function () {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.onHide();
+    }, []);
+    return (_jsxs(PromptContext.Provider, __assign({ value: { showPrompt: showPrompt, hidePrompt: hidePrompt } }, { children: [children, cloneElement(_jsx(Prompt, { ref: ref }))] })));
 }
 export function usePrompt() {
     return useContext(PromptContext);

package/ToastPrompt/types.d.ts

@@ -1,5 +1,4 @@
-import type { CSSProperties, ReactNode, SyntheticEvent } from "react";
-import type { SnackbarCloseReason } from "@mui/material/Snackbar";
+import type { CSSProperties, ReactNode } from "react";
 import type { SvgIconComponent } from "@mui/icons-material";
 export declare type Severity = "success" | "warning" | "info" | "error";
 export declare type PromptStyles = Record<Severity, {
@@ -9,20 +8,23 @@ export declare type PromptIcons = Record<Severity, SvgIconComponent>;
 declare type PromptArgs = {
     message: string | 400;
     type: Severity;
+    action?: ReactNode | null;
     timeout?: number;
 };
-export interface InterfaceStates {
+export interface InteractionStates {
     promptArgs: PromptArgs & Record<"open", boolean>;
-    onHide: (event: SyntheticEvent | Event, reason?: SnackbarCloseReason) => void;
+    onHide: () => void;
     onShow: (args: PromptArgs) => void;
 }
 export interface PromptProviderProps {
     children: ReactNode;
 }
 export interface PromptContextProps {
-    showPrompt: InterfaceStates["onShow"];
+    showPrompt: InteractionStates["onShow"];
+    hidePrompt: InteractionStates["onHide"];
 }
 export interface RefProps {
-    onShow: InterfaceStates["onShow"];
+    onShow: InteractionStates["onShow"];
+    onHide: InteractionStates["onHide"];
 }
 export {};

package/ToastPrompt/useInteractions.d.ts

@@ -3,11 +3,13 @@ declare function useInteractions(): {
     onShow: (args: {
         message: string | 400;
         type: import("./types").Severity;
+        action?: import("react").ReactNode;
         timeout?: number | undefined;
     }) => void;
-    onHide: (event: Event | import("react").SyntheticEvent<Element, Event>, reason?: import("@mui/material").SnackbarCloseReason | undefined) => void;
+    onHide: () => void;
     message: string | 400;
     type: import("./types").Severity;
+    action?: import("react").ReactNode;
     timeout?: number | undefined;
     open: boolean;
 };

package/ToastPrompt/useInteractions.js

@@ -17,17 +17,15 @@ function useInteractions() {
         open: false,
         message: UNKNOWN_MESSAGE,
         type: "error",
-        timeout: 3500
+        timeout: 3500,
+        action: null,
     }), promptArgs = _a[0], setPromptArgs = _a[1];
-    var onHide = useCallback(function (_, reason) {
-        if (reason === "clickaway") {
-            return;
-        }
+    var onHide = useCallback(function () {
         setPromptArgs(function (args) { return (__assign(__assign({}, args), { open: false })); });
     }, []);
     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(function (args) { return (__assign(__assign({}, args), { message: message === 400 ? ERROR_MESSAGE : message, type: type, timeout: timeout, open: true })); });
+        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, action = args.action;
+        setPromptArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message === 400 ? ERROR_MESSAGE : message, type: type, timeout: timeout, action: action })); });
     }, []);
     return __assign(__assign({}, promptArgs), { onShow: onShow, onHide: onHide });
 }

package/package.json

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