@monolith-forensics/monolith-ui 1.1.29 → 1.1.31

package/dist/DateInput/DateInput.js

@@ -0,0 +1,504 @@
+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 { useEffect, useMemo, useRef, useState, } from "react";
+import styled from "styled-components";
+import { FieldLabel, Calendar } from "..";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
+const StyledInputContainer = styled.div `
+  position: relative;
+
+  caret-color: transparent;
+  user-select: none;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  user-select: none;
+
+  pointer-events: all;
+  outline: none;
+
+  border-radius: 5px;
+  transition: border 0.1s ease-in-out;
+  border: 1px solid
+    ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return "transparent";
+        case "outlined":
+            return theme.palette.input.border;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.border;
+    }
+}};
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  color: ${(props) => props.theme.palette.text.primary};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
+
+  width: 100%;
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
+
+  padding: ${({ size }) => size === "xs"
+    ? "0px 8px"
+    : size === "sm"
+        ? "0px 10px"
+        : size === "md"
+            ? "0px 12px"
+            : size === "lg"
+                ? "0px 14px"
+                : size === "xl"
+                    ? "0px 16px"
+                    : "0px 8px"};
+
+  &[data-button-right="true"] {
+    padding-right: 36px;
+  }
+
+  background-color: ${({ theme, variant }) => {
+    switch (variant) {
+        case "filled":
+            return theme.palette.input.background;
+        case "outlined":
+            return theme.palette.input.background;
+        case "text":
+            return "transparent";
+        default:
+            return theme.palette.input.background;
+    }
+}};
+
+  &[readOnly] {
+    cursor: pointer;
+  }
+
+  & [data-has-space="true"] {
+    padding-left: 4px;
+  }
+
+  & [data-selected="true"] {
+    background-color: ${(props) => props.theme.palette.primary.main}50;
+  }
+
+  &[data-empty="true"] {
+    color: ${(props) => props.theme.palette.input.placeholder};
+    div {
+      color: ${(props) => props.theme.palette.input.placeholder};
+    }
+  }
+
+  & [data-default-btn="true"] {
+    color: ${(props) => props.theme.palette.text.secondary};
+    div {
+      color: ${(props) => props.theme.palette.text.secondary};
+    }
+  }
+
+  &:focus {
+    border: 1px solid ${(props) => props.theme.palette.primary.main};
+  }
+`;
+const InputSegment = styled.div `
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  pointer-events: all;
+  outline: none;
+  border: none;
+  padding: 0;
+
+  height: ${({ size }) => size === "xs"
+    ? "22px"
+    : size === "sm"
+        ? "26px"
+        : size === "md"
+            ? "32px"
+            : size === "lg"
+                ? "38px"
+                : size === "xl"
+                    ? "46px"
+                    : "22px"};
+
+  height: 100%;
+
+  background-color: transparent;
+  color: ${(props) => props.theme.palette.text.primary};
+
+  ::placeholder {
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "10px"};
+  }
+`;
+function parseTimestamp(timestamp, format, utc = false) {
+    // Define patterns to identify datetime components and their placeholders
+    const patterns = [
+        { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
+        { pattern: "MM", placeholder: "MM", type: "month", momentType: "month" },
+        { pattern: "DD", placeholder: "DD", type: "day", momentType: "date" },
+        { pattern: "HH", placeholder: "HH", type: "hour", momentType: "hour" },
+        { pattern: "h", placeholder: "h", type: "hour", momentType: "hour" },
+        { pattern: "mm", placeholder: "mm", type: "minute", momentType: "minute" },
+        { pattern: "ss", placeholder: "ss", type: "second", momentType: "second" },
+        {
+            pattern: "SSS",
+            placeholder: "SSS",
+            type: "millisecond",
+            momentType: "millisecond",
+        },
+        {
+            pattern: "A",
+            placeholder: "AM/PM",
+            type: "meridiem",
+            momentType: "meridiem",
+        },
+        {
+            pattern: "Z",
+            placeholder: "Z",
+            type: "timezone",
+            momentType: "timezone",
+        },
+    ];
+    // Helper function to split format into datetime components and separators
+    function splitFormat(format) {
+        return format.split(/(YYYY|MM|DD|HH|h|mm|ss|SSS|Z)/).filter((s) => s);
+    }
+    // Helper function to match segments to their placeholders and types
+    function matchSegment(segment) {
+        const pattern = patterns.find((p) => p.pattern === segment);
+        return pattern
+            ? pattern
+            : {
+                pattern: segment,
+                placeholder: segment,
+                type: "separator",
+                value: "",
+                text: "",
+                index: -1,
+            };
+    }
+    const segments = splitFormat(format).map((segment, i) => {
+        const { pattern, placeholder, type, momentType } = matchSegment(segment);
+        const value = timestamp
+            ? utc === true
+                ? moment.utc(timestamp).format(pattern)
+                : moment(timestamp).format(pattern)
+            : placeholder;
+        return {
+            value,
+            text: value,
+            placeholder,
+            type,
+            momentType,
+            index: i,
+        };
+    });
+    return segments;
+}
+const DateInput = styled(({ className, defaultValue, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, }) => {
+    const [value, setValue] = useState(defaultValue);
+    const [selectedSegment, setSelectedSegment] = useState();
+    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;
+    const mainRef = useRef(null);
+    const typedKeys = useRef("");
+    const { refs, floatingStyles } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        strategy: "absolute",
+        // Handle collisions with the viewport
+        middleware: [flip(), offset(5)],
+    });
+    const segments = useMemo(() => parseTimestamp(moment(value).toISOString(), format, utc), [value, format, utc]);
+    const checkValidRange = (value) => {
+        if (min && moment(value).isBefore(min))
+            return false;
+        if (max && moment(value).isAfter(max))
+            return false;
+        return true;
+    };
+    const toggleOpen = () => {
+        setIsOpen((prev) => {
+            return !prev;
+        });
+    };
+    const handleClear = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setValue(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        setIsOpen(false);
+    };
+    const handleSegmentClick = (e, segment) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (segment.type === "separator")
+            return;
+        if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
+            const input = mainRef.current.querySelector("div[data-type='input']");
+            if (input) {
+                input.focus();
+            }
+        }
+        setSelectedSegment(segment);
+    };
+    const handleContainerClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (mainRef === null || mainRef === void 0 ? void 0 : mainRef.current) {
+            const input = mainRef.current.querySelector("div[data-type='input']");
+            if (input) {
+                input.focus();
+            }
+        }
+        toggleOpen();
+        setIsOpen(true);
+        setSelectedSegment(segments[0]);
+    };
+    const nextSegment = () => {
+        setSelectedSegment((prev) => {
+            if (!prev)
+                return segments[0];
+            const next = segments[prev.index + 2];
+            return next || prev;
+        });
+    };
+    // prevent click and drag selection
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+    };
+    const handleKeyDown = (e) => {
+        if (!selectedSegment)
+            return;
+        // tab
+        if (e.key === "Tab") {
+            setSelectedSegment(null);
+            setIsOpen(false);
+            return;
+        }
+        // Right Arrow
+        if (e.key === "ArrowRight") {
+            e.preventDefault();
+            setSelectedSegment((prev) => {
+                if (!prev)
+                    return segments[0];
+                const next = segments[prev.index + 2];
+                return next || prev;
+            });
+        }
+        // Left Arrow
+        if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            setSelectedSegment((prev) => {
+                if (!prev)
+                    return segments[0];
+                const next = segments[prev.index - 2];
+                return next || prev;
+            });
+        }
+        // Up Arrow
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                let newValue = prev
+                    ? moment(prev).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
+        // Down Arrow
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setValue((prev) => {
+                if (selectedSegment.type === "separator")
+                    return prev;
+                let newValue = prev
+                    ? moment(prev).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+        }
+        // handle paste
+        if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
+            return;
+        }
+        // only allow numbers
+        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";
+            }
+            setValue((prev) => {
+                if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
+                    return prev;
+                const newValue = moment(prev)
+                    .set(selectedSegment.momentType, parseInt(tempValue, 10) -
+                    (selectedSegment.type === "month" ? 1 : 0))
+                    .toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                return newValue;
+            });
+            if (typedKeys.current.length === segmentLength) {
+                nextSegment();
+                typedKeys.current = "";
+            }
+        }
+        e.preventDefault();
+    };
+    const handleWheelEvent = (e) => {
+        if (!selectedSegment)
+            return;
+        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");
+        if (!pastedText)
+            return;
+        // check if pasted text is a valid timestamp
+        if (!moment(pastedText).isValid())
+            return;
+        const parsedTimestamp = moment.utc(pastedText).toISOString();
+        setValue(parsedTimestamp);
+    };
+    // Close on outside click
+    useEffect(() => {
+        const close = (e) => {
+            var _a, _b;
+            const target = e.target;
+            const referenceElement = (_a = refs === null || refs === void 0 ? void 0 : refs.reference) === null || _a === void 0 ? void 0 : _a.current;
+            const floatingElement = (_b = refs === null || refs === void 0 ? void 0 : refs.floating) === null || _b === void 0 ? void 0 : _b.current;
+            if (floatingElement && // Check if the floating element exists
+                e.target !== referenceElement && // Check if the target is not the reference (input)
+                !referenceElement.contains(target) && // Check if the target is not inside the reference (input)
+                !floatingElement.contains(target) // Check if the target is not inside the floating element (content)
+            ) {
+                setIsOpen(false);
+            }
+            setSelectedSegment(null); // clear selected segment when clicked outside component
+        };
+        document.addEventListener("click", close);
+        return () => document.removeEventListener("click", close);
+    }, [refs.floating]);
+    // Global Wheel Event when segement selected
+    useEffect(() => {
+        if (selectedSegment) {
+            document.addEventListener("wheel", handleWheelEvent);
+        }
+        return () => {
+            document.removeEventListener("wheel", handleWheelEvent);
+        };
+    }, [selectedSegment]);
+    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) => {
+                    e.preventDefault();
+                    setSelectedSegment(segments[0]);
+                }, "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) => {
+                                    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));
+                        }
+                        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) => {
+                                    setValue((prev) => {
+                                        // make copy of prev variable
+                                        const oldValue = moment(prev).toISOString();
+                                        const result = `${moment(date).format("YYYY-MM-DD")}T${moment(prev || undefined).format("HH:mm:ss")}`;
+                                        let isoResult = moment(result).toISOString();
+                                        if (!checkValidRange(result))
+                                            return oldValue;
+                                        if (isDateOnly) {
+                                            isoResult = moment(result).format("YYYY-MM-DD");
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(isoResult);
+                                        setIsOpen(closeOnSelect ? false : true);
+                                        return isoResult;
+                                    });
+                                }, includeTime: false }, 1) }) }) }) }))] }));
+}) ``;
+export default DateInput;

package/dist/DateInput/index.js

@@ -0,0 +1 @@
+export { default } from "./DateInput";