shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/date-range-input/use-typed-date-range.mjs

@@ -0,0 +1,600 @@
+import { format, isValid, parse } from 'date-fns';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { getMaxDaysInMonth, isValidDate, pad } from '../date-input/utils';
+
+const getDateValue = (value) => {
+  if (!value) return void 0;
+  if (value instanceof Date) {
+    return isValid(value) ? value : void 0;
+  }
+  if (typeof value === "string") {
+    const supportedFormats = [
+      "dd/MM/yyyy",
+      // 01/12/2023
+      "DD/MM/YYYY",
+      // 01/12/2023 (same as above but with different case)
+      "d/M/yyyy",
+      // 1/1/2023
+      "dd-MM-yyyy",
+      // 01-12-2023
+      "d-M-yyyy",
+      // 1-1-2023
+      "dd.MM.yyyy",
+      // 01.12.2023
+      "d.M.yyyy",
+      // 1.1.2023
+      "yyyy/MM/dd",
+      // 2023/12/01
+      "yyyy-MM-dd",
+      // 2023-12-01
+      "MM/dd/yyyy",
+      // 12/01/2023
+      "M/d/yyyy"
+      // 12/1/2023
+    ];
+    for (const fmt of supportedFormats) {
+      try {
+        const parsed = parse(value, fmt, /* @__PURE__ */ new Date());
+        if (isValid(parsed)) {
+          return parsed;
+        }
+      } catch {
+      }
+    }
+    const nativeDate = new Date(value);
+    return isValid(nativeDate) ? nativeDate : void 0;
+  }
+  if (typeof value === "number") {
+    const timestampMs = value.toString().length === 10 ? value * 1e3 : value;
+    const date = new Date(timestampMs);
+    return isValid(date) ? date : void 0;
+  }
+  return void 0;
+};
+function useTypedDateRange({
+  value,
+  onChange,
+  format: format$1 = "dd/MM/yyyy",
+  minDate,
+  maxDate
+}) {
+  const fromDateValue = getDateValue(value?.from);
+  const toDateValue = getDateValue(value?.to);
+  const defaultMinDate = useMemo(() => new Date(1900, 0, 1), []);
+  const defaultMaxDate = useMemo(() => new Date(2099, 11, 31), []);
+  const effectiveMinDate = minDate || defaultMinDate;
+  const effectiveMaxDate = maxDate || defaultMaxDate;
+  const [state, setState] = useState(
+    fromDateValue || toDateValue ? {
+      fromYear: fromDateValue ? fromDateValue.getFullYear() : null,
+      fromMonth: fromDateValue ? fromDateValue.getMonth() + 1 : null,
+      fromDay: fromDateValue ? fromDateValue.getDate() : null,
+      toYear: toDateValue ? toDateValue.getFullYear() : null,
+      toMonth: toDateValue ? toDateValue.getMonth() + 1 : null,
+      toDay: toDateValue ? toDateValue.getDate() : null
+    } : {
+      fromYear: null,
+      fromMonth: null,
+      fromDay: null,
+      toYear: null,
+      toMonth: null,
+      toDay: null
+    }
+  );
+  const [activeSegment, setActiveSegment] = useState(0);
+  const [buffer, setBuffer] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef(null);
+  const internalStateRef = useRef({
+    fromYear: fromDateValue ? fromDateValue.getFullYear() : null,
+    fromMonth: fromDateValue ? fromDateValue.getMonth() + 1 : null,
+    fromDay: fromDateValue ? fromDateValue.getDate() : null,
+    toYear: toDateValue ? toDateValue.getFullYear() : null,
+    toMonth: toDateValue ? toDateValue.getMonth() + 1 : null,
+    toDay: toDateValue ? toDateValue.getDate() : null
+  });
+  useRef("");
+  const isUpdatingFromExternal = useRef(false);
+  const formatData = useMemo(() => {
+    const separator2 = format$1.match(/[^A-Za-z]/)?.[0] || "/";
+    const segments = format$1.split(/[^A-Za-z]/);
+    const segmentOrder2 = segments.map((seg) => {
+      if (seg.toLowerCase().startsWith("m")) return "month";
+      if (seg.toLowerCase().startsWith("d")) return "day";
+      if (seg.toLowerCase().startsWith("y")) return "year";
+      return "month";
+    });
+    return { separator: separator2, segmentOrder: segmentOrder2 };
+  }, [format$1]);
+  const { separator, segmentOrder } = formatData;
+  const fullSegmentOrder = [
+    ...segmentOrder.map(
+      (s) => `from${s.charAt(0).toUpperCase() + s.slice(1)}`
+    ),
+    ...segmentOrder.map((s) => `to${s.charAt(0).toUpperCase() + s.slice(1)}`)
+  ];
+  const segmentPositions = useMemo(() => {
+    const positions = [];
+    let currentPosition = 0;
+    segmentOrder.forEach((segment, index) => {
+      const segmentLength = segment === "year" ? 4 : 2;
+      positions.push({
+        start: currentPosition,
+        end: currentPosition + segmentLength
+      });
+      if (index < segmentOrder.length - 1) {
+        currentPosition += segmentLength + separator.length;
+      } else {
+        currentPosition += segmentLength;
+      }
+    });
+    currentPosition += 3;
+    segmentOrder.forEach((segment, index) => {
+      const segmentLength = segment === "year" ? 4 : 2;
+      positions.push({
+        start: currentPosition,
+        end: currentPosition + segmentLength
+      });
+      if (index < segmentOrder.length - 1) {
+        currentPosition += segmentLength + separator.length;
+      } else {
+        currentPosition += segmentLength;
+      }
+    });
+    return positions;
+  }, [segmentOrder, separator]);
+  const maxLengths = useMemo(
+    () => [...segmentOrder, ...segmentOrder].map((type) => type === "year" ? 4 : 2),
+    [segmentOrder]
+  );
+  useEffect(() => {
+    if (isUpdatingFromExternal.current) return;
+    if (isFocused) {
+      return;
+    }
+    isUpdatingFromExternal.current = true;
+    const currentFromDateValue = getDateValue(value?.from);
+    const currentToDateValue = getDateValue(value?.to);
+    const newFromMonth = currentFromDateValue ? currentFromDateValue.getMonth() + 1 : null;
+    const newFromDay = currentFromDateValue ? currentFromDateValue.getDate() : null;
+    const newFromYear = currentFromDateValue ? currentFromDateValue.getFullYear() : null;
+    const newToMonth = currentToDateValue ? currentToDateValue.getMonth() + 1 : null;
+    const newToDay = currentToDateValue ? currentToDateValue.getDate() : null;
+    const newToYear = currentToDateValue ? currentToDateValue.getFullYear() : null;
+    internalStateRef.current = {
+      fromMonth: newFromMonth,
+      fromDay: newFromDay,
+      fromYear: newFromYear,
+      toMonth: newToMonth,
+      toDay: newToDay,
+      toYear: newToYear
+    };
+    setState({
+      fromYear: newFromYear,
+      fromMonth: newFromMonth,
+      fromDay: newFromDay,
+      toYear: newToYear,
+      toMonth: newToMonth,
+      toDay: newToDay
+    });
+    isUpdatingFromExternal.current = false;
+  }, [value, isFocused]);
+  const commitDateChanges = useCallback(
+    (newFromMonth, newFromDay, newFromYear, newToMonth, newToDay, newToYear, preventSwapping = false) => {
+      if (isUpdatingFromExternal.current) return;
+      let validFromMonth = newFromMonth;
+      let validFromDay = newFromDay;
+      let validFromYear = newFromYear;
+      let validToMonth = newToMonth;
+      let validToDay = newToDay;
+      let validToYear = newToYear;
+      let validFromDate;
+      if (validFromMonth !== null && validFromDay !== null && validFromYear !== null) {
+        const maxDays = getMaxDaysInMonth(validFromMonth, validFromYear);
+        validFromDay = Math.min(validFromDay, maxDays);
+        if (validFromYear >= 1e3 && isValidDate(validFromYear, validFromMonth, validFromDay)) {
+          const newFromDate = new Date(validFromYear, validFromMonth - 1, validFromDay);
+          if (newFromDate >= effectiveMinDate && newFromDate <= effectiveMaxDate) {
+            validFromDate = newFromDate;
+          }
+        }
+      }
+      let validToDate;
+      if (validToMonth !== null && validToDay !== null && validToYear !== null) {
+        const maxDays = getMaxDaysInMonth(validToMonth, validToYear);
+        validToDay = Math.min(validToDay, maxDays);
+        if (validToYear >= 1e3 && isValidDate(validToYear, validToMonth, validToDay)) {
+          const newToDate = new Date(validToYear, validToMonth - 1, validToDay);
+          if (newToDate >= effectiveMinDate && newToDate <= effectiveMaxDate) {
+            validToDate = newToDate;
+          }
+        }
+      }
+      if (validFromDate && validToDate && validFromDate > validToDate) {
+        const fromComplete = newFromMonth !== null && newFromDay !== null && newFromYear !== null;
+        const toComplete = newToMonth !== null && newToDay !== null && newToYear !== null;
+        if (fromComplete && toComplete) {
+          const nextDay = new Date(validFromDate);
+          nextDay.setDate(nextDay.getDate() + 1);
+          validToYear = nextDay.getFullYear();
+          validToMonth = nextDay.getMonth() + 1;
+          validToDay = nextDay.getDate();
+          validToDate = nextDay;
+        }
+      }
+      internalStateRef.current = {
+        fromMonth: validFromMonth,
+        fromDay: validFromDay,
+        fromYear: validFromYear,
+        toMonth: validToMonth,
+        toDay: validToDay,
+        toYear: validToYear
+      };
+      setState({
+        fromYear: validFromYear,
+        fromMonth: validFromMonth,
+        fromDay: validFromDay,
+        toYear: validToYear,
+        toMonth: validToMonth,
+        toDay: validToDay
+      });
+      let dateRange;
+      let formattedRange;
+      if (validFromDate || validToDate) {
+        dateRange = {
+          from: validFromDate,
+          to: validToDate
+        };
+        formattedRange = {
+          from: validFromDate ? format(validFromDate, format$1) : void 0,
+          to: validToDate ? format(validToDate, format$1) : void 0
+        };
+      }
+      onChange?.(dateRange, formattedRange);
+    },
+    [onChange, format$1, effectiveMinDate, effectiveMaxDate]
+  );
+  const updateDatePart = useCallback(
+    (segmentIndex, value2, preventSwapping = false) => {
+      if (isUpdatingFromExternal.current) return;
+      const { fromMonth, fromDay, fromYear, toMonth, toDay, toYear } = internalStateRef.current;
+      let newFromMonth = fromMonth;
+      let newFromDay = fromDay;
+      let newFromYear = fromYear;
+      let newToMonth = toMonth;
+      let newToDay = toDay;
+      let newToYear = toYear;
+      const segmentKey = fullSegmentOrder[segmentIndex];
+      if (!segmentKey) return;
+      if (segmentKey === "fromMonth") {
+        newFromMonth = value2;
+      } else if (segmentKey === "fromDay") {
+        newFromDay = value2;
+      } else if (segmentKey === "fromYear") {
+        newFromYear = value2;
+      } else if (segmentKey === "toMonth") {
+        newToMonth = value2;
+      } else if (segmentKey === "toDay") {
+        newToDay = value2;
+      } else if (segmentKey === "toYear") {
+        newToYear = value2;
+      }
+      commitDateChanges(
+        newFromMonth,
+        newFromDay,
+        newFromYear,
+        newToMonth,
+        newToDay,
+        newToYear,
+        preventSwapping
+      );
+    },
+    [commitDateChanges, fullSegmentOrder]
+  );
+  const getSegmentValue = (segIndex) => {
+    const segmentKey = fullSegmentOrder[segIndex];
+    if (!segmentKey) return null;
+    return state[segmentKey];
+  };
+  const getSegmentType = (segIndex) => {
+    const segmentKey = fullSegmentOrder[segIndex];
+    if (!segmentKey) return "day";
+    if (segmentKey.toLowerCase().includes("month")) return "month";
+    if (segmentKey.toLowerCase().includes("day")) return "day";
+    return "year";
+  };
+  const getSegmentDisplay = (segIndex) => {
+    const segmentType = getSegmentType(segIndex);
+    const maxLen = segmentType === "year" ? 4 : 2;
+    if (activeSegment === segIndex && buffer !== "") {
+      return buffer.padEnd(maxLen, "-");
+    }
+    return pad(getSegmentValue(segIndex), maxLen, true);
+  };
+  const hasAnyValue = Object.values(state).some((val) => val !== null);
+  const formattedValue = isFocused || hasAnyValue ? (() => {
+    const fromParts = segmentOrder.map((_, index) => getSegmentDisplay(index));
+    const toParts = segmentOrder.map(
+      (_, index) => getSegmentDisplay(index + segmentOrder.length)
+    );
+    return `${fromParts.join(separator)} - ${toParts.join(separator)}`;
+  })() : "";
+  useEffect(() => {
+    if (inputRef.current) {
+      const pos = segmentPositions[activeSegment];
+      if (pos) {
+        if (buffer !== "") {
+          inputRef.current.setSelectionRange(pos.start, pos.start + buffer.length);
+        } else {
+          inputRef.current.setSelectionRange(pos.start, pos.end);
+        }
+      }
+    }
+  }, [activeSegment, formattedValue, buffer, segmentPositions]);
+  const handleMouseUp = (e) => {
+    if (inputRef.current) {
+      const caretPos = inputRef.current.selectionStart;
+      if (caretPos !== null) {
+        for (let i = 0; i < segmentPositions.length; i++) {
+          const segment = segmentPositions[i];
+          if (segment) {
+            const { start, end } = segment;
+            if (caretPos >= start && caretPos <= end) {
+              e.preventDefault();
+              if (activeSegment === i) {
+                inputRef.current.setSelectionRange(start, end);
+              } else {
+                setActiveSegment(i);
+                if (buffer === "") {
+                  setBuffer("");
+                }
+                inputRef.current.setSelectionRange(start, end);
+              }
+              break;
+            }
+          }
+        }
+      }
+    }
+  };
+  const tabKeyPressedRef = useRef(false);
+  const handleKeyDown = (e) => {
+    const key = e.key;
+    if (key === "Tab") {
+      tabKeyPressedRef.current = true;
+      if (e.shiftKey && activeSegment > 0) {
+        e.preventDefault();
+        setBuffer("");
+        setActiveSegment((prev) => prev - 1);
+        return;
+      } else if (!e.shiftKey && activeSegment < segmentPositions.length - 1) {
+        e.preventDefault();
+        setBuffer("");
+        setActiveSegment((prev) => prev + 1);
+        return;
+      }
+      setBuffer("");
+      return;
+    }
+    if (key === "ArrowLeft") {
+      e.preventDefault();
+      setBuffer("");
+      setActiveSegment((prev) => prev > 0 ? prev - 1 : 0);
+      return;
+    }
+    if (key === "ArrowRight") {
+      e.preventDefault();
+      setBuffer("");
+      setActiveSegment(
+        (prev) => prev < segmentPositions.length - 1 ? prev + 1 : segmentPositions.length - 1
+      );
+      return;
+    }
+    if (key === "ArrowUp" || key === "ArrowDown") {
+      e.preventDefault();
+      setBuffer("");
+      const { fromMonth, fromDay, fromYear, toMonth, toDay, toYear } = internalStateRef.current;
+      const segmentType = getSegmentType(activeSegment);
+      if (segmentType === "month") {
+        const segmentKey = fullSegmentOrder[activeSegment];
+        const currentValue = internalStateRef.current[segmentKey] ?? 0;
+        const newMonth = key === "ArrowUp" ? Math.min(currentValue + 1, 12) : Math.max(currentValue - 1, 1);
+        if (newMonth !== currentValue) {
+          updateDatePart(activeSegment, newMonth);
+        }
+      } else if (segmentType === "day") {
+        const segmentKey = fullSegmentOrder[activeSegment];
+        const isFromDate = segmentKey?.startsWith("from");
+        const currentMonth = isFromDate ? fromMonth : toMonth;
+        const currentYear = isFromDate ? fromYear : toYear;
+        const currentValue = internalStateRef.current[segmentKey] ?? 0;
+        const maxDay = currentMonth !== null && currentYear !== null ? getMaxDaysInMonth(currentMonth, currentYear) : 31;
+        const newDay = key === "ArrowUp" ? Math.min(currentValue + 1, maxDay) : Math.max(currentValue - 1, 1);
+        if (newDay !== currentValue) {
+          updateDatePart(activeSegment, newDay);
+        }
+      } else if (segmentType === "year") {
+        const segmentKey = fullSegmentOrder[activeSegment];
+        const currentValue = internalStateRef.current[segmentKey] ?? 0;
+        const minYear = effectiveMinDate.getFullYear();
+        const maxYear = effectiveMaxDate.getFullYear();
+        const newYear = key === "ArrowUp" ? Math.min(currentValue + 1, maxYear) : Math.max(currentValue - 1, minYear);
+        if (newYear !== currentValue) {
+          updateDatePart(activeSegment, newYear);
+        }
+      }
+      return;
+    }
+    if (/^\d$/.test(key)) {
+      e.preventDefault();
+      const segmentType = getSegmentType(activeSegment);
+      const maxLen = maxLengths[activeSegment];
+      const newBuffer = buffer + key;
+      if (maxLen && newBuffer.length <= maxLen) {
+        setBuffer(newBuffer);
+        const parsed = parseInt(newBuffer, 10);
+        let validValue = parsed;
+        if (segmentType === "month") {
+          validValue = parsed === 0 ? 1 : Math.min(parsed, 12);
+        } else if (segmentType === "year") {
+          const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+          const minYear = effectiveMinDate.getFullYear();
+          const maxYear = effectiveMaxDate.getFullYear();
+          if (newBuffer.length === 4) {
+            if (parsed < minYear || parsed > maxYear) {
+              validValue = currentYear;
+            }
+          }
+        }
+        const isToDate = activeSegment >= segmentOrder.length;
+        updateDatePart(activeSegment, validValue, isToDate);
+        if (newBuffer.length === maxLen) {
+          setBuffer("");
+          if (activeSegment < segmentPositions.length - 1) {
+            setActiveSegment(activeSegment + 1);
+          }
+        }
+      }
+      return;
+    }
+  };
+  const handleChange = (e) => {
+    e.preventDefault();
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (tabKeyPressedRef.current) {
+      tabKeyPressedRef.current = false;
+      setActiveSegment(0);
+      setBuffer("");
+      const firstSegment = segmentPositions[0];
+      if (firstSegment) {
+        const { start, end } = firstSegment;
+        setTimeout(() => {
+          inputRef.current?.setSelectionRange(start, end);
+        }, 0);
+      }
+    }
+  };
+  useEffect(() => {
+    const handleDocumentKeyDown = (e) => {
+      if (e.key === "Tab") {
+        tabKeyPressedRef.current = true;
+        setTimeout(() => {
+          tabKeyPressedRef.current = false;
+        }, 100);
+      }
+    };
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleDocumentKeyDown);
+    };
+  }, []);
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (buffer) {
+      const segmentType = getSegmentType(activeSegment);
+      const parsed = parseInt(buffer, 10);
+      if (segmentType === "month") {
+        const validMonth = parsed === 0 ? 1 : Math.min(parsed, 12);
+        updateDatePart(activeSegment, validMonth);
+      } else if (segmentType === "day") {
+        const segmentKey = fullSegmentOrder[activeSegment];
+        const isFromDate = segmentKey?.startsWith("from");
+        const { fromMonth, fromDay, fromYear, toMonth, toDay, toYear } = internalStateRef.current;
+        const currentMonth = isFromDate ? fromMonth : toMonth;
+        const currentYear = isFromDate ? fromYear : toYear;
+        const maxDay = currentMonth !== null && currentYear !== null ? getMaxDaysInMonth(currentMonth, currentYear) : 31;
+        const validDay = parsed === 0 ? 1 : Math.min(parsed, maxDay);
+        updateDatePart(activeSegment, validDay);
+      } else if (segmentType === "year") {
+        const minYear = effectiveMinDate.getFullYear();
+        const maxYear = effectiveMaxDate.getFullYear();
+        const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+        const validYear = parsed >= minYear && parsed <= maxYear ? parsed : currentYear;
+        updateDatePart(activeSegment, validYear);
+      }
+      setBuffer("");
+    }
+  };
+  const handlePaste = useCallback(
+    (event) => {
+      event.preventDefault();
+      const pasteText = event.clipboardData?.getData("text")?.trim();
+      if (!pasteText) return;
+      const dateRangeRegex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})\s*-\s*(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
+      const match = pasteText.match(dateRangeRegex);
+      if (!match) {
+        return;
+      }
+      const [, fromDayStr, fromMonthStr, fromYearStr, toDayStr, toMonthStr, toYearStr] = match;
+      const fromDay = parseInt(fromDayStr, 10);
+      const fromMonth = parseInt(fromMonthStr, 10);
+      const fromYear = parseInt(fromYearStr, 10);
+      const toDay = parseInt(toDayStr, 10);
+      const toMonth = parseInt(toMonthStr, 10);
+      const toYear = parseInt(toYearStr, 10);
+      if (fromDay < 1 || fromDay > 31 || fromMonth < 1 || fromMonth > 12 || toDay < 1 || toDay > 31 || toMonth < 1 || toMonth > 12) {
+        return;
+      }
+      const minYear = effectiveMinDate.getFullYear();
+      const maxYear = effectiveMaxDate.getFullYear();
+      if (fromYear < minYear || fromYear > maxYear || toYear < minYear || toYear > maxYear) {
+        return;
+      }
+      const fromMaxDays = getMaxDaysInMonth(fromMonth, fromYear);
+      const toMaxDays = getMaxDaysInMonth(toMonth, toYear);
+      if (fromDay > fromMaxDays || toDay > toMaxDays) {
+        return;
+      }
+      const fromDate = new Date(fromYear, fromMonth - 1, fromDay);
+      const toDate = new Date(toYear, toMonth - 1, toDay);
+      if (fromDate < effectiveMinDate || fromDate > effectiveMaxDate || toDate < effectiveMinDate || toDate > effectiveMaxDate) {
+        return;
+      }
+      commitDateChanges(fromMonth, fromDay, fromYear, toMonth, toDay, toYear);
+      setBuffer("");
+      setActiveSegment(0);
+      setTimeout(() => {
+        const firstSegment = segmentPositions[0];
+        if (firstSegment && inputRef.current) {
+          inputRef.current.setSelectionRange(firstSegment.start, firstSegment.end);
+        }
+      }, 0);
+    },
+    [commitDateChanges, segmentPositions, effectiveMinDate, effectiveMaxDate]
+  );
+  const resetToFirstSegment = useCallback(() => {
+    setActiveSegment(0);
+    setBuffer("");
+    const firstSegment = segmentPositions[0];
+    if (firstSegment && inputRef.current) {
+      setTimeout(() => {
+        if (inputRef.current) {
+          const { start, end } = firstSegment;
+          inputRef.current.focus();
+          inputRef.current.setSelectionRange(start, end);
+        }
+      }, 0);
+    }
+  }, [segmentPositions]);
+  return {
+    inputProps: {
+      ref: inputRef,
+      type: "text",
+      value: formattedValue,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onMouseUp: handleMouseUp,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onPaste: handlePaste
+    },
+    resetToFirstSegment,
+    isFocused
+  };
+}
+
+export { useTypedDateRange };
+//# sourceMappingURL=use-typed-date-range.mjs.map
+//# sourceMappingURL=use-typed-date-range.mjs.map