reshaped 2.6.4 → 2.7.1

package/components/Calendar/Calendar.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const Calendar: (props: T.Props) => React.JSX.Element;
+export default Calendar;

package/components/Calendar/Calendar.js

@@ -0,0 +1,9 @@
+import React from "react";
+import CalendarControlled from "./CalendarControlled.js";
+import CalendarUncontrolled from "./CalendarUncontrolled.js";
+const Calendar = (props) => {
+    if (props.value !== undefined)
+        return React.createElement(CalendarControlled, Object.assign({}, props));
+    return React.createElement(CalendarUncontrolled, Object.assign({}, props));
+};
+export default Calendar;

package/components/Calendar/Calendar.module.css

@@ -0,0 +1 @@
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}.row{border-top:2px solid transparent}[dir=rtl] .control{transform:scaleX(-1)}.cell-button{padding:var(--rs-unit-x2);text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:border-radius,background-color,box-shadow}.cell-button[disabled],.cell-button[disabled]:hover{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}.cell{padding:0}.cell .cell-button:hover,.cell--in-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.cell--active-end .cell-button,.cell--active-end:hover .cell-button,.cell--active-start .cell-button,.cell--active-start:hover .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell--active-start .cell-button,.cell:first-child .cell-button{border-end-start-radius:var(--rs-unit-radius-small);border-start-start-radius:var(--rs-unit-radius-small)}.cell--active-end .cell-button,.cell--active-start+.cell:hover:not(.cell--in-range) .cell-button,.cell--in-range+.cell:hover:not(.cell--in-range) .cell-button,.cell:last-child .cell-button{border-end-end-radius:var(--rs-unit-radius-small);border-start-end-radius:var(--rs-unit-radius-small)}.cell--active-single+.cell:hover .cell-button,.cell:hover:not(.cell--in-range,.cell--in-range+.cell:hover,.cell--active-start+.cell:hover) .cell-button{border-radius:var(--rs-unit-radius-small)}

package/components/Calendar/Calendar.types.d.ts

