shad-m 1.0.0 → 1.0.2

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

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