@monolith-forensics/monolith-ui 1.1.69 → 1.1.71

package/dist/DateInput/DateInput.js

@@ -128,6 +128,11 @@ const StyledInputContainer = styled.div `
     }
   }
 
+  // focus within
+  &:focus-within {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+
   &:focus {
     border: 1px solid ${(props) => props.theme.palette.primary.main};
   }

package/dist/SelectBox/SelectBox.js

@@ -262,9 +262,14 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
     }, debounceTime);
     const handleBlur = () => {
         var _a, _b;
-        if (((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && allowCustomValue) {
+        // add custom value if prop is set
+        // and input value is not empty
+        // and no item is selected
+        if (allowCustomValue && !selected && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
             handleAddItem((_b = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _b === void 0 ? void 0 : _b.value);
         }
+        setIsOpen(false);
+        setSearchValue("");
     };
     const handleClear = (e) => {
         e.preventDefault();
@@ -305,18 +310,12 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
             setSearchValue("");
             update();
             setIsOpen(false);
+            return;
         }
         // Enter key
         if (e.key === "Enter") {
-            if (currentInputValue && currentInputValue !== "" && allowCustomValue) {
-                handleAddItem(currentInputValue);
-                setSearchValue("");
-                update();
-            }
-            else {
-                // TODO: decide what to do when user presses enter after typing a search value
-            }
             toggleOpen();
+            return;
         }
         // Arrow down
         if (e.key === "ArrowDown") {
@@ -332,6 +331,7 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
                 return newItem;
             });
+            return;
         }
         // Arrow up
         if (e.key === "ArrowUp") {
@@ -347,10 +347,11 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
                 onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
                 return newItem;
             });
+            return;
         }
         // Tab key
         if (e.key === "Tab") {
-            if (allowCustomValue && currentInputValue && currentInputValue !== "") {
+            if (allowCustomValue && !selected && !!currentInputValue) {
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
@@ -362,7 +363,9 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
             }
             setSearchValue("");
             setIsOpen(false);
+            return;
         }
+        setSelected(null); // Reset selected value when input value changes
     };
     const handleFocus = () => {
         if (openOnFocus) {
@@ -392,12 +395,12 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
                 !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
                 !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
             ) {
-                setIsOpen(false);
+                handleBlur();
             }
         };
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
-    }, [refs.floating, refs.reference]);
+    }, [refs.floating, refs.reference, handleBlur]);
     // Handle default value
     useEffect(() => {
         if (defaultValue) {
@@ -455,7 +458,7 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
     useEffect(() => {
         debouncedHandleChange(inputValue);
     }, [inputValue, debouncedHandleChange]);
-    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable, onBlur: handleBlur }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
+    return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: refs.setReference, onMouseDown: () => setIsOpen(true), width: width, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(Input, { ref: inputRef, onChange: handleInputChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && (selected || !!((_h = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _h === void 0 ? void 0 : _h.value)) ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {

package/package.json

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