@wavelengthusaf/components 1.1.7 → 1.1.8

package/dist/index.mjs

@@ -3368,18 +3368,56 @@ 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({
+      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,
   width: width2,
   height: height2,
   label,
+  size,
   borderRadius: borderRadius2,
   children,
   placeholder,
@@ -3390,6 +3428,7 @@ function WavelengthSearch({
   borderColor: borderColor2,
   hoverColor,
   textColor,
+  fontSize,
   backgroundColor: backgroundColor2
 }) {
   const palette2 = getPalette();
@@ -3432,8 +3471,9 @@ function WavelengthSearch({
             placeholder
           }, params), {
             id,
+            size,
             InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-              style: { borderRadius: borderRadius2, height: height2, color: textColor, backgroundColor: backgroundColor2 },
+              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))
             }),
@@ -3459,7 +3499,8 @@ function WavelengthSearch({
             label,
             onChange
           })
-        )
+        ),
+        PopperComponent: CustomPopper
       }
     ));
   } else if (mode == "manual") {
@@ -3507,8 +3548,9 @@ function WavelengthSearch({
             }
           }, params), {
             id,
+            size,
             InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
-              style: { borderRadius: borderRadius2, height: height2, color: textColor },
+              style: { borderRadius: borderRadius2, height: height2, color: textColor, fontSize },
               type: "search",
               endAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React9.createElement(
                 IconButton,