@@ -0,0 +1,102 @@
+export type SelectionMode = "date" | "month";
+export type BaseProps = {
+    defaultMonth?: Date;
+    min?: Date;
+    max?: Date;
+    firstWeekDay?: number;
+    renderWeekDay?: (args: {
+        weekDay: number;
+        date: Date;
+    }) => string;
+    renderSelectedMonthLabel?: (args: {
+        date: Date;
+    }) => string;
+    renderMonthLabel?: (args: {
+        month: number;
+        date: Date;
+    }) => string;
+    previousMonthAriaLabel?: string;
+    nextMonthAriaLabel?: string;
+    previousYearAriaLabel?: string;
+    nextYearAriaLabel?: string;
+    monthSelectionAriaLabel?: string;
+    renderDateAriaLabel?: (args: {
+        date: Date;
+    }) => string;
+    renderMonthAriaLabel?: (args: {
+        month: number;
+    }) => string;
+};
+export type SingleValue = Date;
+export type RangeValue = {
+    start: Date | null;
+    end: Date | null;
+};
+export type ControlledSingleProps = {
+    range?: false;
+    value: SingleValue | null;
+    defaultValue?: never;
+    onChange?: (args: {
+        value: SingleValue;
+    }) => void;
+};
+export type UncontrolledSingleProps = {
+    range?: false;
+    value?: never;
+    defaultValue?: SingleValue;
+    onChange?: (args: {
+        value: SingleValue;
+    }) => void;
+};
+export type ControlledRangeProps = {
+    range: true;
+    value: RangeValue;
+    defaultValue?: never;
+    onChange?: (args: {
+        value: RangeValue;
+    }) => void;
+};
+export type UncontrolledRangeProps = {
+    range: true;
+    value?: never;
+    defaultValue?: RangeValue;
+    onChange?: (args: {
+        value: RangeValue;
+    }) => void;
+};
+export type UncontrolledProps = UncontrolledSingleProps | UncontrolledRangeProps;
+export type ControlledProps = ControlledSingleProps | ControlledRangeProps;
+export type SingleProps = ControlledSingleProps | UncontrolledSingleProps;
+export type RangeProps = ControlledRangeProps | UncontrolledRangeProps;
+export type Props = (SingleProps | RangeProps) & BaseProps;
+export type MonthProps = {
+    date: Date;
+    hoveredDate: Date | null;
+    onDateHover: (date: Date) => void;
+    onDateHoverEnd: (date: Date) => void;
+} & Pick<BaseProps, "max" | "min" | "firstWeekDay" | "renderMonthLabel" | "renderWeekDay" | "renderSelectedMonthLabel" | "renderDateAriaLabel"> & Pick<ControlledProps, "value" | "onChange" | "range">;
+export type YearProps = {
+    monthDate: Date;
+    onMonthClick: (month: number) => void;
+} & Pick<BaseProps, "renderMonthLabel" | "min" | "max" | "renderMonthAriaLabel">;
+export type DateProps = {
+    date: Date | null;
+    disabled?: boolean;
+    focusable?: boolean;
+    startValue: Date | null;
+    endValue: Date | null;
+    isActiveStart: boolean;
+    isActiveEnd: boolean;
+    renderAriaLabel?: MonthProps["renderDateAriaLabel"];
+} & Pick<MonthProps, "hoveredDate" | "onDateHover" | "onDateHoverEnd" | "onChange" | "range" | "min" | "max">;
+export type ControlsProps = {
+    selectionMode: SelectionMode;
+    onMonthTitleClick: () => void;
+    monthTitleRef: React.MutableRefObject<HTMLButtonElement | null>;
+    monthDate: Date;
+    renderSelectedMonthLabel?: BaseProps["renderSelectedMonthLabel"];
+    isFirstMonth?: boolean;
+    isLastMonth?: boolean;
+    onNextClick: () => void;
+    onPreviousClick: () => void;
+} & Pick<BaseProps, "nextMonthAriaLabel" | "nextYearAriaLabel" | "previousMonthAriaLabel" | "previousYearAriaLabel" | "monthSelectionAriaLabel">;

package/components/Calendar/Calendar.types.js

@@ -0,0 +1 @@
+export {};

package/components/Calendar/Calendar.utils.d.ts

@@ -0,0 +1,43 @@
+import type * as T from "./Calendar.types";
+/**
+ * Return the ISO date format without the timezones adjustemnts
+ */
+export declare const getLocalISODate: (args: {
+    date: Date;
+}) => string;
+/**
+ * Return an array of US weekday names for the calendar
+ */
+export declare const getWeekdayNames: (args: {
+    firstWeekDay?: number;
+    renderWeekDay: T.BaseProps["renderWeekDay"];
+}) => string[];
+/**
+ * Return an array of all month names
+ */
+export declare const getMonthNames: (args: {
+    renderMonthLabel: T.BaseProps["renderMonthLabel"];
+}) => string[];
+/**
+ * Return an array of weeks based on the month passed to the function
+ */
+export declare const getMonthWeeks: (args: {
+    date: Date;
+    firstWeekDay?: number;
+}) => (Date | null)[][];
+export declare const getFocusableDates: (rootEl: HTMLElement | null) => HTMLButtonElement[];
+export declare const changeDate: (date: Date, delta: number) => Date;
+export declare const setMonthTo: (date: Date, value: number) => Date;
+export declare const setMonthToPrevious: (date: Date) => Date;
+export declare const setMonthToNext: (date: Date) => Date;
+export declare const setYearTo: (date: Date, value: number) => Date;
+export declare const setYearToPrevious: (date: Date) => Date;
+export declare const setYearToNext: (date: Date) => Date;
+export declare const applyNavigationBounds: (args: {
+    date: Date;
+    min?: Date;
+    max?: Date;
+}) => {
+    isFirstMonth: boolean | undefined;
+    isLastMonth: boolean | undefined;
+};

