@monolith-forensics/monolith-ui 1.1.57 → 1.1.58

package/dist/DateInput/DateInput.js

@@ -441,8 +441,48 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
         const pastedText = yield window.navigator.clipboard.readText();
         if (!pastedText)
+            return; // do nothing if clipboard is empty
+        // check for unix timestamp in seconds
+        if (pastedText.match(/^\d{10}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10))
+                .toISOString();
+            setValue(parsedTimestamp);
             return;
-        // check if pasted text is a valid timestamp
+        }
+        // check for unix timestamp in seconds with fractional seconds
+        if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseFloat(pastedText))
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for unix timestamp in milliseconds
+        if (pastedText.match(/^\d{13}$/)) {
+            const parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10) / 1000)
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for windows ldap or filetime timestamp
+        if (pastedText.match(/^\d{18}$/)) {
+            const parsedTimestamp = moment
+                .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
+        if (pastedText.match(/^\d{14}Z$/)) {
+            const parsedTimestamp = moment
+                .utc(pastedText, "YYYYMMDDHHmmssZ")
+                .toISOString();
+            setValue(parsedTimestamp);
+            return;
+        }
+        // check if pasted text is any other valid timestamp
         if (!moment(pastedText).isValid())
             return;
         const parsedTimestamp = moment.utc(pastedText).toISOString();

package/dist/SelectBox/SelectBox.d.ts

@@ -3,6 +3,7 @@ import { Size, Variant } from "../core";
 interface SelectBoxProps {
     className?: string;
     defaultValue?: Option | string;
+    value?: Option | string;
     data?: Option[] | string[];
     placeholder?: string;
     arrow?: boolean;
@@ -41,5 +42,5 @@ type Option = {
 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, TooltipContent, DropDownProps, }: 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, TooltipContent, DropDownProps, }: SelectBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export default SelectBox;

package/dist/SelectBox/SelectBox.js

@@ -15,6 +15,7 @@ import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floatin
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, FieldLabel, Tooltip } from "..";
 import { useDebouncedCallback } from "use-debounce";
+import { useUncontrolled } from "@mantine/hooks";
 import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
 export const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
@@ -150,11 +151,15 @@ 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, TooltipContent, DropDownProps = {}, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+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, TooltipContent, DropDownProps = {}, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
     const isObjectArray = (_a = Object.keys((data === null || data === void 0 ? void 0 : data[0]) || {})) === null || _a === void 0 ? void 0 : _a.includes("label");
+    const [_value, handleChange] = useUncontrolled({
+        value,
+        defaultValue,
+        onChange,
+    });
     const [isOpen, setIsOpen] = useState(false);
-    const [selected, setSelected] = useState(null);
     const [searchValue, setSearchValue] = useState("");
     const [customItems, setCustomItems] = useState([]);
     const [placement, setPlacement] = useState("bottom-start");
@@ -162,9 +167,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
-    const uniqueItems = Array.from(new Map([...data, ...customItems].map(item => [
+    const uniqueItems = Array.from(new Map([...data, ...customItems].map((item) => [
         isObjectArray ? item.value : item,
-        item
+        item,
     ])).values());
     const filteredItems = uniqueItems
         .filter((item) => {
@@ -225,11 +230,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     };
     const handleClear = (e) => {
         e.preventDefault();
-        if (inputRef.current)
-            inputRef.current.value = "";
+        e.stopPropagation();
         setIsOpen(false);
-        handleChangeSelection(null);
-        setSelected(null);
+        handleChange(undefined);
         setSearchValue("");
         searchFn === null || searchFn === void 0 ? void 0 : searchFn("");
         update();
@@ -237,13 +240,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const handleItemClick = (event, item) => {
         event.preventDefault();
         event.stopPropagation();
-        handleChangeSelection(item);
+        handleChange(item);
         setIsOpen(false);
     };
-    const handleChangeSelection = useCallback((option) => {
-        setSelected(option);
-        onChange === null || onChange === void 0 ? void 0 : onChange((option === null || option === void 0 ? void 0 : option.value) || option, option);
-    }, [onChange]);
     const handleAddItem = useCallback((newItem) => {
         const isNewItem = data.every((item) => item.label.toLowerCase() !==
             newItem.toLowerCase());
@@ -255,7 +254,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 prev.push(newValue);
                 return prev;
             });
-            handleChangeSelection(newValue);
+            handleChange(newValue);
             onItemAdded === null || onItemAdded === void 0 ? void 0 : onItemAdded(newValue);
         }
         else {
@@ -264,9 +263,9 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                     ? item.label.toLowerCase() === newItem.toLowerCase()
                     : item.toLowerCase() === newItem.toLowerCase();
             });
-            handleChangeSelection(item);
+            handleChange(item);
         }
-    }, [onItemAdded, isObjectArray, data, handleChangeSelection]);
+    }, [onItemAdded, isObjectArray, data, handleChange]);
     const handleKeyDown = (e) => {
         var _a, _b;
         const currentInputValue = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value;
@@ -293,32 +292,26 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         // Arrow down
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[0]; // Loop back to the first item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index < filteredItems.length - 1) {
-                    newItem = filteredItems[index + 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[0]; // Loop back to the first item
+            const index = filteredItems.findIndex((item) => isObjectArray
+                ? item.value === (_value === null || _value === void 0 ? void 0 : _value.value)
+                : item === _value);
+            if (index < filteredItems.length - 1) {
+                newItem = filteredItems[index + 1];
+            }
+            handleChange === null || handleChange === void 0 ? void 0 : handleChange(newItem, newItem);
         }
         // Arrow up
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            setSelected((prev) => {
-                let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
-                const index = filteredItems.findIndex((item) => isObjectArray
-                    ? item.value === (prev === null || prev === void 0 ? void 0 : prev.value)
-                    : item === prev);
-                if (index > 0) {
-                    newItem = filteredItems[index - 1];
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange((newItem === null || newItem === void 0 ? void 0 : newItem.value) || newItem, newItem);
-                return newItem;
-            });
+            let newItem = filteredItems[filteredItems.length - 1]; // Loop back to the last item
+            const index = filteredItems.findIndex((item) => isObjectArray
+                ? item.value === (_value === null || _value === void 0 ? void 0 : _value.value)
+                : item === _value);
+            if (index > 0) {
+                newItem = filteredItems[index - 1];
+            }
+            handleChange === null || handleChange === void 0 ? void 0 : handleChange(newItem, newItem);
         }
         // Tab key
         if (e.key === "Tab") {
@@ -326,7 +319,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 handleAddItem(currentInputValue);
                 setSearchValue("");
             }
-            else if (!selected) {
+            else if (!_value) {
                 // clear input
                 if (inputRef.current) {
                     inputRef.current.value = "";
@@ -381,31 +374,6 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating, refs.reference]);
-    // Handle default value
-    useEffect(() => {
-        if (defaultValue) {
-            const isOption = defaultValue.value !== undefined;
-            const searchPattern = isOption
-                ? defaultValue.value
-                : defaultValue;
-            setSelected(data.find((item) => isObjectArray
-                ? item.value === searchPattern
-                : item === searchPattern) || null);
-        }
-    }, [data, defaultValue, isObjectArray]);
-    // handle input value change
-    useEffect(() => {
-        if (inputRef.current) {
-            if (!selected) {
-                inputRef.current.value = "";
-            }
-            else {
-                inputRef.current.value = isObjectArray
-                    ? selected.label
-                    : selected;
-            }
-        }
-    }, [selected]);
     // handle scroll item into view
     useEffect(() => {
         var _a, _b;
@@ -413,7 +381,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         if (item) {
             item.scrollIntoView({ block: "nearest" });
         }
-    }, [selected]);
+    }, [_value]);
     // make calls to onSearch callback
     useEffect(() => {
         if (searchable) {
@@ -446,7 +414,7 @@ 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, 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, value: isObjectArray ? (_value === null || _value === void 0 ? void 0 : _value.label) || "" : _value || "", onChange: debouncedHandleOnChange, onFocus: handleFocus, autoFocus: focused, placeholder: placeholder, size: size, readOnly: !searchable, "data-button-right": arrow || clearable }), clearable && _value ? (_jsx(ClearButton, { className: "input-btn", onClick: handleClear, onMouseDown: (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                         } })) : arrow ? (_jsx(ArrowButton, { onClick: (e) => {
@@ -468,15 +436,14 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                         }, variant: variant, "data-empty": filteredItems.length === 0 }, DropDownProps, { children: [actionComponent && _jsx(ActionMenu, { children: actionComponent }), _jsxs(StyledInnerItemContainer, { ref: scrollContainerRef, "data-scroll-active": scrollActive, onScroll: onScroll, children: [loading && _jsx("div", { children: "Loading..." }), !loading && grouped
                                         ? groups.map((group, index) => (_jsxs("div", { children: [_jsx(GroupTitle, { size: size, children: group.label }), group.items.map((item, index) => {
                                                     return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                                ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
-                                                                    item.value
-                                                                : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                                                ? (_value === null || _value === void 0 ? void 0 : _value.value) === item.value
+                                                                : _value === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                                 })] }, group.label)))
                                         : filteredItems.map((item, index) => {
                                             return (_jsx(Tooltip, { content: TooltipContent ? (_jsx(TooltipContent, { data: item.data })) : null, side: "left", children: _jsx(StyledItem, { className: "mfFloatingItem", onClick: (e) => handleItemClick(e, item), "data-selected": isObjectArray
-                                                        ? (selected === null || selected === void 0 ? void 0 : selected.value) ===
+                                                        ? (_value === null || _value === void 0 ? void 0 : _value.value) ===
                                                             (item === null || item === void 0 ? void 0 : item.value)
-                                                        : selected === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
+                                                        : _value === item, size: size, children: (renderOption === null || renderOption === void 0 ? void 0 : renderOption(item)) || (_jsx(_Fragment, { children: (item === null || item === void 0 ? void 0 : item.label) || item })) }, index) }, index));
                                         })] })] })) }) }))] }));
 }) `
   position: relative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.1.57",
+  "version": "1.1.58",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",
@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.16",
+    "@mantine/hooks": "^7.13.0",
     "@radix-ui/react-switch": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tabler/icons-react": "^3.11.0",