@wavelengthusaf/components 1.3.0 → 1.3.1

package/dist/index.mjs

@@ -1354,7 +1354,7 @@ function getPalette() {
 }
 
 // src/components/buttons/WavelengthButton/WavelengthButton.tsx
-function WavelengthButton({ id, variant, colorOne, colorTwo, margin: margin2, padding: padding2, autoFocus, disabled, onClick, children, borderRadius: borderRadius2 }) {
+function WavelengthButton({ id, variant, colorOne, colorTwo, margin: margin2, padding: padding2, autoFocus, disabled, onClick, children, borderRadius: borderRadius2, mySx }) {
   const palette2 = getPalette();
   const WLContainedButton = {
     margin: { margin: margin2 },
@@ -1402,6 +1402,9 @@ function WavelengthButton({ id, variant, colorOne, colorTwo, margin: margin2, pa
   if (variant === "outlined") {
     return /* @__PURE__ */ React.createElement(Button, { variant: "outlined", id, autoFocus, disabled, onClick, sx: WLOutlinedButton }, children);
   }
+  if (variant === "custom") {
+    return /* @__PURE__ */ React.createElement(Button, { id, autoFocus, disabled, onClick, sx: mySx }, children);
+  }
   return /* @__PURE__ */ React.createElement(Button, { variant: "text", id, autoFocus, disabled, onClick, sx: WLTextButton }, children);
 }
 
@@ -2989,7 +2992,7 @@ function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button }) {
 // src/components/containers/WavelengthBox/WavelengthBox.tsx
 import React5 from "react";
 import Grid from "@mui/material/Grid";
-function WavelengthBox({ width: width2, height: height2, children }) {
+function WavelengthBox({ width: width2, height: height2, children, borderBottomRadius, borderTopRadius }) {
   const palette2 = getPalette();
   return (
     // <div
@@ -3013,7 +3016,10 @@ function WavelengthBox({ width: width2, height: height2, children }) {
         sx: {
           width: { width: width2 },
           height: { height: height2 },
-          borderRadius: 2,
+          borderTopLeftRadius: borderTopRadius,
+          borderTopRightRadius: borderTopRadius,
+          borderBottomLeftRadius: borderBottomRadius,
+          borderBottomRightRadius: borderBottomRadius,
           borderColor: "#70714B",
           bgcolor: palette2.primary,
           border: "1px solid grey"
@@ -5015,8 +5021,64 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
   ));
 }
 
-// src/components/snackbars/WavelengthSnackbar.tsx
+// src/components/modals/WavelengthDropdown.tsx
 import React33 from "react";
+import { Menu as MuiMenu } from "@mui/material";
+import { MenuItem as MuiMenuItem, styled as styled5 } from "@mui/material";
+import Grow from "@mui/material/Grow";
+function WavelengthDropdown({ id, width: width2, options, borderColor: borderColor2, backgroundColor: backgroundColor2, anchor, handleClose, button, mySx, hoverColor }) {
+  const open = Boolean(anchor);
+  const MenuItem2 = styled5(MuiMenuItem)({
+    "&.MuiMenuItem-root": {
+      "&.Mui-selected": {
+        backgroundColor: `${backgroundColor2}`
+      },
+      "&:hover": {
+        backgroundColor: `${hoverColor}`
+      }
+    }
+  });
+  const MyMenu = styled5(MuiMenu)({
+    "& .MuiMenu-paper": {
+      borderBottomLeftRadius: "8px",
+      borderBottomRightRadius: "8px",
+      borderTopRightRadius: "0px",
+      borderTopLeftRadius: "0px",
+      backgroundColor: `${backgroundColor2}`
+    },
+    "& .MuiMenu-list": {
+      width: width2,
+      borderLeft: `1px solid ${borderColor2}`,
+      borderRight: `1px solid ${borderColor2}`,
+      borderBottom: `1px solid ${borderColor2}`,
+      paddingTop: "6px",
+      paddingBottom: "6px"
+    }
+  });
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", null, button), /* @__PURE__ */ React33.createElement(
+    MyMenu,
+    {
+      id,
+      sx: mySx,
+      anchorEl: anchor,
+      open,
+      onClose: handleClose,
+      MenuListProps: {
+        "aria-labelledby": "basic-button"
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "center" },
+      transformOrigin: { vertical: "top", horizontal: "center" },
+      TransitionComponent: Grow
+    },
+    options.map((item, index) => {
+      return /* @__PURE__ */ React33.createElement(MenuItem2, { key: index, onClick: item.onClick }, item.option);
+    })
+  ));
+}
+var WavelengthDropdownStyled = styled5(WavelengthDropdown)``;
+
+// src/components/snackbars/WavelengthSnackbar.tsx
+import React34 from "react";
 import Snackbar from "@mui/material/Snackbar";
 import SnackbarContent from "@mui/material/SnackbarContent";
 function WavelengthSnackbar(props) {
@@ -5026,7 +5088,7 @@ function WavelengthSnackbar(props) {
   };
   const palette2 = getPalette();
   const durationMs = props.durationSb ? props.durationSb * 1e3 : 4e3;
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement(
     Snackbar,
     {
       open: show,
@@ -5037,7 +5099,7 @@ function WavelengthSnackbar(props) {
         horizontal: props.horryAlign ? props.horryAlign : "center"
       }
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       SnackbarContent,
       {
         style: {
@@ -5046,15 +5108,15 @@ function WavelengthSnackbar(props) {
           display: "flex",
           width: props.width
         },
-        message: /* @__PURE__ */ React33.createElement("div", null, /* @__PURE__ */ React33.createElement("span", null, props.icon), /* @__PURE__ */ React33.createElement("span", { id: "snackbar" }, props.message ? props.message : "Insert Message Here")),
-        action: /* @__PURE__ */ React33.createElement("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose }, props.closeIcon)
+        message: /* @__PURE__ */ React34.createElement("div", null, /* @__PURE__ */ React34.createElement("span", null, props.icon), /* @__PURE__ */ React34.createElement("span", { id: "snackbar" }, props.message ? props.message : "Insert Message Here")),
+        action: /* @__PURE__ */ React34.createElement("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose }, props.closeIcon)
       }
     )
   );
 }
 
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
-import React34 from "react";
+import React35 from "react";
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
 function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon }) {
@@ -5071,7 +5133,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
     bgColor = "#737373";
   }
   const sIcon = icon ? icon : "";
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Snackbar2,
     {
       sx: { marginTop: customVertyAlign ? `${customVertyAlign}` : "", zIndex: 1400 },
@@ -5083,7 +5145,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
         horizontal: horryAlign ? horryAlign : "center"
       }
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React35.createElement(
       SnackbarContent2,
       {
         style: {
@@ -5092,7 +5154,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
           //color: props.textColor ? props.textColor : palette.secondary,
         },
         sx: { paddingTop: "0px", paddingBottom: "0px" },
-        message: /* @__PURE__ */ React34.createElement(
+        message: /* @__PURE__ */ React35.createElement(
           "div",
           {
             style: {
@@ -5101,8 +5163,8 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
               width: width2
             }
           },
-          /* @__PURE__ */ React34.createElement("div", { style: { marginTop: 4, gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, id: "snackbar" }, /* @__PURE__ */ React34.createElement("div", null, sIcon), /* @__PURE__ */ React34.createElement("div", { style: { fontSize: "1rem", marginLeft: "10px" } }, message ? message : "Insert Message Here")),
-          /* @__PURE__ */ React34.createElement("div", { style: { gridColumnStart: 6 }, onClick: handleClose }, closeIcon)
+          /* @__PURE__ */ React35.createElement("div", { style: { marginTop: 4, gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, id: "snackbar" }, /* @__PURE__ */ React35.createElement("div", null, sIcon), /* @__PURE__ */ React35.createElement("div", { style: { fontSize: "1rem", marginLeft: "10px" } }, message ? message : "Insert Message Here")),
+          /* @__PURE__ */ React35.createElement("div", { style: { gridColumnStart: 6 }, onClick: handleClose }, closeIcon)
         )
       }
     )
@@ -5112,7 +5174,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 // src/components/snackbars/TestSnackbar.tsx
 import Box5 from "@mui/material/Box";
 import Button5 from "@mui/material/Button";
-import React35, { useEffect, useRef as useRef2 } from "react";
+import React36, { useEffect, useRef as useRef2 } from "react";
 var useOutsideClick = (callback) => {
   const ref = useRef2(null);
   useEffect(() => {
@@ -5142,7 +5204,7 @@ function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign
   } else if (type == "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, isPopUpOpen && /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, isPopUpOpen && /* @__PURE__ */ React36.createElement(
     Box5,
     {
       sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
@@ -5161,9 +5223,9 @@ function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign
         marginTop: customVertyAlign ? `${customVertyAlign}` : ""
       }
     },
-    /* @__PURE__ */ React35.createElement("div", { style: { backgroundColor: "red" } }),
-    /* @__PURE__ */ React35.createElement("div", { style: { color: "white", fontSize: "1rem" } }, message),
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement("div", { style: { backgroundColor: "red" } }),
+    /* @__PURE__ */ React36.createElement("div", { style: { color: "white", fontSize: "1rem" } }, message),
+    /* @__PURE__ */ React36.createElement(
       Button5,
       {
         variant: "text",
@@ -5200,6 +5262,7 @@ export {
   WavelengthConfirmationModal,
   WavelengthContentModal,
   WavelengthContentPlaceholder,
+  WavelengthDropdown,
   WavelengthDropdownButton,
   WavelengthExampleComponent,
   WavelengthFileDownloader,