package/components/Calendar/Calendar.utils.js

@@ -0,0 +1,110 @@
+const DAYS_IN_WEEK = 7;
+const FIRST_WEEK_DAY = 1;
+/**
+ * Return the ISO date format without the timezones adjustemnts
+ */
+export const getLocalISODate = (args) => {
+    const { date } = args;
+    return [
+        date.getFullYear(),
+        (date.getMonth() + 1).toString().padStart(2, "0"),
+        date.getDate().toString().padStart(2, "0"),
+    ].join("-");
+};
+const getNormalizedDay = (args) => {
+    const { date, firstWeekDay = FIRST_WEEK_DAY } = args;
+    const day = date.getDay();
+    return day < firstWeekDay ? DAYS_IN_WEEK - day - firstWeekDay : day - firstWeekDay;
+};
+/**
+ * Return an array of US weekday names for the calendar
+ */
+export const getWeekdayNames = (args) => {
+    const { firstWeekDay = FIRST_WEEK_DAY, renderWeekDay } = args;
+    const baseDate = new Date(2021, 1, firstWeekDay); // Starting from Sunday + firstWeekDay
+    const weekdays = [];
+    for (let i = firstWeekDay; i < firstWeekDay + DAYS_IN_WEEK; i++) {
+        const weekday = renderWeekDay
+            ? renderWeekDay({ weekDay: i, date: baseDate })
+            : baseDate.toLocaleDateString("en-US", { weekday: "short" });
+        weekdays.push(weekday.slice(0, 2));
+        baseDate.setDate(baseDate.getDate() + 1);
+    }
+    return weekdays;
+};
+/**
+ * Return an array of all month names
+ */
+export const getMonthNames = (args) => {
+    const { renderMonthLabel } = args;
+    return new Array(12).fill(null).map((_, i) => {
+        const date = new Date(0, i);
+        return renderMonthLabel
+            ? renderMonthLabel({ month: i, date })
+            : date.toLocaleString("default", { month: "short" });
+    });
+};
+/**
+ * Return an array of weeks based on the month passed to the function
+ */
+export const getMonthWeeks = (args) => {
+    const { date, firstWeekDay } = args;
+    const month = date.getMonth();
+    const year = date.getFullYear();
+    const weeks = [];
+    const currentDate = new Date(year, month, 1);
+    // Fill in the days if month starts in the middle of the week
+    const firstDay = getNormalizedDay({ date: currentDate, firstWeekDay });
+    if (firstDay !== 0)
+        weeks.push(new Array(firstDay).fill(null));
+    while (month === currentDate.getMonth()) {
+        const day = getNormalizedDay({ date: currentDate, firstWeekDay });
+        if (day === 0 || !weeks.length)
+            weeks.push([]);
+        weeks[weeks.length - 1].push(new Date(currentDate));
+        currentDate.setDate(currentDate.getDate() + 1);
+    }
+    // Fill in the days if month ends in the middle of the week
+    const lastDay = getNormalizedDay({ date: currentDate, firstWeekDay });
+    if (lastDay !== 0)
+        weeks[weeks.length - 1].push(...new Array(7 - lastDay).fill(null));
+    return weeks;
+};
+export const getFocusableDates = (rootEl) => {
+    return ((rootEl === null || rootEl === void 0 ? void 0 : rootEl.querySelectorAll("[data-rs-date]")) || []);
+};
+export const changeDate = (date, delta) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + delta);
+export const setMonthTo = (date, value) => {
+    const resultDate = new Date(date);
+    resultDate.setMonth(value);
+    return resultDate;
+};
+export const setMonthToPrevious = (date) => {
+    return setMonthTo(date, date.getMonth() - 1);
+};
+export const setMonthToNext = (date) => {
+    return setMonthTo(date, date.getMonth() + 1);
+};
+export const setYearTo = (date, value) => {
+    const resultDate = new Date(date);
+    resultDate.setFullYear(value);
+    return resultDate;
+};
+export const setYearToPrevious = (date) => {
+    return setYearTo(date, date.getFullYear() - 1);
+};
+export const setYearToNext = (date) => {
+    return setYearTo(date, date.getFullYear() + 1);
+};
+export const applyNavigationBounds = (args) => {
+    const { date, min, max } = args;
+    const currentMonth = date.getMonth();
+    const currentYear = date.getFullYear();
+    const prevMonthLastDate = new Date(currentYear, currentMonth, 0);
+    const nextMonthFirstDate = setMonthToNext(date);
+    nextMonthFirstDate.setDate(0);
+    return {
+        isFirstMonth: min && min > prevMonthLastDate,
+        isLastMonth: max && max < nextMonthFirstDate,
+    };
+};

