@monolith-forensics/monolith-ui 2.1.2 → 2.1.3

package/dist/DateInput/DateInput.js

@@ -191,6 +191,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const [unControlledValue, setUncontrolledValue] = useState(defaultValue);
     const _value = isControlled.current ? value : unControlledValue;
     const [selectedSegment, setSelectedSegment] = useState();
+    const [draftSegment, setDraftSegment] = useState(null);
     const [isOpen, setIsOpen] = useState(false);
     // Check if format is date only and does not include time
     const isDateOnly = format.match(/(HH|h|mm|ss|SSS|A|Z)/) === null;
@@ -281,6 +282,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
+        clearTypedSegment();
         commitValue(null);
         setIsOpen(false);
     };
@@ -289,6 +291,8 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         e.preventDefault();
         if (segment.type === "separator")
             return;
+        commitSelectedDraftSegment();
+        clearTypedSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -300,6 +304,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
     const handleContainerClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        commitSelectedDraftSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -307,11 +312,13 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             }
         }
         setIsOpen(true);
+        clearTypedSegment();
         setSelectedSegment(segments[0]);
     };
     const handleCalendarTriggerClick = (e) => {
         e.stopPropagation();
         e.preventDefault();
+        commitSelectedDraftSegment();
         if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
             const input = mainRef.current.querySelector("div[data-type='input']");
             if (input) {
@@ -319,6 +326,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             }
         }
         setIsOpen((prev) => !prev);
+        clearTypedSegment();
         setSelectedSegment(segments[0]);
     };
     const nextSegment = () => {
@@ -329,6 +337,145 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             return next || prev;
         });
     };
