@moneyforward/mfui-components 2.48.1

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { dateRangePickerPopoverSlotRecipe } from '../../../../../styled-system/recipes';
+import { CalendarGrid } from '../../../shared';
+import { DateRangePickerDateCell } from './DateRangePickerDateCell';
+import { cx } from '../../../../../styled-system/css';
+import { useBaseRangePickerContext } from '../../../shared/BaseRangePicker/BaseRangePickerProvider';
+/**
+ * Internal component: DateRangePickerCalendar
+ * Combines header (month label only) and CalendarGrid for a single month
+ */
+export function DateRangePickerCalendar({ viewingMonth, handleKeyboardNavigation, }) {
+    const classNames = dateRangePickerPopoverSlotRecipe();
+    const { handleDateClick, handlePreview, clearPreview, isInRange, isRangeStart, isRangeEnd, pendingFocusDate, setPendingFocusDate, temporaryStart, temporaryEnd, isDateDisabled, } = useBaseRangePickerContext();
+    // Internal renderDateCell logic - optimized with useCallback and memoized calculations
+    const renderDateCell = useCallback((dateItem) => {
+        const { date, ...rest } = dateItem;
+        const disabled = isDateDisabled(date);
+        // Memoize range calculations to avoid duplicate calls
+        const isStart = isRangeStart(date);
+        const isEnd = isRangeEnd(date);
+        const selected = isStart || isEnd;
+        const inRange = isInRange(date);
+        // Memoize event handlers
+        const handleClick = () => {
+            if (!disabled) {
+                handleDateClick(date);
+            }
+        };
+        const handleMouseEnter = () => {
+            if (!disabled) {
+                handlePreview(date);
+            }
+        };
+        const handleFocus = () => {
+            if (!disabled) {
+                handlePreview(date);
+            }
+        };
+        return (_jsx(DateRangePickerDateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, isRangeStart: isStart, isRangeEnd: isEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: handleFocus, onMouseLeave: clearPreview, onBlur: clearPreview }, date.toISOString()));
+    }, [isDateDisabled, isRangeStart, isRangeEnd, isInRange, handleDateClick, handlePreview, clearPreview]);
+    return (_jsx("div", { className: cx(classNames.root, 'mfui-DateRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart || temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
+}

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.types.d.ts

@@ -0,0 +1,15 @@
+import { type DateCellProps } from '../../../shared';
+export type DateRangePickerCalendarHeaderProps = {
+    label?: string;
+    showLeftNav?: boolean;
+    showRightNav?: boolean;
+    leftNavAriaLabel?: string;
+    rightNavAriaLabel?: string;
+    className?: string;
+};
+export type DateRangePickerCalendarProps = {
+    viewingMonth: Date;
+    renderDateCell: (dateItem: DateCellProps) => React.ReactNode;
+    className?: string;
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.types.js

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerDateCell.d.ts

@@ -0,0 +1,12 @@
+import { type DateCellProps } from '../../../shared/DateCell';
+export type DateRangePickerDateCellProps = DateCellProps & {
+    /** Whether this date is the start of a range */
+    isRangeStart?: boolean;
+    /** Whether this date is the end of a range */
+    isRangeEnd?: boolean;
+};
+/**
+ * DateRangePicker-specific DateCell component with enhanced accessibility
+ * for Japanese users. Provides configurable labels and range-specific context.
+ */
+export declare function DateRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }: DateRangePickerDateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerDateCell.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateCell } from '../../../shared/DateCell';
+import { getDateAriaAttributes } from '../../../shared/accessibility';
+/**
+ * DateRangePicker-specific DateCell component with enhanced accessibility
+ * for Japanese users. Provides configurable labels and range-specific context.
+ */
+export function DateRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }) {
+    const ariaAttributes = getDateAriaAttributes({
+        date,
+        selected,
+        inRange,
+        disabled,
+        isRangeStart,
+        isRangeEnd,
+    });
+    return (_jsx(DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, ...ariaAttributes }));
+}

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

@@ -0,0 +1,3 @@
+export { DateRangePickerCalendar } from './DateRangePickerCalendar';
+export { DateRangePickerDateCell } from './DateRangePickerDateCell';
+export type { DateRangePickerDateCellProps } from './DateRangePickerDateCell';

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

@@ -0,0 +1,2 @@
+export { DateRangePickerCalendar } from './DateRangePickerCalendar';
+export { DateRangePickerDateCell } from './DateRangePickerDateCell';

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerFooter/DateRangePickerFooter.d.ts

