@monolith-forensics/monolith-ui 1.0.12 → 1.1.0

package/dist/DateInput/DateInput.js

@@ -0,0 +1,511 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const moment_1 = __importDefault(require("moment"));
+const react_1 = require("@floating-ui/react");
+const react_2 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const __1 = require("..");
+const core_1 = require("../core");
+const StyledInputContainer = styled_components_1.default.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_components_1.default.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_1.default.utc(timestamp).format(pattern)
+                : (0, moment_1.default)(timestamp).format(pattern)
+            : placeholder;
+        return {
+            value,
+            text: value,
+            placeholder,
+            type,
+            momentType,
+            index: i,
+        };
+    });
+    return segments;
+}
+const DateInput = (0, styled_components_1.default)(({ className, defaultValue = null, 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] = (0, react_2.useState)(defaultValue);
+    const [selectedSegment, setSelectedSegment] = (0, react_2.useState)();
+    const [isOpen, setIsOpen] = (0, react_2.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 = (0, react_2.useRef)(null);
+    const typedKeys = (0, react_2.useRef)("");
+    const { refs, floatingStyles } = (0, react_1.useFloating)({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: "bottom-start",
+        strategy: "absolute",
+        // Handle collisions with the viewport
+        middleware: [(0, react_1.flip)(), (0, react_1.offset)(5)],
+    });
+    const segments = (0, react_2.useMemo)(() => parseTimestamp((0, moment_1.default)(value).toISOString(), format, utc), [value, format, utc]);
+    const checkValidRange = (value) => {
+        if (min && (0, moment_1.default)(value).isBefore(min))
+            return false;
+        if (max && (0, moment_1.default)(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
+                    ? (0, moment_1.default)(prev).add(1, selectedSegment.type).toISOString()
+                    : (0, moment_1.default)().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                if (isDateOnly) {
+                    newValue = (0, moment_1.default)(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
+                    ? (0, moment_1.default)(prev).subtract(1, selectedSegment.type).toISOString()
+                    : (0, moment_1.default)().toISOString();
+                if (!checkValidRange(newValue))
+                    return prev;
+                if (isDateOnly) {
+                    newValue = (0, moment_1.default)(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 = (0, moment_1.default)(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
+                    ? (0, moment_1.default)(prev).subtract(1, selectedSegment.type).toISOString()
+                    : (0, moment_1.default)().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
+                    ? (0, moment_1.default)(prev).add(1, selectedSegment.type).toISOString()
+                    : (0, moment_1.default)().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 (!(0, moment_1.default)(pastedText).isValid())
+            return;
+        const parsedTimestamp = moment_1.default.utc(pastedText).toISOString();
+        setValue(parsedTimestamp);
+    };
+    // Close on outside click
+    (0, react_2.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
+    (0, react_2.useEffect)(() => {
+        if (selectedSegment) {
+            document.addEventListener("wheel", handleWheelEvent);
+        }
+        return () => {
+            document.removeEventListener("wheel", handleWheelEvent);
+        };
+    }, [selectedSegment]);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [label && ((0, jsx_runtime_1.jsx)(__1.FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), (0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.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 && (0, jsx_runtime_1.jsx)("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && value ? ((0, jsx_runtime_1.jsx)(core_1.ClearButton, { onClick: handleClear })) : arrow ? ((0, jsx_runtime_1.jsx)(core_1.ArrowButton, {})) : null] }), enableCalendar && isOpen && ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, { preserveTabOrder: true, children: (0, jsx_runtime_1.jsx)(core_1.StyledFloatContainer, { ref: refs.setFloating, style: floatingStyles, children: (0, jsx_runtime_1.jsx)(core_1.StyledContent, { maxDropdownHeight: "fit-content", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Calendar, { value: (0, moment_1.default)(value).toDate(), clearable: false, min: min, max: max, 
+                                // hourFormat={hourFormat}
+                                onChange: (date) => {
+                                    setValue((prev) => {
+                                        // make copy of prev variable
+                                        const oldValue = (0, moment_1.default)(prev).toISOString();
+                                        const result = `${(0, moment_1.default)(date).format("YYYY-MM-DD")}T${(0, moment_1.default)(prev || undefined).format("HH:mm:ss")}`;
+                                        let isoResult = (0, moment_1.default)(result).toISOString();
+                                        if (!checkValidRange(result))
+                                            return oldValue;
+                                        if (isDateOnly) {
+                                            isoResult = (0, moment_1.default)(result).format("YYYY-MM-DD");
+                                        }
+                                        onChange === null || onChange === void 0 ? void 0 : onChange(isoResult);
+                                        setIsOpen(closeOnSelect ? false : true);
+                                        return isoResult;
+                                    });
+                                }, includeTime: false }, 1) }) }) }) }))] }));
+}) ``;
+exports.default = DateInput;

package/dist/DateInput/index.d.ts

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

package/dist/DateInput/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var DateInput_1 = require("./DateInput");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(DateInput_1).default; } });

package/dist/DropDownMenu/DropDownMenu.d.ts

@@ -0,0 +1,36 @@
+import { ComponentPropsWithoutRef, ComponentType, ReactNode, UIEvent } from "react";
+import { ButtonProps } from "../Button";
+import { Size, Variant } from "../core";
+interface StyledContentProps {
+    maxDropdownHeight?: number | string;
+    variant?: Variant;
+}
+declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentProps>> & string;
+interface DropDownItem {
+    toLowerCase?: () => string;
+    label: string;
+    value: string;
+    data?: any;
+}
+interface DropDownMenuProps {
+    className?: string;
+    children?: ReactNode;
+    data?: DropDownItem[];
+    variant?: Variant;
+    defaultValue?: DropDownItem[];
+    multiselect?: boolean;
+    size?: Size;
+    title?: string;
+    TooltipContent?: ComponentType<any>;
+    renderOption?: (item: DropDownItem) => ReactNode;
+    onChange?: (selected: DropDownItem[], diff: DropDownItem[]) => void;
+    onItemSelect?: (item: DropDownItem) => void;
+    onScroll?: (e: UIEvent<HTMLDivElement>) => void;
+    loading?: boolean;
+    arrow?: boolean;
+    searchable?: boolean;
+    dropDownProps?: ComponentPropsWithoutRef<typeof StyledContent>;
+    buttonProps?: ButtonProps;
+}
+declare const DropDownMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DropDownMenuProps, never>> & string & Omit<({ className, children, data, variant, defaultValue, multiselect, size, TooltipContent, renderOption, onChange, onItemSelect, onScroll, loading, arrow, searchable, dropDownProps, buttonProps, }: DropDownMenuProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export default DropDownMenu;