@monolith-forensics/monolith-ui 1.8.1-dev.3 → 1.8.1

package/dist/Charts/PieChart/PieChart.styled.d.ts

@@ -1,6 +1,11 @@
 import { StyledChartActions } from "../ChartPrimitives";
-export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledChartWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAvailableWidth: boolean;
+}>> & string;
+export declare const StyledChartWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
 export { StyledChartActions };
 export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
 export declare const StyledSlice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGPathElement>, {

package/dist/Charts/PieChart/PieChart.styled.js

@@ -11,7 +11,7 @@ export const StyledContainer = styled.div `
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
-  width: fit-content;
+  width: ${({ $fillAvailableWidth }) => $fillAvailableWidth ? "100%" : "fit-content"};
   max-width: 100%;
   color: ${({ theme }) => theme.palette.text.primary};
   box-sizing: border-box;
@@ -24,6 +24,10 @@ export const StyledChartWrap = styled.div `
   align-items: stretch;
   justify-content: center;
   flex: 0 0 auto;
+  width: ${({ $width }) => $width !== null && $width !== void 0 ? $width : "auto"};
+  height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : "auto"};
+  max-width: 100%;
+  box-sizing: border-box;
 `;
 export { StyledChartActions };
 export const StyledSvg = styled.svg `
@@ -146,6 +150,7 @@ export const StyledEmptyState = styled.div `
   justify-content: center;
   width: ${({ $size }) => $size}px;
   height: ${({ $size }) => $size}px;
+  box-sizing: border-box;
   border: 1px dashed ${({ theme }) => theme.palette.divider};
   border-radius: 50%;
   background: radial-gradient(

package/dist/Charts/PieChart/PieChart.types.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from "react";
 import { PieArcDatum } from "d3-shape";
-import type { ChartExportOptions } from "../ChartUtils";
+import type { ChartDimension, ChartExportOptions } from "../ChartUtils";
 export type PieChartDatum<TData = unknown> = {
     /** Stable identifier for the slice. Falls back to label and index when omitted. */
     id?: string | number;
@@ -26,8 +26,12 @@ string[]
 export type PieChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & ChartExportOptions & {
     /** Slice data rendered by the chart. Only positive finite values are displayed. */
     data: PieChartDatum<TData>[];
-    /** SVG width and height in pixels. Defaults to 220. */
-    size?: number;
+    /** SVG width and height in pixels or any CSS length measured from the chart frame. Defaults to 220. */
+    size?: ChartDimension;
+    /** Measures the chart frame and fits the square SVG to its available width. Defaults to false. */
+    responsive?: boolean;
+    /** Minimum rendered SVG size in pixels. Defaults to 120. */
+    minSize?: number;
     /** Inner radius in pixels. Set to 0 for a solid pie. Defaults to 58. */
     innerRadius?: number;
     /** Outer radius in pixels. Defaults to half the size minus chart padding. */

package/dist/CheckBox/CheckBox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "styled-components";
 import { useState, useEffect } from "react";
-import { getControlSizeTokens } from "../core";
+import { FaCheckSquare, FaRegSquare, FaRegMinusSquare } from "react-icons/fa";
 const CheckBox = styled(({ className, defaultValue = false, value, partialCheck = false, onChange = () => { }, }) => {
     const [checkedState, setCheckedState] = useState(defaultValue);
     const handleChange = (e) => {
@@ -14,47 +14,30 @@ const CheckBox = styled(({ className, defaultValue = false, value, partialCheck
             setCheckedState(value);
     }, [value]);
     const _checked = value === undefined ? checkedState : value;
-    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx("span", { className: "checkbox partial" })) : _checked === true ? (_jsx("span", { className: "checkbox checked" })) : (_jsx("span", { className: "checkbox unchecked" })) }));
+    return (_jsx("div", { className: className, onClick: handleChange, children: partialCheck === true ? (_jsx(FaRegMinusSquare, { className: "checkbox partial" })) : _checked === true ? (_jsx(FaCheckSquare, { className: "checkbox checked" })) : (_jsx(FaRegSquare, { className: "checkbox unchecked" })) }));
 }) `
   display: flex;
   align-items: center;
   cursor: pointer;
 
   .checkbox {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    width: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).checkboxIconSize}px`};
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
-    border-radius: 2px;
-  }
-
-  .checked,
-  .partial {
-    background-color: ${(props) => props.theme.palette.primary.main};
-  }
-
-  .checked::after {
-    content: "";
-    position: absolute;
-    left: 50%;
-    top: 45%;
-    width: 32%;
-    height: 56%;
-    border: solid #fff;
-    border-width: 0 2px 2px 0;
-    transform: translate(-50%, -50%) rotate(45deg);
-    transform-origin: center;
-  }
-
-  .partial::after {
-    content: "";
-    width: 60%;
-    height: 2px;
-    background-color: #fff;
+    color: ${(props) => props.theme.palette.primary.main};
+    font-size: ${({ size }) => {
+    switch (size) {
+        case "xxs":
+            return "12px";
+        case "xs":
+            return "14px";
+        case "sm":
+            return "16px";
+        case "md":
+            return "18px";
+        case "lg":
+            return "20px";
+        default:
+            return "14px";
+    }
+}};
   }
 `;
 export default CheckBox;

