@etsoo/materialui 1.1.73 → 1.1.75

package/lib/ComboBoxPro.js

@@ -14,7 +14,7 @@ export function ComboBoxPro(props) {
     const [localValue, setValue] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
     React.useEffect(() => {
-        if (value == null)
+        if (value === undefined)
             return;
         setValue(value);
     }, [value]);
@@ -24,6 +24,8 @@ export function ComboBoxPro(props) {
         const option = localOptions.find((option) => option.id === idValue);
         if (option)
             setValue(option);
+        else
+            setValue(null);
     }, [localOptions]);
     React.useEffect(() => {
         if (typeof options === "function") {
@@ -38,12 +40,12 @@ export function ComboBoxPro(props) {
             setOptions(options);
         }
     }, [options]);
-    return (React.createElement(Autocomplete, { id: name, value: localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
+    return (React.createElement(Autocomplete, { id: name, value: localValue == null ? "" : localValue, open: open, freeSolo: true, clearOnBlur: false, onOpen: () => {
             setOpen(true);
         }, onClose: () => {
             setOpen(false);
         }, options: localOptions, loading: loading, openOnFocus: openOnFocus, renderInput: (params) => (React.createElement(InputField, { ...inputProps, ...params, label: label, name: name, onBlur: (event) => {
-                if (onChange)
+                if (localValue == null && onChange)
                     onChange(event, event.target.value, "blur", undefined);
             } })), getOptionLabel: (item) => typeof item === "object" ? getLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);

package/lib/SearchBar.js

@@ -223,7 +223,7 @@ export function SearchBar(props) {
                 if (form)
                     state.form = form;
             } },
-            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", sx: {
+            React.createElement(Stack, { ref: dimensions[0][0], justifyContent: "center", alignItems: "center", direction: "row", spacing: 1, width: "100%", overflow: "hidden", sx: {
                     "& > :not(style)": {
                         flexBasis: "auto",
                         flexGrow: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.73",
+  "version": "1.1.75",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/ComboBoxPro.tsx

@@ -72,7 +72,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
   const [loading, setLoading] = React.useState(false);
 
   React.useEffect(() => {
-    if (value == null) return;
+    if (value === undefined) return;
     setValue(value);
   }, [value]);
 
@@ -80,6 +80,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
     if (idValue == null) return;
     const option = localOptions.find((option) => option.id === idValue);
     if (option) setValue(option);
+    else setValue(null);
   }, [localOptions]);
 
   React.useEffect(() => {
@@ -97,7 +98,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
   return (
     <Autocomplete<D, false, false, true>
       id={name}
-      value={localValue}
+      value={localValue == null ? "" : localValue}
       open={open}
       freeSolo
       clearOnBlur={false}
@@ -117,7 +118,7 @@ export function ComboBoxPro<D extends DataType = DataType>(
           label={label}
           name={name}
           onBlur={(event) => {
-            if (onChange)
+            if (localValue == null && onChange)
               onChange(event, event.target.value, "blur", undefined);
           }}
         />

package/src/SearchBar.tsx

@@ -311,6 +311,7 @@ export function SearchBar(props: SearchBarProps) {
           direction="row"
           spacing={1}
           width="100%"
+          overflow="hidden"
           sx={{
             "& > :not(style)": {
               flexBasis: "auto",