@monolith-forensics/monolith-ui 1.2.113 → 1.2.115

package/dist/SelectBox/SelectBox.js

@@ -202,7 +202,7 @@ const resolveValue = (value, data) => {
     return value;
 };
 const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, label, description, required = false, error, openOnFocus = true, renderOption, actionComponent, focused, grouped, OptionTooltip, // Custom tooltip component for search menu items
-DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
+DropDownProps = {}, debounceTime = 175, sort = false, disabled = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const theme = useTheme();
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
@@ -310,31 +310,30 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
         const value = e.target.value;
         setInputValue(value || "");
         debouncedHandleChange(value);
-        setIsOpen(true);
+        if (!isOpen)
+            setIsOpen(true);
     };
     const debouncedHandleChange = useDebouncedCallback((value) => {
         if (searchFn) {
             searchFn(value);
         }
         else {
-            setSearchValue(value);
+            handleSearch(value);
         }
-        if (allowCustomValue && value) {
-            const existingItem = resolvedOptions.find((item) => item.value.toLowerCase() === value.toLowerCase());
+        if (!!allowCustomValue && !!value) {
+            const existingItem = resolvedOptions.find((item) => { var _a, _b, _c; return ((_b = (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === ((_c = value === null || value === void 0 ? void 0 : value.toLowerCase) === null || _c === void 0 ? void 0 : _c.call(value)); });
             if (existingItem)
                 handleChangeSelection(existingItem);
-            else
-                handleChangeSelection(null);
+            else {
+                handleChangeSelection({
+                    value: value,
+                    label: value,
+                });
+            }
         }
         update();
     }, debounceTime);
     const handleBlur = () => {
-        // add custom value if prop is set
-        // and input value is not empty
-        // and no item is selected
-        if (allowCustomValue && !_value && !!inputValue) {
-            handleAddItem(inputValue);
-        }
         setIsOpen(false);
         setSearchValue("");
     };
@@ -358,13 +357,12 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
     };
     const handleChangeSelection = useCallback((option) => {
         !isControlled.current && setValueState(option);
+        setInputValue((option === null || option === void 0 ? void 0 : option.label) || "");
         onChange === null || onChange === void 0 ? void 0 : onChange(option === null || option === void 0 ? void 0 : option.value, option);
     }, [onChange]);
     const handleAddItem = useCallback((newItem) => {
-        const newValue = { label: newItem, value: newItem };
-        setCustomItems((prev) => [...prev, newValue]);
-        handleChangeSelection(newValue);
-        onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
+        setCustomItems((prev) => [...prev, newItem]);
+        onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newItem);
     }, [onItemAdded, isObjectArray, handleChangeSelection]);
     const handleKeyDown = (e) => {
         var _a;
@@ -398,6 +396,7 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
                 newItem = filteredItems[index + 1];
             }
             !isControlled.current && setValueState(newItem);
+            setInputValue(newItem.label || "");
             onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
@@ -419,19 +418,14 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
                 newItem = filteredItems[index - 1];
             }
             !isControlled.current && setValueState(newItem);
+            setInputValue(newItem.label || "");
             onChange === null || onChange === void 0 ? void 0 : onChange(newItem.value, newItem);
             return;
         }
         // Tab key
         if (e.key === "Tab") {
-            if (allowCustomValue && !_value && !!currentInputValue) {
-                handleAddItem(currentInputValue);
-                setSearchValue("");
-            }
-            else if (!_value) {
-                // clear input
+            if (!_value)
                 setInputValue("");
-            }
             setSearchValue("");
             setIsOpen(false);
             return;
@@ -442,6 +436,13 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
             setIsOpen(true);
         }
     };
+    const handleSearch = (value) => {
+        if (searchable) {
+            setSearchValue(value);
+            update();
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+        }
+    };
     const referenceEl = (_b = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _b === void 0 ? void 0 : _b.current;
     const contentWidth = ((_e = (_d = (_c = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.getClientRects) === null || _c === void 0 ? void 0 : _c.call(referenceEl)) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.width) || "100%";
     const scrollEl = scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : scrollContainerRef.current;
@@ -471,10 +472,6 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference, handleBlur]);
-    // handle input value change
-    useEffect(() => {
-        setInputValue((_value === null || _value === void 0 ? void 0 : _value.label) || "");
-    }, [_value]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -483,13 +480,6 @@ DropDownProps = {}, debounceTime = 150, sort = false, disabled = false, }) => {
             item.scrollIntoView({ block: "nearest" });
         }
     }, [_value]);
-    // make calls to onSearch callback
-    useEffect(() => {
-        if (searchable) {
-            update();
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
-        }
-    }, [searchValue]);
     useEffect(() => {
         if (bottomHeight < 250) {
             setPlacement("top-start");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.113",
+  "version": "1.2.115",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",