package/dist/DateInput/DateInput.js

@@ -10,11 +10,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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 { CalendarDaysIcon } from "lucide-react";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, useEffect, useMemo, useRef, useState, } from "react";
 import styled from "styled-components";
 import { FieldLabel, Calendar } from "..";
-import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, getControlSizeTokens, } from "../core";
+import { StyledContent, StyledFloatContainer, ArrowButton, ClearButton, } from "../core";
 import parseTimestamp from "../Utilities/parseTimestamp";
 const StyledContainer = styled.div.attrs({
     className: "mfui-DateInput",
@@ -54,19 +53,45 @@ const StyledInputContainer = styled.div `
   font-family: ${({ theme }) => theme.typography.fontFamily};
 
   color: ${(props) => props.theme.palette.text.primary};
-  font-size: ${({ size }) => `${getControlSizeTokens(size).fontSize}px`};
+  font-size: ${({ size }) => size === "xs"
+    ? "11px"
+    : size === "sm"
+        ? "13px"
+        : size === "md"
+            ? "15px"
+            : size === "lg"
+                ? "17px"
+                : size === "xl"
+                    ? "19px"
+                    : "11px"};
 
   width: 100%;
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ size }) => size === "xs"
+    ? "26px"
+    : size === "sm"
+        ? "30px"
+        : size === "md"
+            ? "36px"
+            : size === "lg"
+                ? "42px"
+                : size === "xl"
+                    ? "50px"
+                    : "26px"};
 
-  padding: ${({ size }) => `0px ${getControlSizeTokens(size).inputPaddingX}px`};
-
-  &[data-button-left="true"] {
-    padding-left: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  }
+  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: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
+    padding-right: 36px;
   }
 
   background-color: ${({ theme, variant }) => {
@@ -126,44 +151,6 @@ const StyledInputContainer = styled.div `
     }
   }
 `;
-const CalendarTriggerButton = styled.button `
-  position: absolute;
-  left: 0;
-  height: 100%;
-  width: ${({ size }) => `${getControlSizeTokens(size).adornmentWidth}px`};
-  background: none;
-  border: none;
-  cursor: pointer;
-  margin: 0;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${(props) => props.theme.palette.text.secondary};
-  transition:
-    color 0.15s ease-in-out,
-    background-color 0.15s ease-in-out,
-    transform 0.1s ease-in-out;
-
-  &:hover {
-    color: ${(props) => props.theme.palette.text.primary};
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus-visible {
-    color: ${(props) => props.theme.palette.primary.main};
-    background: ${(props) => props.theme.palette.action.hover};
-  }
-
-  svg {
-    width: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-    height: ${({ size }) => `${getControlSizeTokens(size).iconSize}px`};
-  }
-`;
 const InputSegment = styled.div `
   user-select: none;
   display: flex;
@@ -174,7 +161,17 @@ const InputSegment = styled.div `
   border: none;
   padding: 0;
 
-  height: ${({ size }) => `${getControlSizeTokens(size).height}px`};
+  height: ${({ size }) => size === "xs"
+    ? "22px"
+    : size === "sm"
+        ? "26px"
+        : size === "md"
+            ? "32px"
+            : size === "lg"
+                ? "38px"
+                : size === "xl"
+                    ? "46px"
+                    : "22px"};
 
   height: 100%;
 
@@ -182,7 +179,17 @@ const InputSegment = styled.div `
   color: ${(props) => props.theme.palette.text.primary};
 
   ::placeholder {
-    font-size: ${({ size }) => `${getControlSizeTokens(size).placeholderFontSize}px`};
+    font-size: ${({ size }) => size === "xs"
+    ? "10px"
+    : size === "sm"
+        ? "12px"
+        : size === "md"
+            ? "14px"
+            : size === "lg"
+                ? "16px"
+                : size === "xl"
+                    ? "18px"
+                    : "10px"};
   }
 `;
 const DateInput = forwardRef(({ className, style = {}, defaultValue, value, 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, disabled = false, }, _ref) => {
@@ -205,83 +212,23 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         middleware: [flip(), offset(5)],
         whileElementsMounted: autoUpdate,
     });
-    const dismiss = useDismiss(context, {
-        outsidePress: (event) => {
-            var _a, _b;
-            const target = event.target;
-            if (((_a = target === null || target === void 0 ? void 0 : target.closest) === null || _a === void 0 ? void 0 : _a.call(target, ".mfui-DropDownMenu")) ||
-                ((_b = target === null || target === void 0 ? void 0 : target.closest) === null || _b === void 0 ? void 0 : _b.call(target, ".Menu"))) {
-                return false;
-            }
-            return true;
-        },
-    });
-    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
-    const parseValue = useCallback((input) => {
-        if (!input)
-            return null;
-        const parsed = utc ? moment.utc(input) : moment(input);
-        return parsed.isValid() ? parsed : null;
-    }, [utc]);
-    const getEditableMoment = useCallback((input) => {
-        var _a;
-        return (_a = parseValue(input)) !== null && _a !== void 0 ? _a : (utc ? moment.utc() : moment());
-    }, [parseValue, utc]);
-    const serializeMoment = useCallback((nextMoment) => {
-        return isDateOnly
-            ? nextMoment.format("YYYY-MM-DD")
-            : nextMoment.toISOString();
-    }, [isDateOnly]);
-    const commitValue = useCallback((nextValue) => {
-        if (!isControlled.current) {
-            setUncontrolledValue(nextValue);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-    }, [onChange]);
-    const segments = useMemo(() => parseTimestamp(_value || "", format, utc), [_value, format, utc]);
-    const checkValidRange = useCallback((value) => {
+    const dismiss = useDismiss(context);
+    const { getReferenceProps } = useInteractions([dismiss]);
+    const segments = useMemo(() => parseTimestamp(moment(_value).toISOString(), format, utc), [_value, format, utc]);
+    const checkValidRange = (value) => {
         if (!value)
             return false;
-        const parsed = parseValue(value);
-        if (!parsed)
-            return false;
-        if (min && parsed.isBefore(min))
+        if (min && moment(value).isBefore(min))
             return false;
-        if (max && parsed.isAfter(max))
+        if (max && moment(value).isAfter(max))
             return false;
         return true;
-    }, [parseValue, min, max]);
-    const getCalendarValue = useCallback(() => {
-        const parsed = parseValue(_value);
-        if (!parsed)
-            return undefined;
-        if (!utc) {
-            return parsed.toDate();
-        }
-        // Convert UTC date parts into a local Date so the Calendar highlights
-        // the same wall-clock day the input is displaying.
-        return new Date(parsed.year(), parsed.month(), parsed.date(), parsed.hour(), parsed.minute(), parsed.second(), parsed.millisecond());
-    }, [_value, parseValue, utc]);
-    const updateValue = useCallback((updater) => {
-        const currentMoment = getEditableMoment(_value);
-        const nextMoment = updater(_value, currentMoment.clone());
-        if (!nextMoment || !nextMoment.isValid())
-            return;
-        const nextValue = serializeMoment(nextMoment);
-        if (!checkValidRange(nextValue))
-            return;
-        commitValue(nextValue);
-    }, [
-        _value,
-        getEditableMoment,
-        serializeMoment,
-        checkValidRange,
-        commitValue,
-    ]);
+    };
     const handleClear = (e) => {
         e.preventDefault();
         e.stopPropagation();
-        commitValue(null);
+        setUncontrolledValue(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(null);
         setIsOpen(false);
     };
     const handleSegmentClick = (e, segment) => {
@@ -309,18 +256,6 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         setIsOpen(true);
         setSelectedSegment(segments[0]);
     };
-    const handleCalendarTriggerClick = (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();
-            }
-        }
-        setIsOpen((prev) => !prev);
-        setSelectedSegment(segments[0]);
-    };
     const nextSegment = () => {
         setSelectedSegment((prev) => {
             if (!prev)
@@ -367,18 +302,34 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         // Up Arrow
         if (e.key === "ArrowUp") {
             e.preventDefault();
-            const segmentType = selectedSegment.type;
-            if (segmentType === "separator")
-                return;
-            updateValue((_, currentMoment) => currentMoment.add(1, segmentType));
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).add(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                setUncontrolledValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
         }
         // Down Arrow
         if (e.key === "ArrowDown") {
             e.preventDefault();
-            const segmentType = selectedSegment.type;
-            if (segmentType === "separator")
-                return;
-            updateValue((_, currentMoment) => currentMoment.subtract(1, segmentType));
+            if (selectedSegment.type !== "separator") {
+                let newValue = _value
+                    ? moment(_value).subtract(1, selectedSegment.type).toISOString()
+                    : moment().toISOString();
+                if (!checkValidRange(newValue))
+                    return;
+                if (isDateOnly) {
+                    newValue = moment(newValue).format("YYYY-MM-DD");
+                }
+                setUncontrolledValue(newValue);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+            }
         }
         // handle paste
         if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
@@ -397,7 +348,10 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             setUncontrolledValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const momentValue = getEditableMoment(prev);
+                // if prev is null, use undefined - passing null to moment returns a null moment value
+                const momentValue = utc
+                    ? moment.utc(prev || undefined)
+                    : moment(prev || undefined);
                 let newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))
@@ -405,13 +359,7 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                 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;
+                    newValue = moment(newValue).format("YYYY-MM-DD");
                 }
                 onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
                 return newValue;
@@ -426,65 +374,66 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         if (!selectedSegment) {
             return;
         }
-        const segmentType = selectedSegment.type;
-        if (segmentType === "separator")
-            return;
-        updateValue((_, currentMoment) => e.deltaY > 0
-            ? currentMoment.subtract(1, segmentType)
-            : currentMoment.add(1, segmentType));
+        if (selectedSegment.type !== "separator") {
+            let newValue = e.deltaY > 0
+                ? moment(_value).subtract(1, selectedSegment.type).toISOString()
+                : moment(_value).add(1, selectedSegment.type).toISOString();
+            if (!checkValidRange(newValue))
+                return;
+            if (isDateOnly) {
+                newValue = moment(newValue).format("YYYY-MM-DD");
+            }
+            setUncontrolledValue(newValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
     };
     const handlePaste = (e) => __awaiter(void 0, void 0, void 0, function* () {
         const pastedText = yield window.navigator.clipboard.readText();
-        let parsedMoment = null;
+        let parsedTimestamp = null;
         if (!pastedText)
             return; // do nothing if clipboard is empty
         // check for unix timestamp in seconds
         else if (pastedText.match(/^\d{10}$/)) {
-            parsedMoment = moment.unix(parseInt(pastedText, 10));
+            parsedTimestamp = moment.unix(parseInt(pastedText, 10)).toISOString();
         }
         // check for unix timestamp in seconds with fractional seconds
         else if (pastedText.match(/^\d{10}\.\d{1,6}$/)) {
-            parsedMoment = moment.unix(parseFloat(pastedText));
+            parsedTimestamp = moment.unix(parseFloat(pastedText)).toISOString();
         }
         // check for unix timestamp in milliseconds
         else if (pastedText.match(/^\d{13}$/)) {
-            parsedMoment = moment.unix(parseInt(pastedText, 10) / 1000);
+            parsedTimestamp = moment
+                .unix(parseInt(pastedText, 10) / 1000)
+                .toISOString();
         }
         // check for windows ldap or filetime timestamp
         else if (pastedText.match(/^\d{18}$/)) {
-            parsedMoment = moment.unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000);
+            parsedTimestamp = moment
+                .unix((parseInt(pastedText, 10) - 116444736000000000) / 10000000)
+                .toISOString();
         }
         // check for YMD ldap timestamp in format YYYYMMDDHHMMSSZ
         else if (pastedText.match(/^\d{14}Z$/)) {
-            parsedMoment = moment.utc(pastedText, "YYYYMMDDHHmmssZ");
+            parsedTimestamp = moment
+                .utc(pastedText, "YYYYMMDDHHmmssZ")
+                .toISOString();
         }
         // check if pasted text is any other valid timestamp
         else if (!moment(pastedText).isValid())
             return;
         else {
-            parsedMoment = utc ? moment.utc(pastedText) : moment(pastedText);
-        }
-        if (!(parsedMoment === null || parsedMoment === void 0 ? void 0 : parsedMoment.isValid()))
-            return;
-        if (utc) {
-            parsedMoment = parsedMoment.clone().utc();
+            parsedTimestamp = moment.utc(pastedText).toISOString();
         }
-        const parsedTimestamp = serializeMoment(parsedMoment);
-        if (!checkValidRange(parsedTimestamp))
-            return;
-        commitValue(parsedTimestamp);
+        setUncontrolledValue(parsedTimestamp);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsedTimestamp);
     });
     // Close on outside click
     useEffect(() => {
         const close = (e) => {
-            var _a, _b, _c, _d;
+            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 (((_c = target === null || target === void 0 ? void 0 : target.closest) === null || _c === void 0 ? void 0 : _c.call(target, ".mfui-DropDownMenu")) ||
-                ((_d = target === null || target === void 0 ? void 0 : target.closest) === null || _d === void 0 ? void 0 : _d.call(target, ".Menu"))) {
-                return;
-            }
             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)
@@ -497,18 +446,18 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
         document.addEventListener("click", close);
         return () => document.removeEventListener("click", close);
     }, [refs.floating]);
-    return (_jsxs(StyledContainer, Object.assign({ ref: (ref) => {
+    return (_jsxs(StyledContainer, { ref: (ref) => {
             if (typeof _ref === "function") {
                 _ref(ref);
             }
             mainRef.current = ref;
             refs.setReference(ref);
-        }, onWheel: (e) => handleWheelEvent(e), className: className }, getReferenceProps(), { children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
+        }, onWheel: (e) => handleWheelEvent(e), className: className, children: [label && (_jsx(FieldLabel, { error: error, asterisk: required, size: size, description: description, children: label })), _jsxs(StyledInputContainer, { className: "input-container", onClick: handleContainerClick, onMouseDown: handleMouseDown, onKeyDown: handleKeyDown, onFocus: (e) => {
                     e.preventDefault();
                     setSelectedSegment(segments[0]);
                 }, onBlur: () => {
                     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) => {
+                }, "data-empty": !_value, "data-disabled": disabled, role: "textbox", size: size, variant: variant, "data-button-right": arrow || clearable, style: style, children: [segments.map((segment, i) => {
                         if (segment.type === "separator") {
                             return (_jsx("div", { className: "separator", tabIndex: -1, onClick: (e) => {
                                     e.preventDefault();
@@ -516,25 +465,21 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
                                 }, 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, { 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);
-                                        setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
-                                            ? true
-                                            : closeOnSelect
-                                                ? false
-                                                : true);
-                                        return;
-                                    }
-                                    updateValue((_, currentMoment) => currentMoment
-                                        .year(date.getFullYear())
-                                        .month(date.getMonth())
-                                        .date(date.getDate()));
-                                    setIsOpen((meta === null || meta === void 0 ? void 0 : meta.source) === "month" || (meta === null || meta === void 0 ? void 0 : meta.source) === "year"
-                                        ? true
-                                        : closeOnSelect
-                                            ? false
-                                            : true);
-                                }, includeTime: false }, 1) }) }) })) }))] })));
+                    }), utc && _jsx("div", { style: { marginLeft: 5 }, children: "UTC" }), clearable && _value ? (_jsx(ClearButton, { onClick: handleClear })) : arrow ? (_jsx(ArrowButton, {})) : null] }), !disabled && 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) => {
+                                    setUncontrolledValue((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;