@monolith-forensics/monolith-ui 1.1.27 → 1.1.29

package/dist/DateInput/DateInput.js

@@ -1,509 +0,0 @@
-"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, 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, { defaultValue: value ? (0, moment_1.default)(value).toDate() : undefined, clearable: false, min: min, max: max, 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

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

package/dist/DateInput/index.js

@@ -1,8 +0,0 @@
-"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

@@ -1,36 +0,0 @@
-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;