package/components/Calendar/CalendarControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarControlled: (props: T.ControlledProps & T.BaseProps) => React.JSX.Element;
+export default CalendarControlled;

package/components/Calendar/CalendarControlled.js

@@ -0,0 +1,72 @@
+"use client";
+import React from "react";
+import View from "../View/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { setMonthToPrevious, setMonthToNext, setMonthTo, setYearToNext, setYearToPrevious, applyNavigationBounds, } from "./Calendar.utils.js";
+import useCalendarKeyboardNavigation from "./useCalendarKeyboardNavigation.js";
+import CalendarMonth from "./CalendarMonth.js";
+import CalendarYear from "./CalendarYear.js";
+import CalendarControls from "./CalendarControls.js";
+const CalendarControlled = (props) => {
+    const { value, onChange, defaultMonth, min, max, range, firstWeekDay, renderMonthLabel, renderSelectedMonthLabel, renderWeekDay, previousMonthAriaLabel, previousYearAriaLabel, nextMonthAriaLabel, nextYearAriaLabel, monthSelectionAriaLabel, renderMonthAriaLabel, renderDateAriaLabel, } = props;
+    const [selectionMode, setSelectionMode] = React.useState("date");
+    const [monthDate, setMonthDate] = React.useState(defaultMonth || new Date());
+    const [hoveredDate, setHoveredDate] = React.useState(null);
+    const monthTitleRef = React.useRef(null);
+    const prevSelectionModeRef = React.useRef(selectionMode);
+    const bounds = applyNavigationBounds({ date: monthDate, min, max });
+    const selectionRootRef = React.useRef(null);
+    const handlePreviousClick = () => {
+        if (selectionMode === "month") {
+            setMonthDate((prev) => setYearToPrevious(prev));
+            return;
+        }
+        setMonthDate((prev) => setMonthToPrevious(prev));
+    };
+    const handleNextClick = () => {
+        if (selectionMode === "month") {
+            setMonthDate((prev) => setYearToNext(prev));
+            return;
+        }
+        setMonthDate((prev) => setMonthToNext(prev));
+    };
+    const handleMonthTitleClick = () => {
+        setSelectionMode("month");
+    };
+    const handleMonthClick = (i) => {
+        setMonthDate((prev) => setMonthTo(prev, i));
+        setSelectionMode("date");
+    };
+    const handleDateHover = (date) => {
+        setHoveredDate(date);
+    };
+    const handleDateHoverEnd = (date) => {
+        if (hoveredDate && +hoveredDate === +date)
+            setHoveredDate(null);
+    };
+    React.useEffect(() => {
+        if (selectionMode === "date" && selectionMode !== prevSelectionModeRef.current) {
+            onNextFrame(() => {
+                var _a;
+                (_a = monthTitleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        prevSelectionModeRef.current = selectionMode;
+    }, [selectionMode]);
+    useCalendarKeyboardNavigation({
+        monthDate,
+        rootRef: selectionRootRef,
+        changeToNextMonth: handleNextClick,
+        changeToPreviousMonth: handlePreviousClick,
+        // Each row has 7 days in date selection and 3 months in month
+        verticalDelta: selectionMode === "date" ? 7 : 3,
+        min,
+        max,
+    });
+    return (React.createElement(View, { gap: 2 },
+        React.createElement(CalendarControls, { renderSelectedMonthLabel: renderSelectedMonthLabel, monthDate: monthDate, selectionMode: selectionMode, isFirstMonth: bounds.isFirstMonth, isLastMonth: bounds.isLastMonth, monthTitleRef: monthTitleRef, onMonthTitleClick: handleMonthTitleClick, onNextClick: handleNextClick, onPreviousClick: handlePreviousClick, previousMonthAriaLabel: previousMonthAriaLabel, previousYearAriaLabel: previousYearAriaLabel, nextMonthAriaLabel: nextMonthAriaLabel, nextYearAriaLabel: nextYearAriaLabel, monthSelectionAriaLabel: monthSelectionAriaLabel }),
+        React.createElement(View.Item, { attributes: { ref: selectionRootRef } },
+            selectionMode === "date" && (React.createElement(CalendarMonth, { date: monthDate, value: value, onChange: onChange, min: min, max: max, range: range, firstWeekDay: firstWeekDay, hoveredDate: hoveredDate, onDateHover: handleDateHover, onDateHoverEnd: handleDateHoverEnd, renderWeekDay: renderWeekDay, renderDateAriaLabel: renderDateAriaLabel })),
+            selectionMode === "month" && (React.createElement(CalendarYear, { monthDate: monthDate, onMonthClick: handleMonthClick, renderMonthLabel: renderMonthLabel, renderMonthAriaLabel: renderMonthAriaLabel, min: min, max: max })))));
+};
+export default CalendarControlled;

package/components/Calendar/CalendarControls.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarControls: (props: T.ControlsProps) => React.JSX.Element;
+export default CalendarControls;

package/components/Calendar/CalendarControls.js

@@ -0,0 +1,56 @@
+import React from "react";
+import Button from "../Button/index.js";
+import View from "../View/index.js";
+import Hidden from "../Hidden/index.js";
+import Text from "../Text/index.js";
+import HiddenVisually from "../HiddenVisually/index.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import s from "./Calendar.module.css";
+const CalendarControls = (props) => {
+    const { selectionMode, onMonthTitleClick, monthTitleRef, monthDate, renderSelectedMonthLabel, isFirstMonth, isLastMonth, onNextClick, onPreviousClick, monthSelectionAriaLabel = "Select a month", previousMonthAriaLabel = "Previous month", previousYearAriaLabel = "Previous year", nextMonthAriaLabel = "Next month", nextYearAriaLabel = "Next year", } = props;
+    const prevRef = React.useRef(null);
+    const nextRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!isFirstMonth)
+            return;
+        if (document.activeElement !== prevRef.current)
+            return;
+        const targetEl = nextRef.current || monthTitleRef.current;
+        onNextFrame(() => {
+            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
+        });
+    }, [isFirstMonth, monthTitleRef]);
+    React.useEffect(() => {
+        if (!isLastMonth)
+            return;
+        if (document.activeElement !== nextRef.current)
+            return;
+        const targetEl = prevRef.current || monthTitleRef.current;
+        onNextFrame(() => {
+            targetEl === null || targetEl === void 0 ? void 0 : targetEl.focus();
+        });
+    }, [isLastMonth, monthTitleRef]);
+    return (React.createElement(View, { direction: "row", gap: 2, align: "center" },
+        React.createElement(Hidden, { visibility: true, hide: isFirstMonth },
+            React.createElement("div", { className: s.control },
+                React.createElement(Button, { variant: "ghost", icon: IconChevronLeft, onClick: onPreviousClick, attributes: {
+                        ref: prevRef,
+                        "aria-label": selectionMode === "date" ? previousMonthAriaLabel : previousYearAriaLabel,
+                    } }))),
+        React.createElement(View.Item, { grow: true },
+            selectionMode === "date" && (React.createElement(Button, { fullWidth: true, variant: "ghost", onClick: onMonthTitleClick, attributes: { ref: monthTitleRef } },
+                renderSelectedMonthLabel
+                    ? renderSelectedMonthLabel({ date: monthDate })
+                    : monthDate.toLocaleDateString("en-US", { month: "long", year: "numeric" }),
+                React.createElement(HiddenVisually, null, monthSelectionAriaLabel))),
+            selectionMode === "month" && (React.createElement(Text, { align: "center", weight: "medium" }, monthDate.toLocaleDateString("en-US", { year: "numeric" })))),
+        React.createElement(Hidden, { visibility: true, hide: isLastMonth },
+            React.createElement("div", { className: s.control },
+                React.createElement(Button, { variant: "ghost", icon: IconChevronRight, onClick: onNextClick, attributes: {
+                        ref: nextRef,
+                        "aria-label": selectionMode === "date" ? nextMonthAriaLabel : nextYearAriaLabel,
+                    } })))));
+};
+export default CalendarControls;

package/components/Calendar/CalendarDate.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarDate: (props: T.DateProps) => React.JSX.Element;
+export default CalendarDate;

package/components/Calendar/CalendarDate.js

@@ -0,0 +1,58 @@
+"use client";
+import React from "react";
+import Actionable from "../Actionable/index.js";
+import { classNames } from "../../utilities/helpers.js";
+import { getLocalISODate } from "./Calendar.utils.js";
+import s from "./Calendar.module.css";
+const CalendarDate = (props) => {
+    const { date, startValue, endValue, isActiveStart, isActiveEnd, disabled, focusable, onChange, range, hoveredDate, onDateHover, onDateHoverEnd, renderAriaLabel, } = props;
+    if (!date)
+        return React.createElement("td", { className: s.cell, "aria-hidden": "true" });
+    const inRange = startValue &&
+        startValue < date &&
+        ((endValue && endValue > date) || (hoveredDate && !endValue && hoveredDate > date));
+    const dateClassNames = classNames([
+        s.cell,
+        !range && isActiveStart && s["cell--active-single"],
+        isActiveStart && s["cell--active-start"],
+        (isActiveEnd ||
+            (!endValue && isActiveStart && !(hoveredDate && startValue && hoveredDate > startValue))) &&
+            s["cell--active-end"],
+        inRange && s["cell--in-range"],
+    ]);
+    const handleClick = () => {
+        if (!range) {
+            onChange === null || onChange === void 0 ? void 0 : onChange({ value: date });
+            return;
+        }
+        const bothDatesSelected = startValue && endValue;
+        const noneDatesSelected = !startValue && !endValue;
+        const selectingBeforeStart = startValue && date < startValue;
+        const selectingStart = bothDatesSelected || noneDatesSelected || selectingBeforeStart;
+        const start = selectingStart ? date : startValue;
+        const end = !selectingStart ? date : null;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ value: { start, end } });
+    };
+    const handleMouseEnter = () => {
+        onDateHover(date);
+    };
+    const handleMouseLeave = () => {
+        onDateHoverEnd(date);
+    };
+    return (React.createElement("td", { className: dateClassNames, role: disabled ? "presentation" : "gridcell" },
+        React.createElement(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: handleClick, attributes: {
+                role: "checkbox",
+                tabIndex: focusable ? 0 : -1,
+                "aria-hidden": disabled,
+                "aria-label": renderAriaLabel
+                    ? renderAriaLabel({ date })
+                    : date.toLocaleDateString("en-us", { month: "long", day: "numeric", weekday: "long" }),
+                "aria-checked": isActiveStart || isActiveEnd,
+                "data-rs-date": getLocalISODate({ date }),
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                onFocus: handleMouseEnter,
+                onBlur: handleMouseLeave,
+            } }, date.getDate())));
+};
+export default CalendarDate;

