@wavelengthusaf/components 4.9.0 → 4.11.0

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment17 = REACT_FRAGMENT_TYPE;
+        var Fragment16 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment17;
+        exports.Fragment = Fragment16;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -3728,564 +3728,85 @@ function WavelengthExampleComponent({ width: width2 = 100, height: height2 = 100
 WavelengthExampleComponent.displayName = "WavelengthExampleComponent";
 
 // src/components/search/WavelengthSearch.tsx
-var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
-var _InputAdornment = require('@mui/material/InputAdornment'); var _InputAdornment2 = _interopRequireDefault(_InputAdornment);
-var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
-var _Icon = require('@mui/material/Icon'); var _Icon2 = _interopRequireDefault(_Icon);
-
-var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequireDefault(_ListItem);
-var _Popper = require('@mui/material/Popper'); var _Popper2 = _interopRequireDefault(_Popper);
-var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
-var _ListItemText = require('@mui/material/ListItemText'); var _ListItemText2 = _interopRequireDefault(_ListItemText);
 
 
-
-var CustomPopper = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Popper2.default,
-    {
-      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: false,
-            altBoundary: true,
-            tether: true,
-            rootBoundary: "document",
-            padding: 8
-          }
-        }
-      ]
-    }
-  );
-};
-var AutocompleteCustomEndAdornment = _styledcomponents2.default.call(void 0, "div")({
-  position: "absolute",
-  right: "12px",
-  top: "50%",
-  transform: "translate(0, -50%)"
-});
-function WavelengthSearch({
-  id,
-  mode,
-  type,
+var WavelengthSearch = ({
+  customStyle: customStyle2,
   width: width2,
+  mode,
+  fontSize,
   height: height2,
-  label,
-  size,
+  borderWidth,
   borderRadius: borderRadius2,
-  children,
-  placeholder,
-  onEnter,
-  onSearchItemSelected,
-  options,
-  onChange,
   borderColor: borderColor2,
-  hoverColor,
-  textColor,
-  fontSize,
   backgroundColor: backgroundColor2,
-  iconPos = "end",
-  clearIconMarginRight
-}) {
-  const palette2 = getPalette();
-  borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
-  hoverColor = hoverColor ? hoverColor : palette2.primary;
-  if (type === "search-bar" || type === void 0) {
-    if (mode === "automatic" && iconPos === "end") {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          filterOptions: (x) => x,
-          loading: true,
-          disableListWrap: 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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "45px"
-            }
-          },
-          renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              placeholder,
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
-                type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { sx: { color: "white" }, 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 === "automatic" && iconPos === "start") {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          filterOptions: (x) => x,
-          loading: true,
-          disableListWrap: 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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
-            }
-          },
-          renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              placeholder,
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
-                type: "search",
-                endAdornment: null,
-                startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Icon2.default, { 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 = _react.useRef.call(void 0, );
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "50px"
-            }
-          },
-          renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              inputRef: textRef,
-              placeholder,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  if (textRef.current && onEnter) {
-                    onEnter(textRef.current.value);
-                  }
-                }
-              },
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                style: { borderRadius: borderRadius2, color: textColor, fontSize },
-                type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _IconButton2.default,
-                  {
-                    sx: { color: textColor },
-                    onClick: () => {
-                      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 = _react.useRef.call(void 0, );
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
-            }
-          },
-          renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              inputRef: textRef,
-              placeholder,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  if (textRef.current && onEnter) {
-                    onEnter(textRef.current.value);
-                  }
-                }
-              },
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                style: { borderRadius: borderRadius2, color: textColor, fontSize },
-                type: "search",
-                endAdornment: null,
-                startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _IconButton2.default,
-                  {
-                    sx: { color: textColor, paddingRight: "0px" },
-                    onClick: () => {
-                      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 (type === "text-box") {
-    if (mode === "automatic") {
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
-            }
-          },
-          renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              placeholder,
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
-                type: "search"
-              },
-              sx: {
-                "& .MuiInputBase-root": {
-                  height: height2
-                },
-                "& .MuiAutocomplete-endAdornment": {
-                  display: "none"
-                },
-                "&.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") {
-      const textRef = _react.useRef.call(void 0, );
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Autocomplete2.default,
-        {
-          id,
-          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,
-            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
-              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
-            }
-          },
-          renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
-          renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _TextField2.default,
-            {
-              placeholder,
-              inputRef: textRef,
-              onKeyDown: (e) => {
-                if (e.key === "Enter") {
-                  if (textRef.current && onEnter) {
-                    onEnter(textRef.current.value);
-                  }
-                }
-              },
-              ...params,
-              size,
-              InputProps: {
-                ...params.InputProps,
-                endAdornment: null,
-                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
-            }
-          )
-        }
-      ) });
+  iconPos,
+  hoverColor,
+  options,
+  placeholder,
+  placeholderColor,
+  placeholderFont,
+  inputColor,
+  inputFont,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    if (value !== void 0) {
+      el.setAttribute(attribute, value);
+    } else {
+      el.removeAttribute(attribute);
     }
-  }
-  return void 0;
-}
+  };
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle2;
+    syncAttribute("width", width2);
+    syncAttribute("mode", mode);
+    syncAttribute("font-size", fontSize);
+    syncAttribute("height", height2);
+    syncAttribute("border-width", borderWidth);
+    syncAttribute("border-radius", borderRadius2);
+    syncAttribute("border-color", borderColor2);
+    syncAttribute("background-color", backgroundColor2);
+    syncAttribute("hover-color", hoverColor);
+    syncAttribute("options", options);
+    syncAttribute("icon-pos", iconPos);
+    syncAttribute("placeholder", placeholder);
+    syncAttribute("placeholder-color", placeholderColor);
+    syncAttribute("placeholder-font", placeholderFont);
+    syncAttribute("input-color", inputColor);
+    syncAttribute("input-font", inputFont);
+  }, [
+    customStyle2,
+    width2,
+    mode,
+    fontSize,
+    height2,
+    borderWidth,
+    borderRadius2,
+    borderColor2,
+    backgroundColor2,
+    iconPos,
+    hoverColor,
+    options,
+    placeholder,
+    placeholderColor,
+    placeholderFont,
+    inputColor,
+    inputFont
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-search", { ref, ...rest });
+};
 WavelengthSearch.displayName = "WavelengthSearch";
 
 // src/components/search/WavelengthSearchTextField.tsx
 
-
+var _TextField = require('@mui/material/TextField'); var _TextField2 = _interopRequireDefault(_TextField);
 
 function WavelengthSearchTextField() {
   const palette2 = getPalette();
@@ -4781,7 +4302,7 @@ WavelengthNotAvailablePage.displayName = "WavelengthNotAvailablePage";
 
 var _reactrouterdom = require('react-router-dom');
 var _iconsmaterial = require('@mui/icons-material');
-
+var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequireDefault(_ListItem);
 var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
 var _Collapse = require('@mui/material/Collapse'); var _Collapse2 = _interopRequireDefault(_Collapse);
 var _List = require('@mui/material/List'); var _List2 = _interopRequireDefault(_List);
@@ -6019,7 +5540,7 @@ var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequ
 var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefault(_Slide);
 
 
-
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
 var _Divider = require('@mui/material/Divider'); var _Divider2 = _interopRequireDefault(_Divider);
 
 var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };