@moneyforward/mfui-components 2.48.1

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/computeDataForStyling.js

@@ -0,0 +1,75 @@
+import { getTotalDaysInMonth } from './dateUtilities';
+/**
+ * Compute data for styling the calendar view
+ *
+ * @param viewingValue - The value that is currently viewing
+ *
+ * @returns The data for styling the calendar view
+ */
+export function computeDataForStyling(viewingValue) {
+    const year = viewingValue.getFullYear();
+    const month = viewingValue.getMonth();
+    const firstDate = viewingValue.getDate(); // of course, it's 1, but for readability
+    const firstDateDay = viewingValue.getDay();
+    const datesHasBorderTopLeftRadius = new Set();
+    // First date of the month has borderTopLeftRadius
+    datesHasBorderTopLeftRadius.add(1);
+    // First Monday of the month has borderTopLeftRadius
+    // Because Monday is 1, so we will use 8 to represent Monday and % 7 to get the correct date
+    const firstMonday = firstDate + ((8 - firstDateDay) % 7);
+    datesHasBorderTopLeftRadius.add(firstMonday);
+    const datesHasBorderTopRightRadius = new Set();
+    // First Sunday of the month has borderTopRightRadius
+    const firstSunday = viewingValue.getDate() + ((7 - firstDateDay) % 7);
+    datesHasBorderTopRightRadius.add(firstSunday);
+    const lastDate = new Date(year, month + 1, 0);
+    const datesHasBorderBottomLeftRadius = new Set();
+    // Last Monday of the month has borderBottomLeftRadius
+    const lastMonday = lastDate.getDate() - ((lastDate.getDay() + 6) % 7);
+    datesHasBorderBottomLeftRadius.add(lastMonday);
+    const datesHasBorderBottomRightRadius = new Set();
+    // Last date of the month has borderBottomRightRadius
+    datesHasBorderBottomRightRadius.add(lastDate.getDate());
+    // Last Sunday of the month has borderBottomRightRadius
+    const lastSunday = lastDate.getDate() - lastDate.getDay();
+    datesHasBorderBottomRightRadius.add(lastSunday);
+    const datesHasBorderRight = new Set();
+    // All Sundays have borderRight
+    Array(getTotalDaysInMonth(month, year))
+        .fill(0)
+        .forEach((_date, dateIndex) => {
+        const day = new Date(year, month, dateIndex + 1).getDay();
+        if (day === 0) {
+            datesHasBorderRight.add(dateIndex + 1);
+        }
+    });
+    // The Last date of the month has borderRight
+    datesHasBorderRight.add(lastDate.getDate());
+    const datesHasBorderBottom = new Set();
+    // Last 7 days of viewing month has border bottom
+    Array(7)
+        .fill(0)
+        .forEach((_, index) => {
+        datesHasBorderBottom.add(lastDate.getDate() - index);
+    });
+    const lastWeekDates = new Set();
+    // Last dates of the last week of the viewing month
+    // Simply by adding the last date, then subtracting the index, util it's Monday
+    for (let i = 0; i < 7; i++) {
+        const date = lastDate.getDate() - i;
+        if (new Date(year, month, date).getDay() === 1) {
+            lastWeekDates.add(date);
+            break;
+        }
+        lastWeekDates.add(date);
+    }
+    return {
+        datesHasBorderTopLeftRadius,
+        datesHasBorderTopRightRadius,
+        datesHasBorderBottomLeftRadius,
+        datesHasBorderBottomRightRadius,
+        datesHasBorderRight,
+        datesHasBorderBottom,
+        lastWeekDates,
+    };
+}

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/dateUtilities.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Get the total days in a month
+ *
+ * @param month - The month number (0-11)
+ *
+ * @param year - The year number
+ *
+ * @returns The total days in the month
+ */
+export declare function getTotalDaysInMonth(month: number, year: number): number;
+/**
+ * Check if two dates are the same
+ *
+ * @param dateA - The first date
+ *
+ * @param dateB - The second date
+ *
+ * @returns true if the dates are the same, false otherwise
+ */
+export declare function checkIsSameDate(dateA: Date, dateB: Date): boolean;

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/dateUtilities.js

