@monolith-forensics/monolith-ui 1.1.70 → 1.1.72

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.d.ts

@@ -2,5 +2,5 @@ import { SelectBoxProps } from "..";
 export declare const StyledInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     width?: string | number | null;
 }>> & string;
-declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const SelectBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<SelectBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, onChange, onSearch, searchFn, onScroll, loading, defaultValue, value, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, label, description, required, error, openOnFocus, renderOption, actionComponent, focused, grouped, OptionTooltip, DropDownProps, debounceTime, sort, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default SelectBox;

package/dist/SelectBox/SelectBox.js

@@ -160,7 +160,7 @@ const StyledItem = styled.div `
     color: ${(props) => props.theme.palette.text.primary};
   }
 `;
-const SelectBox = styled(({ className, data = [], placeholder = "Select...", arrow = true, onChange, onSearch, searchFn, onScroll, loading, defaultValue, 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
+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, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
@@ -314,14 +314,6 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
         }
         // 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;
         }
@@ -339,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") {
@@ -354,6 +347,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;
         }
         // Tab key
         if (e.key === "Tab") {
@@ -409,16 +403,14 @@ DropDownProps = {}, debounceTime = 300, sort = false, }) => {
     }, [refs.floating, refs.reference, handleBlur]);
     // Handle default value
     useEffect(() => {
-        if (defaultValue) {
-            const isOption = defaultValue.value !== undefined;
-            const searchPattern = isOption
-                ? defaultValue.value
-                : defaultValue;
+        if (value) {
+            const isOption = value.value !== undefined;
+            const searchPattern = isOption ? value.value : value;
             setSelected(data.find((item) => isObjectArray
                 ? item.value === searchPattern
                 : item === searchPattern) || null);
         }
-    }, [data, defaultValue, isObjectArray]);
+    }, [data, value, isObjectArray]);
     // handle input value change
     useEffect(() => {
         if (inputRef.current) {

package/dist/SelectBox/types.d.ts

@@ -8,6 +8,7 @@ export type Option = {
 export interface SelectBoxProps {
     className?: string;
     defaultValue?: Option | string;
+    value?: Option | string;
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;

package/dist/TagBox/TagBox.d.ts

@@ -1,3 +1,3 @@
 import { TagBoxProps } from "./types";
-declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+declare const TagBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<TagBoxProps, never>> & string & Omit<({ className, data, placeholder, arrow, defaultValue, value, grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size, variant, width, allowCustomValue, searchable, clearable, openOnFocus, label, description, required, error, loading, sort, renderOption, OptionTooltip, }: TagBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default TagBox;

package/dist/TagBox/TagBox.js

@@ -292,11 +292,11 @@ const EmptyComponent = styled.div `
   font-size: 1 rem;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
-const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, }) => {
-    var _a, _b, _c, _d, _e, _f;
+const TagBox = styled(({ className, data = [], placeholder = "Select tags", arrow = true, defaultValue = [], value = [], grouped, searchFn, onChange, onScroll, onSearch, onItemAdded, size = "sm", variant = "outlined", width = "100%", allowCustomValue = false, searchable = false, clearable = false, openOnFocus = true, label, description, required = false, error, loading = false, sort = false, renderOption, OptionTooltip, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.hasOwnProperty("label");
     const [isOpen, setIsOpen] = useState(false);
-    const [selectedItems, setSelectedItems] = useState(defaultValue);
+    const [selectedItems, setSelectedItems] = useState(value);
     const [preSelected, setPreSelected] = useState(null);
     const [customItems, setCustomItems] = useState([]);
     const [searchValue, setSearchValue] = useState("");
@@ -305,9 +305,9 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     const filteredItems = data
         .concat(customItems) // Add custom items to the list
         .filter((item) => {
-        const isSelected = !!selectedItems.find((selectedItem) => isObjectArray
+        const isSelected = !!(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find((selectedItem) => isObjectArray
             ? selectedItem.value === item.value
-            : selectedItem === item);
+            : selectedItem === item));
         return !isSelected;
     })
         .filter((item) => {
@@ -483,7 +483,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         // Backspace key
         if (e.key === "Backspace" && currentInputValue === "") {
             setSelectedItems((prev) => {
-                const newItems = prev.slice(0, prev.length - 1);
+                const newItems = prev === null || prev === void 0 ? void 0 : prev.slice(0, prev.length - 1);
                 onChange === null || onChange === void 0 ? void 0 : onChange(newItems);
                 return newItems;
             });
@@ -552,9 +552,9 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     return (_jsxs("div", { className: className + " mfTagBox", children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "styledInputContainer", ref: refs.setReference, onMouseDown: () => {
                     setIsOpen(true);
                     handleFocus();
-                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
+                }, onFocus: handleFocus, size: size, variant: variant, onKeyDown: handleKeyDown, "data-open": isOpen, children: [_jsx(StyledInnerContainer, { size: size, "data-button-right": arrow || clearable, children: _jsxs(PillContainer, { size: size, children: [selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => (_jsx(Pill, { size: "xs", onRemove: () => handleRemoveItem(item, index), children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index))), (searchable ||
                                     allowCustomValue ||
-                                    selectedItems.length === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
+                                    (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0) && (_jsx(StyledInput, { inputRef: inputRef, onChange: (e) => {
                                         if (searchFn !== undefined) {
                                             searchFn === null || searchFn === void 0 ? void 0 : searchFn(e.target.value);
                                         }
@@ -563,7 +563,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
                                         }
                                         update();
                                     }, placeholder: placeholder, size: size, readOnly: !(searchable || allowCustomValue) }))] }) }), clearable &&
-                        (selectedItems.length > 0 || !!((_f = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _f === void 0 ? void 0 : _f.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
+                        (((_f = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) !== null && _f !== void 0 ? _f : 0) > 0 || !!((_g = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _g === void 0 ? void 0 : _g.value)) ? (_jsx(ClearButton, { onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {

package/dist/TagBox/types.d.ts

@@ -7,7 +7,8 @@ export type Option = {
 };
 export interface TagBoxProps {
     className?: string;
-    defaultValue?: Option[];
+    defaultValue?: Option[] | string[];
+    value?: Option[] | string[];
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;

package/package.json

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