@wavelengthusaf/components 1.1.7 → 1.1.9

package/dist/index.mjs

@@ -3367,188 +3367,367 @@ function WavelengthExampleComponent({ width: width2 = 100, height: height2 = 100
 }
 
 // src/components/search/WavelengthSearch.tsx
-import React9, { useState as useState2 } from "react";
-import { Autocomplete as Autocomplete2, ListItemText } from "@mui/material";
+import React9 from "react";
+import { Autocomplete as Autocomplete2, ListItemText, Popper } from "@mui/material";
 import TextField2 from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
 import { useRef } from "react";
 import ListItem from "@mui/material/ListItem";
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ React9.createElement(
+    Popper,
+    __spreadProps(__spreadValues({
+      sx: {
+        "&.MuiAutocomplete-popper": {
+          zIndex: 5
+        }
+      }
+    }, props), {
+      placement: "bottom",
+      disablePortal: true,
+      modifiers: [
+        {
+          name: "flip",
+          enabled: true,
+          options: {
+            altBoundary: true,
+            rootBoundary: "document",
+            padding: 8
+          }
+        },
+        {
+          name: "preventOverflow",
+          enabled: true,
+          options: {
+            altAxis: true,
+            altBoundary: true,
+            tether: true,
+            rootBoundary: "document",
+            padding: 8
+          }
+        }
+      ]
+    })
+  );
+};
 function WavelengthSearch({
   id,
   mode,
+  type,
   width: width2,
   height: height2,
   label,
+  size,
   borderRadius: borderRadius2,
   children,
   placeholder,
-  searchFunction,
   onSearchItemSelected,
   options,
   onChange,
   borderColor: borderColor2,
   hoverColor,
   textColor,
+  fontSize,
   backgroundColor: backgroundColor2
 }) {
   const palette2 = getPalette();
-  const template = [];
   borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
   hoverColor = hoverColor ? hoverColor : palette2.primary;
-  const [results, setResults] = useState2(template);
-  if (mode == "automatic") {
-    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-      Autocomplete2,
-      {
-        filterOptions: (x) => x,
-        loading: true,
-        disableListWrap: true,
-        freeSolo: true,
-        onChange: (e, value) => {
-          console.log(" AutoComplete value ", value);
-          if (value != null) {
-            if (typeof value == "string") {
-              console.log("String Input, No Selection");
-            } else {
-              onSearchItemSelected(value);
+  const onChangeHandler = () => {
+    onChange;
+  };
+  if (type == "search-bar" || type == void 0) {
+    if (mode == "automatic") {
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+        Autocomplete2,
+        {
+          filterOptions: (x) => x,
+          loading: true,
+          disableListWrap: true,
+          freeSolo: true,
+          onChange: (e, value) => {
+            console.log(" AutoComplete value ", value);
+            if (value != null) {
+              if (typeof value != "string") {
+                if (onSearchItemSelected) onSearchItemSelected(value);
+              }
             }
-          }
-        },
-        disableCloseOnSelect: false,
-        getOptionLabel: (options2) => {
-          const returnVal = typeof options2 === "string" ? options2 : options2.title;
-          return returnVal;
-        },
-        options,
-        sx: { width: width2 },
-        renderOption: (props, results2) => (
-          // @ts-expect-error boneless chicken
-          /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: results2.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: results2.title, secondary: results2.subtitle }))
-        ),
-        renderInput: (params) => /* @__PURE__ */ React9.createElement(
-          TextField2,
-          __spreadProps(__spreadValues({
-            placeholder
-          }, params), {
-            id,
-            InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-              style: { borderRadius: borderRadius2, height: height2, color: textColor, backgroundColor: backgroundColor2 },
-              type: "search",
-              endAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(IconButton, { sx: { color: textColor } }, children))
-            }),
-            sx: {
-              "&.MuiTextField-root": {
-                "& label": { color: `${textColor}` },
-                "& label.Mui-focused": {
-                  color: `${hoverColor}`
+          },
+          disableCloseOnSelect: false,
+          getOptionLabel: (options2) => {
+            const returnVal = typeof options2 === "string" ? options2 : options2.title;
+            return returnVal;
+          },
+          options,
+          sx: { width: width2 },
+          renderOption: (props, results) => (
+            // @ts-expect-error boneless chicken
+            /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: results.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: results.title, secondary: results.subtitle }))
+          ),
+          renderInput: (params) => /* @__PURE__ */ React9.createElement(
+            TextField2,
+            __spreadProps(__spreadValues({
+              placeholder
+            }, params), {
+              id,
+              size,
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
+                type: "search",
+                endAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(IconButton, { sx: { color: textColor } }, children))
+              }),
+              sx: {
+                "& .MuiInputBase-root": {
+                  height: height2
                 },
-                "& .MuiOutlinedInput-root": {
-                  "& fieldset": {
-                    borderColor: `${borderColor2}`
+                "&.MuiTextField-root": {
+                  "& label": { color: `${textColor}` },
+                  "& label.Mui-focused": {
+                    color: `${hoverColor}`
                   },
-                  "&:hover fieldset": {
-                    borderColor: `${hoverColor}`
-                  },
-                  "&.Mui-focused fieldset": {
-                    borderColor: `${hoverColor}`
+                  "& .MuiOutlinedInput-root": {
+                    "& fieldset": {
+                      borderColor: `${borderColor2}`
+                    },
+                    "&:hover fieldset": {
+                      borderColor: `${hoverColor}`
+                    },
+                    "&.Mui-focused fieldset": {
+                      borderColor: `${hoverColor}`
+                    }
                   }
                 }
+              },
+              label,
+              onChange
+            })
+          ),
+          PopperComponent: CustomPopper
+        }
+      ));
+    } else if (mode == "manual") {
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+        Autocomplete2,
+        {
+          filterOptions: (x) => x,
+          loading: true,
+          freeSolo: true,
+          onChange: (e, value) => {
+            if (value != null) {
+              if (typeof value == "string") {
+                console.log("String Input, No Selection");
+              } else {
+                if (onSearchItemSelected) onSearchItemSelected(value);
               }
-            },
-            label,
-            onChange
-          })
-        )
-      }
-    ));
-  } else if (mode == "manual") {
-    const textRef = useRef();
-    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-      Autocomplete2,
-      {
-        filterOptions: (x) => x,
-        loading: true,
-        freeSolo: true,
-        onChange: (e, value) => {
-          if (value != null) {
-            if (typeof value == "string") {
-              console.log("String Input, No Selection");
-            } else {
-              onSearchItemSelected(value);
             }
-          }
-        },
-        disableCloseOnSelect: false,
-        getOptionLabel: (results2) => {
-          const returnVal = typeof results2 === "string" ? results2 : results2.title;
-          return returnVal;
-        },
-        options: results,
-        sx: { width: width2 },
-        renderOption: (props, results2) => (
-          // @ts-expect-error boneless chicken
-          /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: results2.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: results2.title, secondary: results2.subtitle }))
-        ),
-        renderInput: (params) => /* @__PURE__ */ React9.createElement(
-          TextField2,
-          __spreadProps(__spreadValues({
-            placeholder,
-            inputRef: textRef,
-            onKeyDown: (e) => {
-              var _a;
-              if (e.key == "Enter") {
-                if (textRef.current) {
-                  const tempResults = searchFunction((_a = textRef.current) == null ? void 0 : _a.value);
-                  setResults(tempResults);
-                  console.log(results);
+          },
+          disableCloseOnSelect: false,
+          getOptionLabel: (options2) => {
+            const returnVal = typeof options2 === "string" ? options2 : options2.title;
+            return returnVal;
+          },
+          options,
+          sx: { width: width2 },
+          renderOption: (props, options2) => (
+            // @ts-expect-error boneless chicken
+            /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: options2.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: options2.title, secondary: options2.subtitle }))
+          ),
+          renderInput: (params) => /* @__PURE__ */ React9.createElement(
+            TextField2,
+            __spreadProps(__spreadValues({
+              placeholder,
+              onKeyDown: (e) => {
+                if (e.key == "Enter") {
+                  () => {
+                    onChangeHandler;
+                  };
                 }
               }
-            }
-          }, params), {
-            id,
-            InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-              style: { borderRadius: borderRadius2, height: height2, color: textColor },
-              type: "search",
-              endAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(
-                IconButton,
-                {
-                  sx: { color: textColor },
-                  onClick: () => {
-                    var _a;
-                    if (textRef.current) {
-                      const tempResults = searchFunction((_a = textRef.current) == null ? void 0 : _a.value);
-                      setResults(tempResults);
+            }, params), {
+              id,
+              size,
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                style: { borderRadius: borderRadius2, color: textColor, fontSize },
+                type: "search",
+                endAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(
+                  IconButton,
+                  {
+                    sx: { color: textColor },
+                    onClick: () => {
+                      onChange;
                     }
-                  }
-                },
-                children
-              ))
-            }),
-            sx: {
-              "&.MuiTextField-root": {
-                "& label": { color: `${textColor}` },
-                "& label.Mui-focused": {
-                  color: `${hoverColor}`
+                  },
+                  children
+                ))
+              }),
+              sx: {
+                "& .MuiInputBase-root": {
+                  height: height2
                 },
-                "& .MuiOutlinedInput-root": {
-                  "& fieldset": {
-                    borderColor: `${borderColor2}`
+                "&.MuiTextField-root": {
+                  "& label": { color: `${textColor}`, verticalAlign: "bottom" },
+                  "& label.Mui-focused": {
+                    color: `${hoverColor}`
                   },
-                  "&:hover fieldset": {
-                    borderColor: `${hoverColor}`
+                  "& .MuiOutlinedInput-root": {
+                    "& fieldset": {
+                      borderColor: `${borderColor2}`
+                    },
+                    "&:hover fieldset": {
+                      borderColor: `${hoverColor}`
+                    },
+                    "&.Mui-focused fieldset": {
+                      borderColor: `${hoverColor}`
+                    }
+                  }
+                }
+              },
+              label
+            })
+          )
+        }
+      ));
+    }
+  } else if (type == "text-box") {
+    if (mode == "automatic") {
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+        Autocomplete2,
+        {
+          filterOptions: (x) => x,
+          loading: true,
+          disableListWrap: true,
+          freeSolo: true,
+          disableClearable: true,
+          onChange: (e, value) => {
+            if (value != null) {
+              if (typeof value != "string") {
+                if (onSearchItemSelected) onSearchItemSelected(value);
+              }
+            }
+          },
+          disableCloseOnSelect: false,
+          getOptionLabel: (options2) => {
+            const returnVal = typeof options2 === "string" ? options2 : options2.title;
+            return returnVal;
+          },
+          options,
+          sx: { width: width2 },
+          renderOption: (props, results) => (
+            // @ts-expect-error boneless chicken
+            /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: results.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: results.title, secondary: results.subtitle }))
+          ),
+          renderInput: (params) => /* @__PURE__ */ React9.createElement(
+            TextField2,
+            __spreadProps(__spreadValues({
+              placeholder
+            }, params), {
+              id,
+              size,
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
+                type: "search"
+              }),
+              sx: {
+                "& .MuiInputBase-root": {
+                  height: height2
+                },
+                "&.MuiTextField-root": {
+                  "& label": { color: `${textColor}` },
+                  "& label.Mui-focused": {
+                    color: `${hoverColor}`
                   },
-                  "&.Mui-focused fieldset": {
-                    borderColor: `${hoverColor}`
+                  "& .MuiOutlinedInput-root": {
+                    "& fieldset": {
+                      borderColor: `${borderColor2}`
+                    },
+                    "&:hover fieldset": {
+                      borderColor: `${hoverColor}`
+                    },
+                    "&.Mui-focused fieldset": {
+                      borderColor: `${hoverColor}`
+                    }
                   }
                 }
+              },
+              label,
+              onChange
+            })
+          ),
+          PopperComponent: CustomPopper
+        }
+      ));
+    } else if (mode == "manual") {
+      const textRef = useRef();
+      return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+        Autocomplete2,
+        {
+          filterOptions: (x) => x,
+          loading: true,
+          freeSolo: true,
+          onChange: (e, value) => {
+            if (value != null) {
+              if (typeof value != "string") {
+                if (onSearchItemSelected) onSearchItemSelected(value);
               }
-            },
-            label
-          })
-        )
-      }
-    ));
+            }
+          },
+          disableCloseOnSelect: false,
+          getOptionLabel: (results) => {
+            const returnVal = typeof results === "string" ? results : results.title;
+            return returnVal;
+          },
+          options,
+          sx: { width: width2 },
+          renderOption: (props, options2) => (
+            // @ts-expect-error boneless chicken
+            /* @__PURE__ */ React9.createElement(ListItem, __spreadValues({ key: options2.id }, props), /* @__PURE__ */ React9.createElement(ListItemText, { primary: options2.title, secondary: options2.subtitle }))
+          ),
+          renderInput: (params) => /* @__PURE__ */ React9.createElement(
+            TextField2,
+            __spreadProps(__spreadValues({
+              placeholder,
+              inputRef: textRef,
+              onKeyDown: (e) => {
+                if (e.key == "Enter") {
+                  onChange;
+                }
+              }
+            }, params), {
+              id,
+              size,
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                style: { borderRadius: borderRadius2, color: textColor, fontSize },
+                type: "search"
+              }),
+              sx: {
+                "& .MuiInputBase-root": {
+                  height: height2
+                },
+                "&.MuiTextField-root": {
+                  "& label": { color: `${textColor}`, verticalAlign: "bottom" },
+                  "& label.Mui-focused": {
+                    color: `${hoverColor}`
+                  },
+                  "& .MuiOutlinedInput-root": {
+                    "& fieldset": {
+                      borderColor: `${borderColor2}`
+                    },
+                    "&:hover fieldset": {
+                      borderColor: `${hoverColor}`
+                    },
+                    "&.Mui-focused fieldset": {
+                      borderColor: `${hoverColor}`
+                    }
+                  }
+                }
+              },
+              label
+            })
+          )
+        }
+      ));
+    }
   }
   return void 0;
 }
@@ -3581,12 +3760,12 @@ function SearchTextField() {
 }
 
 // src/components/PageComponents/WavelengthSideBar.tsx
-import React11, { useState as useState3 } from "react";
+import React11, { useState as useState2 } from "react";
 import { Box, List, ListItem as ListItem2, Typography, Collapse } from "@mui/material";
 import { KeyboardArrowDownRounded, KeyboardArrowRightRounded } from "@mui/icons-material";
 import { useNavigate } from "react-router-dom";
 function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = "fit-content", height: height2 = 300 }) {
-  const [openSections, setOpenSections] = useState3({});
+  const [openSections, setOpenSections] = useState2({});
   const navigate = useNavigate();
   const palette2 = getPalette();
   function handleToggle(sectionTitle) {