@wavelengthusaf/components 1.3.0 → 1.3.2

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,110 @@ 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, options, buttonSx, width: width2, buttonText, menuSx, palette: palette2 }) {
+  const [anchorEl, setAnchorEl] = React33.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const breweryStyleButton = {
+    backgroundColor: "#d16a2f",
+    color: "white",
+    padding: "12px 16px",
+    width: width2,
+    fontSize: "18px",
+    minWidth: "min-content",
+    borderTopRightRadius: "8px",
+    borderTopLeftRadius: "8px",
+    "&:hover": {
+      backgroundColor: "rgba(228, 119, 57, 1)"
+    }
+  };
+  const breweryDropDownStyle = {
+    backgroundColor: "#FCFAF8",
+    borderColor: "#d16a2f",
+    hoverColor: "rgba(209, 106, 47, 0.1)",
+    width: width2
+  };
+  const defaultDropdownSx = {
+    backgroundColor: "white",
+    borderColor: "blue",
+    hoverColor: "#d4d4e3",
+    width: width2
+  };
+  const defaultsx = menuSx ? __spreadValues(__spreadValues({}, defaultDropdownSx), menuSx) : defaultDropdownSx;
+  let myButtonSx;
+  let myMenusx;
+  if (palette2 === "brewery") {
+    myButtonSx = __spreadValues(__spreadValues({}, breweryStyleButton), buttonSx);
+    myMenusx = __spreadValues(__spreadValues({}, breweryDropDownStyle), menuSx);
+  } else {
+    myButtonSx = buttonSx;
+    myMenusx = defaultsx;
+  }
+  const MenuItem2 = styled5(MuiMenuItem)({
+    "&.MuiMenuItem-root": {
+      "&.Mui-selected": {
+        backgroundColor: `${myMenusx.backgroundColor}`
+      },
+      "&:hover": {
+        backgroundColor: `${myMenusx.hoverColor}`
+      }
+    }
+  });
+  const MyMenu = styled5(MuiMenu)({
+    top: "-7px",
+    left: "0px",
+    boxSizing: "border-box",
+    "& .MuiMenu-paper": {
+      borderBottomLeftRadius: "8px",
+      borderBottomRightRadius: "8px",
+      borderTopRightRadius: "0px",
+      borderTopLeftRadius: "0px",
+      width: myMenusx.width,
+      backgroundColor: `${myMenusx.backgroundColor}`
+    },
+    "& .MuiMenu-list": {
+      // paddingTop: "6px",
+      // paddingBottom: "6px",
+      borderBottomLeftRadius: "8px",
+      borderBottomRightRadius: "8px",
+      borderLeft: `1px solid ${myMenusx.borderColor}`,
+      borderRight: `1px solid ${myMenusx.borderColor}`,
+      borderBottom: `1px solid ${myMenusx.borderColor}`
+    }
+  });
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(WavelengthButton, { variant: "custom", mySx: myButtonSx, onClick: handleClick }, buttonText), /* @__PURE__ */ React33.createElement(
+    MyMenu,
+    {
+      id,
+      anchorEl,
+      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 +5134,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 +5145,7 @@ function WavelengthSnackbar(props) {
         horizontal: props.horryAlign ? props.horryAlign : "center"
       }
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React34.createElement(
       SnackbarContent,
       {
         style: {
@@ -5046,15 +5154,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 +5179,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 +5191,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
         horizontal: horryAlign ? horryAlign : "center"
       }
     },
-    /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React35.createElement(
       SnackbarContent2,
       {
         style: {
@@ -5092,7 +5200,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 +5209,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 +5220,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 +5250,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 +5269,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 +5308,7 @@ export {
   WavelengthConfirmationModal,
   WavelengthContentModal,
   WavelengthContentPlaceholder,
+  WavelengthDropdown,
   WavelengthDropdownButton,
   WavelengthExampleComponent,
   WavelengthFileDownloader,