package/components/Calendar/CalendarMonth.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarMonth: (props: T.MonthProps) => React.JSX.Element;
+export default CalendarMonth;

package/components/Calendar/CalendarMonth.js

@@ -0,0 +1,54 @@
+"use client";
+import React from "react";
+import { getMonthWeeks, getWeekdayNames, getLocalISODate } from "./Calendar.utils.js";
+import CalendarDate from "./CalendarDate.js";
+import s from "./Calendar.module.css";
+const CalendarMonth = (props) => {
+    const { date, value, onChange, min, max, range, firstWeekDay, hoveredDate, onDateHover, onDateHoverEnd, renderWeekDay, renderDateAriaLabel, } = props;
+    let foundFocusableDate = false;
+    const month = date.getMonth();
+    const weeks = getMonthWeeks({ date, firstWeekDay });
+    const weekdayNames = getWeekdayNames({ firstWeekDay, renderWeekDay });
+    return (React.createElement("table", { className: s.selection, role: "grid" },
+        React.createElement("thead", { "aria-hidden": "true" },
+            React.createElement("tr", null, weekdayNames.map((dayName) => (React.createElement("th", { className: s.weekday, key: dayName, scope: "col" }, dayName))))),
+        React.createElement("tbody", null, weeks.map((week) => {
+            var _a;
+            const key = [month, (_a = week[0]) === null || _a === void 0 ? void 0 : _a.getDate()].filter(Boolean).join("-");
+            return (React.createElement("tr", { key: key, className: s.row }, week.map((date, index) => {
+                const disabled = !!date && ((min && date < min) || (max && date > max));
+                const month = date === null || date === void 0 ? void 0 : date.getMonth();
+                const today = new Date();
+                const isoToday = getLocalISODate({ date: today });
+                const startValue = value && "start" in value ? value.start : value;
+                const endValue = value && "end" in value ? value.end : value;
+                const isoDate = date && getLocalISODate({ date });
+                const isoStartValue = startValue && getLocalISODate({ date: startValue });
+                const isoEndValue = endValue && getLocalISODate({ date: endValue });
+                const isActiveStart = !!isoDate && !!isoStartValue && isoDate === isoStartValue;
+                const isActiveEnd = !!isoDate && !!isoEndValue && isoDate === isoEndValue;
+                /**
+                 * Decide if date has to be focusable with Tab (only one date should be)
+                 * 1. If there is a selected value - it's focusable
+                 * 2. Otherwise, today's date is focusable
+                 * 3. Otherwise, first non-disabled date is focusable
+                 */
+                let focusable = false;
+                if (!foundFocusableDate && date) {
+                    if (!!startValue && startValue.getMonth() === (date === null || date === void 0 ? void 0 : date.getMonth())) {
+                        focusable = +startValue === +date;
+                    }
+                    else if (isoDate && month === today.getMonth()) {
+                        focusable = isoDate >= isoToday && !disabled;
+                    }
+                    else {
+                        focusable = !disabled;
+                    }
+                }
+                if (focusable)
+                    foundFocusableDate = true;
+                return (React.createElement(CalendarDate, { date: date, key: index, disabled: disabled, range: range, focusable: focusable, startValue: startValue, endValue: endValue, isActiveStart: isActiveStart, isActiveEnd: isActiveEnd, onChange: onChange, hoveredDate: hoveredDate, onDateHover: onDateHover, onDateHoverEnd: onDateHoverEnd, renderAriaLabel: renderDateAriaLabel }));
+            })));
+        }))));
+};
+export default CalendarMonth;

