@monolith-forensics/monolith-ui 1.1.78 → 1.1.80

package/dist/Pill/Pill.js

@@ -23,7 +23,7 @@ const Pill = styled(({ className, children, size = "md", showRemoveIcon = true,
     return (_jsxs("div", { className: className, onClick: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [_jsx("span", { className: "pill-content", children: children }), showRemoveIcon && (_jsx(StyledButton, { onClick: handleRemove, onMouseDown: (e) => {
+        }, children: [_jsx("span", { className: "pill-content", children: children }), showRemoveIcon && (_jsx(StyledButton, { tabIndex: -1, onClick: handleRemove, onMouseDown: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                 }, children: _jsx(X, {}) }))] }));

package/dist/RichTextEditor/RichTextEditor.d.ts

@@ -18,6 +18,7 @@ interface RichTextEditorProps {
     handleImageUpload?: HandleImageUpload;
     bubbleMenuOptions?: BubbleMenuOptions;
     toolbarOptions?: ToolbarOptions;
+    autoFocus?: boolean;
     style?: React.CSSProperties;
 }
 declare const RichTextEditor: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<RichTextEditorProps & import("react").RefAttributes<unknown>, "ref"> & {

package/dist/RichTextEditor/RichTextEditor.js

@@ -9,7 +9,7 @@ import { startImageUpload, } from "./Plugins/UploadImagesPlugin";
 import SaveBadge from "./Components/SaveBadge";
 import Fonts from "./Enums/Fonts";
 import RichTextEditorContext from "./Contexts/RichTextEditorContext";
-const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, onChange, handleImageUpload, style, }, ref) => {
+const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaultValue = "", readOnly = false, font, showToolbar = true, saving = false, extensions = [], slashCommands = [], bubbleMenuOptions, toolbarOptions, autoFocus, onChange, handleImageUpload, style, }, ref) => {
     const [fontState, setFontState] = useState(font || Fonts.DEFAULT);
     // check if image extension is included
     if (extensions === null || extensions === void 0 ? void 0 : extensions.includes(Extensions.Image)) {
@@ -80,6 +80,12 @@ const RichTextEditor = styled(forwardRef(({ className, editorInstanceRef, defaul
             _ref.current = editor;
         }
     }, [editor]);
+    // AutoFocus on the editor
+    useEffect(() => {
+        if (autoFocus && editor) {
+            editor.view.focus();
+        }
+    }, [autoFocus, editor]);
     return (_jsx("div", { className: className, children: _jsxs(RichTextEditorContext.Provider, { value: {
                 font: fontState,
                 setFont: setFontState,

package/dist/SelectBox/SelectBox.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import styled from "styled-components";
+import styled, { useTheme } from "styled-components";
 import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, FieldLabel, Tooltip, Loader } from "..";
@@ -161,8 +161,9 @@ const StyledItem = styled.div `
   }
 `;
 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 = 300, sort = false, }) => {
+DropDownProps = {}, debounceTime = 150, sort = false, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    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");
     const [inputValue, setInputValue] = useState("");
     const [isOpen, setIsOpen] = useState(false);
@@ -241,6 +242,7 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
     };
     const handleInputChange = (e) => {
         const value = e.target.value;
+        debouncedHandleChange(value);
         setInputValue(value);
         setIsOpen(true);
     };
@@ -257,6 +259,8 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
                 : item.toLowerCase() === value.toLowerCase());
             if (existingItem)
                 handleChangeSelection(existingItem);
+            else
+                handleChangeSelection(null);
         }
         update();
     }, debounceTime);
@@ -283,8 +287,10 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
         update();
     };
     const handleItemClick = (event, item) => {
-        event.preventDefault();
-        event.stopPropagation();
+        var _a;
+        // Prevent input from losing focus on item selection
+        // Allows user to tab to next item in form
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         handleChangeSelection(item);
         setIsOpen(false);
     };
@@ -365,7 +371,7 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
             setIsOpen(false);
             return;
         }
-        setSelected(null); // Reset selected value when input value changes
+        // setSelected(null); // Reset selected value when input value changes
     };
     const handleFocus = () => {
         if (openOnFocus) {
@@ -415,15 +421,10 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
     }, [data, defaultValue, isObjectArray]);
     // handle input value change
     useEffect(() => {
-        if (inputRef.current) {
-            if (!selected) {
-                inputRef.current.value = "";
-            }
-            else {
-                inputRef.current.value = isObjectArray
-                    ? selected.label
-                    : selected;
-            }
+        if (inputRef.current && selected) {
+            inputRef.current.value = isObjectArray
+                ? selected.label
+                : selected;
         }
     }, [selected]);
     // handle scroll item into view
@@ -455,10 +456,7 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    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 }), 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, style: isOpen ? { borderColor: theme.palette.primary.main } : {} }), 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.78",
+  "version": "1.1.80",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",