+    const clearTypedSegment = useCallback(() => {
+        typedKeys.current = "";
+        setDraftSegment(null);
+    }, []);
+    const getSegmentInputLength = useCallback((segment) => {
+        switch (segment.pattern) {
+            case "YYYY":
+                return 4;
+            case "SSS":
+                return 3;
+            case "MM":
+            case "DD":
+            case "HH":
+            case "mm":
+            case "ss":
+            case "h":
+                return 2;
+            default:
+                return segment.text.length;
+        }
+    }, []);
+    const getMomentWithSegmentValue = useCallback((segment, rawValue, currentMoment) => {
+        if (!segment.momentType)
+            return null;
+        const parsedValue = parseInt(rawValue, 10);
+        if (!Number.isFinite(parsedValue))
+            return null;
+        const nextMoment = currentMoment.clone();
+        switch (segment.momentType) {
+            case "year": {
+                if (parsedValue < 0 || parsedValue > 9999)
+                    return null;
+                const daysInTargetMonth = currentMoment
+                    .clone()
+                    .year(parsedValue)
+                    .month(currentMoment.month())
+                    .daysInMonth();
+                if (currentMoment.date() > daysInTargetMonth)
+                    return null;
+                nextMoment.year(parsedValue);
+                break;
+            }
+            case "month": {
+                if (parsedValue < 1 || parsedValue > 12)
+                    return null;
+                const targetMonth = parsedValue - 1;
+                const daysInTargetMonth = currentMoment
+                    .clone()
+                    .month(targetMonth)
+                    .daysInMonth();
+                if (currentMoment.date() > daysInTargetMonth)
+                    return null;
+                nextMoment.month(targetMonth);
+                break;
+            }
+            case "date": {
+                if (parsedValue < 1 || parsedValue > currentMoment.daysInMonth()) {
+                    return null;
+                }
+                nextMoment.date(parsedValue);
+                break;
+            }
+            case "hour": {
+                const isTwelveHourSegment = segment.pattern === "h";
+                if (isTwelveHourSegment) {
+                    if (parsedValue < 1 || parsedValue > 12)
+                        return null;
+                    const isPm = currentMoment.hour() >= 12;
+                    const nextHour = parsedValue === 12
+                        ? isPm
+                            ? 12
+                            : 0
+                        : parsedValue + (isPm ? 12 : 0);
+                    nextMoment.hour(nextHour);
+                }
+                else {
+                    if (parsedValue < 0 || parsedValue > 23)
+                        return null;
+                    nextMoment.hour(parsedValue);
+                }
+                break;
+            }
+            case "minute": {
+                if (parsedValue < 0 || parsedValue > 59)
+                    return null;
+                nextMoment.minute(parsedValue);
+                break;
+            }
+            case "second": {
+                if (parsedValue < 0 || parsedValue > 59)
+                    return null;
+                nextMoment.second(parsedValue);
+                break;
+            }
+            case "millisecond": {
+                if (parsedValue < 0 || parsedValue > 999)
+                    return null;
+                nextMoment.millisecond(parsedValue);
+                break;
+            }
+            default:
+                return null;
+        }
+        if (!nextMoment.isValid())
+            return null;
+        return nextMoment;
+    }, []);
+    const commitTypedSegment = useCallback((segment, rawValue) => {
+        if (!segment.momentType || !rawValue)
+            return false;
+        const normalizedValue = ["month", "day"].includes(segment.type) &&
+            Array.from(rawValue).every((c) => c === "0")
+            ? "01"
+            : rawValue;
+        const nextMoment = getMomentWithSegmentValue(segment, normalizedValue, getEditableMoment(_value));
+        if (!nextMoment)
+            return false;
+        const nextValue = serializeMoment(nextMoment);
+        if (!checkValidRange(nextValue))
+            return false;
+        commitValue(nextValue);
+        return true;
+    }, [
+        _value,
+        getEditableMoment,
+        getMomentWithSegmentValue,
+        serializeMoment,
+        checkValidRange,
+        commitValue,
+    ]);
+    const commitSelectedDraftSegment = useCallback(() => {
+        if (!selectedSegment || !typedKeys.current)
+            return false;
+        if (selectedSegment.pattern === "YYYY" &&
+            typedKeys.current.length < getSegmentInputLength(selectedSegment)) {
+            return false;
+        }
+        return commitTypedSegment(selectedSegment, typedKeys.current);
+    }, [commitTypedSegment, getSegmentInputLength, selectedSegment]);
     // prevent click and drag selection
     const handleMouseDown = (e) => {
         e.preventDefault();
@@ -338,6 +485,8 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             return;
         // tab
         if (e.key === "Tab") {
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment(null);
             setIsOpen(false);
             return;
@@ -345,28 +494,35 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Right Arrow
         if (e.key === "ArrowRight") {
             e.preventDefault();
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment((prev) => {
                 if (!prev)
                     return segments[0];
                 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") {
             e.preventDefault();
+            commitSelectedDraftSegment();
+            clearTypedSegment();
             setSelectedSegment((prev) => {
                 if (!prev)
                     return segments[0];
                 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") {
             e.preventDefault();
+            const hadDraftSegment = !!typedKeys.current;
+            commitSelectedDraftSegment();
+            clearTypedSegment();
+            if (hadDraftSegment)
+                return;
             const segmentType = selectedSegment.type;
             if (segmentType === "separator")
                 return;
@@ -375,6 +531,11 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
+            const hadDraftSegment = !!typedKeys.current;
+            commitSelectedDraftSegment();
+            clearTypedSegment();
+            if (hadDraftSegment)
+                return;
             const segmentType = selectedSegment.type;
             if (segmentType === "separator")
                 return;
@@ -382,43 +543,29 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
+            clearTypedSegment();
             handlePaste();
         }
         // only allow numbers
-        if (e.key.match(/[0-9]/)) {
+        if (e.key.match(/^[0-9]$/)) {
             e.preventDefault();
-            const segmentLength = selectedSegment.text.length;
-            typedKeys.current += e.key;
-            let tempValue = typedKeys.current;
-            if (["month", "day"].includes(selectedSegment.type) &&
-                Array.from(tempValue).every((c) => c === "0")) {
-                tempValue = "01";
-            }
-            setUncontrolledValue((prev) => {
-                if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
-                    return prev;
-                const momentValue = getEditableMoment(prev);
-                let newValue = moment(momentValue)
-                    .set(selectedSegment.momentType, parseInt(tempValue, 10) -
-                    (selectedSegment.type === "month" ? 1 : 0))
-                    .toISOString();
-                if (!checkValidRange(newValue))
-                    return prev;
-                if (isDateOnly) {
-                    newValue = utc
-                        ? moment.utc(newValue).format("YYYY-MM-DD")
-                        : moment(newValue).format("YYYY-MM-DD");
-                }
-                if (isControlled.current) {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                    return prev;
-                }
-                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-                return newValue;
+            if (!selectedSegment.momentType)
+                return;
+            const segmentLength = getSegmentInputLength(selectedSegment);
+            const nextTypedKeys = typedKeys.current.length >= segmentLength
+                ? e.key
+                : `${typedKeys.current}${e.key}`;
+            typedKeys.current = nextTypedKeys;
+            setDraftSegment({
+                index: selectedSegment.index,
+                text: nextTypedKeys,
             });
-            if (typedKeys.current.length === segmentLength) {
-                nextSegment();
-                typedKeys.current = "";
+            if (nextTypedKeys.length === segmentLength) {
+                const didCommit = commitTypedSegment(selectedSegment, nextTypedKeys);
+                clearTypedSegment();
+                if (didCommit) {
+                    nextSegment();
+                }
             }
         }
     };
@@ -492,11 +639,12 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             ) {
                 setIsOpen(false);
             }
+            clearTypedSegment();
             setSelectedSegment(null); // clear selected segment when clicked outside component
         };
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
-    }, [refs.floating]);
+    }, [clearTypedSegment, refs.floating]);
     return (_jsxs(StyledContainer, Object.assign({ ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
@@ -507,15 +655,22 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
+                    commitSelectedDraftSegment();
+                    clearTypedSegment();
                     setSelectedSegment(null);
                 }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-left": enableCalendar, "data-button-right": arrow || clearable, style: style, children: [enableCalendar && (_jsx(CalendarTriggerButton, { size: size, type: "button", "aria-label": "Toggle calendar", onClick: handleCalendarTriggerClick, "data-default-btn": true, children: _jsx(CalendarDaysIcon, {}) })), segments.map((segment, i) => {
+                        const segmentText = (draftSegment === null || draftSegment === void 0 ? void 0 : draftSegment.index) === segment.index
+                            ? draftSegment.text
+                            : segment.text;
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
                                     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));
+                                }, onFocus: (e) => e.preventDefault(), onPointerDown: (e) => e.preventDefault(), "data-type": "separator", "data-identifier": segment.type, "data-has-space": segmentText.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, children: segmentText }, 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));
+                        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": segmentText.includes(" "), "data-placeholder": segment.placeholder, "data-value": segment.value, "data-selected": (selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.index) === segment.index, children: _value || (draftSegment === null || draftSegment === void 0 ? void 0 : draftSegment.index) === segment.index
+                                ? segmentText
+                                : segment.placeholder }, i));
                     }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { size: size, onClick: handleClear })) : arrow ? (_jsx(ArrowButton, { size: size })) : null] }), !disabled && enableCalendar && isOpen && (_jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(StyledFloatContainer, Object.assign({ ref: refs.setFloating, style: floatingStyles }, getFloatingProps(), { children: _jsx(StyledContent, { maxDropdownHeight: "fit-content", children: _jsx("div", { children: _jsx(Calendar, { value: getCalendarValue(), clearable: false, min: min, max: max, onChange: (date, meta) => {
                                     if (!date) {
                                         commitValue(null);

package/package.json

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