@wavelengthusaf/components 1.1.4 → 1.1.6

package/dist/index.mjs

@@ -40,6 +40,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js
 var require_react_is_production_min = __commonJS({
@@ -3368,12 +3388,43 @@ 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 { 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({}, props), {
+      placement: "right-start",
+      disablePortal: false,
+      modifiers: [
+        {
+          name: "flip",
+          enabled: true,
+          options: {
+            altBoundary: true,
+            rootBoundary: "document",
+            padding: 8
+          }
+        },
+        {
+          name: "preventOverflow",
+          enabled: true,
+          options: {
+            altAxis: true,
+            altBoundary: true,
+            tether: false,
+            rootBoundary: "document",
+            padding: 8
+          }
+        }
+      ]
+    })
+  );
+};
 function WavelengthSearch({
   id,
   mode,
@@ -3401,7 +3452,9 @@ function WavelengthSearch({
       {
         filterOptions: (x) => x,
         loading: true,
+        disableListWrap: true,
         freeSolo: true,
+        disablePortal: true,
         onChange: (e, value) => {
           if (value != null) {
             if (typeof value == "string") {
@@ -3453,15 +3506,16 @@ function WavelengthSearch({
               }
             },
             label,
-            onChange: (e) => {
+            onChange: (e) => __async(this, null, function* () {
               if (searchFunction) {
-                const response = searchFunction(e.target.value);
+                const response = yield searchFunction(e.target.value);
                 console.log(response);
-                setResults(response);
+                yield setResults(response);
               }
-            }
+            })
           })
-        )
+        ),
+        PopperComponent: CustomPopper
       }
     ));
   } else if (mode == "manual") {
@@ -3587,7 +3641,7 @@ import React11, { useState as useState3 } 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 = 243, height: height2 = 300 }) {
+function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = "fit-content", height: height2 = 300 }) {
   const [openSections, setOpenSections] = useState3({});
   const navigate = useNavigate();
   const palette2 = getPalette();
@@ -3610,7 +3664,8 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
         marginBottom: 5,
         marginTop,
         marginLeft,
-        borderRadius: "12px"
+        borderRadius: "12px",
+        position: "relative"
       }
     },
     /* @__PURE__ */ React11.createElement(List, { component: "nav" }, sections.map((section, index) => {