@@ -0,0 +1,26 @@
+/**
+ * Get the total days in a month
+ *
+ * @param month - The month number (0-11)
+ *
+ * @param year - The year number
+ *
+ * @returns The total days in the month
+ */
+export function getTotalDaysInMonth(month, year) {
+    return new Date(year, month + 1, 0).getDate();
+}
+/**
+ * Check if two dates are the same
+ *
+ * @param dateA - The first date
+ *
+ * @param dateB - The second date
+ *
+ * @returns true if the dates are the same, false otherwise
+ */
+export function checkIsSameDate(dateA, dateB) {
+    return (dateA.getDate() === dateB.getDate() &&
+        dateA.getMonth() === dateB.getMonth() &&
+        dateA.getFullYear() === dateB.getFullYear());
+}

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Separate the viewing value into dates
+ * To make sure it always start with Monday, it will fill the blank by null value
+ *
+ * @param viewingValue - The date that user is viewing
+ *
+ * @returns The chunked dates as the example
+ *
+ * @example
+ * [
+ *  null, 1, 2, 3, 4, 5, 6,
+ *  7, 8, 9, 10, 11, 12, 13,
+ *  14, 15, 16, 17, 18, 19, 20,
+ *  21, 22, 23, 24, 25, 26, 27,
+ *  28, 29, 30, 31, null, null, null
+ * ]
+ */
+export declare function useDates(viewingValue: Date): (number | null)[];

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/useDates.js

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { getTotalDaysInMonth } from './dateUtilities';
+/**
+ * Separate the viewing value into dates
+ * To make sure it always start with Monday, it will fill the blank by null value
+ *
+ * @param viewingValue - The date that user is viewing
+ *
+ * @returns The chunked dates as the example
+ *
+ * @example
+ * [
+ *  null, 1, 2, 3, 4, 5, 6,
+ *  7, 8, 9, 10, 11, 12, 13,
+ *  14, 15, 16, 17, 18, 19, 20,
+ *  21, 22, 23, 24, 25, 26, 27,
+ *  28, 29, 30, 31, null, null, null
+ * ]
+ */
+export function useDates(viewingValue) {
+    return useMemo(() => {
+        // Count empty dates at start
+        const emptyDatesStart = Array(viewingValue.getDay() === 0 ? 6 : viewingValue.getDay() - 1).fill(null);
+        // Count empty dates at the end
+        const emptyDatesEnd = Array(7 - ((viewingValue.getDay() + getTotalDaysInMonth(viewingValue.getMonth(), viewingValue.getFullYear())) % 7)).fill(null);
+        // List up dates of viewing value
+        const dates = Array(getTotalDaysInMonth(viewingValue.getMonth(), viewingValue.getFullYear()))
+            .fill(0)
+            .map((_, dateIndex) => dateIndex + 1);
+        return [...emptyDatesStart, ...dates, ...emptyDatesEnd];
+    }, [viewingValue]);
+}