@@ -0,0 +1 @@
+export declare function DateRangePickerFooter(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerFooter/DateRangePickerFooter.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Button } from '../../../../Button';
+import { useBaseRangePickerContext } from '../../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { dateRangePickerPopoverSlotRecipe } from '../../../../../styled-system/recipes';
+import { getBasePickerLabel } from '../../../shared/BasePicker/constants';
+import { useCalendarLocale } from '../../../shared/CalendarLocale/CalendarLocaleContext';
+import { cx } from '../../../../../styled-system/css';
+export function DateRangePickerFooter() {
+    const classNames = dateRangePickerPopoverSlotRecipe();
+    const { setViewingMonth, temporaryStart, temporaryEnd, handleApply, handleCancel, isDateDisabled } = useBaseRangePickerContext();
+    const calendarLocale = useCalendarLocale();
+    // Memoize today to avoid creating multiple Date objects
+    const today = useMemo(() => new Date(), []);
+    const handleToday = useCallback(() => {
+        setViewingMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+    }, [setViewingMonth, today]);
+    // Check if today is disabled due to min/max constraints
+    const isTodayDisabled = isDateDisabled(today);
+    // Localized labels
+    const todayLabel = useMemo(() => getBasePickerLabel('TODAY', calendarLocale), [calendarLocale]);
+    const applyLabel = useMemo(() => (calendarLocale === 'en' ? 'Apply' : '適用'), [calendarLocale]);
+    const cancelLabel = useMemo(() => (calendarLocale === 'en' ? 'Cancel' : 'キャンセル'), [calendarLocale]);
+    return (_jsxs("div", { className: cx(classNames.footer, 'mfui-DateRangePickerFooter__footer'), children: [_jsx(Button, { size: "small", disabled: isTodayDisabled, onClick: handleToday, children: todayLabel }), _jsxs("div", { className: cx(classNames.footerRight, 'mfui-DateRangePickerFooter__footerRight'), children: [_jsx(Button, { size: "small", onClick: handleCancel, children: cancelLabel }), _jsx(Button, { priority: "primary", size: "small", disabled: !temporaryStart || !temporaryEnd, onClick: handleApply, children: applyLabel })] })] }));
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+/**
+ * Popover component for DateRangePicker.
+ *
+ * Renders two consecutive months and a footer for date range selection.
+ * All selection and preview state is managed via BaseRangePickerProvider context.
+ *
+ * @internal
+ *
+ * @remarks
+ * - Accessibility is handled by subcomponents (calendars and footer).
+ * - This component should not be used outside a BaseRangePickerProvider.
+ * - Localization is handled via CalendarLocaleProvider context.
+ *
+ * @example
+ * <BaseRangePickerProvider>
+ *   <CalendarLocaleProvider value="en">
+ *     <DateRangePickerPopover />
+ *   </CalendarLocaleProvider>
+ * </BaseRangePickerProvider>
+ */
+export declare function DateRangePickerPopover(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from 'react';
+import { PickerBefore, PickerAfter } from '@moneyforward/mfui-icons-react';
+import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { cx } from '../../../../styled-system/css';
+import { dateRangePickerPopoverSlotRecipe } from '../../../../styled-system/recipes';
+import { DateRangePickerFooter } from './DateRangePickerFooter';
+import { DateRangePickerCalendar } from './DateRangePickerCalendar';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { IconButton } from '../../../IconButton';
+import { Typography } from '../../../Typography';
+import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
+import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
+import { getBasePickerLabel } from '../../shared/BasePicker/constants';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+// Utility function to add months to a date
+const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
+/**
+ * Popover component for DateRangePicker.
+ *
+ * Renders two consecutive months and a footer for date range selection.
+ * All selection and preview state is managed via BaseRangePickerProvider context.
+ *
+ * @internal
+ *
+ * @remarks
+ * - Accessibility is handled by subcomponents (calendars and footer).
+ * - This component should not be used outside a BaseRangePickerProvider.
+ * - Localization is handled via CalendarLocaleProvider context.
+ *
+ * @example
+ * <BaseRangePickerProvider>
+ *   <CalendarLocaleProvider value="en">
+ *     <DateRangePickerPopover />
+ *   </CalendarLocaleProvider>
+ * </BaseRangePickerProvider>
+ */
+export function DateRangePickerPopover() {
+    const { viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled, minDate, maxDate } = useBaseRangePickerContext();
+    const calendarLocale = useCalendarLocale();
+    const rightViewingMonth = useMemo(() => addMonths(viewingMonth, 1), [viewingMonth]);
+    // Check if navigation buttons should be disabled based on constraints
+    const isPreviousMonthDisabled = useCallback(() => {
+        if (!minDate)
+            return false;
+        // After previous navigation, the new right panel would be the current left panel (viewingMonth)
+        // Disable if the new right panel has no selectable dates (ends before minDate)
+        const newRightPanel = viewingMonth;
+        const lastDayOfNewRightPanel = new Date(newRightPanel.getFullYear(), newRightPanel.getMonth() + 1, 0);
+        return dayjs(lastDayOfNewRightPanel).isBefore(dayjs(minDate), 'day');
+    }, [minDate, viewingMonth]);
+    const isNextMonthDisabled = useCallback(() => {
+        if (!maxDate)
+            return false;
+        // After next navigation, the new left panel would be the current right panel (viewingMonth + 1)
+        // Only disable if the new left panel would have no selectable dates
+        const newLeftPanel = rightViewingMonth;
+        const firstDayOfNewLeftPanel = new Date(newLeftPanel.getFullYear(), newLeftPanel.getMonth(), 1);
+        // Check if the new left panel has any selectable dates (first day <= maxDate)
+        const hasSelectableDatesInNewLeftPanel = !dayjs(firstDayOfNewLeftPanel).isAfter(dayjs(maxDate), 'day');
+        // Allow navigation if the new left panel contains any selectable dates
+        return !hasSelectableDatesInNewLeftPanel;
+    }, [maxDate, rightViewingMonth]);
+    // Cross-Panel Keyboard Navigation
+    const handleKeyboardNavigation = useCallback((event) => {
+        const { key, currentTarget } = event;
+        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+        if (!allowedKeys.includes(key)) {
+            return;
+        }
+        const currentDate = currentTarget.dataset['mfuiDate'];
+        if (!currentDate)
+            return;
+        const currentDayjs = dayjs(currentDate);
+        // Prevent screen scrolling when changing focus
+        event.preventDefault();
+        // Handle date navigation
+        let targetDate = currentDayjs;
+        switch (key) {
+            case 'ArrowLeft':
+                targetDate = currentDayjs.subtract(1, 'day');
+                break;
+            case 'ArrowRight':
+                targetDate = currentDayjs.add(1, 'day');
+                break;
+            case 'ArrowUp':
+                targetDate = currentDayjs.subtract(7, 'day');
+                break;
+            case 'ArrowDown':
+                targetDate = currentDayjs.add(7, 'day');
+                break;
+        }
+        // Check if target date would be disabled due to constraints
+        if (isDateDisabled(targetDate.toDate())) {
+            return; // Don't navigate to disabled dates
+        }
+        // Calculate left and right panel months
+        const leftPanelMonth = dayjs(viewingMonth).format('YYYY-MM');
+        const rightPanelMonth = dayjs(viewingMonth).add(1, 'month').format('YYYY-MM');
+        const targetMonth = targetDate.format('YYYY-MM');
+        // Check if target date is in one of the visible panels
+        if (targetMonth === leftPanelMonth || targetMonth === rightPanelMonth) {
+            // Target date is in a visible panel, focus it directly
+            const targetCell = document.querySelector(`[data-mfui-date="${targetDate.format('YYYY-MM-DD')}"]`);
+            if (targetCell && !targetCell.disabled) {
+                targetCell.focus();
+            }
+        }
+        else {
+            // Target date is not in visible panels, update viewing month and set pending focus
+            setViewingMonth(targetDate.toDate());
+            setPendingFocusDate(targetDate.format('YYYY-MM-DD'));
+        }
+    }, [viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled]);
+    // Focus trap for popover
+    const { handleOnKeyDown } = useFocusTrap({
+        onPressingTabOnNotFocusableElement: (event) => {
+            const nodes = getFocusableNodes(event.currentTarget);
+            const focusableNodeAfterFocusingNode = nodes.find((element) => 
+            // eslint-disable-next-line no-bitwise
+            element.compareDocumentPosition(event.target) & Node.DOCUMENT_POSITION_PRECEDING);
+            const firstFocusableNode = nodes.at(0);
+            const nextFocusableNode = focusableNodeAfterFocusingNode ?? firstFocusableNode;
+            nextFocusableNode?.focus();
+            event.preventDefault();
+        },
+    });
+    const classNames = dateRangePickerPopoverSlotRecipe();
+    // Localized labels
+    const previousMonthLabel = useMemo(() => getBasePickerLabel('GO_TO_PREV_MONTH', calendarLocale), [calendarLocale]);
+    const nextMonthLabel = useMemo(() => getBasePickerLabel('GO_TO_NEXT_MONTH', calendarLocale), [calendarLocale]);
+    // Localized month format functions
+    const formatMonth = useMemo(() => (date) => {
+        if (calendarLocale === 'ja') {
+            return `${String(date.getFullYear())}年${String(date.getMonth() + 1)}月`;
+        }
+        const monthFormatter = new Intl.DateTimeFormat('en-US', { month: 'long' });
+        return `${monthFormatter.format(date)} ${String(date.getFullYear())}`;
+    }, [calendarLocale]);
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-DateRangePickerPopover__root'), onKeyDown: handleOnKeyDown, children: [_jsxs("div", { className: cx(classNames.navigation, 'mfui-DateRangePickerPopover__navigation'), children: [_jsxs("div", { className: cx(classNames.navigationColumn, 'mfui-DateRangePickerPopover__navigationColumn'), children: [_jsx(IconButton, { "aria-label": previousMonthLabel, disabled: isPreviousMonthDisabled(), onClick: () => {
+                                    if (!isPreviousMonthDisabled()) {
+                                        setViewingMonth(addMonths(viewingMonth, -1));
+                                    }
+                                }, children: _jsx(PickerBefore, {}) }), _jsx(Typography, { variant: "contentHeading", children: formatMonth(viewingMonth) }), _jsx("div", { className: cx(classNames.blankIconButton, 'mfui-DateRangePickerPopover__blankIconButton') })] }), _jsxs("div", { className: cx(classNames.navigationColumn, 'mfui-DateRangePickerPopover__navigationColumn'), children: [_jsx("div", { className: cx(classNames.blankIconButton, 'mfui-DateRangePickerPopover__blankIconButton') }), _jsx(Typography, { variant: "contentHeading", children: formatMonth(rightViewingMonth) }), _jsx(IconButton, { "aria-label": nextMonthLabel, disabled: isNextMonthDisabled(), onClick: () => {
+                                    if (!isNextMonthDisabled()) {
+                                        setViewingMonth(addMonths(viewingMonth, 1));
+                                    }
+                                }, children: _jsx(PickerAfter, {}) })] })] }), _jsxs("div", { className: cx(classNames.calendars, 'mfui-DateRangePickerPopover__calendars'), children: [_jsx(DateRangePickerCalendar, { viewingMonth: viewingMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(DateRangePickerCalendar, { viewingMonth: rightViewingMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }), _jsx(DateRangePickerFooter, {})] }));
+}

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerPopover.types.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the DateRangePickerPopover component
+ */
+export type DateRangePickerPopoverProps = {
+    /**
+     * Props for the wrapper div element
+     */
+    wrapperProps?: ComponentPropsWithoutRef<'div'>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerPopover.types.js

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/Popover.types.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the DateRangePickerPopover component
+ */
+export type DateRangePickerPopoverProps = {
+    /**
+     * Props for the wrapper div element
+     */
+    wrapperProps?: ComponentPropsWithoutRef<'div'>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/Popover.types.js

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

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

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

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

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

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility.d.ts

@@ -0,0 +1,20 @@
+import { type UserEvent } from '@testing-library/user-event';
+export type DateRangePickerPopoverTestUtilityConfig = {
+    user: UserEvent;
+};
+export declare function createDateRangePickerPopoverTestUtility({ user }: DateRangePickerPopoverTestUtilityConfig): {
+    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>;
+};

package/dist/esm/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility.js

@@ -0,0 +1,98 @@
+import { screen } from '@testing-library/react';
+export function createDateRangePickerPopoverTestUtility({ user }) {
+    // Element Queries - using more flexible selectors that don't depend on exact text
+    function getPreviousMonthButton() {
+        // Look for the previous month button by finding buttons that might contain previous month indicators
+        const allButtons = screen.getAllByRole('button');
+        // The previous month button is typically the first IconButton in the navigation
+        return (allButtons.find((button) => button.getAttribute('aria-label')?.includes('月') || button.getAttribute('aria-label')?.includes('month')) ??
+            allButtons.find((button) => button.querySelector('svg')) ??
+            allButtons[0]);
+    }
+    function getNextMonthButton() {
+        // Similar approach for next month button
+        const allButtons = screen.getAllByRole('button');
+        // Find the button with next month aria-label
+        const nextButton = allButtons.find((button) => {
+            const label = button.getAttribute('aria-label');
+            return label?.includes('次の') || label?.includes('Next');
+        });
+        return nextButton ?? allButtons[1]; // fallback to second button
+    }
+    function getTodayButton() {
+        // Look for today button by exact text content in the footer area
+        const allButtons = screen.getAllByRole('button');
+        return (allButtons.find((button) => {
+            const textContent = button.textContent.trim();
+            return textContent === '今日' || textContent === 'Today';
+        }) ?? screen.getByRole('button', { name: /^今日$|^Today$/i }));
+    }
+    function getApplyButton() {
+        // Look for apply button by text content
+        return screen.getByRole('button', { name: /適用|Apply/i });
+    }
+    function getCancelButton() {
+        // Look for cancel button by text content
+        return screen.getByRole('button', { name: /キャンセル|Cancel/i });
+    }
+    function getDateCellByText(text) {
+        // DateCell is a button with the date as its text content
+        return screen
+            .getAllByRole('button')
+            .find((element) => element.className.includes('mfui-DateCell__root') && element.textContent === text);
+    }
+    function getAllDateCells() {
+        return screen.getAllByRole('button').filter((element) => element.className.includes('mfui-DateCell__root'));
+    }
+    function getSelectedDateCells() {
+        return getAllDateCells().filter((element) => element.dataset['selected'] === 'true');
+    }
+    function getInRangeDateCells() {
+        return getAllDateCells().filter((element) => element.dataset['mfuiInRange'] === 'true');
+    }
+    function getLeftMonthLabel() {
+        // Look for month labels - handles both Japanese (YYYY年MM月) and English (Month YYYY) formats
+        const monthLabels = screen.getAllByText(/年.*月|\w+ \d{4}/);
+        return monthLabels[0]?.textContent ?? null;
+    }
+    // Actions
+    async function clickPreviousMonth() {
+        const button = getPreviousMonthButton();
+        if (button)
+            await user.click(button);
+    }
+    async function clickNextMonth() {
+        const button = getNextMonthButton();
+        if (button)
+            await user.click(button);
+    }
+    async function clickToday() {
+        const button = getTodayButton();
+        await user.click(button);
+    }
+    async function clickApply() {
+        await user.click(getApplyButton());
+    }
+    async function selectDate(dateText) {
+        const cell = getDateCellByText(dateText);
+        if (cell) {
+            await user.click(cell);
+        }
+    }
+    return {
+        getPreviousMonthButton,
+        getNextMonthButton,
+        getTodayButton,
+        getApplyButton,
+        getCancelButton,
+        getDateCellByText,
+        getSelectedDateCells,
+        getInRangeDateCells,
+        getLeftMonthLabel,
+        clickPreviousMonth,
+        clickNextMonth,
+        clickToday,
+        clickApply,
+        selectDate,
+    };
+}

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

@@ -0,0 +1,53 @@
+import { type ReactElement } from 'react';
+import { type DateRangePickerProviderProps } from './DateRangePickerProvider.types';
+/**
+ * Provider component for DateRangePicker
+ * Manages shared state between DateRangePicker components
+ */
+export declare function DateRangePickerProvider({ children, ...props }: DateRangePickerProviderProps & {
+    children: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access DateRangePicker context
+ *
+ * @throws {Error} when used outside of DateRangePickerProvider
+ */
+export declare function useDateRangePickerContext(): {
+    startDate: Date | undefined;
+    endDate: Date | undefined;
+    startDateString: string;
+    endDateString: string;
+    disabled: boolean;
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    viewingMonth: Date;
+    setViewingMonth: (value: Date | ((previous: Date) => Date)) => void;
+    onStartDateChange: (date: Date | undefined, nextEndDate?: Date) => void;
+    onEndDateChange: (date: Date | undefined, nextStartDate?: Date) => void;
+    onStartDateStringChange: (value: string) => void;
+    onEndDateStringChange: (value: string) => void;
+    handleClear: () => void;
+    handleApply: () => void;
+    handleCancel: () => void;
+    selecting: "start" | "end";
+    temporaryStart: Date | undefined;
+    temporaryEnd: Date | undefined;
+    previewDate: Date | undefined;
+    handleDateClick: (date: Date) => void;
+    handlePreview: (date: Date) => void;
+    clearPreview: () => void;
+    isInRange: (date: Date) => boolean;
+    isRangeStart: (date: Date) => boolean;
+    isRangeEnd: (date: Date) => boolean;
+    setTemporaryStart: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
+    setTemporaryEnd: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
+    setSelecting: import("react").Dispatch<import("react").SetStateAction<"start" | "end">>;
+    disableAutoOpen: boolean | undefined;
+    pendingFocusDate: string | null;
+    setPendingFocusDate: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    minDate: Date | undefined;
+    maxDate: Date | undefined;
+    isDateDisabled: (date: Date) => boolean;
+};