@wavelengthusaf/components 1.1.7 → 1.1.8

package/dist/index.d.mts

@@ -119,19 +119,21 @@ interface SearchProps {
     borderRadius?: number | string;
     label?: string;
     width?: string;
-    height?: string;
+    height?: string | number;
     children?: ReactNode;
     borderColor?: string;
     hoverColor?: string;
     textColor?: string;
     backgroundColor?: string;
     placeholder?: string;
+    size?: "small" | "medium";
+    fontSize?: string;
     options: SearchResult[];
     onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     searchFunction: (value: string) => SearchResult[];
     onSearchItemSelected: (selectedItem: SearchResult | string) => void;
 }
-declare function WavelengthSearch({ id, mode, width, height, label, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
+declare function WavelengthSearch({ id, mode, width, height, label, size, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
 
 declare function SearchTextField(): React__default.JSX.Element;
 

package/dist/index.d.ts

@@ -119,19 +119,21 @@ interface SearchProps {
     borderRadius?: number | string;
     label?: string;
     width?: string;
-    height?: string;
+    height?: string | number;
     children?: ReactNode;
     borderColor?: string;
     hoverColor?: string;
     textColor?: string;
     backgroundColor?: string;
     placeholder?: string;
+    size?: "small" | "medium";
+    fontSize?: string;
     options: SearchResult[];
     onChange?: React__default.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
     searchFunction: (value: string) => SearchResult[];
     onSearchItemSelected: (selectedItem: SearchResult | string) => void;
 }
-declare function WavelengthSearch({ id, mode, width, height, label, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
+declare function WavelengthSearch({ id, mode, width, height, label, size, borderRadius, children, placeholder, searchFunction, onSearchItemSelected, options, onChange, borderColor, hoverColor, textColor, fontSize, backgroundColor, }: SearchProps): React__default.JSX.Element | undefined;
 
 declare function SearchTextField(): React__default.JSX.Element;
 

package/dist/index.js

@@ -3424,12 +3424,50 @@ var import_InputAdornment = __toESM(require("@mui/material/InputAdornment"));
 var import_IconButton = __toESM(require("@mui/material/IconButton"));
 var import_react13 = require("react");
 var import_ListItem = __toESM(require("@mui/material/ListItem"));
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ import_react12.default.createElement(
+    import_material5.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,
@@ -3440,6 +3478,7 @@ function WavelengthSearch({
   borderColor: borderColor2,
   hoverColor,
   textColor,
+  fontSize,
   backgroundColor: backgroundColor2
 }) {
   const palette2 = getPalette();
@@ -3482,8 +3521,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__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(import_IconButton.default, { sx: { color: textColor } }, children))
             }),
@@ -3509,7 +3549,8 @@ function WavelengthSearch({
             label,
             onChange
           })
-        )
+        ),
+        PopperComponent: CustomPopper
       }
     ));
   } else if (mode == "manual") {
@@ -3557,8 +3598,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__ */ import_react12.default.createElement(import_InputAdornment.default, { position: "end" }, /* @__PURE__ */ import_react12.default.createElement(
                 import_IconButton.default,