@moneyforward/mfui-components 2.48.1

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { dayjs } from '../../../../utilities/date/dayjs';
+import { useDateRangePickerContext } from '../../DateRangePickerProvider';
+const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
+    ...baseProps,
+    value,
+    onChange: (event) => {
+        if (event.defaultPrevented)
+            return;
+        const inputString = event.target.value;
+        baseProps.onChange?.(event);
+        onStringChange(inputString);
+    },
+    onBlur: (event) => {
+        if (event.defaultPrevented)
+            return;
+        baseProps.onBlur?.(event);
+        const dateValue = dayjs(value, format, true);
+        if (!dateValue.isValid()) {
+            onDateChange(undefined, otherDate);
+            return;
+        }
+        const currentDate = dateValue.startOf('day').toDate();
+        // Check if the date is disabled due to constraints
+        if (isDateDisabled?.(currentDate)) {
+            // Clear the input if the date violates constraints
+            onDateChange(undefined, otherDate);
+            return;
+        }
+        onDateChange(currentDate, otherDate);
+    },
+});
+/**
+ * Controller for the value of the DateRangePicker component.
+ * Automatically ensures dates are in chronological order by swapping them if needed on blur.
+ *
+ * @param options - The options for the controller.
+ *
+ * @returns The props for the input elements.
+ */
+export function useDateRangeTriggerValueController({ startInputProps = {}, endInputProps = {}, format, }) {
+    const { startDate, endDate, startDateString, endDateString, onStartDateChange, onEndDateChange, onStartDateStringChange, onEndDateStringChange, handleClear, isDateDisabled, } = useDateRangePickerContext();
+    const enhancedStartInputProps = useMemo(() => createInputProps(startInputProps, startDateString, format, onStartDateStringChange, onStartDateChange, endDate, isDateDisabled), [startInputProps, startDateString, format, onStartDateStringChange, onStartDateChange, endDate, isDateDisabled]);
+    const enhancedEndInputProps = useMemo(() => createInputProps(endInputProps, endDateString, format, onEndDateStringChange, onEndDateChange, startDate, isDateDisabled), [endInputProps, endDateString, format, onEndDateStringChange, onEndDateChange, startDate, isDateDisabled]);
+    return {
+        startInputProps: enhancedStartInputProps,
+        endInputProps: enhancedEndInputProps,
+        handleClear,
+        startDate,
+        endDate,
+    };
+}

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/index.d.ts

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/index.js

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility.d.ts

