@swan-io/lake 2.3.1 → 2.5.0

package/src/components/DatePicker.js

@@ -0,0 +1,619 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Option } from "@swan-io/boxed";
+import dayjs from "dayjs";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { useForm } from "react-ux-form";
+import { Rifm } from "rifm";
+import { P, match } from "ts-pattern";
+import { colors, spacings } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { useFirstMountState } from "../hooks/useFirstMountState";
+import { useResponsive } from "../hooks/useResponsive";
+import { noop } from "../utils/function";
+import { isNotNullish, isNotNullishOrEmpty, isNullishOrEmpty } from "../utils/nullish";
+import { getRifmProps } from "../utils/rifm";
+import { BottomPanel } from "./BottomPanel";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
+import { Icon } from "./Icon";
+import { LakeButton } from "./LakeButton";
+import { LakeLabel } from "./LakeLabel";
+import { LakeModal } from "./LakeModal";
+import { LakeSelect } from "./LakeSelect";
+import { LakeText } from "./LakeText";
+import { LakeTextInput } from "./LakeTextInput";
+import { Popover } from "./Popover";
+import { Pressable } from "./Pressable";
+import { Separator } from "./Separator";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    label: {
+        flex: 1,
+    },
+    arrowContainer: {
+        height: 40, // input height
+    },
+    popover: {
+        padding: spacings[12],
+    },
+    popoverDesktop: {
+        padding: spacings[24],
+    },
+    rangeCalendarSide: {
+        flex: 1,
+    },
+    button: {
+        flex: 1,
+    },
+    monthSelect: {
+        width: 130,
+    },
+    yearSelect: {
+        width: 100,
+    },
+    weekRow: {
+        paddingVertical: spacings[4],
+    },
+    dayName: {
+        flex: 1,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    dayContainer: {
+        flex: 1,
+        alignItems: "center",
+    },
+    dayRangeIndicator: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: colors.current[100],
+    },
+    dayStartRangeIndicator: {
+        left: "50%",
+    },
+    dayEndRangeIndicator: {
+        right: "50%",
+    },
+    dayNumber: {
+        width: 32,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: 16,
+    },
+    dayNumberFocused: {},
+    dayNumberHover: {
+        backgroundColor: colors.current[100],
+    },
+    dayNumberPressed: {},
+    dayNumberSelected: {
+        backgroundColor: colors.current[500],
+    },
+    todayIndicator: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: 4,
+        height: 4,
+        marginHorizontal: "auto",
+        borderRadius: 2,
+        backgroundColor: colors.current[500],
+    },
+});
+const MODALE_MOBILE_THRESHOLD = 600;
+const DATE_PICKER_MOBILE_THRESHOLD = 400;
+const DATE_RANGE_PICKER_THRESHOLD = 800;
+const NB_DAYS_IN_WEEK = 7;
+const weekDayIndex = {
+    sunday: 0,
+    monday: 1,
+    tuesday: 2,
+    wednesday: 3,
+    thursday: 4,
+    friday: 5,
+    saturday: 6,
+};
+const rifmDateProps = getRifmProps({
+    accept: "numeric",
+    charMap: { 2: "/", 4: "/" },
+    maxLength: 8,
+});
+const parseDate = (value, format) => {
+    const date = dayjs.utc(value, format);
+    return date.isValid()
+        ? Option.Some({ day: date.date(), month: date.month(), year: date.year() })
+        : Option.None();
+};
+const parseRange = (value, format) => {
+    return {
+        start: parseDate(value.start, format),
+        end: parseDate(value.end, format),
+    };
+};
+const stringifyDate = (value, format) => {
+    const date = dayjs.utc().year(value.year).month(value.month).date(value.day);
+    return date.format(format);
+};
+export const validateDateRangeOrder = (value, format) => {
+    const range = parseRange(value, format);
+    if (range.start.isNone() || range.end.isNone()) {
+        return true;
+    }
+    if (isDateAfter(range.start.value, range.end.value)) {
+        return false;
+    }
+    return true;
+};
+const range = (start, end) => {
+    const result = [];
+    for (let i = start; i <= end; i++) {
+        result.push(i);
+    }
+    return result;
+};
+const groupEvery = (input, groupSize) => {
+    const result = [];
+    const nbGroups = Math.ceil(input.length / groupSize);
+    for (let i = 0; i < nbGroups; i++) {
+        result.push(input.slice(i * groupSize, (i + 1) * groupSize));
+    }
+    return result;
+};
+const padEnd = (input, length, value) => {
+    const itemsToAppend = new Array(length - input.length).fill(value);
+    return [...input, ...itemsToAppend];
+};
+export const isTodayOrFutureDate = (date) => {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yesterdayDate = {
+        day: yesterday.getDate(),
+        month: yesterday.getMonth(),
+        year: yesterday.getFullYear(),
+    };
+    return isDateAfter(date, yesterdayDate);
+};
+export const isDateInRange = (minDate, maxDate) => (date) => {
+    const min = {
+        day: minDate.getDate(),
+        month: minDate.getMonth(),
+        year: minDate.getFullYear(),
+    };
+    const max = {
+        day: maxDate.getDate(),
+        month: maxDate.getMonth(),
+        year: maxDate.getFullYear(),
+    };
+    return isDateAfter(date, min) && isDateBefore(date, max);
+};
+const isDateToday = (date) => {
+    const today = new Date();
+    return (date.day === today.getDate() &&
+        date.month === today.getMonth() &&
+        date.year === today.getFullYear());
+};
+const getMonthDates = (month, year) => {
+    const aggregate = (acc, date) => {
+        const dateDay = date.getDate();
+        const dateMonth = date.getMonth();
+        const dateYear = date.getFullYear();
+        if (date.getMonth() !== month) {
+            return acc;
+        }
+        return aggregate([...acc, { day: dateDay, month: dateMonth, year: dateYear }], new Date(year, month, dateDay + 1));
+    };
+    return aggregate([], new Date(year, month, 1));
+};
+const getMonthWeeks = (month, year, firstWeekDay) => {
+    const firstWeekDayIndex = weekDayIndex[firstWeekDay];
+    const monthFirstWeekDay = new Date(year, month, 1).getDay();
+    const monthDates = getMonthDates(month, year).map(date => Option.Some(date));
+    const nbDaysToPrepend = monthFirstWeekDay >= firstWeekDayIndex
+        ? monthFirstWeekDay - firstWeekDayIndex
+        : NB_DAYS_IN_WEEK - firstWeekDayIndex + monthFirstWeekDay;
+    for (let i = 0; i < nbDaysToPrepend; i++) {
+        monthDates.unshift(Option.None());
+    }
+    const weeks = groupEvery(monthDates, NB_DAYS_IN_WEEK);
+    const lastWeek = weeks[weeks.length - 1];
+    if (!lastWeek) {
+        return weeks;
+    }
+    weeks[weeks.length - 1] = padEnd(lastWeek, NB_DAYS_IN_WEEK, Option.None());
+    return weeks;
+};
+const getWeekDayNames = (dayNames, firstWeekDay = "sunday") => {
+    const firstWeekDayIndex = weekDayIndex[firstWeekDay];
+    const firstWeekDayNames = dayNames.slice(firstWeekDayIndex);
+    const lastWeekDayNames = dayNames.slice(0, firstWeekDayIndex);
+    // @ts-expect-error
+    return [...firstWeekDayNames, ...lastWeekDayNames];
+};
+const isDateEquals = (date1, date2) => {
+    return date1.day === date2.day && date1.month === date2.month && date1.year === date2.year;
+};
+const isDateBefore = (date1, date2) => {
+    return (date1.year < date2.year ||
+        (date1.year === date2.year && date1.month < date2.month) ||
+        (date1.year === date2.year && date1.month === date2.month && date1.day < date2.day));
+};
+const isDateAfter = (date1, date2) => {
+    return (date1.year > date2.year ||
+        (date1.year === date2.year && date1.month > date2.month) ||
+        (date1.year === date2.year && date1.month === date2.month && date1.day > date2.day));
+};
+const isDateRange = (value) => {
+    return match(value)
+        .with({ start: P._, end: P._ }, () => true)
+        .otherwise(() => false);
+};
+const isSelectedDate = (date, value) => {
+    return match(value)
+        .with(Option.pattern.Some(P.select()), value => isDateEquals(value, date))
+        .with(Option.pattern.None, () => false)
+        .with(P.when(isDateRange), ({ start, end }) => {
+        // if range is invalid, we don't display any selection
+        if (start.isSome() && end.isSome() && isDateAfter(start.value, end.value)) {
+            return false;
+        }
+        return (start.match({
+            Some: start => isDateEquals(start, date),
+            None: () => false,
+        }) ||
+            end.match({
+                Some: end => isDateEquals(end, date),
+                None: () => false,
+            }));
+    })
+        .exhaustive();
+};
+const getRangeIndicatorType = (date, value) => {
+    if (!isDateRange(value)) {
+        return "none";
+    }
+    const { start, end } = value;
+    if (start.isNone() || end.isNone()) {
+        return "none";
+    }
+    const startDate = start.value;
+    const endDate = end.value;
+    // no interval indicator if range is invalid
+    if (isDateAfter(startDate, endDate)) {
+        return "none";
+    }
+    if (isDateEquals(startDate, endDate)) {
+        return "none";
+    }
+    if (isDateEquals(date, startDate)) {
+        return "start";
+    }
+    if (isDateEquals(date, endDate)) {
+        return "end";
+    }
+    if (isDateAfter(date, startDate) && isDateBefore(date, endDate)) {
+        return "between";
+    }
+    return "none";
+};
+const computeDateDistanceInDays = (date1, date2) => {
+    const date1Date = new Date(date1.year, date1.month, date1.day);
+    const date2Date = new Date(date2.year, date2.month, date2.day);
+    const diffInMs = Math.abs(date2Date.getTime() - date1Date.getTime());
+    return Math.round(diffInMs / (1000 * 3600 * 24));
+};
+const getNewDateRange = (currentRange, selectedDate) => {
+    const { start, end } = currentRange;
+    // Handle initial selection
+    if (start.isNone()) {
+        return { start: Option.Some(selectedDate), end: Option.None() };
+    }
+    if (end.isNone()) {
+        if (isDateAfter(selectedDate, start.value)) {
+            return { start, end: Option.Some(selectedDate) };
+        }
+        return { start: Option.Some(selectedDate), end: currentRange.start };
+    }
+    // Handle selection outside of the current range
+    if (isDateBefore(selectedDate, start.value)) {
+        return { start: Option.Some(selectedDate), end: currentRange.end };
+    }
+    if (isDateAfter(selectedDate, end.value)) {
+        return { start: currentRange.start, end: Option.Some(selectedDate) };
+    }
+    // We change the closest date to the new date
+    const startDistance = computeDateDistanceInDays(start.value, selectedDate);
+    const endDistance = computeDateDistanceInDays(end.value, selectedDate);
+    if (startDistance < endDistance) {
+        return { start: Option.Some(selectedDate), end: currentRange.end };
+    }
+    return { start: currentRange.start, end: Option.Some(selectedDate) };
+};
+const getTodayYearMonth = () => ({
+    month: new Date().getMonth(),
+    year: new Date().getFullYear(),
+});
+const getYearMonth = (value, format) => {
+    if (isNullishOrEmpty(value)) {
+        return Option.None();
+    }
+    return parseDate(value, format);
+};
+const isYearMonthBefore = (date1, date2) => {
+    return date1.year < date2.year || (date1.year === date2.year && date1.month < date2.month);
+};
+const isYearMonthEquals = (date1, date2) => {
+    return date1.year === date2.year && date1.month === date2.month;
+};
+const minYearMonth = (date1, date2) => {
+    return isYearMonthBefore(date1, date2) ? date1 : date2;
+};
+const maxYearMonth = (date1, date2) => {
+    return isYearMonthBefore(date1, date2) ? date2 : date1;
+};
+const incrementYearMonth = ({ month, year }) => {
+    if (month === 11) {
+        return { month: 0, year: year + 1 };
+    }
+    return { month: month + 1, year };
+};
+const decrementYearMonth = ({ month, year }) => {
+    if (month === 0) {
+        return { month: 11, year: year - 1 };
+    }
+    return { month: month - 1, year };
+};
+const YearMonthSelect = ({ monthNames, value, arrowsPosition = "right", hideArrows, minValue, maxValue, onChange, }) => {
+    const monthItems = useMemo(() => monthNames.map((name, index) => ({ name, value: index })), [monthNames]);
+    const yearItems = useMemo(() => range(value.year - 5, value.year + 5).map(year => ({
+        name: year.toString(),
+        value: year,
+    })), [value.year]);
+    const selectMonth = (month) => {
+        onChange({ year: value.year, month });
+    };
+    const selectYear = (year) => {
+        onChange({ year, month: value.month });
+    };
+    const setPreviousMonth = () => {
+        onChange(decrementYearMonth(value));
+    };
+    const setNextMonth = () => {
+        onChange(incrementYearMonth(value));
+    };
+    const isPreviousDisabled = !minValue
+        ? false
+        : value.year <= minValue.year && value.month <= minValue.month;
+    const isNextDisabled = !maxValue
+        ? false
+        : value.year >= maxValue.year && value.month >= maxValue.month;
+    return (_jsxs(Box, { direction: "row", alignItems: "center", children: [arrowsPosition === "around" && hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth }), _jsx(Fill, { minWidth: 12 })] })), _jsx(LakeSelect, { items: monthItems, value: value.month, onValueChange: selectMonth, mode: "borderless", size: "small", hideErrors: true, style: styles.monthSelect }), _jsx(LakeSelect, { items: yearItems, value: value.year, onValueChange: selectYear, mode: "borderless", size: "small", hideErrors: true, style: styles.yearSelect }), hideArrows !== true && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 12 }), arrowsPosition === "right" && (_jsxs(_Fragment, { children: [_jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-left-filled", disabled: isPreviousDisabled, onPress: setPreviousMonth }), _jsx(Space, { width: 12 })] })), _jsx(LakeButton, { size: "small", mode: "tertiary", icon: "arrow-right-filled", disabled: isNextDisabled, onPress: setNextMonth })] }))] }));
+};
+const MonthCalendar = ({ month, year, value, firstWeekDay, weekDayNames, isSelectable, onChange, }) => {
+    const dayNames = useMemo(() => getWeekDayNames(weekDayNames, firstWeekDay), [weekDayNames, firstWeekDay]);
+    const weeks = useMemo(() => getMonthWeeks(month, year, firstWeekDay), [month, year, firstWeekDay]);
+    return (_jsxs(View, { children: [_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: dayNames.map(dayName => (_jsx(View, { style: styles.dayName, children: _jsx(LakeText, { variant: "medium", color: colors.gray[600], children: dayName.substring(0, 1) }) }, dayName))) }), weeks.map((week, weekIndex) => (_jsx(Box, { direction: "row", alignItems: "center", style: styles.weekRow, children: week.map((date, dateIndex) => {
+                    const isDisabled = date.match({
+                        Some: date => isNotNullish(isSelectable) && !isSelectable(date),
+                        None: () => true,
+                    });
+                    const isSelected = date.match({
+                        Some: date => isSelectedDate(date, value),
+                        None: () => false,
+                    });
+                    const isToday = date.match({
+                        Some: date => isDateToday(date),
+                        None: () => false,
+                    });
+                    const rangeIndicator = date.match({
+                        Some: date => getRangeIndicatorType(date, value),
+                        None: () => "none",
+                    });
+                    return (_jsxs(View, { style: styles.dayContainer, children: [rangeIndicator !== "none" && (_jsx(View, { style: [
+                                    styles.dayRangeIndicator,
+                                    rangeIndicator === "start" && styles.dayStartRangeIndicator,
+                                    rangeIndicator === "end" && styles.dayEndRangeIndicator,
+                                ] })), _jsxs(Pressable, { disabled: isDisabled, onPress: () => date.match({ Some: onChange, None: noop }), style: ({ focused, hovered, pressed }) => [
+                                    styles.dayNumber,
+                                    focused && styles.dayNumberFocused,
+                                    hovered && styles.dayNumberHover,
+                                    pressed && styles.dayNumberPressed,
+                                    isSelected && styles.dayNumberSelected,
+                                ], children: [_jsx(LakeText, { variant: "smallRegular", color: isSelected
+                                            ? colors.current.contrast
+                                            : isDisabled
+                                                ? colors.gray[300]
+                                                : isToday
+                                                    ? colors.current[500]
+                                                    : colors.gray[900], children: date.match({ Some: ({ day }) => day.toString(), None: () => " " }) }), isToday && _jsx(View, { style: styles.todayIndicator })] })] }, dateIndex));
+                }) }, weekIndex)))] }));
+};
+const DatePickerPopoverContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, isSelectable, onChange, }) => {
+    const [monthYear, setMonthYear] = useState(() => getYearMonth(value, format).getWithDefault(getTodayYearMonth()));
+    // Automatically change displayed year and month when user change the value with text input
+    useEffect(() => {
+        const yearMonth = getYearMonth(value, format);
+        if (yearMonth.isSome()) {
+            setMonthYear(yearMonth.value);
+        }
+    }, [value, format]);
+    const handleChange = useCallback((date) => {
+        const formatted = stringifyDate(date, format);
+        onChange(formatted);
+    }, [format, onChange]);
+    return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: monthYear, hideArrows: !desktop, onChange: setMonthYear }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: monthYear.month, year: monthYear.year, value: isNotNullishOrEmpty(value) ? parseDate(value, format) : Option.None(), firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleChange })] }));
+};
+export const DatePicker = ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
+    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
+    const ref = useRef(null);
+    const [isOpened, { open, close }] = useDisclosure(false);
+    const popoverId = useId();
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", alignItems: "end", children: _jsx(LakeLabel, { label: label, style: styles.label, actions: _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open }), render: id => (_jsx(Rifm, { value: value ?? "", onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onChange: onChange, ariaExpanded: isOpened })) })) }) }), _jsx(Popover, { id: popoverId, role: "dialog", onDismiss: close, referenceRef: ref, visible: isOpened, children: _jsx(View, { style: desktop ? styles.popoverDesktop : styles.popover, children: _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange }) }) })] }));
+};
+export const DatePickerModal = ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }) => {
+    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
+    const { Field, submitForm, setFieldValue, resetField } = useForm({
+        date: {
+            initialValue: value ?? "",
+            validate,
+        },
+    });
+    const handleCancel = () => {
+        setFieldValue("date", value ?? "");
+        onDissmiss();
+    };
+    const handleConfirm = () => {
+        submitForm(({ date }) => {
+            if (isNotNullishOrEmpty(date)) {
+                onChange(date);
+            }
+            onDissmiss();
+        });
+    };
+    useEffect(() => {
+        if (!visible) {
+            resetField("date");
+        }
+    }, [visible, resetField]);
+    return (_jsxs(DateModal, { visible: visible, maxWidth: 500, onPressClose: handleCancel, children: [_jsx(Field, { name: "date", children: ({ ref, value, error, onBlur, onChange }) => (_jsxs(_Fragment, { children: [_jsx(LakeLabel, { label: label, render: id => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, error: error, onBlur: onBlur, onChange: onChange })) })) }), _jsx(DatePickerPopoverContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, isSelectable: isSelectable, onChange: onChange })] })) }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
+};
+const DateModal = ({ children, visible, maxWidth, withCloseButton, onPressClose, }) => {
+    const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
+    if (desktop) {
+        return (_jsx(LakeModal, { visible: visible, maxWidth: maxWidth, onPressClose: withCloseButton === true ? onPressClose : undefined, children: children }));
+    }
+    return (_jsx(BottomPanel, { visible: visible, onPressClose: onPressClose, children: _jsx(View, { style: styles.popover, children: children }) }));
+};
+const DateRangePickerModalContent = ({ value, format, firstWeekDay, monthNames, weekDayNames, desktop, displayTwoCalendar, isSelectable, onChange, }) => {
+    const isFirstMount = useFirstMountState();
+    const [periods, setPeriods] = useState(() => {
+        const startYearMonth = getYearMonth(value.start, format).getWithDefault(getTodayYearMonth());
+        const endYearMonth = getYearMonth(value.end, format).getWithDefault(incrementYearMonth(startYearMonth));
+        return {
+            start: startYearMonth,
+            end: isYearMonthEquals(startYearMonth, endYearMonth)
+                ? incrementYearMonth(startYearMonth)
+                : endYearMonth,
+        };
+    });
+    // Automatically change displayed year and month when start date changes
+    useEffect(() => {
+        if (isFirstMount) {
+            return;
+        }
+        const startYearMonth = getYearMonth(value.start, format);
+        if (startYearMonth.isSome()) {
+            setPeriods(periods => {
+                const isStartAndEndSameMonth = isYearMonthEquals(startYearMonth.value, periods.end);
+                if (isStartAndEndSameMonth) {
+                    return {
+                        start: decrementYearMonth(periods.end),
+                        end: periods.end,
+                    };
+                }
+                // change end period if it becomes before start period
+                const endPeriod = maxYearMonth(periods.end, incrementYearMonth(startYearMonth.value));
+                return {
+                    start: startYearMonth.value,
+                    end: endPeriod,
+                };
+            });
+        }
+    }, [isFirstMount, value.start, format]);
+    // Automatically change displayed year and month when end date changes
+    useEffect(() => {
+        if (isFirstMount) {
+            return;
+        }
+        const endYearMonth = getYearMonth(value.end, format);
+        if (endYearMonth.isSome()) {
+            setPeriods(periods => {
+                const isStartAndEndSameMonth = isYearMonthEquals(periods.start, endYearMonth.value);
+                if (isStartAndEndSameMonth) {
+                    return {
+                        start: periods.start,
+                        end: incrementYearMonth(periods.start),
+                    };
+                }
+                // change start period if it becomes after end period
+                const startPeriod = minYearMonth(periods.start, decrementYearMonth(endYearMonth.value));
+                return {
+                    start: startPeriod,
+                    end: endYearMonth.value,
+                };
+            });
+        }
+    }, [isFirstMount, value.end, format]);
+    const setStartPeriod = useCallback((yearMonth) => {
+        setPeriods(periods => ({
+            start: yearMonth,
+            end: maxYearMonth(periods.end, incrementYearMonth(yearMonth)),
+        }));
+    }, []);
+    const setEndPeriod = useCallback((yearMonth) => {
+        setPeriods(periods => ({
+            start: minYearMonth(periods.start, decrementYearMonth(yearMonth)),
+            end: yearMonth,
+        }));
+    }, []);
+    const dateRange = useMemo(() => parseRange(value, format), [value, format]);
+    const handleSelectDate = (date) => {
+        const newRange = getNewDateRange(dateRange, date);
+        const newValue = {
+            start: newRange.start.match({
+                Some: date => stringifyDate(date, format),
+                None: () => value.start,
+            }),
+            end: newRange.end.match({
+                Some: date => stringifyDate(date, format),
+                None: () => value.end,
+            }),
+        };
+        onChange(newValue);
+    };
+    if (!displayTwoCalendar) {
+        return (_jsxs(_Fragment, { children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, hideArrows: !desktop, onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }));
+    }
+    return (_jsx(View, { children: _jsxs(Box, { direction: "row", alignItems: "start", children: [_jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.start, maxValue: decrementYearMonth(periods.end), arrowsPosition: "around", onChange: setStartPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.start.month, year: periods.start.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] }), _jsx(Separator, { space: 24, horizontal: true }), _jsxs(View, { style: styles.rangeCalendarSide, children: [_jsx(YearMonthSelect, { monthNames: monthNames, value: periods.end, minValue: incrementYearMonth(periods.start), arrowsPosition: "around", onChange: setEndPeriod }), _jsx(Space, { height: 24 }), _jsx(MonthCalendar, { month: periods.end.month, year: periods.end.year, value: dateRange, firstWeekDay: firstWeekDay, weekDayNames: weekDayNames, isSelectable: isSelectable, onChange: handleSelectDate })] })] }) }));
+};
+export const DateRangePicker = ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }) => {
+    const { desktop } = useResponsive(DATE_PICKER_MOBILE_THRESHOLD);
+    const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
+    const ref = useRef(null);
+    const [isOpened, { open, close }] = useDisclosure(false);
+    const handleStartChange = useCallback((start) => {
+        onChange({ start, end: value.end });
+    }, [value, onChange]);
+    const handleEndChange = useCallback((end) => {
+        onChange({ start: value.start, end });
+    }, [value, onChange]);
+    return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { ref: ref, id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: value.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true, ariaExpanded: isOpened })) })) }), _jsx(Space, { width: 12 }), _jsx(LakeButton, { mode: "secondary", icon: "calendar-ltr-regular", size: "small", onPress: open })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " }), _jsx(DateModal, { visible: isOpened, maxWidth: 900, withCloseButton: true, onPressClose: close, children: _jsx(DateRangePickerModalContent, { value: value, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: onChange }) })] }));
+};
+export const DateRangePickerModal = ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }) => {
+    const { desktop } = useResponsive(MODALE_MOBILE_THRESHOLD);
+    const { desktop: displayTwoCalendar } = useResponsive(DATE_RANGE_PICKER_THRESHOLD);
+    const [localeValue, setLocaleValue] = useState(value);
+    useEffect(() => {
+        setLocaleValue(value);
+    }, [value]);
+    const handleStartChange = (start) => {
+        setLocaleValue({ start, end: localeValue.end });
+    };
+    const handleEndChange = (end) => {
+        setLocaleValue({ start: localeValue.start, end });
+    };
+    const handleCancel = () => {
+        setLocaleValue(value);
+        onDissmiss();
+    };
+    const handleConfirm = () => {
+        onChange(localeValue);
+        onDissmiss();
+    };
+    return (_jsxs(DateModal, { visible: visible, maxWidth: 900, onPressClose: handleCancel, children: [_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.start, onChange: handleStartChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: id => (_jsx(Rifm, { value: localeValue.end, onChange: handleEndChange, ...rifmDateProps, children: ({ value, onChange }) => (_jsx(LakeTextInput, { id: id, placeholder: format, value: value, onChange: onChange, error: error, hideErrors: true })) })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })] }), _jsx(DateRangePickerModalContent, { value: localeValue, format: format, firstWeekDay: firstWeekDay, monthNames: monthNames, weekDayNames: weekDayNames, desktop: desktop, displayTwoCalendar: displayTwoCalendar, isSelectable: isSelectable, onChange: setLocaleValue }), _jsx(Space, { height: 24 }), _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeButton, { mode: "secondary", size: "small", onPress: handleCancel, style: styles.button, children: cancelLabel }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { color: "current", size: "small", onPress: handleConfirm, style: styles.button, children: confirmLabel })] })] }));
+};

