@ostack.tech/ui 0.11.1 → 0.11.3

package/dist/ostack-ui.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { forwardRef, createContext, useContext, useCallback, useRef, useEffect, useId, useMemo, useState, memo, Fragment as Fragment$1, isValidElement, cloneElement, Children, useImperativeHandle, startTransition, useLayoutEffect as useLayoutEffect$2, useSyncExternalStore, useDeferredValue } from "react";
 import { parseKeybinding, tinykeys } from "tinykeys";
 import fromExponential from "from-exponential";
-import { isValid, isDate, addMonths, isAfter, isBefore, startOfMonth, setMonth, getYear, setYear, startOfYear, format, isSameYear, getMonth, max, min, isSameDay, lastDayOfMonth, isEqual, parseISO, parse, isWithinInterval } from "date-fns";
+import { isValid, isDate, addMonths, isBefore, startOfMonth, isAfter, setMonth, setYear, startOfYear, format, max, min, endOfMonth, isWithinInterval, lastDayOfMonth, isSameDay, isEqual, parseISO, parse } from "date-fns";
 import { createStore, useStore as useStore$1, create } from "zustand";
 import { shallow } from "zustand/shallow";
 import { numericFormatter, removeNumericFormat, NumericFormat } from "react-number-format";
@@ -8761,12 +8761,12 @@ const CalendarHeader = memo(function CalendarHeader2({
     months[0].date,
     pagedNavigation ? -months.length : -1
   );
-  const allowsPrevMonth = minAllowedDate == null || isAfter(prevMonth, minAllowedDate);
+  const allowsPrevMonth = minAllowedDate == null || !isBefore(prevMonth, startOfMonth(minAllowedDate));
   const nextMonth = addMonths(
     months[0].date,
     pagedNavigation ? months.length : 1
   );
-  const allowsNextMonth = maxAllowedDate == null || isBefore(nextMonth, maxAllowedDate);
+  const allowsNextMonth = maxAllowedDate == null || !isAfter(nextMonth, startOfMonth(maxAllowedDate));
   const handlePrevClick = useCallback(() => {
     if (allowsPrevMonth) {
       goToMonth(prevMonth);
@@ -8787,18 +8787,24 @@ const CalendarHeader = memo(function CalendarHeader2({
     }
     return months2;
   }, []);
+  const displayYear = displayDate.getFullYear();
+  const curYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const nearestCentury = curYear + 50 - (curYear + 50) % 100;
+  const minYear = minAllowedDate ? minAllowedDate.getFullYear() : Math.min(displayYear, nearestCentury - 100);
+  const maxYear = maxAllowedDate ? maxAllowedDate.getFullYear() : Math.max(displayYear, nearestCentury + 99);
   const yearDates = useMemo(() => {
-    const displayYear = getYear(displayDate);
-    const curYear = getYear(/* @__PURE__ */ new Date());
-    const nearestCentury = curYear + 50 - (curYear + 50) % 100;
-    const minYear = minAllowedDate ? getYear(minAllowedDate) : Math.min(displayYear, nearestCentury - 100);
-    const maxYear = maxAllowedDate ? getYear(maxAllowedDate) : Math.max(displayYear, nearestCentury + 99);
     const years = [];
+    if (displayYear < minYear) {
+      years.push(setYear(startOfYear(/* @__PURE__ */ new Date()), displayYear));
+    }
     for (let year = minYear; year <= maxYear; year++) {
       years.push(setYear(startOfYear(/* @__PURE__ */ new Date()), year));
     }
+    if (displayYear > maxYear) {
+      years.push(setYear(startOfYear(/* @__PURE__ */ new Date()), displayYear));
+    }
     return years;
-  }, [displayDate, minAllowedDate, maxAllowedDate]);
+  }, [displayYear, minYear, maxYear]);
   const handleMonthChange = useCallback(
     (value) => goToMonth(
       addMonths(
@@ -8867,21 +8873,36 @@ const CalendarHeader = memo(function CalendarHeader2({
       })
     }
   );
-  const monthOptions = useMemo(
-    () => monthDates.map((monthDate) => /* @__PURE__ */ jsx(
-      Option,
-      {
-        value: getMonth(monthDate),
-        disabled: minAllowedDate && maxAllowedDate && isSameYear(minAllowedDate, maxAllowedDate) && (getMonth(monthDate) < getMonth(minAllowedDate) || getMonth(monthDate) > getMonth(maxAllowedDate)),
-        children: format(monthDate, MONTH_FORMAT, { locale: locale7 })
-      },
-      getMonth(monthDate)
-    )),
-    [locale7, maxAllowedDate, minAllowedDate, monthDates]
-  );
+  const monthOptions = useMemo(() => {
+    const minMonth = minAllowedDate?.getMonth();
+    const maxMonth = maxAllowedDate?.getMonth();
+    return monthDates.map((monthDate) => {
+      const month = monthDate.getMonth();
+      return /* @__PURE__ */ jsx(
+        Option,
+        {
+          value: month,
+          disabled: minAllowedDate && minAllowedDate.getFullYear() === maxAllowedDate?.getFullYear() && (month < minMonth || month > maxMonth),
+          children: format(monthDate, MONTH_FORMAT, { locale: locale7 })
+        },
+        month
+      );
+    });
+  }, [locale7, maxAllowedDate, minAllowedDate, monthDates]);
   const yearOptions = useMemo(
-    () => yearDates.map((yearDate) => /* @__PURE__ */ jsx(Option, { value: getYear(yearDate), children: format(yearDate, YEAR_FORMAT, { locale: locale7 }) }, getYear(yearDate))),
-    [locale7, yearDates]
+    () => yearDates.map((yearDate) => {
+      const year = yearDate.getFullYear();
+      return /* @__PURE__ */ jsx(
+        Option,
+        {
+          value: year,
+          disabled: year < minYear || year > maxYear,
+          children: format(yearDate, YEAR_FORMAT, { locale: locale7 })
+        },
+        year
+      );
+    }),
+    [locale7, maxYear, minYear, yearDates]
   );
   return /* @__PURE__ */ jsxs(
     "header",
@@ -8908,7 +8929,7 @@ const CalendarHeader = memo(function CalendarHeader2({
                   monthSelectProps?.onValueChange,
                   handleMonthChange
                 ),
-                value: getMonth(displayDate),
+                value: displayDate.getMonth(),
                 children: monthOptions
               }
             ),
@@ -8926,7 +8947,7 @@ const CalendarHeader = memo(function CalendarHeader2({
                   yearSelectProps?.onValueChange,
                   handleYearChange
                 ),
-                value: getYear(displayDate),
+                value: displayDate.getFullYear(),
                 children: yearOptions
               }
             )
@@ -8981,6 +9002,7 @@ function Calendar({
   disableNavigation,
   disabled,
   modifiers,
+  apiRef,
   headerProps,
   headerLabelProps,
   previousButtonProps,
@@ -9038,15 +9060,16 @@ function Calendar({
         return normalizedValue === null ? { start: null, end: null } : isDate(normalizedValue) ? { start: normalizedValue, end: null } : Array.isArray(normalizedValue) ? normalizedValue.length === 0 ? { start: null, end: null } : { start: min(normalizedValue), end: max(normalizedValue) } : normalizedValue;
     }
   }, [normalizedValue, selectionMode]);
-  const firstSelectedDate = selectionMode === "none" ? void 0 : selectionMode === "single" ? value ?? void 0 : selectionMode === "multiple" ? value[0] : value.start ?? value.end ?? void 0;
   const [focusedRange, setFocusedRange] = useState({
     start: null,
     end: null
   });
+  minMonth = useMemo(() => toValidDate(minMonth), [minMonth]);
+  maxMonth = useMemo(() => toValidDate(maxMonth), [maxMonth]);
   const minAllowedDate = useMemo(() => {
     const minDates = [
       toValidDate(minDate),
-      toValidDate(minMonth),
+      minMonth && startOfMonth(minMonth),
       minYear != null && new Date(minYear, 0, 1)
     ].filter((d) => d);
     return minDates.length > 0 ? max(minDates) : void 0;
@@ -9054,16 +9077,70 @@ function Calendar({
   const maxAllowedDate = useMemo(() => {
     const maxDates = [
       toValidDate(maxDate),
-      toValidDate(maxMonth),
+      maxMonth && endOfMonth(maxMonth),
       maxYear != null && new Date(maxYear, 11, 31)
     ].filter((d) => d);
     return maxDates.length > 0 ? min(maxDates) : void 0;
   }, [maxDate, maxMonth, maxYear]);
-  const curMonth = startOfMonth(/* @__PURE__ */ new Date());
-  const [month, setMonth2] = useControllableState(
-    defaultMonth ?? firstSelectedDate ?? ((!minAllowedDate || !isBefore(curMonth, minAllowedDate)) && (!maxAllowedDate || !isAfter(curMonth, maxAllowedDate)) ? curMonth : minAllowedDate ?? maxAllowedDate ?? curMonth),
+  const curDateStr = (/* @__PURE__ */ new Date()).toISOString();
+  const curMonth = useMemo(
+    () => startOfMonth(new Date(curDateStr)),
+    [curDateStr]
+  );
+  const initialMonth = useMemo(() => {
+    if (controlledMonth !== void 0) {
+      return controlledMonth;
+    }
+    if (defaultMonth !== void 0) {
+      return defaultMonth;
+    }
+    const selectedMonth = selectionMode === "none" ? null : selectionMode === "single" ? value : selectionMode === "multiple" ? value[0] : selectionMode === "range-end" ? value.end ?? value.start : value.start ?? value.end;
+    if (selectedMonth != null) {
+      return selectedMonth;
+    }
+    const minAllowedMonth = minAllowedDate && startOfMonth(minAllowedDate);
+    const maxAllowedMonth = maxAllowedDate && startOfMonth(maxAllowedDate);
+    return (!minAllowedMonth || !isBefore(curMonth, minAllowedMonth)) && (!maxAllowedMonth || !isAfter(curMonth, maxAllowedMonth)) ? curMonth : minAllowedMonth ?? maxAllowedMonth ?? curMonth;
+  }, [
+    controlledMonth,
+    curMonth,
+    defaultMonth,
+    maxAllowedDate,
+    minAllowedDate,
+    selectionMode,
+    value
+  ]);
+  const [unnormalizedMonth, setMonth2] = useControllableState(
+    initialMonth,
     controlledMonth
   );
+  const month = useMemo(
+    () => toValidDate(unnormalizedMonth) ?? curMonth,
+    [curMonth, unnormalizedMonth]
+  );
+  const latest = useLatestValues({ value, month, numberOfMonths });
+  useImperativeHandle(
+    apiRef,
+    () => ({
+      getValue: () => latest.value,
+      setValue,
+      getMonth: () => latest.month,
+      setMonth: setMonth2,
+      isVisible: (date) => {
+        const validDate = toValidDate(date);
+        if (!validDate) {
+          throw new Error(`Invalid date argument: ${date.toString()}`);
+        }
+        return isWithinInterval(validDate, {
+          start: latest.month,
+          end: lastDayOfMonth(
+            addMonths(latest.month, (latest.numberOfMonths ?? 1) - 1)
+          )
+        });
+      }
+    }),
+    [latest, setMonth2, setValue]
+  );
   const handleMonthChange = useCallback(
     (date) => {
       onMonthChange?.(date);
@@ -9117,7 +9194,7 @@ function Calendar({
         }
       }
       if (modifiers2.outside) {
-        const firstDay = startOfMonth(month);
+        const firstDay = startOfMonth(unnormalizedMonth);
         const lastDay = lastDayOfMonth(addMonths(firstDay, numberOfMonths - 1));
         if (isBefore(date, firstDay)) {
           handleMonthChange(
@@ -9132,7 +9209,7 @@ function Calendar({
     },
     [
       handleMonthChange,
-      month,
+      unnormalizedMonth,
       numberOfMonths,
       onDayClick,
       onValueChange,
@@ -9225,7 +9302,6 @@ function Calendar({
           locale: locale7.dayPickerLocale,
           required,
           disabled: composedDisabled,
-          selected: firstSelectedDate,
           components: {
             MonthCaption: CalendarHeader,
             MonthGrid: CalendarMonthGrid,
@@ -9698,6 +9774,7 @@ const DateInput = forwardRef(
       open: false,
       modal: false
     });
+    const calendarApiRef = useRef(null);
     const inputRef = useRef(null);
     const clearButtonRef = useRef(null);
     const addonButtonRef = useRef(null);
@@ -9713,60 +9790,27 @@ const DateInput = forwardRef(
       },
       [onPopoverOpenChange, popoverState.open]
     );
-    const monthToDisplay = useCallback(
-      () => startOfMonth(calendarProps?.defaultMonth ?? dateValue ?? /* @__PURE__ */ new Date()),
-      [calendarProps?.defaultMonth, dateValue]
-    );
-    const [month, setMonth2] = useControllableState(
-      () => monthToDisplay(),
-      calendarProps?.month
-    );
-    const dateIsVisible = useCallback(
-      (date) => isWithinInterval(date, {
-        start: month,
-        end: lastDayOfMonth(
-          addMonths(month, (calendarProps?.numberOfMonths ?? 1) - 1)
-        )
-      }),
-      [calendarProps?.numberOfMonths, month]
-    );
-    const handleMonthChange = combineEventHandlers(
-      calendarProps?.onMonthChange,
-      setMonth2
-    );
     const handleInputChange = useCallback(
       (evt) => {
         const formattedValue2 = evt.currentTarget.value;
         const dateValue2 = parseDate(formattedValue2);
         onValueChange?.({ formattedValue: formattedValue2, dateValue: dateValue2 });
         setFormattedValue(formattedValue2);
-        if (!evt.defaultPrevented && dateValue2 && !dateIsVisible(dateValue2)) {
-          handleMonthChange(startOfMonth(dateValue2));
+        const calendarApi = calendarApiRef.current;
+        if (!evt.defaultPrevented && dateValue2 && calendarApi && !calendarApi?.isVisible(dateValue2)) {
+          const month = startOfMonth(dateValue2);
+          calendarProps?.onMonthChange?.(month);
+          calendarApi.setMonth(month);
         }
       },
-      [
-        dateIsVisible,
-        handleMonthChange,
-        onValueChange,
-        parseDate,
-        setFormattedValue
-      ]
+      [calendarProps, onValueChange, parseDate, setFormattedValue]
     );
     const handleInputFocus = useCallback(() => {
-      if (!popoverState.open) {
-        handleMonthChange(monthToDisplay());
-      }
       changePopoverState({ open: true, modal: false });
-    }, [
-      popoverState.open,
-      changePopoverState,
-      handleMonthChange,
-      monthToDisplay
-    ]);
+    }, [changePopoverState]);
     const handleAddonButtonClick = useCallback(() => {
-      handleMonthChange(monthToDisplay());
       changePopoverState({ open: true, modal: true });
-    }, [changePopoverState, handleMonthChange, monthToDisplay]);
+    }, [changePopoverState]);
     const handleCalendarValueChange = useCallback(
       (date) => {
         const formattedValue2 = formatDate(date);
@@ -9931,8 +9975,6 @@ const DateInput = forwardRef(
                 selectionMode: "single",
                 value: deferredDateValue,
                 onValueChange: handleCalendarValueChange,
-                month,
-                onMonthChange: handleMonthChange,
                 disabled: disabled || softDisabled || readOnly || calendarProps?.disabled,
                 minDate,
                 maxDate,
@@ -9940,6 +9982,7 @@ const DateInput = forwardRef(
                 maxMonth,
                 minYear,
                 maxYear,
+                apiRef: calendarApiRef,
                 monthSelectProps: {
                   ...calendarProps?.monthSelectProps,
                   popoverProps: {
@@ -10102,6 +10145,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     open: false,
     modal: false
   });
+  const calendarApiRef = useRef(null);
   const startContainerRef = useRef(null);
   const endContainerRef = useRef(null);
   const startInputRef = useRef(null);
@@ -10121,43 +10165,6 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
     },
     [onPopoverOpenChange, popoverState.open, selectionMode]
   );
-  const monthToDisplay = useCallback(
-    (input) => {
-      let toDisplay;
-      if (calendarProps?.defaultMonth) {
-        toDisplay = calendarProps.defaultMonth;
-      } else if (input === "start" && dateValue.start) {
-        toDisplay = dateValue.start;
-      } else {
-        const relevantForEnd = dateValue.end && addMonths(dateValue.end, -(calendarProps?.numberOfMonths ?? 1) + 1);
-        toDisplay = relevantForEnd ?? dateValue.start ?? /* @__PURE__ */ new Date();
-      }
-      return startOfMonth(toDisplay);
-    },
-    [
-      dateValue.end,
-      dateValue.start,
-      calendarProps?.defaultMonth,
-      calendarProps?.numberOfMonths
-    ]
-  );
-  const [month, setMonth2] = useControllableState(
-    () => monthToDisplay("start"),
-    calendarProps?.month
-  );
-  const dateIsVisible = useCallback(
-    (date) => isWithinInterval(date, {
-      start: month,
-      end: lastDayOfMonth(
-        addMonths(month, (calendarProps?.numberOfMonths ?? 1) - 1)
-      )
-    }),
-    [calendarProps?.numberOfMonths, month]
-  );
-  const handleMonthChange = combineEventHandlers(
-    calendarProps?.onMonthChange,
-    setMonth2
-  );
   const handleStartInputChange = useCallback(
     (evt) => {
       const formattedStart = evt.currentTarget.value;
@@ -10172,18 +10179,20 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
         dateValue: newDateValue
       });
       setFormattedValue(newFormattedValue);
-      if (!evt.defaultPrevented && dateStart && !dateIsVisible(dateStart)) {
-        handleMonthChange(startOfMonth(dateStart));
+      const calendarApi = calendarApiRef.current;
+      if (!evt.defaultPrevented && dateStart && calendarApi && !calendarApi.isVisible(dateStart)) {
+        const month = startOfMonth(dateStart);
+        calendarProps?.onMonthChange?.(month);
+        calendarApi.setMonth(month);
       }
     },
     [
-      dateIsVisible,
+      parseDate,
+      formattedValue.end,
       dateValue.end,
-      handleMonthChange,
       onValueChange,
-      parseDate,
       setFormattedValue,
-      formattedValue.end
+      calendarProps
     ]
   );
   const handleEndInputChange = useCallback(
@@ -10200,24 +10209,23 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
         dateValue: newDateValue
       });
       setFormattedValue(newFormattedValue);
-      if (!evt.defaultPrevented && dateEnd && !dateIsVisible(dateEnd)) {
-        handleMonthChange(
-          addMonths(
-            startOfMonth(dateEnd),
-            -(calendarProps?.numberOfMonths ?? 1) + 1
-          )
+      const calendarApi = calendarApiRef.current;
+      if (!evt.defaultPrevented && dateEnd && calendarApi && !calendarApi.isVisible(dateEnd)) {
+        const month = addMonths(
+          startOfMonth(dateEnd),
+          -(calendarProps?.numberOfMonths ?? 1) + 1
         );
+        calendarProps?.onMonthChange?.(month);
+        calendarApi.setMonth(month);
       }
     },
     [
-      dateIsVisible,
+      parseDate,
+      formattedValue.start,
       dateValue.start,
-      calendarProps?.numberOfMonths,
-      handleMonthChange,
       onValueChange,
-      parseDate,
       setFormattedValue,
-      formattedValue.start
+      calendarProps
     ]
   );
   const handleInputFocus = useCallback(
@@ -10225,19 +10233,10 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
       setFieldControlFocused(true);
       setSelectionMode(input);
       if (!evt.defaultPrevented) {
-        if (!popoverState.open) {
-          handleMonthChange(monthToDisplay(input));
-        }
         changePopoverState({ open: true, modal: false });
       }
     },
-    [
-      setFieldControlFocused,
-      popoverState.open,
-      changePopoverState,
-      handleMonthChange,
-      monthToDisplay
-    ]
+    [setFieldControlFocused, changePopoverState]
   );
   const handleClearButtonClick = useCallback(
     (ref) => () => {
@@ -10272,9 +10271,8 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
   );
   const handleAddonButtonClick = useCallback(() => {
     setSelectionMode("start");
-    handleMonthChange(monthToDisplay("start"));
     changePopoverState({ open: true, modal: true });
-  }, [handleMonthChange, monthToDisplay, changePopoverState]);
+  }, [changePopoverState]);
   const handleCalendarValueChange = useCallback(
     (range) => {
       const newFormattedValue = {
@@ -10745,8 +10743,6 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         selectionMode: `range-${selectionMode}`,
                         value: deferredDateValue,
                         onValueChange: handleCalendarValueChange,
-                        month,
-                        onMonthChange: handleMonthChange,
                         disabled: bothDisabled || bothSoftDisabled || bothReadOnly || (startDisabled || startSoftDisabled || startReadOnly) && (endDisabled || endSoftDisabled || endReadOnly) || calendarProps?.disabled,
                         minDate,
                         maxDate,
@@ -10754,6 +10750,7 @@ const DateRangeInput = forwardRef(function DateRangeInput2({
                         maxMonth,
                         minYear,
                         maxYear,
+                        apiRef: calendarApiRef,
                         monthSelectProps: {
                           ...calendarProps?.monthSelectProps,
                           popoverProps: {