@@ -0,0 +1,17 @@
+import { type UserEvent } from '@testing-library/user-event';
+export type DateRangePickerTriggerTestUtilityConfig = {
+    user: UserEvent;
+};
+export declare function createDateRangePickerTriggerTestUtility({ user }: DateRangePickerTriggerTestUtilityConfig): {
+    getStartInput: () => HTMLInputElement;
+    getEndInput: () => HTMLInputElement;
+    getClearButton: () => HTMLElement | null;
+    getCalendarButton: () => HTMLElement;
+    getStartValue: () => string | null;
+    getEndValue: () => string | null;
+    isClearButtonVisible: () => boolean;
+    setStartDate: (date: string) => Promise<void>;
+    setEndDate: (date: string) => Promise<void>;
+    clearValues: () => Promise<void>;
+    openCalendar: () => Promise<void>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility.js

@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { LOCALE } from '../constants';
+export function createDateRangePickerTriggerTestUtility({ user }) {
+    // Element Queries
+    function getStartInput() {
+        return screen.getByPlaceholderText(LOCALE.START_DATE_PLACEHOLDER);
+    }
+    function getEndInput() {
+        return screen.getByPlaceholderText(LOCALE.END_DATE_PLACEHOLDER);
+    }
+    function getClearButton() {
+        return screen.queryByRole('button', { name: LOCALE.CLEAR_BUTTON_LABEL });
+    }
+    function getCalendarButton() {
+        return screen.getByRole('button', { name: LOCALE.CALENDAR_BUTTON_LABEL });
+    }
+    // Value Queries
+    function getStartValue() {
+        try {
+            return getStartInput().getAttribute('value');
+        }
+        catch {
+            return null;
+        }
+    }
+    function getEndValue() {
+        try {
+            return getEndInput().getAttribute('value');
+        }
+        catch {
+            return null;
+        }
+    }
+    function isClearButtonVisible() {
+        return getClearButton() !== null;
+    }
+    // Actions
+    async function setStartDate(date) {
+        const input = getStartInput();
+        await user.clear(input);
+        await user.type(input, date);
+        await user.tab(); // Trigger blur
+    }
+    async function setEndDate(date) {
+        const input = getEndInput();
+        await user.clear(input);
+        await user.type(input, date);
+        await user.tab(); // Trigger blur
+    }
+    async function clearValues() {
+        const clearButton = getClearButton();
+        if (clearButton) {
+            await user.click(clearButton);
+        }
+    }
+    async function openCalendar() {
+        await user.click(getCalendarButton());
+    }
+    return {
+        getStartInput,
+        getEndInput,
+        getClearButton,
+        getCalendarButton,
+        getStartValue,
+        getEndValue,
+        isClearButtonVisible,
+        setStartDate,
+        setEndDate,
+        clearValues,
+        openCalendar,
+    };
+}

package/dist/esm/src/DateTimeSelection/DateRangePicker/index.d.ts

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/index.js

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/utilities/createDateRangePickerTestUtility.d.ts

@@ -0,0 +1,32 @@
+import { type UserEvent } from '@testing-library/user-event';
+export type DateRangePickerTestUtilityConfig = {
+    user: UserEvent;
+};
+export declare function createDateRangePickerTestUtility({ user }: DateRangePickerTestUtilityConfig): {
+    getPopover: () => Element | null;
+    getPreviousMonthButton: () => HTMLElement | undefined;
+    getNextMonthButton: () => HTMLElement | undefined;
+    getTodayButton: () => HTMLElement;
+    getApplyButton: () => HTMLElement;
+    getCancelButton: () => HTMLElement;
+    getDateCellByText: (text: string) => HTMLElement | undefined;
+    getSelectedDateCells: () => HTMLElement[];
+    getInRangeDateCells: () => HTMLElement[];
+    getLeftMonthLabel: () => string | null;
+    clickPreviousMonth: () => Promise<void>;
+    clickNextMonth: () => Promise<void>;
+    clickToday: () => Promise<void>;
+    clickApply: () => Promise<void>;
+    selectDate: (dateText: string) => Promise<void>;
+    getStartInput: () => HTMLInputElement;
+    getEndInput: () => HTMLInputElement;
+    getClearButton: () => HTMLElement | null;
+    getCalendarButton: () => HTMLElement;
+    getStartValue: () => string | null;
+    getEndValue: () => string | null;
+    isClearButtonVisible: () => boolean;
+    setStartDate: (date: string) => Promise<void>;
+    setEndDate: (date: string) => Promise<void>;
+    clearValues: () => Promise<void>;
+    openCalendar: () => Promise<void>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/utilities/createDateRangePickerTestUtility.js

@@ -0,0 +1,17 @@
+import { createDateRangePickerPopoverTestUtility } from '../DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility';
+import { createDateRangePickerTriggerTestUtility } from '../DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility';
+export function createDateRangePickerTestUtility({ user }) {
+    const triggerUtils = createDateRangePickerTriggerTestUtility({ user });
+    const popoverUtils = createDateRangePickerPopoverTestUtility({ user });
+    function getPopover() {
+        return document.querySelector('[data-mfui-content="popover-portal-content"]');
+    }
+    return {
+        // Trigger utilities
+        ...triggerUtils,
+        // Popover utilities
+        ...popoverUtils,
+        // Additional utilities
+        getPopover,
+    };
+}

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPicker.d.ts

@@ -0,0 +1,8 @@
+import { type MonthPickerProps } from './MonthPicker.types';
+/**
+ * MonthPicker component for selecting months.
+ * Extends BasePicker with month-specific functionality.
+ *
+ * @param props - MonthPicker props including minMonth and maxMonth constraints
+ */
+export declare function MonthPicker({ format, minMonth, maxMonth, checkDisabledMonth, calendarLocale, ...restProps }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPicker.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * MonthPicker component
+ *
+ * This is a wrapper around BasePicker, setting default format to 'YYYY/MM' and using MonthGrid for month selection.
+ * All logic and props are inherited from BasePicker, except for the popover content and format.
+ * See BasePicker for implementation details.
+ */
+import { BasePicker } from '../shared/BasePicker';
+import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { MonthPickerPanel } from './MonthPickerPanel/MonthPickerPanel';
+/**
+ * MonthPicker component for selecting months.
+ * Extends BasePicker with month-specific functionality.
+ *
+ * @param props - MonthPicker props including minMonth and maxMonth constraints
+ */
+export function MonthPicker({ format = 'YYYY/MM', minMonth, maxMonth, checkDisabledMonth, calendarLocale = 'ja', ...restProps }) {
+    return (_jsx(BasePicker, { ...restProps, format: format, baseFormat: "YYYY-MM", calendarLocale: calendarLocale, renderPopoverContent: ({ viewingValue, setViewingValue, value, onChange }) => (_jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange }) })) }));
+}

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPicker.types.d.ts

