@coopdigital/react 0.49.1 → 0.51.0

package/dist/node_modules/react-day-picker/dist/esm/selection/useMulti.js

@@ -0,0 +1,57 @@
+import { useControlledValue } from '../helpers/useControlledValue.js';
+
+/**
+ * Hook to manage multiple-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected dates, a function to select dates,
+ *   and a function to check if a date is selected.
+ */
+function useMulti(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (date) => {
+        return selected?.some((d) => isSameDay(d, date)) ?? false;
+    };
+    const { min, max } = props;
+    const select = (triggerDate, modifiers, e) => {
+        let newDates = [...(selected ?? [])];
+        if (isSelected(triggerDate)) {
+            if (selected?.length === min) {
+                // Min value reached, do nothing
+                return;
+            }
+            if (required && selected?.length === 1) {
+                // Required value already selected do nothing
+                return;
+            }
+            newDates = selected?.filter((d) => !isSameDay(d, triggerDate));
+        }
+        else {
+            if (selected?.length === max) {
+                // Max value reached, reset the selection to date
+                newDates = [triggerDate];
+            }
+            else {
+                // Add the date to the selection
+                newDates = [...newDates, triggerDate];
+            }
+        }
+        if (!onSelect) {
+            setSelected(newDates);
+        }
+        onSelect?.(newDates, triggerDate, modifiers, e);
+        return newDates;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useMulti };

package/dist/node_modules/react-day-picker/dist/esm/selection/useRange.js

@@ -0,0 +1,45 @@
+import { useControlledValue } from '../helpers/useControlledValue.js';
+import { rangeIncludesDate } from '../utils/rangeIncludesDate.js';
+import { addToRange } from '../utils/addToRange.js';
+import { rangeContainsModifiers } from '../utils/rangeContainsModifiers.js';
+
+/**
+ * Hook to manage range selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected range, a function to select a
+ *   range, and a function to check if a date is within the range.
+ */
+function useRange(props, dateLib) {
+    const { disabled, excludeDisabled, selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const isSelected = (date) => selected && rangeIncludesDate(selected, date, false, dateLib);
+    const select = (triggerDate, modifiers, e) => {
+        const { min, max } = props;
+        const newRange = triggerDate
+            ? addToRange(triggerDate, selected, min, max, required, dateLib)
+            : undefined;
+        if (excludeDisabled && disabled && newRange?.from && newRange.to) {
+            if (rangeContainsModifiers({ from: newRange.from, to: newRange.to }, disabled, dateLib)) {
+                // if a disabled days is found, the range is reset
+                newRange.from = triggerDate;
+                newRange.to = undefined;
+            }
+        }
+        if (!onSelect) {
+            setSelected(newRange);
+        }
+        onSelect?.(newRange, triggerDate, modifiers, e);
+        return newRange;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useRange };

package/dist/node_modules/react-day-picker/dist/esm/selection/useSingle.js

@@ -0,0 +1,44 @@
+import { useControlledValue } from '../helpers/useControlledValue.js';
+
+/**
+ * Hook to manage single-date selection in the DayPicker component.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing the selected date, a function to select a date,
+ *   and a function to check if a date is selected.
+ */
+function useSingle(props, dateLib) {
+    const { selected: initiallySelected, required, onSelect, } = props;
+    const [internallySelected, setSelected] = useControlledValue(initiallySelected, onSelect ? initiallySelected : undefined);
+    const selected = !onSelect ? internallySelected : initiallySelected;
+    const { isSameDay } = dateLib;
+    const isSelected = (compareDate) => {
+        return selected ? isSameDay(selected, compareDate) : false;
+    };
+    const select = (triggerDate, modifiers, e) => {
+        let newDate = triggerDate;
+        if (!required && selected && selected && isSameDay(triggerDate, selected)) {
+            // If the date is the same, clear the selection.
+            newDate = undefined;
+        }
+        if (!onSelect) {
+            setSelected(newDate);
+        }
+        if (required) {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        else {
+            onSelect?.(newDate, triggerDate, modifiers, e);
+        }
+        return newDate;
+    };
+    return {
+        selected,
+        select,
+        isSelected,
+    };
+}
+
+export { useSingle };

package/dist/node_modules/react-day-picker/dist/esm/useAnimation.js

@@ -0,0 +1,174 @@
+import { useRef, useLayoutEffect } from 'react';
+import { Animation } from './UI.js';
+
+const asHtmlElement = (element) => {
+    if (element instanceof HTMLElement)
+        return element;
+    return null;
+};
+const queryMonthEls = (element) => [
+    ...(element.querySelectorAll("[data-animated-month]") ?? []),
+];
+const queryMonthEl = (element) => asHtmlElement(element.querySelector("[data-animated-month]"));
+const queryCaptionEl = (element) => asHtmlElement(element.querySelector("[data-animated-caption]"));
+const queryWeeksEl = (element) => asHtmlElement(element.querySelector("[data-animated-weeks]"));
+const queryNavEl = (element) => asHtmlElement(element.querySelector("[data-animated-nav]"));
+const queryWeekdaysEl = (element) => asHtmlElement(element.querySelector("[data-animated-weekdays]"));
+/**
+ * Handles animations for transitioning between months in the DayPicker
+ * component.
+ *
+ * @private
+ * @param rootElRef - A reference to the root element of the DayPicker
+ *   component.
+ * @param enabled - Whether animations are enabled.
+ * @param options - Configuration options for the animation, including class
+ *   names, months, focused day, and the date utility library.
+ */
+function useAnimation(rootElRef, enabled, { classNames, months, focused, dateLib, }) {
+    const previousRootElSnapshotRef = useRef(null);
+    const previousMonthsRef = useRef(months);
+    const animatingRef = useRef(false);
+    useLayoutEffect(() => {
+        // get previous months before updating the previous months ref
+        const previousMonths = previousMonthsRef.current;
+        // update previous months ref for next effect trigger
+        previousMonthsRef.current = months;
+        if (!enabled ||
+            !rootElRef.current ||
+            // safety check because the ref can be set to anything by consumers
+            !(rootElRef.current instanceof HTMLElement) ||
+            // validation required for the animation to work as expected
+            months.length === 0 ||
+            previousMonths.length === 0 ||
+            months.length !== previousMonths.length) {
+            return;
+        }
+        const isSameMonth = dateLib.isSameMonth(months[0].date, previousMonths[0].date);
+        const isAfterPreviousMonth = dateLib.isAfter(months[0].date, previousMonths[0].date);
+        const captionAnimationClass = isAfterPreviousMonth
+            ? classNames[Animation.caption_after_enter]
+            : classNames[Animation.caption_before_enter];
+        const weeksAnimationClass = isAfterPreviousMonth
+            ? classNames[Animation.weeks_after_enter]
+            : classNames[Animation.weeks_before_enter];
+        // get previous root element snapshot before updating the snapshot ref
+        const previousRootElSnapshot = previousRootElSnapshotRef.current;
+        // update snapshot for next effect trigger
+        const rootElSnapshot = rootElRef.current.cloneNode(true);
+        if (rootElSnapshot instanceof HTMLElement) {
+            // if this effect is triggered while animating, we need to clean up the new root snapshot
+            // to put it in the same state as when not animating, to correctly animate the next month change
+            const currentMonthElsSnapshot = queryMonthEls(rootElSnapshot);
+            currentMonthElsSnapshot.forEach((currentMonthElSnapshot) => {
+                if (!(currentMonthElSnapshot instanceof HTMLElement))
+                    return;
+                // remove the old month snapshots from the new root snapshot
+                const previousMonthElSnapshot = queryMonthEl(currentMonthElSnapshot);
+                if (previousMonthElSnapshot &&
+                    currentMonthElSnapshot.contains(previousMonthElSnapshot)) {
+                    currentMonthElSnapshot.removeChild(previousMonthElSnapshot);
+                }
+                // remove animation classes from the new month snapshots
+                const captionEl = queryCaptionEl(currentMonthElSnapshot);
+                if (captionEl) {
+                    captionEl.classList.remove(captionAnimationClass);
+                }
+                const weeksEl = queryWeeksEl(currentMonthElSnapshot);
+                if (weeksEl) {
+                    weeksEl.classList.remove(weeksAnimationClass);
+                }
+            });
+            previousRootElSnapshotRef.current = rootElSnapshot;
+        }
+        else {
+            previousRootElSnapshotRef.current = null;
+        }
+        if (animatingRef.current ||
+            isSameMonth ||
+            // skip animation if a day is focused because it can cause issues to the animation and is better for a11y
+            focused) {
+            return;
+        }
+        const previousMonthEls = previousRootElSnapshot instanceof HTMLElement
+            ? queryMonthEls(previousRootElSnapshot)
+            : [];
+        const currentMonthEls = queryMonthEls(rootElRef.current);
+        if (currentMonthEls?.every((el) => el instanceof HTMLElement) &&
+            previousMonthEls &&
+            previousMonthEls.every((el) => el instanceof HTMLElement)) {
+            animatingRef.current = true;
+            // set isolation to isolate to isolate the stacking context during animation
+            rootElRef.current.style.isolation = "isolate";
+            // set z-index to 1 to ensure the nav is clickable over the other elements being animated
+            const navEl = queryNavEl(rootElRef.current);
+            if (navEl) {
+                navEl.style.zIndex = "1";
+            }
+            currentMonthEls.forEach((currentMonthEl, index) => {
+                const previousMonthEl = previousMonthEls[index];
+                if (!previousMonthEl) {
+                    return;
+                }
+                // animate new displayed month
+                currentMonthEl.style.position = "relative";
+                currentMonthEl.style.overflow = "hidden";
+                const captionEl = queryCaptionEl(currentMonthEl);
+                if (captionEl) {
+                    captionEl.classList.add(captionAnimationClass);
+                }
+                const weeksEl = queryWeeksEl(currentMonthEl);
+                if (weeksEl) {
+                    weeksEl.classList.add(weeksAnimationClass);
+                }
+                // animate new displayed month end
+                const cleanUp = () => {
+                    animatingRef.current = false;
+                    if (rootElRef.current) {
+                        rootElRef.current.style.isolation = "";
+                    }
+                    if (navEl) {
+                        navEl.style.zIndex = "";
+                    }
+                    if (captionEl) {
+                        captionEl.classList.remove(captionAnimationClass);
+                    }
+                    if (weeksEl) {
+                        weeksEl.classList.remove(weeksAnimationClass);
+                    }
+                    currentMonthEl.style.position = "";
+                    currentMonthEl.style.overflow = "";
+                    if (currentMonthEl.contains(previousMonthEl)) {
+                        currentMonthEl.removeChild(previousMonthEl);
+                    }
+                };
+                // animate old displayed month
+                previousMonthEl.style.pointerEvents = "none";
+                previousMonthEl.style.position = "absolute";
+                previousMonthEl.style.overflow = "hidden";
+                previousMonthEl.setAttribute("aria-hidden", "true");
+                // hide the weekdays container of the old month and only the new one
+                const previousWeekdaysEl = queryWeekdaysEl(previousMonthEl);
+                if (previousWeekdaysEl) {
+                    previousWeekdaysEl.style.opacity = "0";
+                }
+                const previousCaptionEl = queryCaptionEl(previousMonthEl);
+                if (previousCaptionEl) {
+                    previousCaptionEl.classList.add(isAfterPreviousMonth
+                        ? classNames[Animation.caption_before_exit]
+                        : classNames[Animation.caption_after_exit]);
+                    previousCaptionEl.addEventListener("animationend", cleanUp);
+                }
+                const previousWeeksEl = queryWeeksEl(previousMonthEl);
+                if (previousWeeksEl) {
+                    previousWeeksEl.classList.add(isAfterPreviousMonth
+                        ? classNames[Animation.weeks_before_exit]
+                        : classNames[Animation.weeks_after_exit]);
+                }
+                currentMonthEl.insertBefore(previousMonthEl, currentMonthEl.firstChild);
+            });
+        }
+    });
+}
+
+export { useAnimation };

package/dist/node_modules/react-day-picker/dist/esm/useCalendar.js

@@ -0,0 +1,113 @@
+import { useEffect, useMemo } from 'react';
+import { getDates } from './helpers/getDates.js';
+import { getDays } from './helpers/getDays.js';
+import { getDisplayMonths } from './helpers/getDisplayMonths.js';
+import { getInitialMonth } from './helpers/getInitialMonth.js';
+import { getMonths } from './helpers/getMonths.js';
+import { getNavMonths } from './helpers/getNavMonth.js';
+import { getNextMonth } from './helpers/getNextMonth.js';
+import { getPreviousMonth } from './helpers/getPreviousMonth.js';
+import { getWeeks } from './helpers/getWeeks.js';
+import { useControlledValue } from './helpers/useControlledValue.js';
+
+/**
+ * Provides the calendar object to work with the calendar in custom components.
+ *
+ * @private
+ * @param props - The DayPicker props related to calendar configuration.
+ * @param dateLib - The date utility library instance.
+ * @returns The calendar object containing displayed days, weeks, months, and
+ *   navigation methods.
+ */
+function useCalendar(props, dateLib) {
+    const [navStart, navEnd] = getNavMonths(props, dateLib);
+    const { startOfMonth, endOfMonth } = dateLib;
+    const initialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
+    const [firstMonth, setFirstMonth] = useControlledValue(initialMonth, 
+    // initialMonth is always computed from props.month if provided
+    props.month ? initialMonth : undefined);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: change the initial month when the time zone changes.
+    useEffect(() => {
+        const newInitialMonth = getInitialMonth(props, navStart, navEnd, dateLib);
+        setFirstMonth(newInitialMonth);
+    }, [props.timeZone]);
+    /** The months displayed in the calendar. */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to recompute only when specific props change.
+    const { months, weeks, days, previousMonth, nextMonth } = useMemo(() => {
+        const displayMonths = getDisplayMonths(firstMonth, navEnd, { numberOfMonths: props.numberOfMonths }, dateLib);
+        const dates = getDates(displayMonths, props.endMonth ? endOfMonth(props.endMonth) : undefined, {
+            ISOWeek: props.ISOWeek,
+            fixedWeeks: props.fixedWeeks,
+            broadcastCalendar: props.broadcastCalendar,
+        }, dateLib);
+        const months = getMonths(displayMonths, dates, {
+            broadcastCalendar: props.broadcastCalendar,
+            fixedWeeks: props.fixedWeeks,
+            ISOWeek: props.ISOWeek,
+            reverseMonths: props.reverseMonths,
+        }, dateLib);
+        const weeks = getWeeks(months);
+        const days = getDays(months);
+        const previousMonth = getPreviousMonth(firstMonth, navStart, props, dateLib);
+        const nextMonth = getNextMonth(firstMonth, navEnd, props, dateLib);
+        return {
+            months,
+            weeks,
+            days,
+            previousMonth,
+            nextMonth,
+        };
+    }, [
+        dateLib,
+        firstMonth.getTime(),
+        navEnd?.getTime(),
+        navStart?.getTime(),
+        props.disableNavigation,
+        props.broadcastCalendar,
+        props.endMonth?.getTime(),
+        props.fixedWeeks,
+        props.ISOWeek,
+        props.numberOfMonths,
+        props.pagedNavigation,
+        props.reverseMonths,
+    ]);
+    const { disableNavigation, onMonthChange } = props;
+    const isDayInCalendar = (day) => weeks.some((week) => week.days.some((d) => d.isEqualTo(day)));
+    const goToMonth = (date) => {
+        if (disableNavigation) {
+            return;
+        }
+        let newMonth = startOfMonth(date);
+        // if month is before start, use the first month instead
+        if (navStart && newMonth < startOfMonth(navStart)) {
+            newMonth = startOfMonth(navStart);
+        }
+        // if month is after endMonth, use the last month instead
+        if (navEnd && newMonth > startOfMonth(navEnd)) {
+            newMonth = startOfMonth(navEnd);
+        }
+        setFirstMonth(newMonth);
+        onMonthChange?.(newMonth);
+    };
+    const goToDay = (day) => {
+        // is this check necessary?
+        if (isDayInCalendar(day)) {
+            return;
+        }
+        goToMonth(day.date);
+    };
+    const calendar = {
+        months,
+        weeks,
+        days,
+        navStart,
+        navEnd,
+        previousMonth,
+        nextMonth,
+        goToMonth,
+        goToDay,
+    };
+    return calendar;
+}
+
+export { useCalendar };

package/dist/node_modules/react-day-picker/dist/esm/useDayPicker.js

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+/** @ignore */
+const dayPickerContext = createContext(undefined);
+/**
+ * Provides access to the DayPicker context, which includes properties and
+ * methods to interact with the DayPicker component. This hook must be used
+ * within a custom component.
+ *
+ * @template T - Use this type to refine the returned context type with a
+ *   specific selection mode.
+ * @returns The context to work with DayPicker.
+ * @throws {Error} If the hook is used outside of a DayPicker provider.
+ * @group Hooks
+ * @see https://daypicker.dev/guides/custom-components
+ */
+function useDayPicker() {
+    const context = useContext(dayPickerContext);
+    if (context === undefined) {
+        throw new Error("useDayPicker() must be used within a custom component.");
+    }
+    return context;
+}
+
+export { dayPickerContext, useDayPicker };

package/dist/node_modules/react-day-picker/dist/esm/useFocus.js

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { calculateFocusTarget } from './helpers/calculateFocusTarget.js';
+import { getNextFocus } from './helpers/getNextFocus.js';
+
+/**
+ * Manages focus behavior for the DayPicker component, including setting,
+ * moving, and blurring focus on calendar days.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param calendar - The calendar object containing the displayed days and
+ *   months.
+ * @param getModifiers - A function to retrieve modifiers for a given day.
+ * @param isSelected - A function to check if a date is selected.
+ * @param dateLib - The date utility library instance.
+ * @returns An object containing focus-related methods and the currently focused
+ *   day.
+ */
+function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
+    const { autoFocus } = props;
+    const [lastFocused, setLastFocused] = useState();
+    const focusTarget = calculateFocusTarget(calendar.days, getModifiers, isSelected || (() => false), lastFocused);
+    const [focusedDay, setFocused] = useState(autoFocus ? focusTarget : undefined);
+    const blur = () => {
+        setLastFocused(focusedDay);
+        setFocused(undefined);
+    };
+    const moveFocus = (moveBy, moveDir) => {
+        if (!focusedDay)
+            return;
+        const nextFocus = getNextFocus(moveBy, moveDir, focusedDay, calendar.navStart, calendar.navEnd, props, dateLib);
+        if (!nextFocus)
+            return;
+        if (props.disableNavigation) {
+            const isNextInCalendar = calendar.days.some((day) => day.isEqualTo(nextFocus));
+            if (!isNextInCalendar) {
+                return;
+            }
+        }
+        calendar.goToDay(nextFocus);
+        setFocused(nextFocus);
+    };
+    const isFocusTarget = (day) => {
+        return Boolean(focusTarget?.isEqualTo(day));
+    };
+    const useFocus = {
+        isFocusTarget,
+        setFocused,
+        focused: focusedDay,
+        blur,
+        moveFocus,
+    };
+    return useFocus;
+}
+
+export { useFocus };

package/dist/node_modules/react-day-picker/dist/esm/useSelection.js

@@ -0,0 +1,31 @@
+import { useMulti } from './selection/useMulti.js';
+import { useRange } from './selection/useRange.js';
+import { useSingle } from './selection/useSingle.js';
+
+/**
+ * Determines the appropriate selection hook to use based on the selection mode
+ * and returns the corresponding selection object.
+ *
+ * @template T - The type of DayPicker props.
+ * @param props - The DayPicker props.
+ * @param dateLib - The date utility library instance.
+ * @returns The selection object for the specified mode, or `undefined` if no
+ *   mode is set.
+ */
+function useSelection(props, dateLib) {
+    const single = useSingle(props, dateLib);
+    const multi = useMulti(props, dateLib);
+    const range = useRange(props, dateLib);
+    switch (props.mode) {
+        case "single":
+            return single;
+        case "multiple":
+            return multi;
+        case "range":
+            return range;
+        default:
+            return undefined;
+    }
+}
+
+export { useSelection };

package/dist/node_modules/react-day-picker/dist/esm/utils/addToRange.js

@@ -0,0 +1,95 @@
+import { defaultDateLib } from '../classes/DateLib.js';
+
+/**
+ * Adds a date to an existing range, considering constraints like minimum and
+ * maximum range size.
+ *
+ * @param date - The date to add to the range.
+ * @param initialRange - The initial range to which the date will be added.
+ * @param min - The minimum number of days in the range.
+ * @param max - The maximum number of days in the range.
+ * @param required - Whether the range must always include at least one date.
+ * @param dateLib - The date utility library instance.
+ * @returns The updated date range, or `undefined` if the range is cleared.
+ * @group Utilities
+ */
+function addToRange(date, initialRange, min = 0, max = 0, required = false, dateLib = defaultDateLib) {
+    const { from, to } = initialRange || {};
+    const { isSameDay, isAfter, isBefore } = dateLib;
+    let range;
+    if (!from && !to) {
+        // the range is empty, add the date
+        range = { from: date, to: min > 0 ? undefined : date };
+    }
+    else if (from && !to) {
+        // adding date to an incomplete range
+        if (isSameDay(from, date)) {
+            // adding a date equal to the start of the range
+            if (min === 0) {
+                range = { from, to: date };
+            }
+            else if (required) {
+                range = { from, to: undefined };
+            }
+            else {
+                range = undefined;
+            }
+        }
+        else if (isBefore(date, from)) {
+            // adding a date before the start of the range
+            range = { from: date, to: from };
+        }
+        else {
+            // adding a date after the start of the range
+            range = { from, to: date };
+        }
+    }
+    else if (from && to) {
+        // adding date to a complete range
+        if (isSameDay(from, date) && isSameDay(to, date)) {
+            // adding a date that is equal to both start and end of the range
+            if (required) {
+                range = { from, to };
+            }
+            else {
+                range = undefined;
+            }
+        }
+        else if (isSameDay(from, date)) {
+            // adding a date equal to the the start of the range
+            range = { from, to: min > 0 ? undefined : date };
+        }
+        else if (isSameDay(to, date)) {
+            // adding a dare equal to the end of the range
+            range = { from: date, to: min > 0 ? undefined : date };
+        }
+        else if (isBefore(date, from)) {
+            // adding a date before the start of the range
+            range = { from: date, to: to };
+        }
+        else if (isAfter(date, from)) {
+            // adding a date after the start of the range
+            range = { from, to: date };
+        }
+        else if (isAfter(date, to)) {
+            // adding a date after the end of the range
+            range = { from, to: date };
+        }
+        else {
+            throw new Error("Invalid range");
+        }
+    }
+    // check for min / max
+    if (range?.from && range?.to) {
+        const diff = dateLib.differenceInCalendarDays(range.to, range.from);
+        if (max > 0 && diff > max) {
+            range = { from: date, to: undefined };
+        }
+        else if (min > 1 && diff < min) {
+            range = { from: date, to: undefined };
+        }
+    }
+    return range;
+}
+
+export { addToRange };