package/dist/esm/src/DateTimeSelection/shared/CalendarLocale/CalendarLocaleContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type BasePickerProps } from '../BasePicker/BasePicker.types';
+export type CalendarLocaleContextValue = BasePickerProps['calendarLocale'];
+export declare function CalendarLocaleProvider({ value, children, }: {
+    value: CalendarLocaleContextValue;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useCalendarLocale(): CalendarLocaleContextValue;

package/dist/esm/src/DateTimeSelection/shared/CalendarLocale/CalendarLocaleContext.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const CalendarLocaleContext = createContext('ja');
+export function CalendarLocaleProvider({ value, children, }) {
+    return _jsx(CalendarLocaleContext.Provider, { value: value, children: children });
+}
+export function useCalendarLocale() {
+    return useContext(CalendarLocaleContext);
+}

package/dist/esm/src/DateTimeSelection/shared/DateCell/DateCell.d.ts

@@ -0,0 +1,11 @@
+import { type DateCellProps } from './DateCell.types';
+/**
+ * DateCell is a button that represents a date in the Calendar component.
+ *
+ * The appearance of the DateCell is determined by the selected, today, and disabled props.
+ * The borderRadiusCorner, hasRightBorder, hasBottomBorder, and isLastWeekDate props are calculated in the Calendar component and passed down to the DateCell component.
+ * This component extends the props of `<button>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+export declare function DateCell({ date, selected, inRange, disabled, hasBorderTopLeftRadius, hasBorderTopRightRadius, hasBorderBottomLeftRadius, hasBorderBottomRightRadius, hasRightBorder, hasBottomBorder, isLastWeekDate, shouldBeTabbable, onKeyDown, ...rest }: DateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/shared/DateCell/DateCell.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import { cx } from '../../../../styled-system/css';
+import { FocusIndicator } from '../../../FocusIndicator';
+import { Typography } from '../../../Typography';
+import { dateCellSlotRecipe } from '../../../../styled-system/recipes';
+/**
+ * DateCell is a button that represents a date in the Calendar component.
+ *
+ * The appearance of the DateCell is determined by the selected, today, and disabled props.
+ * The borderRadiusCorner, hasRightBorder, hasBottomBorder, and isLastWeekDate props are calculated in the Calendar component and passed down to the DateCell component.
+ * This component extends the props of `<button>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+export function DateCell({ date, selected = false, inRange = false, disabled = false, hasBorderTopLeftRadius = false, hasBorderTopRightRadius = false, hasBorderBottomLeftRadius = false, hasBorderBottomRightRadius = false, hasRightBorder, hasBottomBorder, isLastWeekDate, shouldBeTabbable, onKeyDown, ...rest }) {
+    const { isToday, formattedDate } = useMemo(() => {
+        const today = new Date();
+        return {
+            // isToday is implemented by comparing the date with the current date, ignore the time part
+            isToday: date.getFullYear() === today.getFullYear() &&
+                date.getMonth() === today.getMonth() &&
+                date.getDate() === today.getDate(),
+            formattedDate: dayjs(date).format('YYYY-MM-DD'),
+        };
+    }, [date]);
+    const classNames = dateCellSlotRecipe({
+        selected,
+        today: isToday,
+        inRange,
+        disabled,
+        hasBorderTopLeftRadius,
+        hasBorderTopRightRadius,
+        hasBorderBottomLeftRadius,
+        hasBorderBottomRightRadius,
+        hasRightBorder,
+        hasBottomBorder,
+        isLastWeekDate,
+    });
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx("button", { type: "button", className: cx(classNames.root, 'group', 'mfui-DateCell__root', rest.className), disabled: disabled, "aria-current": isToday ? 'date' : undefined, "data-selected": selected, "data-mfui-in-range": inRange, "data-mfui-date": formattedDate, tabIndex: shouldBeTabbable ? undefined : -1, onKeyDown: onKeyDown, ...rest, children: _jsx("span", { className: cx(classNames.todayIndicator, 'mfui-DateCell__todayIndicator'), children: _jsx(Typography, { as: "span", variant: selected || inRange ? 'strongControlLabel' : 'controlLabel', className: cx(classNames.text, 'mfui-DateCell__text'), children: date.getDate() }) }) }) }));
+}

package/dist/esm/src/DateTimeSelection/shared/DateCell/DateCell.types.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * DateCell component props.
+ *
+ * The DateCell component is used to render a single date cell in the Calendar component.
+ */
+export type DateCellProps = {
+    /**
+     * The date to be rendered in the cell.
+     */
+    date: Date;
+    /**
+     * Whether the cell is selected or not.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the cell is in range or not.
+     * It will be calculated on the DateRangePicker component and passed down to the DateCell component.
+     *
+     * @default false
+     */
+    inRange?: boolean;
+    /**
+     * Whether the cell is disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the cell has top left border radius or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     *
+     * @default false
+     */
+    hasBorderTopLeftRadius?: boolean;
+    /**
+     * Whether the cell has top right border radius or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     *
+     * @default false
+     */
+    hasBorderTopRightRadius?: boolean;
+    /**
+     * Whether the cell has bottom left border radius or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     *
+     * @default false
+     */
+    hasBorderBottomLeftRadius?: boolean;
+    /**
+     * Whether the cell has bottom right border radius or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     *
+     * @default false
+     */
+    hasBorderBottomRightRadius?: boolean;
+    /**
+     * Whether the cell has right border or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     * If it is Sunday, it will have borderRight.
+     *
+     * @default false
+     */
+    hasRightBorder?: boolean;
+    /**
+     * Whether the cell has bottom border or not.
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     * If it is last 7 days of the month, it will have borderBottom.
+     *
+     * @default false
+     */
+    hasBottomBorder?: boolean;
+    /**
+     * Whether the cell is in the last week of the month or not.
+     * It will be applied the different style to the cell.
+     *
+     * @default false
+     */
+    isLastWeekDate?: boolean;
+    /**
+     * Whether the cell is the first non-disabled date or not.
+     * When it is the first non-disabled date, it can be navigated by `Tab` button
+     *
+     * It will be calculated on the Calendar component and passed down to the DateCell component.
+     */
+    shouldBeTabbable?: boolean;
+    /**
+     * Handler for keyboard navigation events.
+     * This will be provided by the parent Calendar component.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+} & ComponentPropsWithoutRef<'button'>;

package/dist/esm/src/DateTimeSelection/shared/DateCell/DateCell.types.js

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

package/dist/esm/src/DateTimeSelection/shared/DateCell/index.d.ts

@@ -0,0 +1,2 @@
+export { DateCell } from './DateCell';
+export type { DateCellProps } from './DateCell.types';

package/dist/esm/src/DateTimeSelection/shared/DateCell/index.js

@@ -0,0 +1 @@
+export { DateCell } from './DateCell';

package/dist/esm/src/DateTimeSelection/shared/DayCell/DayCell.d.ts

@@ -0,0 +1,16 @@
+/**
+ * DayCellProps is the props interface for the DayCell component.
+ */
+type DayCellProps = {
+    /**
+     * The day of the week.
+     *
+     * 0 = Monday, 1 = Tuesday, 2 = Wednesday, 3 = Thursday, 4 = Friday, 5 = Saturday, 6 = Sunday
+     */
+    day: number;
+};
+/**
+ * DayCell is a cell that represents a day of the week in the Calendar component.
+ */
+export declare function DayCell({ day }: DayCellProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/src/DateTimeSelection/shared/DayCell/DayCell.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../../../../styled-system/css';
+import { dayCellSlotRecipe } from '../../../../styled-system/recipes';
+import { Typography } from '../../../Typography';
+import { DAY_ABBREVIATIONS, DAY_FULL_NAMES } from '../BasePicker/constants';
+import { useCalendarLocale } from '../CalendarLocale/CalendarLocaleContext';
+/**
+ * DayCell is a cell that represents a day of the week in the Calendar component.
+ */
+export function DayCell({ day }) {
+    const calendarLocale = useCalendarLocale();
+    const classNames = dayCellSlotRecipe();
+    const safeLocale = calendarLocale ?? 'ja';
+    const abbreviation = DAY_ABBREVIATIONS[safeLocale][day];
+    const fullName = DAY_FULL_NAMES[safeLocale][day];
+    return (_jsx("div", { className: cx(classNames.root, 'mfui-DayCell__root'), "aria-label": fullName, children: _jsx(Typography, { "aria-hidden": true, variant: "contentHeading", className: cx(classNames.label, 'mfui-DayCell__label'), children: abbreviation }) }));
+}

package/dist/esm/src/DateTimeSelection/shared/DayCell/index.d.ts

@@ -0,0 +1 @@
+export { DayCell } from './DayCell';

package/dist/esm/src/DateTimeSelection/shared/DayCell/index.js

@@ -0,0 +1 @@
+export { DayCell } from './DayCell';

package/dist/esm/src/DateTimeSelection/shared/MonthCell/MonthCell.d.ts

@@ -0,0 +1,18 @@
+import { type MonthCellProps } from './MonthCell.types';
+/**
+ * MonthCell is a button that represents a month in calendar-like components.
+ *
+ * The appearance of the MonthCell is determined by the selected, currentMonth, and disabled props.
+ * The border radius and borders are automatically calculated based on the month's position:
+ * - Month 1 (January): Top left radius
+ * - Month 3 (March): Top right radius + right border
+ * - Month 10 (October): Bottom left radius
+ * - Month 12 (December): Bottom right radius + right border + bottom border
+ * - Months 3,6,9,12: Right border
+ * - Months 10,11,12: Bottom border
+ *
+ * This component extends the props of `<button>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+export declare function MonthCell({ date, selected, inRange, disabled, monthFormat, shouldBeTabbable, onKeyDown, ...rest }: MonthCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/shared/MonthCell/MonthCell.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { cx } from '../../../../styled-system/css';
+import { FocusIndicator } from '../../../FocusIndicator';
+import { Typography } from '../../../Typography';
+import { monthCellSlotRecipe } from '../../../../styled-system/recipes';
+/**
+ * MonthCell is a button that represents a month in calendar-like components.
+ *
+ * The appearance of the MonthCell is determined by the selected, currentMonth, and disabled props.
+ * The border radius and borders are automatically calculated based on the month's position:
+ * - Month 1 (January): Top left radius
+ * - Month 3 (March): Top right radius + right border
+ * - Month 10 (October): Bottom left radius
+ * - Month 12 (December): Bottom right radius + right border + bottom border
+ * - Months 3,6,9,12: Right border
+ * - Months 10,11,12: Bottom border
+ *
+ * This component extends the props of `<button>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ */
+export function MonthCell({ date, selected = false, inRange = false, disabled = false, monthFormat = 'M月', shouldBeTabbable, onKeyDown, ...rest }) {
+    const { isCurrentMonth, formattedMonth, monthLabel, borderProps } = useMemo(() => {
+        const today = new Date();
+        const month = date.getMonth() + 1; // 1-based month number
+        return {
+            isCurrentMonth: date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth(),
+            formattedMonth: dayjs(date).format('YYYY-MM'),
+            monthLabel: dayjs(date).format(monthFormat),
+            borderProps: {
+                // Border radius based on corner positions
+                hasBorderTopLeftRadius: month === 1, // January
+                hasBorderTopRightRadius: month === 3, // March
+                hasBorderBottomLeftRadius: month === 10, // October
+                hasBorderBottomRightRadius: month === 12, // December
+                // Border edges based on position
+                hasRightBorder: month % 3 === 0, // March, June, September, December
+                hasBottomBorder: month >= 10, // October, November, December
+            },
+        };
+    }, [date, monthFormat]);
+    const classNames = monthCellSlotRecipe({
+        selected,
+        currentMonth: isCurrentMonth,
+        inRange,
+        disabled,
+        ...borderProps,
+    });
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsxs("button", { type: "button", className: cx(classNames.root, 'group', 'mfui-MonthCell__root', rest.className), disabled: disabled, "aria-current": isCurrentMonth ? 'date' : undefined, "data-selected": selected, "data-mfui-in-range": inRange, "data-mfui-month": formattedMonth, tabIndex: shouldBeTabbable ? undefined : -1, onKeyDown: onKeyDown, ...rest, children: [_jsx(Typography, { variant: selected || inRange ? 'strongControlLabel' : 'controlLabel', className: cx(classNames.text, 'mfui-MonthCell__text'), children: monthLabel }), _jsx("div", { className: cx(classNames.currentMonthIndicator, 'mfui-MonthCell__currentMonthIndicator') })] }) }));
+}

package/dist/esm/src/DateTimeSelection/shared/MonthCell/MonthCell.types.d.ts

@@ -0,0 +1,50 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * MonthCell component props.
+ *
+ * The MonthCell component is used to render a single month cell in calendar-like components.
+ * Border radius and borders are automatically calculated based on the month's position.
+ */
+export type MonthCellProps = {
+    /**
+     * The date representing the month to be rendered in the cell.
+     */
+    date: Date;
+    /**
+     * Whether the cell is selected or not.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether the cell is within the selected range (between start and end).
+     *
+     * @default false
+     */
+    inRange?: boolean;
+    /**
+     * Whether the cell is disabled or not.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The format string to display the month.
+     * Uses dayjs format string.
+     *
+     * @default 'MMM'
+     */
+    monthFormat?: string;
+    /**
+     * Whether the cell is the first non-disabled month or not.
+     * When it is the first non-disabled month, it can be navigated by `Tab` button
+     *
+     * It will be calculated on the parent component and passed down to the MonthCell component.
+     */
+    shouldBeTabbable?: boolean;
+    /**
+     * Handler for keyboard navigation events.
+     * This will be provided by the parent component.
+     */
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+} & ComponentPropsWithoutRef<'button'>;

package/dist/esm/src/DateTimeSelection/shared/MonthCell/MonthCell.types.js

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

package/dist/esm/src/DateTimeSelection/shared/MonthCell/index.d.ts

@@ -0,0 +1,2 @@
+export { MonthCell } from './MonthCell';
+export type { MonthCellProps } from './MonthCell.types';

package/dist/esm/src/DateTimeSelection/shared/MonthCell/index.js

@@ -0,0 +1 @@
+export { MonthCell } from './MonthCell';

package/dist/esm/src/DateTimeSelection/shared/MonthGrid/MonthGrid.d.ts

@@ -0,0 +1,6 @@
+import { type MonthGridProps } from './MonthGrid.types';
+/**
+ * MonthGrid displays a 4x3 grid of months for a given year.
+ * It is fully controlled via props and does not use context.
+ */
+export declare function MonthGrid({ year, selectedMonth, minMonth, maxMonth, checkDisabledMonth, onMonthSelect, renderMonthCell, pendingFocusMonth, onPendingFocusMonthChange, ...divProps }: MonthGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/shared/MonthGrid/MonthGrid.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { monthGridSlotRecipe } from '../../../../styled-system/recipes';
+import { cx } from '../../../../styled-system/css';
+/**
+ * MonthGrid displays a 4x3 grid of months for a given year.
+ * It is fully controlled via props and does not use context.
+ */
+export function MonthGrid({ year, selectedMonth, minMonth, maxMonth, checkDisabledMonth, onMonthSelect, renderMonthCell, pendingFocusMonth, onPendingFocusMonthChange, ...divProps }) {
+    const months = Array.from({ length: 12 }).map((_, i) => i);
+    const classNames = monthGridSlotRecipe();
+    const { monthStates, firstTabbableIndex } = React.useMemo(() => {
+        const monthStates = months.map((month) => {
+            const date = new Date(year, month, 1);
+            // Check disabled by minMonth/maxMonth props
+            let isDisabledByProps = false;
+            if (minMonth && date < new Date(minMonth.getFullYear(), minMonth.getMonth(), 1)) {
+                isDisabledByProps = true;
+            }
+            if (maxMonth && date > new Date(maxMonth.getFullYear(), maxMonth.getMonth(), 1)) {
+                isDisabledByProps = true;
+            }
+            // Check disabled by callback
+            const isDisabledByCallback = checkDisabledMonth?.(date);
+            const disabled = isDisabledByProps || !!isDisabledByCallback;
+            return { month, date, disabled };
+        });
+        const firstTabbableIndex = monthStates.find(({ disabled }) => !disabled)?.month ?? -1;
+        return { monthStates, firstTabbableIndex };
+    }, [months, year, minMonth, maxMonth, checkDisabledMonth]);
+    // Handle pending focus
+    useEffect(() => {
+        if (!pendingFocusMonth)
+            return;
+        const targetCell = document.querySelector(`[data-mfui-month="${pendingFocusMonth}"]`);
+        if (targetCell && !targetCell.disabled) {
+            targetCell.focus();
+        }
+        onPendingFocusMonthChange?.(null);
+    }, [year, pendingFocusMonth, onPendingFocusMonthChange]);
+    return (_jsx("div", { ...divProps, className: cx(classNames.root, 'mfui-MonthGrid__root'), children: monthStates.map(({ month, date, disabled }) => {
+            const selected = selectedMonth?.getMonth() === month && selectedMonth.getFullYear() === year;
+            const shouldBeTabbable = month === firstTabbableIndex;
+            return (_jsx(React.Fragment, { children: renderMonthCell({
+                    date,
+                    selected,
+                    disabled,
+                    shouldBeTabbable,
+                    onClick: (event) => {
+                        if (disabled)
+                            return;
+                        onMonthSelect?.(date, event);
+                    },
+                }) }, month));
+        }) }));
+}

package/dist/esm/src/DateTimeSelection/shared/MonthGrid/MonthGrid.types.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type MonthCellProps } from '../MonthCell/MonthCell.types';
+/**
+ * Props for the MonthGrid component.
+ *
+ * @example
+ * <MonthGrid
+ *   year={2024}
+ *   selectedMonth={5}
+ *   minMonth={new Date(2024, 2, 1)}
+ *   maxMonth={new Date(2024, 10, 1)}
+ *   onMonthSelect={month => ...}
+ *   renderMonthCell={props => <MonthCell {...props} />}
+ * />
+ */
+export type MonthGridProps = {
+    /**
+     * The year to display months for
+     */
+    year: number;
+    /**
+     * The selected month (Date object), or undefined
+     */
+    selectedMonth?: Date;
+    /**
+     * Function to check if a month should be disabled.
+     *
+     * @param date - The date to check (first day of the month)
+     *
+     * @returns true if the month should be disabled
+     */
+    checkDisabledMonth?: (date: Date) => boolean;
+    /**
+     * The minimum selectable month (Date object, inclusive)
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month (Date object, inclusive)
+     */
+    maxMonth?: Date;
+    /**
+     * Callback when a month is selected
+     */
+    onMonthSelect?: (date: Date, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Render function for each month cell
+     */
+    renderMonthCell: (props: MonthCellProps) => React.ReactNode;
+    /**
+     * The month that should be focused when the grid renders
+     * Format: 'YYYY-MM'
+     */
+    pendingFocusMonth?: string;
+    /**
+     * Callback when pending focus is handled
+     */
+    onPendingFocusMonthChange?: (month: string | null) => void;
+} & ComponentPropsWithoutRef<'div'>;