@@ -0,0 +1,42 @@
+import { type BasePickerProps } from '../shared/BasePicker';
+export type MonthPickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'baseFormat'> & {
+    /**
+     * 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.
+     * Months before this date will be disabled.
+     *
+     * @default undefined
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this date will be disabled.
+     *
+     * @default undefined
+     */
+    maxMonth?: Date;
+    /**
+     * The locale of the calendar (affects navigation labels and month display format).
+     * Defaults to Japanese to preserve backward compatibility.
+     *
+     * @default 'ja'
+     *
+     * @example
+     * // Japanese locale (default)
+     * <MonthPicker calendarLocale="ja" />
+     * // Displays: "1月", "2月", etc. and Japanese navigation labels
+     *
+     * @example
+     * // English locale
+     * <MonthPicker calendarLocale="en" />
+     * // Displays: "Jan", "Feb", etc. and English navigation labels
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPicker.types.js

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

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.d.ts

@@ -0,0 +1,6 @@
+import { type MonthPickerMonthCellProps } from './MonthCell.types';
+/**
+ * MonthPickerMonthCell is a wrapper around the shared MonthCell component.
+ * It handles month selection and integrates with the MonthPicker context.
+ */
+export declare function MonthPickerMonthCell({ onKeyDown, minMonth, maxMonth, checkDisabledMonth, date, ...rest }: MonthPickerMonthCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { MonthCell } from '../../../shared/MonthCell';
+import { useCalendarLocale } from '../../../shared/CalendarLocale/CalendarLocaleContext';
+import { useMonthPickerKeyboardNavigation } from '../../utilities/useMonthPickerKeyboardNavigation';
+// English month abbreviations wrapped in square brackets to escape them in dayjs format strings
+const ENGLISH_MONTH_ABBREVIATIONS = [
+    '[Jan]',
+    '[Feb]',
+    '[Mar]',
+    '[Apr]',
+    '[May]',
+    '[Jun]',
+    '[Jul]',
+    '[Aug]',
+    '[Sep]',
+    '[Oct]',
+    '[Nov]',
+    '[Dec]',
+];
+/**
+ * MonthPickerMonthCell is a wrapper around the shared MonthCell component.
+ * It handles month selection and integrates with the MonthPicker context.
+ */
+export function MonthPickerMonthCell({ onKeyDown, minMonth, maxMonth, checkDisabledMonth, date, ...rest }) {
+    const locale = useCalendarLocale();
+    // Generate month format string based on locale
+    const monthFormat = useMemo(() => {
+        const monthIndex = date.getMonth();
+        if (locale === 'en') {
+            // Return English month abbreviation escaped for dayjs
+            return ENGLISH_MONTH_ABBREVIATIONS[monthIndex];
+        }
+        // Japanese format: "1月", "2月", etc. (using dayjs format)
+        return 'M月';
+    }, [locale, date]);
+    const handleKeyDown = useMonthPickerKeyboardNavigation(onKeyDown, minMonth, maxMonth, checkDisabledMonth);
+    return _jsx(MonthCell, { ...rest, date: date, monthFormat: monthFormat, onKeyDown: handleKeyDown });
+}

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.types.d.ts

@@ -0,0 +1,21 @@
+import { type MonthCellProps } from '../../../shared/MonthCell';
+export type MonthPickerMonthCellProps = MonthCellProps & {
+    /**
+     * 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.
+     * Months before this date will be disabled for keyboard navigation.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this date will be disabled for keyboard navigation.
+     */
+    maxMonth?: Date;
+};

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.types.js

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

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/index.d.ts

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

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/index.js

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

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthGrid.d.ts

@@ -0,0 +1,57 @@
+type MonthPickerMonthGridProps = {
+    /**
+     * The year currently being viewed.
+     */
+    viewingValue: Date;
+    /**
+     * The currently selected month.
+     *
+     * @default undefined
+     */
+    value?: Date;
+    /**
+     * The function to call when a month is selected.
+     *
+     * @default undefined
+     */
+    onChange?: (value: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * 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.
+     * Months before this date will be disabled.
+     *
+     * @default undefined
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this date will be disabled.
+     *
+     * @default undefined
+     */
+    maxMonth?: Date;
+};
+/**
+ * MonthPickerMonthGrid integrates MonthGrid with MonthPicker props.
+ * It renders a 4x3 grid of months for the current viewing year, using props-driven selection and limits.
+ *
+ * @param props - Props including viewingValue, value, onChange, minMonth, and maxMonth
+ *
+ * @example
+ * <MonthPickerMonthGrid
+ *   viewingValue={viewingValue}
+ *   value={value}
+ *   onChange={onChange}
+ *   minMonth={minMonth}
+ *   maxMonth={maxMonth}
+ * />
+ */
+export declare function MonthPickerMonthGrid({ viewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, }: MonthPickerMonthGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthGrid.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MonthGrid } from '../../shared/MonthGrid';
+import { MonthPickerMonthCell } from './MonthCell';
+/**
+ * MonthPickerMonthGrid integrates MonthGrid with MonthPicker props.
+ * It renders a 4x3 grid of months for the current viewing year, using props-driven selection and limits.
+ *
+ * @param props - Props including viewingValue, value, onChange, minMonth, and maxMonth
+ *
+ * @example
+ * <MonthPickerMonthGrid
+ *   viewingValue={viewingValue}
+ *   value={value}
+ *   onChange={onChange}
+ *   minMonth={minMonth}
+ *   maxMonth={maxMonth}
+ * />
+ */
+export function MonthPickerMonthGrid({ viewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, }) {
+    const renderMonthCellWithConstraints = (props) => (_jsx(MonthPickerMonthCell, { ...props, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth }));
+    return (_jsx(MonthGrid, { year: viewingValue.getFullYear(), selectedMonth: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, renderMonthCell: renderMonthCellWithConstraints, onMonthSelect: onChange }));
+}

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthPickerPanel.d.ts

@@ -0,0 +1,61 @@
+export type MonthPickerPanelProps = {
+    /**
+     * The year currently being viewed.
+     */
+    viewingValue: Date;
+    /**
+     * The function to call when the year is changed.
+     */
+    setViewingValue: (date: Date) => void;
+    /**
+     * The currently selected month.
+     *
+     * @default undefined
+     */
+    value?: Date;
+    /**
+     * The function to call when a month is selected.
+     *
+     * @default undefined
+     */
+    onChange?: (value: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * 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.
+     * Months before this date will be disabled.
+     *
+     * @default undefined
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this date will be disabled.
+     *
+     * @default undefined
+     */
+    maxMonth?: Date;
+} & Omit<React.ComponentProps<'div'>, 'onChange'>;
+/**
+ * MonthPickerPanel displays year navigation and a month grid for month selection.
+ * Uses props for all state and handlers. Layout is fixed per PRD.
+ *
+ * @param props - Props including viewingValue, setViewingValue, value, onChange, minMonth, and maxMonth
+ *
+ * @example
+ * <MonthPickerPanel
+ *   viewingValue={viewingValue}
+ *   setViewingValue={setViewingValue}
+ *   value={value}
+ *   onChange={onChange}
+ *   minMonth={minMonth}
+ *   maxMonth={maxMonth}
+ * />
+ */
+export declare function MonthPickerPanel({ viewingValue, setViewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, className, ...props }: MonthPickerPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthPickerPanel.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo } from 'react';
+import { PickerAfter, PickerBefore } from '@moneyforward/mfui-icons-react';
+import { MonthPickerMonthGrid } from './MonthGrid';
+import { YearSelector } from '../../shared';
+import { IconButton } from '../../../IconButton';
+import { getMonthPickerLabel, MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from '../constants';
+import { monthPickerPanelSlotRecipe } from '../../../../styled-system/recipes';
+import { cx } from '../../../../styled-system/css';
+import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { dayjs } from '../../../utilities/date/dayjs';
+/**
+ * MonthPickerPanel displays year navigation and a month grid for month selection.
+ * Uses props for all state and handlers. Layout is fixed per PRD.
+ *
+ * @param props - Props including viewingValue, setViewingValue, value, onChange, minMonth, and maxMonth
+ *
+ * @example
+ * <MonthPickerPanel
+ *   viewingValue={viewingValue}
+ *   setViewingValue={setViewingValue}
+ *   value={value}
+ *   onChange={onChange}
+ *   minMonth={minMonth}
+ *   maxMonth={maxMonth}
+ * />
+ */
+export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, className, ...props }) {
+    const { pendingFocusDate, setPendingFocusDate, baseFormat } = useBasePickerContext();
+    const locale = useCalendarLocale();
+    const year = viewingValue.getFullYear();
+    // Calculate if year navigation should be disabled based on min/max constraints
+    const { isPreviousYearDisabled, isNextYearDisabled } = useMemo(() => {
+        const baseMinYearDisabled = year <= MINIMUM_VIEWABLE_YEAR;
+        const baseMaxYearDisabled = year >= MAXIMUM_VIEWABLE_YEAR;
+        // Check if previous year would have any valid months
+        let minConstraintPreviousDisabled = false;
+        if (minMonth) {
+            const minYear = minMonth.getFullYear();
+            const previousYear = year - 1;
+            // Previous year is disabled if it's before the minMonth year
+            // (meaning ALL months in that year are before minMonth)
+            minConstraintPreviousDisabled = previousYear < minYear;
+        }
+        // Check if next year would have any valid months
+        let maxConstraintNextDisabled = false;
+        if (maxMonth) {
+            const maxYear = maxMonth.getFullYear();
+            const nextYear = year + 1;
+            // Next year is disabled if it's after the maxMonth year
+            // (meaning ALL months in that year are after maxMonth)
+            maxConstraintNextDisabled = nextYear > maxYear;
+        }
+        return {
+            isPreviousYearDisabled: baseMinYearDisabled || minConstraintPreviousDisabled,
+            isNextYearDisabled: baseMaxYearDisabled || maxConstraintNextDisabled,
+        };
+    }, [year, minMonth, maxMonth]);
+    const handlePreviousYear = useCallback(() => {
+        setViewingValue(new Date(year - 1, 0, 1));
+    }, [setViewingValue, year]);
+    const handleNextYear = useCallback(() => {
+        setViewingValue(new Date(year + 1, 0, 1));
+    }, [setViewingValue, year]);
+    const handleYearSelect = useCallback((newYear) => {
+        setViewingValue(new Date(newYear, 0, 1));
+    }, [setViewingValue]);
+    // Effect to handle focus when popup opens or when month changes
+    useEffect(() => {
+        if (!pendingFocusDate)
+            return;
+        // Convert YYYY-MM-DD to YYYY-MM if needed
+        const monthToFocus = dayjs(pendingFocusDate).format(baseFormat);
+        // Use the same pattern as DatePicker, but handle tabindex issue
+        const targetCell = document.querySelector(`[data-mfui-month="${monthToFocus}"]`);
+        if (targetCell && !targetCell.disabled) {
+            // Temporarily remove tabindex=-1 to allow focus, then restore it
+            const originalTabIndex = targetCell.tabIndex;
+            if (originalTabIndex === -1) {
+                targetCell.tabIndex = 0;
+            }
+            targetCell.focus();
+            // Restore original tabindex after focus
+            if (originalTabIndex === -1) {
+                targetCell.tabIndex = -1;
+            }
+        }
+        // Clear pending focus after handling
+        setPendingFocusDate(null);
+    }, [viewingValue, pendingFocusDate, setPendingFocusDate, baseFormat]);
+    const classNames = monthPickerPanelSlotRecipe();
+    return (_jsxs("div", { ...props, className: cx(classNames.root, 'mfui-MonthPickerPanel__root', className), children: [_jsxs("div", { className: cx(classNames.navigation, 'mfui-MonthPickerPanel__navigation'), children: [!isPreviousYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale ?? 'ja', 'prevYear'), onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') })), _jsx(YearSelector, { value: viewingValue, triggerWrapperProps: { className: cx(classNames.yearSelector, 'mfui-MonthPickerPanel__yearSelector') }, onChange: handleYearSelect }), !isNextYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale ?? 'ja', 'nextYear'), onClick: handleNextYear, children: _jsx(PickerAfter, {}) })) : (_jsx(YearNavigationPlaceholder, { className: cx(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') }))] }), _jsx(MonthPickerMonthGrid, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange })] }));
+}
+// Create a placeholder div that matches IconButton dimensions to prevent layout shift
+function YearNavigationPlaceholder({ className }) {
+    return _jsx("div", { className: className, "aria-hidden": "true" });
+}

package/dist/esm/src/DateTimeSelection/MonthPicker/constants.d.ts

@@ -0,0 +1,28 @@
+export declare const LABEL_PREV_YEAR = "\u524D\u306E\u5E74";
+export declare const LABEL_NEXT_YEAR = "\u6B21\u306E\u5E74";
+export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
+export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
+type MonthPickerLabelKey = 'prevYear' | 'nextYear';
+/**
+ * Localized labels for MonthPicker navigation buttons
+ */
+export declare const MONTH_PICKER_LABELS: Record<'ja' | 'en', Record<MonthPickerLabelKey, string>>;
+/**
+ * Get a localized label for MonthPicker
+ *
+ * @param locale - The locale to use ('ja' or 'en')
+ *
+ * @param key - The label key to retrieve
+ *
+ * @returns The localized label string
+ */
+export declare function getMonthPickerLabel(locale: 'ja' | 'en', key: MonthPickerLabelKey): string;
+/**
+ * The minimum viewable year in the year selector
+ */
+export declare const MINIMUM_VIEWABLE_YEAR = 1800;
+/**
+ * The maximum viewable year in the year selector
+ */
+export declare const MAXIMUM_VIEWABLE_YEAR = 2099;
+export {};