@wavelengthusaf/components 1.2.4 → 1.2.6

package/dist/index.mjs

@@ -4992,10 +4992,8 @@ function WavelengthSnackbar(props) {
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import React31 from "react";
 import Snackbar2 from "@mui/material/Snackbar";
-import IconButton5 from "@mui/material/IconButton";
-import CloseIcon3 from "@mui/icons-material/Close";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow }) {
+function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon }) {
   const handleClose = () => {
     toggleShow(false);
   };
@@ -5040,7 +5038,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             }
           },
           /* @__PURE__ */ React31.createElement("div", { style: { marginTop: 4, gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, id: "snackbar" }, /* @__PURE__ */ React31.createElement("div", null, sIcon), /* @__PURE__ */ React31.createElement("div", { style: { fontSize: "1rem", marginLeft: "10px" } }, message ? message : "Insert Message Here")),
-          /* @__PURE__ */ React31.createElement("div", { style: { gridColumnStart: 6 } }, " ", /* @__PURE__ */ React31.createElement(IconButton5, { size: "small", "aria-label": "close", color: "inherit" }, /* @__PURE__ */ React31.createElement(CloseIcon3, { fontSize: "small" })))
+          /* @__PURE__ */ React31.createElement("div", { style: { gridColumnStart: 6 }, onClick: handleClose }, closeIcon)
         )
       }
     )
@@ -5048,19 +5046,69 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 }
 
 // src/components/snackbars/TestSnackbar.tsx
-import { Button as Button5, IconButton as IconButton6, Snackbar as Snackbar3 } from "@mui/material";
-import React32 from "react";
-import CloseIcon4 from "@mui/icons-material/Close";
-function TestSnackbar({ openProp, toggleOpen }) {
-  const [open, setOpen] = React32.useState(openProp);
-  const handleClose = (event, reason) => {
-    if (reason === "clickaway") {
-      return;
-    }
+import React32, { useEffect, useRef as useRef2 } from "react";
+import { Box as Box5, Button as Button5 } from "@mui/material";
+var useOutsideClick = (callback) => {
+  const ref = useRef2(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    };
+    document.addEventListener("mouseup", handleClickOutside);
+    document.addEventListener("touchend", handleClickOutside);
+    return () => {
+      document.removeEventListener("mouseup", handleClickOutside);
+      document.removeEventListener("touchend", handleClickOutside);
+    };
+  }, [callback]);
+  return ref;
+};
+function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign, width: width2, img }) {
+  const ref = useOutsideClick(() => {
     toggleOpen(false);
-  };
-  const action = /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Button5, { color: "secondary", size: "small", onClick: handleClose }, "UNDO"), /* @__PURE__ */ React32.createElement(IconButton6, { size: "small", "aria-label": "close", color: "inherit", onClick: handleClose }, /* @__PURE__ */ React32.createElement(CloseIcon4, { fontSize: "small" })));
-  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, /* @__PURE__ */ React32.createElement(Snackbar3, { open: openProp, autoHideDuration: 6e3, onClose: handleClose, message: "Note archived", action }));
+  });
+  let bgColor = "";
+  if (type == "success") {
+    bgColor = "#25ab21";
+  } else if (type == "error") {
+    bgColor = "#FF4646";
+  } else if (type == "disabled") {
+    bgColor = "#737373";
+  }
+  return /* @__PURE__ */ React32.createElement(React32.Fragment, null, isPopUpOpen && /* @__PURE__ */ React32.createElement(
+    Box5,
+    {
+      sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
+      ref,
+      style: {
+        height: "50px",
+        width: width2,
+        backgroundColor: bgColor,
+        borderRadius: "1px",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingRight: "20px",
+        paddingLeft: "20px",
+        zIndex: 2800,
+        marginTop: customVertyAlign ? `${customVertyAlign}` : ""
+      }
+    },
+    /* @__PURE__ */ React32.createElement("div", { style: { backgroundColor: "red" } }),
+    /* @__PURE__ */ React32.createElement("div", { style: { color: "white", fontSize: "1rem" } }, message),
+    /* @__PURE__ */ React32.createElement(
+      Button5,
+      {
+        variant: "text",
+        onClick: () => {
+          toggleOpen(false);
+        }
+      },
+      img
+    )
+  ));
 }
 export {
   AceOfSpadesComponent,
@@ -5101,6 +5149,7 @@ export {
   add,
   concat,
   findBestStringMatch,
+  useOutsideClick,
   useThemeContext
 };
 /*! Bundled license information: