@monolith-forensics/monolith-ui 1.1.48 → 1.1.49

package/dist/Grid/Grid.js

@@ -5,7 +5,8 @@ const Grid = styled(({ className, children }) => {
 }) `
   display: grid;
   grid-template-columns: repeat(${({ col }) => col || 1}, minmax(0, 1fr));
-  gap: 20px;
+  column-gap: 20px;
+  row-gap: 15px;
 
   width: ${({ width }) => Number.isInteger(width) ? `${width}px` : width || "100%"};
   height: auto;

package/dist/Modal/Modal.d.ts

@@ -10,5 +10,6 @@ declare const Modal: {
     ({ children, open, onClose, style, showCloseButton, FocusProps, }: ModalProps): import("react/jsx-runtime").JSX.Element;
     Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
     SubTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+    Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 };
 export default Modal;

package/dist/Modal/Modal.js

@@ -70,11 +70,20 @@ const StyledClose = styled.div `
   color: ${(props) => props.theme.palette.text.secondary};
 `;
 const StyledButton = styled.button `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => props.theme.palette.text.secondary};
   background-color: transparent;
+  border-radius: 4px;
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0;
+  padding: 2px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.palette.action.hover};
+  }
 `;
 const Title = styled.h1 `
   font-size: 20px;
@@ -87,6 +96,11 @@ const SubTitle = styled.h2 `
   margin: 0px;
   color: ${(props) => props.theme.palette.text.secondary};
 `;
+const ModalContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
 const Modal = ({ children, open = false, onClose, style = {}, showCloseButton = false, FocusProps = {}, }) => {
     const { refs, floatingStyles, context } = useFloating({
         open,
@@ -103,4 +117,5 @@ const Modal = ({ children, open = false, onClose, style = {}, showCloseButton =
 };
 Modal.Title = Title;
 Modal.SubTitle = SubTitle;
+Modal.Content = ModalContent;
 export default Modal;

package/dist/SelectBox/SelectBox.js

@@ -166,7 +166,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         .concat(customItems) // Add custom items to the list
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
-        return itemValue.toLowerCase().includes(searchValue.toLowerCase());
+        return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
     })
         .sort((a, b) => {
         if (grouped) {
@@ -219,9 +219,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     };
     const handleClear = (e) => {
         e.preventDefault();
-        e.stopPropagation();
         if (inputRef.current)
             inputRef.current.value = "";
+        setIsOpen(false);
         handleChangeSelection(null);
         setSelected(null);
         setSearchValue("");
@@ -434,7 +434,10 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             setDropDownHeight(bottomHeight);
         };
     }, [topHeight, bottomHeight, isOpen]);
-    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: debouncedHandleOnChange, 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 })) : arrow ? (_jsx(ArrowButton, { onClick: (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: debouncedHandleOnChange, 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) => {
                             e.preventDefault();
                             // e.stopPropagation();
                         }, onMouseDown: (e) => {

package/dist/TagBox/TagBox.js

@@ -359,7 +359,6 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
     };
     const handleClear = (e) => {
         e.preventDefault();
-        e.stopPropagation();
         if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current)
             inputRef.current.value = "";
         onChange === null || onChange === void 0 ? void 0 : onChange([]);
@@ -551,7 +550,10 @@ 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 })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
+                        (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) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
                             e.preventDefault();
                         }, onMouseDown: (e) => {
                             e.preventDefault();

package/package.json

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