@monolith-forensics/monolith-ui 1.1.56 → 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, useDismiss, useInteractions, autoUpdate } 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 "..";
@@ -246,9 +255,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
         whileElementsMounted: autoUpdate,
     });
     const dismiss = useDismiss(context);
-    const { getReferenceProps } = useInteractions([
-        dismiss,
-    ]);
+    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))
@@ -319,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") {
@@ -329,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") {
@@ -368,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]/)) {
@@ -383,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();
@@ -397,28 +407,39 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                 typedKeys.current = "";
             }
         }
-        e.preventDefault();
     };
     const handleWheelEvent = (e) => {
         if (!selectedSegment)
             return;
-        setValue((prev) => {
-            if (selectedSegment.type === "separator")
-                return prev;
-            if (!prev)
-                return isDateOnly ? moment().format(format) : moment().toISOString();
-            let newValue = e.deltaY > 0 ? moment(prev).subtract(1, selectedSegment.type).toISOString() : moment(prev).add(1, selectedSegment.type).toISOString();
-            if (!checkValidRange(newValue))
-                return prev;
-            newValue = isDateOnly ? moment(newValue).format(format) : newValue;
-            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-            return newValue;
-        });
+        if (e.deltaY > 0) {
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                const newValue = prev
+                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
+        else {
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                const newValue = prev
+                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
     };
-    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
@@ -426,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) => {
@@ -458,7 +479,7 @@ 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: () => {
@@ -471,7 +492,7 @@ const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:
                                 }, 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", 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, { defaultValue: value ? moment(value).toDate() : undefined, clearable: false, min: min, max: max, onChange: (date) => {
+                    }), 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();

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

@@ -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) => {
@@ -284,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") {
@@ -352,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/package.json

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