@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/DateRangeInput.tsx

@@ -1,758 +0,0 @@
-import { useRef, useEffect, useState, useLayoutEffect } from "react";
-import { createPortal } from "react-dom";
-import { InputBaseProps, InputBase } from "./Input";
-import { CalendarRange, CalendarRangeProps } from "./CalendarRange";
-import { Icon } from "./Icon";
-import { findDocumentRoot } from "../utils";
-import {
-  parseInputDate,
-  isValidDate,
-  formatInputValue,
-  calculateCursorPosition,
-  formatDate,
-  isValidDateRangeOrder,
-} from "../utils/date";
-
-type DateRangeInputProps = Omit<InputBaseProps, "id"> & {
-  id?: string;
-  testid?: string;
-  /**
-   * Value in the format "YYYY-MM-DD|YYYY-MM-DD" or empty string
-   */
-  value: string;
-  /**
-   * Called when the range changes. Value is in the format "YYYY-MM-DD|YYYY-MM-DD"
-   */
-  onChange: (value: string) => void;
-  /**
-   * Optional placeholder text
-   */
-  placeholder?: string;
-  /**
-   * Optional disabled state
-   */
-  disabled?: boolean;
-  /**
-   * If true, shows single calendar instead of double calendar
-   */
-  single?: boolean;
-  /**
-   * If true, disables range selection (single date only)
-   */
-  disableRange?: boolean;
-  readOnly?: boolean; // If true, input is read-only and cannot be focused
-  label?: string; // Optional label for the input
-} & Pick<CalendarRangeProps, "isDateAvailable" | "onPendingFromChange">;
-
-export const DateRangeInput = ({
-  id,
-  testid,
-  value,
-  onChange,
-  placeholder = "MM/DD/YYYY - MM/DD/YYYY",
-  disabled,
-  readOnly = false,
-  single = false,
-  disableRange = false,
-  label,
-  isDateAvailable,
-  onPendingFromChange,
-  ...props
-}: DateRangeInputProps) => {
-  const [visible, setVisible] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [isTyping, setIsTyping] = useState(false);
-  const popoverRef = useRef<HTMLDivElement | null>(null);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const triggerRef = useRef<HTMLInputElement | null>(null);
-  const [calendarPosition, setCalendarPosition] = useState({
-    top: 0,
-    left: 0,
-    width: 0,
-  });
-
-  const [from, to] = value.split("|");
-
-  // Update input value when external value changes (but not when typing)
-  useEffect(() => {
-    if (!isTyping) {
-      // Only update inputValue if the value is valid
-      const displayValue = formatDisplayValue(from, to);
-      if (displayValue) {
-        setInputValue(displayValue);
-      }
-      // If displayValue is empty, keep previous inputValue unchanged
-    }
-  }, [from, to, isTyping, disableRange]);
-
-  useLayoutEffect(() => {
-    if (visible) {
-      updatePosition();
-    }
-  }, [visible]);
-
-  const updatePosition = () => {
-    if (rootRef.current) {
-      const rect = rootRef.current.getBoundingClientRect();
-      setCalendarPosition({
-        top: rect.bottom + window.scrollY,
-        left: rect.left + window.scrollX,
-        width: rect.width,
-      });
-    }
-  };
-
-  useEffect(() => {
-    updatePosition();
-
-    const resizeObserver = new ResizeObserver(updatePosition);
-    if (triggerRef.current) {
-      resizeObserver.observe(triggerRef.current);
-    }
-
-    window.addEventListener("scroll", updatePosition);
-
-    return () => {
-      resizeObserver.disconnect();
-      window.removeEventListener("scroll", updatePosition);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && popoverRef.current) {
-        setVisible(false);
-        triggerRef.current?.blur();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, []);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        popoverRef.current &&
-        !popoverRef.current.contains(event.target as HTMLElement) &&
-        triggerRef.current &&
-        !triggerRef.current.contains(event.target as HTMLElement)
-      ) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
-
-  function handleRangeChange(fromValue: string, toValue: string) {
-    if (disableRange) {
-      onChange(`${fromValue}|${fromValue}`);
-    } else {
-      onChange(`${fromValue}|${toValue}`);
-    }
-    setVisible(false);
-    setIsTyping(false);
-  }
-
-  const handleFocus = () => {
-    if (readOnly) return;
-    setVisible(true);
-  };
-
-  const handleClick = () => {
-    handleFocus();
-  };
-
-  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (readOnly) return;
-
-    const rawValue = event.target.value;
-    const cursorPosition = event.target.selectionStart || 0;
-
-    if (shouldPreventManualDash(rawValue)) {
-      handleManualDashRemoval(rawValue, cursorPosition);
-      return;
-    }
-
-    setIsTyping(true);
-
-    const formattedValue = formatInputValue(rawValue);
-    const finalValue = shouldAutoInsertDash(formattedValue, rawValue)
-      ? `${formattedValue} - `
-      : formattedValue;
-
-    setInputValue(finalValue);
-
-    const newCursorPosition = calculateNewCursorPosition(
-      rawValue,
-      formattedValue,
-      finalValue,
-      cursorPosition,
-    );
-
-    requestAnimationFrame(() => {
-      setCursorPosition(newCursorPosition);
-    });
-
-    updateParentValue(finalValue);
-  };
-
-  const shouldPreventManualDash = (value: string): boolean => {
-    return !disableRange && value.includes("-") && !value.includes(" - ");
-  };
-
-  const handleManualDashRemoval = (
-    rawValue: string,
-    cursorPosition: number,
-  ) => {
-    const cleanValue = rawValue.replace(/-/g, "");
-    const formattedCleanValue = formatInputValue(cleanValue);
-    setInputValue(formattedCleanValue);
-
-    requestAnimationFrame(() => {
-      const newPosition = Math.min(
-        cursorPosition - 1,
-        formattedCleanValue.length,
-      );
-      setCursorPosition(newPosition);
-    });
-  };
-
-  const shouldAutoInsertDash = (
-    formattedValue: string,
-    rawValue: string,
-  ): boolean => {
-    if (disableRange || formattedValue.includes(" - ")) {
-      return false;
-    }
-
-    const completeDate = formattedValue.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-    if (!completeDate || rawValue.length !== formattedValue.length) {
-      return false;
-    }
-
-    // Only add dash if user just completed typing the year
-    const prevLength = rawValue.length - 1;
-    const prevFormatted = formatInputValue(rawValue.slice(0, prevLength));
-
-    return !prevFormatted.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-  };
-
-  const calculateNewCursorPosition = (
-    rawValue: string,
-    formattedValue: string,
-    finalValue: string,
-    originalPosition: number,
-  ): number => {
-    if (finalValue !== formattedValue) {
-      return finalValue.length; // Place cursor after auto-inserted dash
-    }
-
-    return calculateCursorPositionHelper(
-      rawValue,
-      finalValue,
-      originalPosition,
-      disableRange,
-    );
-  };
-
-  const setCursorPosition = (position: number) => {
-    if (triggerRef.current) {
-      triggerRef.current.setSelectionRange(position, position);
-    }
-  };
-
-  const updateParentValue = (value: string) => {
-    if (disableRange) {
-      updateSingleDateValue(value);
-    } else {
-      updateRangeValue(value);
-    }
-  };
-
-  const updateSingleDateValue = (value: string) => {
-    const parsedDate = parseInputDate(value);
-    if (parsedDate && isValidDate(parsedDate)) {
-      onChange(`${parsedDate}|${parsedDate}`);
-    }
-  };
-
-  const updateRangeValue = (value: string) => {
-    if (value === "") {
-      onChange("");
-      return;
-    }
-
-    const rangeMatch = value.match(/^(.+?)\s*-\s*(.+)$/);
-    if (rangeMatch) {
-      updateCompleteRange(rangeMatch);
-    } else {
-      updatePartialRange(value);
-    }
-  };
-
-  const updateCompleteRange = (rangeMatch: RegExpMatchArray) => {
-    const [, fromStr, toStr] = rangeMatch;
-    const fromDate = parseInputDate(fromStr.trim());
-    const toDate = parseInputDate(toStr.trim());
-
-    if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
-      onChange(`${fromDate}|${toDate}`);
-    }
-  };
-
-  const updatePartialRange = (value: string) => {
-    const singleDate = parseInputDate(value);
-    if (singleDate && isValidDate(singleDate)) {
-      onChange(`${singleDate}|`);
-    }
-  };
-
-  const handleBlur = () => {
-    setIsTyping(false);
-
-    // If the input is invalid, revert to the last valid value or empty
-    if (disableRange) {
-      const parsedDate = parseInputDate(inputValue);
-      if (!parsedDate || !isValidDate(parsedDate)) {
-        const lastValidValue = formatDisplayValue(from, to);
-        setInputValue(lastValidValue || "");
-      }
-    } else {
-      // For range, validate both parts
-      const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
-      if (rangeMatch) {
-        const [, fromStr, toStr] = rangeMatch;
-        const fromDate = parseInputDate(fromStr.trim());
-        const toDate = parseInputDate(toStr.trim());
-
-        // Only accept if both dates are valid AND the range is valid (to >= from)
-        if (!fromDate || !toDate || !isValidDateRange(fromDate, toDate)) {
-          // Invalid range - clear the input
-          setInputValue("");
-          onChange("");
-        }
-      } else {
-        // Check if input is just a dash or incomplete second date
-        if (inputValue.includes(" - ")) {
-          // Has dash but incomplete second date - clear the input
-          setInputValue("");
-          onChange("");
-        } else {
-          // Single date in range mode - check if we have a previous valid state
-          const singleDate = parseInputDate(inputValue);
-          if (!singleDate || !isValidDate(singleDate)) {
-            // Invalid single date - clear the input
-            setInputValue("");
-            onChange("");
-          } else {
-            // Valid single date but incomplete range - clear the input
-            setInputValue("");
-            onChange("");
-          }
-        }
-      }
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    // Prevent manual typing of dash in range mode
-    if (!disableRange && event.key === "-") {
-      event.preventDefault();
-      return;
-    }
-
-    if (event.key === "Backspace") {
-      const input = event.target as HTMLInputElement;
-      const cursorPosition = input.selectionStart || 0;
-      const value = input.value;
-
-      // If cursor is right after a slash, move it before the slash
-      if (cursorPosition > 0 && value[cursorPosition - 1] === "/") {
-        event.preventDefault();
-        const newValue =
-          value.slice(0, cursorPosition - 2) + value.slice(cursorPosition);
-        const formattedValue = formatInputValue(newValue);
-        setInputValue(formattedValue);
-
-        // Set cursor position after the deletion
-        requestAnimationFrame(() => {
-          if (triggerRef.current) {
-            const newPosition = Math.max(0, cursorPosition - 2);
-            triggerRef.current.setSelectionRange(newPosition, newPosition);
-          }
-        });
-
-        setIsTyping(true);
-        return;
-      }
-
-      // Handle deletion when cursor is on or near the dash separator
-      if (!disableRange && value.includes(" - ")) {
-        const dashIndex = value.indexOf(" - ");
-        const dashStart = dashIndex;
-        const dashEnd = dashIndex + 3; // " - " is 3 characters
-
-        // If cursor is within the dash area (including spaces)
-        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
-          event.preventDefault();
-
-          // Remove the entire range and the last digit of the year from the first date
-          const beforeDash = value.slice(0, dashStart).trim();
-
-          // Extract the year part and remove the last digit
-          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-          if (yearMatch) {
-            const [, month, day, year] = yearMatch;
-            const truncatedYear = year.slice(0, -1); // Remove last digit
-            const newValue = `${month}/${day}/${truncatedYear}`;
-            const formattedValue = formatInputValue(newValue);
-            setInputValue(formattedValue);
-
-            // Update the value - no valid date yet since year is incomplete
-            onChange("");
-
-            // Position cursor at the end
-            requestAnimationFrame(() => {
-              if (triggerRef.current) {
-                triggerRef.current.setSelectionRange(
-                  formattedValue.length,
-                  formattedValue.length,
-                );
-              }
-            });
-          } else {
-            // Fallback to original behavior
-            const formattedValue = formatInputValue(beforeDash);
-            setInputValue(formattedValue);
-
-            const singleDate = parseInputDate(beforeDash);
-            if (singleDate && isValidDate(singleDate)) {
-              onChange(`${singleDate}|`);
-            } else {
-              onChange("");
-            }
-
-            requestAnimationFrame(() => {
-              if (triggerRef.current) {
-                const newPosition = formattedValue.length;
-                triggerRef.current.setSelectionRange(newPosition, newPosition);
-              }
-            });
-          }
-
-          setIsTyping(true);
-          return;
-        }
-
-        // If cursor is right after the dash, remove the second date
-        if (cursorPosition === dashEnd) {
-          event.preventDefault();
-
-          const beforeDash = value.slice(0, dashStart).trim();
-          const newValue = `${beforeDash} - `;
-          setInputValue(newValue);
-
-          // Update the value to only have the first date as partial range
-          const singleDate = parseInputDate(beforeDash);
-          if (singleDate && isValidDate(singleDate)) {
-            onChange(`${singleDate}|`);
-          }
-
-          // Position cursor after the dash
-          requestAnimationFrame(() => {
-            if (triggerRef.current) {
-              triggerRef.current.setSelectionRange(
-                newValue.length,
-                newValue.length,
-              );
-            }
-          });
-
-          setIsTyping(true);
-          return;
-        }
-      }
-    }
-
-    if (event.key === "Delete") {
-      const input = event.target as HTMLInputElement;
-      const cursorPosition = input.selectionStart || 0;
-      const value = input.value;
-
-      // Handle deletion when cursor is on or near the dash separator
-      if (!disableRange && value.includes(" - ")) {
-        const dashIndex = value.indexOf(" - ");
-        const dashStart = dashIndex;
-        const dashEnd = dashIndex + 3; // " - " is 3 characters
-
-        // If cursor is within the dash area or right before it
-        if (cursorPosition >= dashStart && cursorPosition <= dashEnd) {
-          event.preventDefault();
-
-          // Remove the dash and second date, and the last digit of the year from the first date
-          const beforeDash = value.slice(0, dashStart).trim();
-
-          // Extract the year part and remove the last digit
-          const yearMatch = beforeDash.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-          if (yearMatch) {
-            const [, month, day, year] = yearMatch;
-            const truncatedYear = year.slice(0, -1); // Remove last digit
-            const newValue = `${month}/${day}/${truncatedYear}`;
-            const formattedValue = formatInputValue(newValue);
-            setInputValue(formattedValue);
-
-            // Update the value - no valid date yet since year is incomplete
-            onChange("");
-
-            // Position cursor at the end
-            requestAnimationFrame(() => {
-              if (triggerRef.current) {
-                triggerRef.current.setSelectionRange(
-                  formattedValue.length,
-                  formattedValue.length,
-                );
-              }
-            });
-          } else {
-            // Fallback to original behavior
-            const formattedValue = formatInputValue(beforeDash);
-            setInputValue(formattedValue);
-
-            const singleDate = parseInputDate(beforeDash);
-            if (singleDate && isValidDate(singleDate)) {
-              onChange(`${singleDate}|`);
-            } else {
-              onChange("");
-            }
-
-            requestAnimationFrame(() => {
-              if (triggerRef.current) {
-                const newPosition = formattedValue.length;
-                triggerRef.current.setSelectionRange(newPosition, newPosition);
-              }
-            });
-          }
-
-          setIsTyping(true);
-          return;
-        }
-      }
-    }
-
-    if (event.key === "Enter") {
-      if (disableRange) {
-        const parsedDate = parseInputDate(inputValue);
-        if (parsedDate && isValidDate(parsedDate)) {
-          onChange(`${parsedDate}|${parsedDate}`);
-          setVisible(false);
-          setIsTyping(false);
-        }
-      } else {
-        // In range mode, only accept complete and valid ranges
-        const rangeMatch = inputValue.match(/^(.+?)\s*-\s*(.+)$/);
-        if (rangeMatch) {
-          const [, fromStr, toStr] = rangeMatch;
-          const fromDate = parseInputDate(fromStr.trim());
-          const toDate = parseInputDate(toStr.trim());
-
-          if (fromDate && toDate && isValidDateRange(fromDate, toDate)) {
-            onChange(`${fromDate}|${toDate}`);
-            setVisible(false);
-            setIsTyping(false);
-          } else {
-            // Invalid range - clear the input
-            setInputValue("");
-            onChange("");
-            setVisible(false);
-            setIsTyping(false);
-          }
-        } else {
-          // Single date in range mode - clear the input
-          setInputValue("");
-          onChange("");
-          setVisible(false);
-          setIsTyping(false);
-        }
-      }
-    }
-  };
-
-  return (
-    <>
-      <InputBase
-        id={id}
-        testid={testid}
-        ref={(el) => {
-          triggerRef.current = el;
-        }}
-        {...props}
-        wrapperRef={rootRef}
-        value={inputValue}
-        placeholder={disableRange ? "MM/DD/YYYY" : placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
-        after={<Icon name="calendar_month" />}
-        onFocus={handleFocus}
-        onClick={handleClick}
-        onChange={handleInputChange}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        label={label}
-        secondaryIconColor
-      />
-      {visible &&
-        !readOnly &&
-        createPortal(
-          <div
-            ref={(el) => {
-              popoverRef.current = el;
-            }}
-            className="absolute z-40"
-            style={{
-              top: `${calendarPosition.top + 4}px`,
-              left: `${calendarPosition.left}px`,
-              minWidth: `${calendarPosition.width}px`,
-            }}
-          >
-            <CalendarRange
-              id={id ? `${id}-calendar` : undefined}
-              testid={testid ? `${testid}-calendar` : undefined}
-              from={from}
-              to={to}
-              onChange={handleRangeChange}
-              cardStyle
-              mode={single ? "single" : "double"}
-              disableRange={disableRange}
-              isDateAvailable={isDateAvailable}
-              onPendingFromChange={onPendingFromChange}
-            />
-          </div>,
-          findDocumentRoot(popoverRef.current),
-        )}
-    </>
-  );
-
-  function formatInputValue(value: string): string {
-    return formatInputValueHelper(value, disableRange);
-  }
-
-  function formatDisplayValue(from?: string, to?: string) {
-    return formatDisplayValueHelper(from, to, disableRange);
-  }
-};
-
-DateRangeInput.displayName = "DateRangeInput";
-
-function isValidDateRange(fromDate: string, toDate: string): boolean {
-  return isValidDateRangeOrder(fromDate, toDate);
-}
-
-function formatInputValueHelper(value: string, disableRange: boolean): string {
-  if (disableRange) {
-    return formatInputValue(value);
-  }
-
-  if (value.includes(" - ")) {
-    const [from, to] = value.split(" - ");
-    const fromFormatted = formatInputValue(from);
-    const toFormatted = formatInputValue(to || "");
-    return `${fromFormatted} - ${toFormatted}`;
-  }
-
-  const cleanValue = value.replace(/-/g, "");
-  return formatInputValue(cleanValue);
-}
-
-function calculateCursorPositionHelper(
-  originalValue: string,
-  formattedValue: string,
-  originalPosition: number,
-  disableRange: boolean,
-): number {
-  // Handle range input cursor positioning
-  if (!disableRange && formattedValue.includes(" - ")) {
-    const dashPosition = formattedValue.indexOf(" - ");
-    const originalDashPosition = originalValue.indexOf("-");
-
-    // If cursor was after the dash in original, maintain relative position
-    if (
-      originalDashPosition !== -1 &&
-      originalPosition > originalDashPosition
-    ) {
-      const afterDashDigits = originalValue
-        .slice(originalDashPosition + 1)
-        .replace(/\D/g, "").length;
-      const formattedAfterDash = formattedValue.slice(dashPosition + 3);
-
-      let newPosition = dashPosition + 3;
-      let digitCount = 0;
-
-      for (let i = 0; i < formattedAfterDash.length; i++) {
-        if (/\d/.test(formattedAfterDash[i])) {
-          digitCount++;
-          if (digitCount >= afterDashDigits) {
-            // Check if we're at a position where a slash was auto-inserted in the second date
-            // If the next character is a slash, place cursor after it
-            if (
-              i + 1 < formattedAfterDash.length &&
-              formattedAfterDash[i + 1] === "/"
-            ) {
-              newPosition = dashPosition + 3 + i + 2;
-            } else {
-              newPosition = dashPosition + 3 + i + 1;
-            }
-            break;
-          }
-        }
-        if (digitCount < afterDashDigits) {
-          newPosition = dashPosition + 3 + i + 1;
-        }
-      }
-
-      return Math.min(newPosition, formattedValue.length);
-    }
-  }
-
-  return calculateCursorPosition(
-    originalValue,
-    formattedValue,
-    originalPosition,
-  );
-}
-
-function formatDisplayValueHelper(
-  from?: string,
-  to?: string,
-  disableRange?: boolean,
-) {
-  if (!from && !to) {
-    return "";
-  }
-
-  // Validate dates before displaying
-  const fromValid = from ? isValidDate(from) : false;
-  const toValid = to ? isValidDate(to) : false;
-
-  if (disableRange) {
-    return fromValid && from ? formatDate(from) : "";
-  }
-
-  // Return formatted display if we have a complete, valid range
-  if (fromValid && toValid && from && to && isValidDateRange(from, to)) {
-    return `${formatDate(from)} - ${formatDate(to)}`;
-  }
-
-  // If we have a valid from date but no to date, show the from date only
-  // This preserves the previous valid state during editing
-  if (fromValid && !to && from) {
-    return `${formatDate(from)} - `;
-  }
-
-  // Return empty string if no valid dates or invalid range
-  return "";
-}