@wavelengthusaf/components 2.3.4 → 2.3.5

package/README.md

@@ -14,6 +14,13 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.3.5
+
+- Updated WavelengthDropdown by adding default values to some of the props
+- Fixed bugs related to WavelengthSearchbar, no longer 2 closing icons for some configurations
+- Updated WavelengthPopupMenu , each list item can have a hover color for text, also fixed underlining of link type issue
+- Standard Snackbar is not aligned properly, the Snackbars with icons are also aligned properly
+
 ### 2.3.4
 
 - Update watch command for devs, and updated vite configuration
@@ -22,13 +29,13 @@ npm install @wavelengthusaf/components
 
 - Fixed a bug relating to exports not working.
 
-### 2.3.0 
+### 2.3.0
 
-- Added `DefaultPagination` component to package for numbered pagination navigation, and modified PagePagination for testbed.  
+- Added `DefaultPagination` component to package for numbered pagination navigation, and modified PagePagination for testbed.
 
-### 2.2.5 
+### 2.2.5
 
-- Readded `DefaultIcon` component to package.  
+- Readded `DefaultIcon` component to package.
 
 ### 2.2.2 - 2.2.4
 

package/dist/cjs/index.cjs

@@ -2996,6 +2996,7 @@ var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequ
 var _Popper = require('@mui/material/Popper'); var _Popper2 = _interopRequireDefault(_Popper);
 var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
 var _ListItemText = require('@mui/material/ListItemText'); var _ListItemText2 = _interopRequireDefault(_ListItemText);
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
 
 
 var CustomPopper = (props) => {
@@ -3035,6 +3036,12 @@ var CustomPopper = (props) => {
     }
   );
 };
+var AutocompleteCustomEndAdornment = _styledcomponents2.default.call(void 0, "div")({
+  position: "absolute",
+  right: "12px",
+  top: "50%",
+  transform: "translate(0, -50%)"
+});
 function WavelengthSearch({
   id,
   mode,
@@ -3055,7 +3062,8 @@ function WavelengthSearch({
   textColor,
   fontSize,
   backgroundColor: backgroundColor2,
-  iconPos = "end"
+  iconPos = "end",
+  clearIconMarginRight
 }) {
   const palette2 = getPalette();
   borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
@@ -3083,7 +3091,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "45px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3095,7 +3108,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
                 type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { sx: { color: textColor }, children }) })
+                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { sx: { color: "white" }, children }) })
               },
               sx: {
                 "& .MuiInputBase-root": {
@@ -3148,7 +3161,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3160,6 +3178,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
                 type: "search",
+                endAdornment: null,
                 startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Icon2.default, { sx: { color: textColor, paddingRight: "0px" }, children }) })
               },
               sx: {
@@ -3213,7 +3232,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "50px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3233,7 +3257,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _IconButton2.default,
                   {
                     sx: { color: textColor },
@@ -3295,7 +3319,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3315,6 +3344,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search",
+                endAdornment: null,
                 startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _IconButton2.default,
                   {
@@ -3380,7 +3410,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3397,6 +3432,9 @@ function WavelengthSearch({
                 "& .MuiInputBase-root": {
                   height: height2
                 },
+                "& .MuiAutocomplete-endAdornment": {
+                  display: "none"
+                },
                 "&.MuiTextField-root": {
                   "& label": { color: `${textColor}` },
                   "& label.Mui-focused": {
@@ -3444,7 +3482,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3462,6 +3505,7 @@ function WavelengthSearch({
               size,
               InputProps: {
                 ...params.InputProps,
+                endAdornment: null,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search"
               },
@@ -4434,7 +4478,7 @@ var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequ
 
 var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefault(_Slide);
 
-var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
 
 
 
@@ -4445,18 +4489,17 @@ var emailStyle = {
   marginTop: 8,
   marginBottom: 8
 };
-function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, emailHoverColor = "blue", id }) {
-  const NavLink = _styledcomponents2.default.a``;
-  const Links = _styledcomponents2.default.call(void 0, NavLink)`
+function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, id, border: border2 }) {
+  const Links = _styledcomponents2.default.a`
     color: inherit;
-    textdecoration: none;
+    text-decoration: none;
 
     &:hover,
     &:focus {
-      color: ${emailHoverColor};
+      color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
     &:active {
-      color: ${emailHoverColor};
+      color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
   `;
   const [anchorEl, setAnchorEl] = React.default.useState(null);
@@ -4482,7 +4525,12 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
       {
         id,
         open,
-        sx: { width: width2 },
+        sx: {
+          width: width2,
+          "& .MuiPaper-root": {
+            border: border2
+          }
+        },
         onClose: handleClose,
         anchorEl,
         TransitionComponent: _Slide2.default,
@@ -4494,7 +4542,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
               if (items.itemType === "header") {
                 if (items.link) {
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                   ] }, index);
                 } else {
@@ -4505,13 +4553,13 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
                 }
               } else if (items.itemType === "link") {
                 return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                 ] }, index);
               } else {
                 if (items.link) {
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                   ] }, index);
                 } else {
@@ -4531,18 +4579,18 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
             } else if (items.end === void 0 || items.end === false || items.end === null) {
               if (items.itemType === "header") {
                 if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }) }, index);
                 } else {
                   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
                 }
               } else if (items.itemType === "link") {
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { style: { textDecoration: "none" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: "", children: items.label }) }, index);
               } else {
                 if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { href: items.link, children: items.label }, index);
                 } else {
                   if (items.email) {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { style: emailStyle, href: items.email, children: items.label }, index);
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: emailStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.email, hoverColor: items.hoverColor || "blue", children: items.label }) }, index);
                   } else {
                     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
                   }
@@ -4562,7 +4610,15 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
 
 var _Grow = require('@mui/material/Grow'); var _Grow2 = _interopRequireDefault(_Grow);
 
-function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText, menuSx, palette: palette2 }) {
+function WavelengthDropdown({
+  id,
+  options,
+  buttonSx,
+  width: width2 = "190px",
+  buttonText,
+  menuSx = { backgroundColor: "#FCFAF8", borderColor: "blue", width: "190px", boxShadow: "none" },
+  palette: palette2
+}) {
   const [anchorEl, setAnchorEl] = React.default.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -4753,8 +4809,8 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { marginTop: 4, gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: sIcon }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginTop: "5px" }, children: sIcon }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })