@monolith-forensics/monolith-ui 1.1.55 → 1.1.57

package/dist/DateInput/DateInput.js

@@ -1,6 +1,15 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import moment from "moment";
-import { useFloating, flip, offset, FloatingPortal } from "@floating-ui/react";
+import { useFloating, flip, offset, FloatingPortal, useDismiss, useInteractions, autoUpdate, } from "@floating-ui/react";
 import { useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
@@ -236,14 +245,17 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
     const mainRef = useRef(null);
     const typedKeys = useRef("");
-    const { refs, floatingStyles } = useFloating({
+    const { refs, floatingStyles, context } = useFloating({
         open: isOpen,
         onOpenChange: setIsOpen,
         placement: "bottom-start",
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
+    const dismiss = useDismiss(context);
+    const { getReferenceProps } = useInteractions([dismiss]);
     const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
     const checkValidRange = (value) => {
         if (min && moment(value).isBefore(min))
@@ -252,11 +264,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             return false;
         return true;
     };
-    const toggleOpen = () => {
-        setIsOpen((prev) => {
-            return !prev;
-        });
-    };
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -286,7 +293,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 input.focus();
             }
         }
-        toggleOpen();
         setIsOpen(true);
         setSelectedSegment(segments[0]);
     };
@@ -320,6 +326,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 const next = segments[prev.index + 2];
                 return next || prev;
             });
+            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Left Arrow
         if (e.key === "ArrowLeft") {
@@ -330,6 +337,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 const next = segments[prev.index - 2];
                 return next || prev;
             });
+            typedKeys.current = ""; // clear typed keys when moving to next segment
         }
         // Up Arrow
         if (e.key === "ArrowUp") {
@@ -369,7 +377,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
-            return;
+            handlePaste();
         }
         // only allow numbers
         if (e.key.match(/[0-9]/)) {
@@ -384,7 +392,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             setValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const newValue = moment(prev)
+                const momentValue = utc ? moment.utc(prev) : moment(prev);
+                const newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
                     .toISOString();
@@ -398,7 +407,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 typedKeys.current = "";
             }
         }
-        e.preventDefault();
     };
     const handleWheelEvent = (e) => {
         if (!selectedSegment)
@@ -430,10 +438,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             });
         }
     };
-    const handlePaste = (e) => {
-        var _a, _b;
-        e.preventDefault();
-        const pastedText = (_b = (_a = e === null || e === void 0 ? void 0 : e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData) === null || _b === void 0 ? void 0 : _b.call(_a, "text");
+    const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
+        const pastedText = yield window.navigator.clipboard.readText();
         if (!pastedText)
             return;
         // check if pasted text is a valid timestamp
@@ -441,7 +447,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
             return;
         const parsedTimestamp = moment.utc(pastedText).toISOString();
         setValue(parsedTimestamp);
-    };
+    });
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
@@ -473,9 +479,11 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
     return (_jsxs("div", { className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { ref: (ref) => {
                     mainRef.current = ref;
                     refs.setReference(ref);
-                }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onPaste: handlePaste, onFocus: (e) => {
+                }, onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
+                }, onBlur: () => {
+                    setSelectedSegment(null);
                 }, "data-empty": !value, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
@@ -483,8 +491,8 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                     e.stopPropagation();
                                 }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segment.text }, i));
                         }
-                        return (_jsx(InputSegment, { className: "input", contentEditable: true, suppressContentEditableWarning: true, tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
-                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                        return (_jsx(InputSegment, { className: "input", tabIndex: i === 0 ? 0 : -1, onClick: (e) => handleSegmentClick(e, segment), "data-type": "input", size: size, "data-identifier": segment.type, "data-has-space": segment.text.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: value ? segment.text : segment.placeholder }, i));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getReferenceProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
                                     setValue((prev) => {
                                         // make copy of prev variable
                                         const oldValue = moment(prev).toISOString();
@@ -499,6 +507,6 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                         setIsOpen(closeOnSelect ? false : true);
                                         return isoResult;
                                     });
-                                }, includeTime: false }, 1) }) }) }) }))] }));
+                                }, includeTime: false }, 1) }) }) })) }))] }));
 }) ``;
 export default DateInput;

package/dist/SelectBox/SelectBox.d.ts

@@ -1,14 +1,5 @@
 import { ReactNode } from "react";
 import { Size, Variant } from "../core";
-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;
-type Option = {
-    label: string;
-    value: any;
-    group?: string;
-    data?: any;
-};
 interface SelectBoxProps {
     className?: string;
     defaultValue?: Option | string;
@@ -41,5 +32,14 @@ interface SelectBoxProps {
     }>;
     DropDownProps?: any;
 }
+type Option = {
+    label: string;
+    value: any;
+    group?: string;
+    data?: any;
+};
+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>>;
 export default SelectBox;

package/dist/SelectBox/SelectBox.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useFloating, flip, offset, FloatingPortal, } from "@floating-ui/react";
+import { useFloating, flip, offset, FloatingPortal, autoUpdate, } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState, } from "react";
 import { Input, FieldLabel, Tooltip } from "..";
 import { useDebouncedCallback } from "use-debounce";
@@ -162,8 +162,11 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const scrollContainerRef = useRef(null);
-    const filteredItems = data
-        .concat(customItems) // Add custom items to the list
+    const uniqueItems = Array.from(new Map([...data, ...customItems].map(item => [
+        isObjectArray ? item.value : item,
+        item
+    ])).values());
+    const filteredItems = uniqueItems
         .filter((item) => {
         const itemValue = (isObjectArray ? item.label : item);
         return itemValue === null || itemValue === void 0 ? void 0 : itemValue.toLowerCase().includes(searchValue.toLowerCase());
@@ -174,8 +177,10 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             const bValue = b.group;
             return aValue.localeCompare(bValue);
         }
-        // return current sort order
-        return 0;
+        // Secondary sort by label/value to ensure consistent ordering
+        const aLabel = isObjectArray ? a.label : a;
+        const bLabel = isObjectArray ? b.label : b;
+        return aLabel.localeCompare(bLabel);
     });
     const groupedItems = grouped
         ? filteredItems.reduce((acc, item) => {
@@ -206,6 +211,7 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
     const toggleOpen = () => {
         setIsOpen((prev) => {
@@ -283,7 +289,6 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
                 // TODO: decide what to do when user presses enter after typing a search value
             }
             toggleOpen();
-            // setIsOpen(false);
         }
         // Arrow down
         if (e.key === "ArrowDown") {
@@ -351,6 +356,13 @@ const SelectBox = styled(({ className, data = [], placeholder = "Select...", arr
             setIsOpen(true);
         }
     };
+    const handleBlur = () => {
+        var _a;
+        if (allowCustomValue && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+            handleAddItem(inputRef.current.value);
+            setSearchValue("");
+        }
+    };
     // Close on outside click
     useEffect(() => {
         const close = (e) => {

package/dist/TagBox/TagBox.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useFloating, flip, offset } from "@floating-ui/react";
+import { useFloating, flip, offset, autoUpdate } from "@floating-ui/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Input, Tooltip, FieldLabel, Pill } from "..";
 import { ArrowButton, ClearButton, StyledFloatContainer, StyledContent, } from "../core";
@@ -344,6 +344,7 @@ const TagBox = styled(({ className, data = [], placeholder = "Select tags", arro
         strategy: "absolute",
         // Handle collisions with the viewport
         middleware: [flip(), offset(5)],
+        whileElementsMounted: autoUpdate,
     });
     const toggleOpen = () => {
         setIsOpen((prev) => {

package/package.json

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