package/src/components/Filters.d.ts

@@ -1,16 +1,15 @@
-import { ComponentProps } from "react";
 import { ValidatorResult } from "react-ux-form";
-import { Rifm } from "rifm";
 import { Simplify } from "type-fest";
+import { DateFormat, DatePickerDate, MonthNames, WeekDayNames } from "./DatePicker";
 type Item<T> = {
     label: string;
     value: T;
 };
-type RifmProps = Required<Pick<ComponentProps<typeof Rifm>, "accept" | "append" | "format" | "mask">>;
 export type FilterCheckboxDef<T> = {
     type: "checkbox";
     label: string;
     items: Item<T>[];
+    width?: number;
     submitText: string;
     checkAllLabel?: string;
 };
@@ -18,15 +17,19 @@ export type FilterRadioDef<T> = {
     type: "radio";
     label: string;
     items: Item<T>[];
+    width?: number;
 };
-export type FilterDateDef = {
+export type FilterDateDef<Values = unknown> = {
     type: "date";
     label: string;
+    monthNames: MonthNames;
+    dayNames: WeekDayNames;
+    cancelText: string;
     submitText: string;
     noValueText: string;
-    dateFormat: string;
-    rifmProps: RifmProps;
-    validate?: (value: string) => ValidatorResult;
+    dateFormat: DateFormat;
+    isSelectable?: (date: DatePickerDate, filters: Values) => boolean;
+    validate?: (value: string, filters: Values) => ValidatorResult;
 };
 export type FilterInputDef = {
     type: "input";