@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/{src/components/DateInput/DateInput.js → DateInput/DateInput.tsx}

@@ -1,17 +1,27 @@
 import moment from "moment";
-import { useFloating, flip, offset } from "@floating-ui/react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useFloating, flip, offset, FloatingPortal } from "@floating-ui/react";
+import React, {
+  MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styled from "styled-components";
-import FieldLabel from "../FieldLabel/FieldLabel.js";
-import Calendar from "../Calendar/Calendar.js";
+import { FieldLabel, Calendar } from "..";
 import {
-  ArrowButton,
-  ClearButton,
   StyledContent,
   StyledFloatContainer,
-} from "../SelectBox/SelectBox.js";
-
-const StyledInputContainer = styled.div`
+  ArrowButton,
+  ClearButton,
+  Size,
+  Variant,
+} from "../core";
+
+const StyledInputContainer = styled.div<{
+  size: Size;
+  variant: Variant;
+}>`
   position: relative;
 
   caret-color: transparent;
@@ -40,7 +50,9 @@ const StyledInputContainer = styled.div`
           return theme.palette.input.border;
       }
     }};
-  font-weight: 500;
+
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
   color: ${(props) => props.theme.palette.text.primary};
   font-size: ${({ size }) =>
     size === "xs"
@@ -130,7 +142,9 @@ const StyledInputContainer = styled.div`
   }
 `;
 
-const InputSegment = styled.div`
+const InputSegment = styled.div<{
+  size: Size;
+}>`
   user-select: none;
   display: flex;
   flex-direction: row;
@@ -174,7 +188,21 @@ const InputSegment = styled.div`
   }
 `;
 
-function parseTimestamp(timestamp, format, utc = false) {
+type Segment = {
+  value: string;
+  text: string;
+  placeholder: string;
+  type: moment.unitOfTime.DurationConstructor | "separator";
+  index: number;
+  momentType?: moment.unitOfTime.All | moment.unitOfTime.DurationConstructor;
+  pattern?: string;
+};
+
+function parseTimestamp(
+  timestamp: string,
+  format: string,
+  utc = false
+): Segment[] {
   // Define patterns to identify datetime components and their placeholders
   const patterns = [
     { pattern: "YYYY", placeholder: "YYYY", type: "year", momentType: "year" },
@@ -188,7 +216,7 @@ function parseTimestamp(timestamp, format, utc = false) {
       pattern: "SSS",
       placeholder: "SSS",
       type: "millisecond",
-      moment: "millisecond",
+      momentType: "millisecond",
     },
     {
       pattern: "A",
@@ -196,20 +224,32 @@ function parseTimestamp(timestamp, format, utc = false) {
       type: "meridiem",
       momentType: "meridiem",
     },
-    { pattern: "Z", placeholder: "Z", type: "timezone", moment: "timezone" },
-  ];
+    {
+      pattern: "Z",
+      placeholder: "Z",
+      type: "timezone",
+      momentType: "timezone",
+    },
+  ] as Segment[];
 
   // Helper function to split format into datetime components and separators
-  function splitFormat(format) {
+  function splitFormat(format: string) {
     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) {
+  function matchSegment(segment: string): Segment {
     const pattern = patterns.find((p) => p.pattern === segment);
     return pattern
       ? pattern
-      : { pattern: segment, placeholder: segment, type: "separator" };
+      : {
+          pattern: segment,
+          placeholder: segment,
+          type: "separator",
+          value: "",
+          text: "",
+          index: -1,
+        };
   }
 
   const segments = splitFormat(format).map((segment, i) => {
@@ -233,35 +273,58 @@ function parseTimestamp(timestamp, format, utc = false) {
   return segments;
 }
 
+interface DateInputProps {
+  className?: string;
+  defaultValue?: string | null;
+  format?: string;
+  label?: string;
+  description?: string;
+  arrow?: boolean;
+  size?: Size;
+  variant?: Variant;
+  clearable?: boolean;
+  required?: boolean;
+  onChange?: (value: string | null) => void;
+  min?: Date;
+  max?: Date;
+  error?: string;
+  width?: string;
+  enableCalendar?: boolean;
+  utc?: boolean;
+  closeOnSelect?: boolean;
+}
+
 const DateInput = styled(
   ({
     className,
-    defaultValue,
+    defaultValue = null,
     format = "YYYY-MM-DD HH:mm:ss",
-    label = null,
-    description = null,
+    label,
+    description,
     arrow = true,
     size = "sm",
     variant = "outlined",
     clearable = false,
     required = false,
     onChange = () => {},
-    min = null,
-    max = null,
-    error = false,
-    width = null,
+    min,
+    max,
+    error,
     enableCalendar = false,
     utc = false,
     closeOnSelect = true,
-  }) => {
-    const [value, setValue] = useState(defaultValue);
-    const [selectedSegment, setSelectedSegment] = useState(null);
+  }: DateInputProps) => {
+    const [value, setValue] = useState<string | null>(defaultValue);
+    const [selectedSegment, setSelectedSegment] = useState<
+      Segment | null | undefined
+    >();
     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 mainRef: MutableRefObject<HTMLElement | null> =
+      useRef<HTMLElement>(null);
 
     const typedKeys = useRef("");
 
@@ -274,13 +337,12 @@ const DateInput = styled(
       middleware: [flip(), offset(5)],
     });
 
-    const segments = useMemo(
-      () =>
-        parseTimestamp(value ? moment(value).toISOString() : null, format, utc),
-      [value, format]
+    const segments: Segment[] = useMemo(
+      () => parseTimestamp(moment(value).toISOString(), format, utc),
+      [value, format, utc]
     );
 
-    const checkValidRange = (value) => {
+    const checkValidRange = (value: string) => {
       if (min && moment(value).isBefore(min)) return false;
       if (max && moment(value).isAfter(max)) return false;
       return true;
@@ -292,7 +354,7 @@ const DateInput = styled(
       });
     };
 
-    const handleClear = (e) => {
+    const handleClear = (e: React.MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
 
@@ -301,18 +363,32 @@ const DateInput = styled(
       setIsOpen(false);
     };
 
-    const handleSegmentClick = (e, segment) => {
+    const handleSegmentClick = (e: React.MouseEvent, segment: Segment) => {
       e.stopPropagation();
       e.preventDefault();
       if (segment.type === "separator") return;
-      mainRef.current.querySelector("div[data-type='input']").focus();
+      if (mainRef?.current) {
+        const input: HTMLInputElement | null = mainRef.current.querySelector(
+          "div[data-type='input']"
+        );
+        if (input) {
+          input.focus();
+        }
+      }
       setSelectedSegment(segment);
     };
 
-    const handleContainerClick = (e) => {
+    const handleContainerClick = (e: React.MouseEvent) => {
       e.stopPropagation();
       e.preventDefault();
-      mainRef.current.querySelector("div[data-type='input']").focus();
+      if (mainRef?.current) {
+        const input: HTMLInputElement | null = mainRef.current.querySelector(
+          "div[data-type='input']"
+        );
+        if (input) {
+          input.focus();
+        }
+      }
       toggleOpen();
       setIsOpen(true);
       setSelectedSegment(segments[0]);
@@ -320,24 +396,20 @@ const DateInput = styled(
 
     const nextSegment = () => {
       setSelectedSegment((prev) => {
+        if (!prev) return segments[0];
         const next = segments[prev.index + 2];
         return next || prev;
       });
     };
 
-    const prevSegment = () => {
-      setSelectedSegment((prev) => {
-        const next = segments[prev.index - 2];
-        return next || prev;
-      });
-    };
-
     // prevent click and drag selection
-    const handleMouseDown = (e) => {
+    const handleMouseDown = (
+      e: React.MouseEvent<HTMLDivElement, MouseEvent>
+    ) => {
       e.preventDefault();
     };
 
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
       if (!selectedSegment) return;
       // tab
       if (e.key === "Tab") {
@@ -350,6 +422,7 @@ const DateInput = styled(
         e.preventDefault();
 
         setSelectedSegment((prev) => {
+          if (!prev) return segments[0];
           const next = segments[prev.index + 2];
           return next || prev;
         });
@@ -358,6 +431,7 @@ const DateInput = styled(
       if (e.key === "ArrowLeft") {
         e.preventDefault();
         setSelectedSegment((prev) => {
+          if (!prev) return segments[0];
           const next = segments[prev.index - 2];
           return next || prev;
         });
@@ -368,6 +442,7 @@ const DateInput = styled(
         e.preventDefault();
 
         setValue((prev) => {
+          if (selectedSegment.type === "separator") return prev;
           let newValue = prev
             ? moment(prev).add(1, selectedSegment.type).toISOString()
             : moment().toISOString();
@@ -385,6 +460,7 @@ const DateInput = styled(
         e.preventDefault();
 
         setValue((prev) => {
+          if (selectedSegment.type === "separator") return prev;
           let newValue = prev
             ? moment(prev).subtract(1, selectedSegment.type).toISOString()
             : moment().toISOString();
@@ -399,6 +475,11 @@ const DateInput = styled(
         });
       }
 
+      // handle paste
+      if (e.key === "v" && (e.metaKey || e.ctrlKey)) {
+        return;
+      }
+
       // only allow numbers
       if (e.key.match(/[0-9]/)) {
         e.preventDefault();
@@ -415,6 +496,7 @@ const DateInput = styled(
         }
 
         setValue((prev) => {
+          if (!selectedSegment?.momentType) return prev;
           const newValue = moment(prev)
             .set(
               selectedSegment.momentType,
@@ -436,14 +518,57 @@ const DateInput = styled(
       e.preventDefault();
     };
 
+    const handleWheelEvent = (e: WheelEvent) => {
+      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?.(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?.(newValue);
+          return newValue;
+        });
+      }
+    };
+
+    const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      const pastedText = e?.clipboardData?.getData?.("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) => {
+      const close = (e: MouseEvent) => {
+        const target = e.target as Node;
+        const referenceElement = refs?.reference?.current as Node;
+        const floatingElement = refs?.floating?.current as Node;
+
         if (
-          refs.floating.current && // Check if the floating element exists
-          e.target !== refs.reference.current && // Check if the target is not the reference (input)
-          !refs.reference.current.contains(e.target) && // Check if the target is not inside the reference (input)
-          !refs.floating.current.contains(e.target) // Check if the target is not inside the floating element (content)
+          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);
         }
@@ -453,11 +578,18 @@ const DateInput = styled(
       return () => document.removeEventListener("click", close);
     }, [refs.floating]);
 
-    // const contentWidth =
-    //   refs?.reference?.current?.getClientRects?.()?.[0]?.width || "100%";
+    // Global Wheel Event when segement selected
+    useEffect(() => {
+      if (selectedSegment) {
+        document.addEventListener("wheel", handleWheelEvent);
+      }
+      return () => {
+        document.removeEventListener("wheel", handleWheelEvent);
+      };
+    }, [selectedSegment]);
 
     return (
-      <div>
+      <div className={className}>
         {label && (
           <FieldLabel
             error={error}
@@ -476,6 +608,7 @@ const DateInput = styled(
           onClick={handleContainerClick}
           onMouseDown={handleMouseDown}
           onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
           onFocus={(e) => {
             e.preventDefault();
             setSelectedSegment(segments[0]);
@@ -484,7 +617,6 @@ const DateInput = styled(
           role="textbox"
           size={size}
           variant={variant}
-          width={width}
           data-button-right={arrow || clearable}
         >
           {segments.map((segment, i) => {
@@ -538,42 +670,44 @@ const DateInput = styled(
           ) : null}
         </StyledInputContainer>
         {enableCalendar && isOpen && (
-          <StyledFloatContainer ref={refs.setFloating} style={floatingStyles}>
-            <StyledContent maxDropdownHeight="fit-content">
-              <div>
-                <Calendar
-                  key={1}
-                  date={moment(value).toDate()}
-                  clearable={false}
-                  min={min}
-                  max={max}
-                  // hourFormat={hourFormat}
-                  onDateChanged={(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?.(isoResult);
-                      setIsOpen(closeOnSelect ? false : true);
-                      return isoResult;
-                    });
-                  }}
-                  includeTime={false}
-                />
-              </div>
-            </StyledContent>
-          </StyledFloatContainer>
+          <FloatingPortal preserveTabOrder>
+            <StyledFloatContainer ref={refs.setFloating} style={floatingStyles}>
+              <StyledContent maxDropdownHeight="fit-content">
+                <div>
+                  <Calendar
+                    key={1}
+                    value={moment(value).toDate()}
+                    clearable={false}
+                    min={min}
+                    max={max}
+                    // hourFormat={hourFormat}
+                    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?.(isoResult);
+                        setIsOpen(closeOnSelect ? false : true);
+                        return isoResult;
+                      });
+                    }}
+                    includeTime={false}
+                  />
+                </div>
+              </StyledContent>
+            </StyledFloatContainer>
+          </FloatingPortal>
         )}
       </div>
     );

package/DateInput/index.ts

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