@wavelengthusaf/components 1.3.1 → 1.3.2

package/README.md

@@ -14,6 +14,10 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+## 1.3.1
+
+-Updated WavelengthBox Component, and Wavelength Button Component. Created new Dropdown Component called Wavelength Dropdown.
+
 ## 1.3.0
 
 - Updated Footer and Snackbar component, added a basic File Download component.

package/dist/index.d.mts

@@ -326,21 +326,24 @@ declare function WavelengthPopUpMenu({ menuItems, customIcon, width, menuDirecti
 
 interface DropdownProps {
     id?: string;
-    button: React__default.ReactNode;
+    palette: "brewery" | "custom";
     width: string;
-    borderColor?: string;
-    backgroundColor?: string;
-    hoverColor?: string;
     options: menuOptions[];
-    anchor: HTMLElement | null;
-    handleClose: () => void;
-    mySx?: SxProps$1<Theme$1> | undefined;
+    buttonSx?: SxProps$1<Theme$1> | undefined;
+    menuSx?: MenuSxProps;
+    buttonText: string | ReactNode;
 }
 interface menuOptions {
     option: React__default.ReactNode;
     onClick?: React__default.MouseEventHandler<HTMLLIElement> | undefined;
 }
-declare function WavelengthDropdown({ id, width, options, borderColor, backgroundColor, anchor, handleClose, button, mySx, hoverColor }: DropdownProps): React__default.JSX.Element;
+interface MenuSxProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    hoverColor?: string;
+    width?: string;
+}
+declare function WavelengthDropdown({ id, options, buttonSx, width, buttonText, menuSx, palette }: DropdownProps): React__default.JSX.Element;
 
 interface ConfirmationSnackbarProps {
     show: boolean;

package/dist/index.d.ts

@@ -326,21 +326,24 @@ declare function WavelengthPopUpMenu({ menuItems, customIcon, width, menuDirecti
 
 interface DropdownProps {
     id?: string;
-    button: React__default.ReactNode;
+    palette: "brewery" | "custom";
     width: string;
-    borderColor?: string;
-    backgroundColor?: string;
-    hoverColor?: string;
     options: menuOptions[];
-    anchor: HTMLElement | null;
-    handleClose: () => void;
-    mySx?: SxProps$1<Theme$1> | undefined;
+    buttonSx?: SxProps$1<Theme$1> | undefined;
+    menuSx?: MenuSxProps;
+    buttonText: string | ReactNode;
 }
 interface menuOptions {
     option: React__default.ReactNode;
     onClick?: React__default.MouseEventHandler<HTMLLIElement> | undefined;
 }
-declare function WavelengthDropdown({ id, width, options, borderColor, backgroundColor, anchor, handleClose, button, mySx, hoverColor }: DropdownProps): React__default.JSX.Element;
+interface MenuSxProps {
+    backgroundColor?: string;
+    borderColor?: string;
+    hoverColor?: string;
+    width?: string;
+}
+declare function WavelengthDropdown({ id, options, buttonSx, width, buttonText, menuSx, palette }: DropdownProps): React__default.JSX.Element;
 
 interface ConfirmationSnackbarProps {
     show: boolean;

package/dist/index.js

@@ -5082,41 +5082,87 @@ var import_react37 = __toESM(require("react"));
 var import_material = require("@mui/material");
 var import_material2 = require("@mui/material");
 var import_Grow = __toESM(require("@mui/material/Grow"));
-function WavelengthDropdown({ id, width: width2, options, borderColor: borderColor2, backgroundColor: backgroundColor2, anchor, handleClose, button, mySx, hoverColor }) {
-  const open = Boolean(anchor);
+function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText, menuSx, palette: palette2 }) {
+  const [anchorEl, setAnchorEl] = import_react37.default.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 = (0, import_material2.styled)(import_material2.MenuItem)({
     "&.MuiMenuItem-root": {
       "&.Mui-selected": {
-        backgroundColor: `${backgroundColor2}`
+        backgroundColor: `${myMenusx.backgroundColor}`
       },
       "&:hover": {
-        backgroundColor: `${hoverColor}`
+        backgroundColor: `${myMenusx.hoverColor}`
       }
     }
   });
   const MyMenu = (0, import_material2.styled)(import_material.Menu)({
+    top: "-7px",
+    left: "0px",
+    boxSizing: "border-box",
     "& .MuiMenu-paper": {
       borderBottomLeftRadius: "8px",
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      backgroundColor: `${backgroundColor2}`
+      width: myMenusx.width,
+      backgroundColor: `${myMenusx.backgroundColor}`
     },
     "& .MuiMenu-list": {
-      width: width2,
-      borderLeft: `1px solid ${borderColor2}`,
-      borderRight: `1px solid ${borderColor2}`,
-      borderBottom: `1px solid ${borderColor2}`,
-      paddingTop: "6px",
-      paddingBottom: "6px"
+      // 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__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", null, button), /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement(WavelengthButton, { variant: "custom", mySx: myButtonSx, onClick: handleClick }, buttonText), /* @__PURE__ */ import_react37.default.createElement(
     MyMenu,
     {
       id,
-      sx: mySx,
-      anchorEl: anchor,
+      anchorEl,
       open,
       onClose: handleClose,
       MenuListProps: {