package/components/Calendar/CalendarUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarUncontrolled: (props: T.UncontrolledProps & T.BaseProps) => React.JSX.Element;
+export default CalendarUncontrolled;

package/components/Calendar/CalendarUncontrolled.js

@@ -0,0 +1,29 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import CalendarControlled from "./CalendarControlled.js";
+const CalendarUncontrolled = (props) => {
+    const { onChange, defaultValue, range } = props, controlledProps = __rest(props, ["onChange", "defaultValue", "range"]);
+    const [value, setValue] = React.useState(defaultValue || null);
+    if (range) {
+        return (React.createElement(CalendarControlled, Object.assign({ range: true }, controlledProps, { value: value, onChange: (args) => {
+                setValue(args.value);
+                onChange === null || onChange === void 0 ? void 0 : onChange(args);
+            } })));
+    }
+    return (React.createElement(CalendarControlled, Object.assign({}, controlledProps, { value: value, onChange: (args) => {
+            setValue(args.value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(args);
+        } })));
+};
+export default CalendarUncontrolled;

package/components/Calendar/CalendarYear.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Calendar.types";
+declare const CalendarYear: (props: T.YearProps) => React.JSX.Element;
+export default CalendarYear;

package/components/Calendar/CalendarYear.js

@@ -0,0 +1,45 @@
+import React from "react";
+import Actionable from "../Actionable/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { getMonthNames } from "./Calendar.utils.js";
+import s from "./Calendar.module.css";
+const MONTHS_PER_ROW = 3;
+const CalendarYear = (props) => {
+    const { renderMonthLabel, renderMonthAriaLabel, monthDate, min, max, onMonthClick } = props;
+    const rootRef = React.useRef(null);
+    const monthNames = getMonthNames({ renderMonthLabel });
+    const rows = [];
+    for (let i = 0; i < monthNames.length; i += MONTHS_PER_ROW) {
+        const chunk = monthNames.slice(i, i + MONTHS_PER_ROW);
+        rows.push(chunk);
+    }
+    React.useEffect(() => {
+        var _a;
+        const focusableEl = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[tabIndex="0"]');
+        // Waitinf for key press events to finish before focusing the month
+        // To avoid it trigger the month click
+        onNextFrame(() => {
+            focusableEl === null || focusableEl === void 0 ? void 0 : focusableEl.focus();
+        });
+    }, []);
+    return (React.createElement("table", { ref: rootRef, role: "grid", className: s.selection },
+        React.createElement("tbody", null, rows.map((row, i) => (React.createElement("tr", { key: i, className: s.row }, row.map((name, j) => {
+            const monthIndex = i * MONTHS_PER_ROW + j;
+            const date = new Date(monthDate.getFullYear(), monthIndex);
+            const isOutsideMinBound = min && min.getFullYear() >= date.getFullYear() && min.getMonth() > date.getMonth();
+            const isOutsideMaxBound = max && max.getFullYear() <= date.getFullYear() && max.getMonth() < date.getMonth();
+            const disabled = isOutsideMaxBound || isOutsideMinBound;
+            return (React.createElement("td", { key: name, role: disabled ? "presentation" : "gridcell", className: s.cell },
+                React.createElement(Actionable, { fullWidth: true, insetFocus: true, className: s["cell-button"], disabled: disabled, onClick: () => onMonthClick(monthIndex), attributes: {
+                        tabIndex: monthIndex === monthDate.getMonth() ? 0 : -1,
+                        "aria-hidden": disabled,
+                        "aria-label": renderMonthAriaLabel
+                            ? renderMonthAriaLabel({ month: monthIndex })
+                            : name,
+                        "data-rs-date": `${monthDate.getFullYear()}-${(monthIndex + 1)
+                            .toString()
+                            .padStart(2, "0")}`,
+                    } }, name)));
+        })))))));
+};
+export default CalendarYear;

package/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Calendar";
+export type { Props as CalendarProps } from "./Calendar.types";

package/components/Calendar/index.js

@@ -0,0 +1 @@
+export { default } from "./Calendar.js";

package/components/Calendar/tests/Calendar.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: () => React.JSX.Element;
+export declare const selection: () => React.JSX.Element;
+export declare const boundaries: () => React.JSX.Element;
+export declare const translation: () => React.JSX.Element;