@wavelengthusaf/components 1.1.9 → 1.2.1

package/dist/index.mjs

@@ -3400,7 +3400,7 @@ var CustomPopper = (props) => {
           name: "preventOverflow",
           enabled: true,
           options: {
-            altAxis: true,
+            altAxis: false,
             altBoundary: true,
             tether: true,
             rootBoundary: "document",
@@ -3422,6 +3422,7 @@ function WavelengthSearch({
   borderRadius: borderRadius2,
   children,
   placeholder,
+  onEnter,
   onSearchItemSelected,
   options,
   onChange,
@@ -3429,16 +3430,14 @@ function WavelengthSearch({
   hoverColor,
   textColor,
   fontSize,
-  backgroundColor: backgroundColor2
+  backgroundColor: backgroundColor2,
+  iconPos = "end"
 }) {
   const palette2 = getPalette();
   borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
   hoverColor = hoverColor ? hoverColor : palette2.primary;
-  const onChangeHandler = () => {
-    onChange;
-  };
   if (type == "search-bar" || type == void 0) {
-    if (mode == "automatic") {
+    if (mode == "automatic" && iconPos == "end") {
       return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
         Autocomplete2,
         {
@@ -3447,7 +3446,6 @@ function WavelengthSearch({
           disableListWrap: true,
           freeSolo: true,
           onChange: (e, value) => {
-            console.log(" AutoComplete value ", value);
             if (value != null) {
               if (typeof value != "string") {
                 if (onSearchItemSelected) onSearchItemSelected(value);
@@ -3506,18 +3504,84 @@ function WavelengthSearch({
           PopperComponent: CustomPopper
         }
       ));
-    } else if (mode == "manual") {
+    } else if (mode == "automatic" && iconPos == "start") {
       return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
         Autocomplete2,
         {
           filterOptions: (x) => x,
           loading: true,
+          disableListWrap: true,
           freeSolo: true,
           onChange: (e, value) => {
             if (value != null) {
-              if (typeof value == "string") {
-                console.log("String Input, No Selection");
-              } else {
+              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",
+                startAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React9.createElement(IconButton, { sx: { color: textColor, paddingRight: "0px" } }, children))
+              }),
+              sx: {
+                "& .MuiInputBase-root": {
+                  height: height2
+                },
+                "&.MuiTextField-root": {
+                  "& label": { color: `${textColor}` },
+                  "& label.Mui-focused": {
+                    color: `${hoverColor}`
+                  },
+                  "& .MuiOutlinedInput-root": {
+                    "& fieldset": {
+                      borderColor: `${borderColor2}`
+                    },
+                    "&:hover fieldset": {
+                      borderColor: `${hoverColor}`
+                    },
+                    "&.Mui-focused fieldset": {
+                      borderColor: `${hoverColor}`
+                    }
+                  }
+                }
+              },
+              label,
+              onChange
+            })
+          ),
+          PopperComponent: CustomPopper
+        }
+      ));
+    } else if (mode == "manual" && iconPos == "end") {
+      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);
               }
             }
@@ -3536,12 +3600,13 @@ function WavelengthSearch({
           renderInput: (params) => /* @__PURE__ */ React9.createElement(
             TextField2,
             __spreadProps(__spreadValues({
+              inputRef: textRef,
               placeholder,
               onKeyDown: (e) => {
                 if (e.key == "Enter") {
-                  () => {
-                    onChangeHandler;
-                  };
+                  if (textRef.current && onEnter) {
+                    onEnter(textRef.current.value);
+                  }
                 }
               }
             }, params), {
@@ -3555,7 +3620,93 @@ function WavelengthSearch({
                   {
                     sx: { color: textColor },
                     onClick: () => {
-                      onChange;
+                      if (textRef.current && onEnter) {
+                        onEnter(textRef.current.value);
+                      }
+                    }
+                  },
+                  children
+                ))
+              }),
+              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
+            })
+          )
+        }
+      ));
+    } else if (mode == "manual" && iconPos == "start") {
+      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);
+              }
+            }
+          },
+          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({
+              inputRef: textRef,
+              placeholder,
+              onKeyDown: (e) => {
+                if (e.key == "Enter") {
+                  if (textRef.current && onEnter) {
+                    onEnter(textRef.current.value);
+                  }
+                }
+              }
+            }, params), {
+              id,
+              size,
+              InputProps: __spreadProps(__spreadValues({}, params.InputProps), {
+                style: { borderRadius: borderRadius2, color: textColor, fontSize },
+                type: "search",
+                startAdornment: /* @__PURE__ */ React9.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React9.createElement(
+                  IconButton,
+                  {
+                    sx: { color: textColor, paddingRight: "0px" },
+                    onClick: () => {
+                      if (textRef.current && onEnter) {
+                        onEnter(textRef.current.value);
+                      }
                     }
                   },
                   children
@@ -3673,8 +3824,8 @@ function WavelengthSearch({
             }
           },
           disableCloseOnSelect: false,
-          getOptionLabel: (results) => {
-            const returnVal = typeof results === "string" ? results : results.title;
+          getOptionLabel: (options2) => {
+            const returnVal = typeof options2 === "string" ? options2 : options2.title;
             return returnVal;
           },
           options,
@@ -3690,7 +3841,9 @@ function WavelengthSearch({
               inputRef: textRef,
               onKeyDown: (e) => {
                 if (e.key == "Enter") {
-                  onChange;
+                  if (textRef.current && onEnter) {
+                    onEnter(textRef.current.value);
+                  }
                 }
               }
             }, params), {
@@ -4842,8 +4995,9 @@ import Snackbar2 from "@mui/material/Snackbar";
 import IconButton5 from "@mui/material/IconButton";
 import CloseIcon3 from "@mui/icons-material/Close";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-function WavelengthStandardSnackbar(props) {
-  const { show, setShow } = props;
+var WavelengthStandardSnackbar = (props) => {
+  let show = props.show;
+  const setShow = props.setShow;
   const handleClose = () => {
     setShow(false);
   };
@@ -4893,7 +5047,7 @@ function WavelengthStandardSnackbar(props) {
       }
     )
   );
-}
+};
 export {
   AceOfSpadesComponent,
   AppLogo,