@moneyforward/mfui-components 3.19.0 → 3.21.0

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.d.ts

@@ -0,0 +1,6 @@
+import { type InternalMonthPickerPopoverProps } from './MonthPickerPopover.types';
+/**
+ * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
+ * Must be rendered inside a BasePickerProvider.
+ */
+export declare function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale, triggerRef, targetDOMNode, dialogId, }: InternalMonthPickerPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Calendar as CalendarIcon } from '@moneyforward/mfui-icons-react';
+import { Popover } from '../../../Popover';
+import { FocusIndicator } from '../../../FocusIndicator';
+import { ClearButton } from '../../../shared';
+import { Typography } from '../../../Typography';
+import { cx } from '../../../../styled-system/css';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { MonthPickerPanel } from '../../MonthPicker/MonthPickerPanel/MonthPickerPanel';
+import { CalendarLocaleProvider } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useBasePickerContext } from '../../shared/BasePicker/BasePickerProvider';
+import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
+import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
+const MONTH_BASE_FORMAT = 'YYYY-MM';
+/**
+ * Internal component that accesses BasePickerContext for viewing-month reset and focus trap.
+ * Must be rendered inside a BasePickerProvider.
+ */
+export function InternalMonthPickerPopover({ currentValue, defaultValue, isPickerOpen, togglePicker, handleValueChange, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', triggerRef, targetDOMNode, dialogId, }) {
+    const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
+    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 handlePopoverOpen = useCallback(() => {
+        const monthToFocus = dayjs(currentValue ?? defaultValue ?? new Date())
+            .startOf('month')
+            .toDate();
+        setViewingValue(monthToFocus);
+        setPendingFocusDate(dayjs(monthToFocus).format(MONTH_BASE_FORMAT));
+    }, [currentValue, defaultValue, setViewingValue, setPendingFocusDate]);
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthPicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthPicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthPicker__content'), "data-mfui-content": "filter-month-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthPicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthPicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthPicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: currentValue, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: (date) => {
+                        handleValueChange(date);
+                    } }) }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+}

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.types.d.ts

@@ -0,0 +1,24 @@
+import { type filterMonthPickerSlotRecipe } from '../../../../styled-system/recipes';
+import { type FilterMonthPickerProps } from '../FilterMonthPicker.types';
+export type InternalMonthPickerPopoverProps = {
+    currentValue: Date | undefined;
+    defaultValue: Date | undefined;
+    isPickerOpen: boolean;
+    togglePicker: () => void;
+    handleValueChange: (date: Date | undefined) => void;
+    handleClear: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled: boolean;
+    className: string | undefined;
+    classes: ReturnType<typeof filterMonthPickerSlotRecipe>;
+    formattedValue: string | undefined;
+    hasValue: boolean;
+    label: string;
+    clearButtonProps: FilterMonthPickerProps['clearButtonProps'];
+    checkDisabledMonth: FilterMonthPickerProps['checkDisabledMonth'];
+    minMonth: Date | undefined;
+    maxMonth: Date | undefined;
+    calendarLocale: FilterMonthPickerProps['calendarLocale'];
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    targetDOMNode: FilterMonthPickerProps['targetDOMNode'];
+    dialogId: string;
+};

package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.types.js

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

package/dist/src/DateTimeSelection/FilterMonthPicker/index.d.ts

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

package/dist/src/DateTimeSelection/FilterMonthPicker/index.js

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

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.d.ts

@@ -0,0 +1,15 @@
+import { type FilterMonthRangePickerProps } from './FilterMonthRangePicker.types';
+/**
+ * FilterMonthRangePicker component.
+ *
+ * A filter trigger component that allows selecting a month range via the same panel as
+ * {@link MonthRangePicker}. Displays the label alone when no range is selected, and
+ * `label：start〜end` after both bounds are selected. Conforms to the FilterSelectBox / FilterDateBox
+ * visual style.
+ *
+ * Note: The trigger markup intentionally does not reuse FilterTrigger because
+ * FilterTrigger hardcodes the DropdownIcon and adds a hidden `<input>` element,
+ * neither of which are appropriate here. FilterMonthRangePicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export declare function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, initialDisplayedMonths, clearButtonProps, disabled, className, targetDOMNode, minMonth, maxMonth, }: FilterMonthRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { BaseRangePickerProvider } from '../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useDisclosure } from '../../utilities/state/useDisclosure';
+import { dayjs } from '../../utilities/date/dayjs';
+import { filterMonthRangePickerSlotRecipe } from '../../../styled-system/recipes';
+import { SEPARATOR_CONTENT } from '../shared/BaseRangePicker/BaseRangePickerTrigger/constants';
+import { InternalMonthRangePickerPopover } from './MonthRangePickerPopover/MonthRangePickerPopover';
+const DEFAULT_FORMAT = 'YYYY/MM';
+/**
+ * FilterMonthRangePicker component.
+ *
+ * A filter trigger component that allows selecting a month range via the same panel as
+ * {@link MonthRangePicker}. Displays the label alone when no range is selected, and
+ * `label：start〜end` after both bounds are selected. Conforms to the FilterSelectBox / FilterDateBox
+ * visual style.
+ *
+ * Note: The trigger markup intentionally does not reuse FilterTrigger because
+ * FilterTrigger hardcodes the DropdownIcon and adds a hidden `<input>` element,
+ * neither of which are appropriate here. FilterMonthRangePicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, initialDisplayedMonths = 'currentAndNext', clearButtonProps, disabled = false, className, targetDOMNode, minMonth, maxMonth, }) {
+    const classes = filterMonthRangePickerSlotRecipe();
+    const triggerRef = useRef(null);
+    const dialogId = useId();
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? [undefined, undefined]);
+    const currentValue = value !== undefined ? value : internalValue;
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        const previousValue = previousValueRef.current;
+        previousValueRef.current = value;
+        if (previousValue !== undefined && value === undefined) {
+            setInternalValue(defaultValue ?? [undefined, undefined]);
+        }
+    }, [value, defaultValue]);
+    const { isOpen: isPickerOpen, toggle: togglePicker, close: closePicker, open: openPicker, } = useDisclosure({
+        value: disabled ? false : open,
+        onToggle: (nextOpen) => {
+            if (!nextOpen) {
+                triggerRef.current?.focus();
+            }
+            onOpenStateChanged?.(nextOpen);
+        },
+        onClose: () => {
+            triggerRef.current?.focus();
+        },
+    });
+    const closePickerAndNotify = useCallback(() => {
+        closePicker();
+        onOpenStateChanged?.(false);
+    }, [closePicker, onOpenStateChanged]);
+    const handleRangeChange = useCallback((dates) => {
+        if (value === undefined) {
+            setInternalValue(dates);
+        }
+        onChange?.(dates);
+    }, [value, onChange]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (value === undefined) {
+            setInternalValue([undefined, undefined]);
+        }
+        onChange?.([undefined, undefined]);
+        triggerRef.current?.focus();
+    }, [value, onChange]);
+    const [startMonth, endMonth] = currentValue;
+    const formattedValue = startMonth && endMonth
+        ? `${dayjs(startMonth).format(format)}${SEPARATOR_CONTENT}${dayjs(endMonth).format(format)}`
+        : undefined;
+    const hasValue = !!formattedValue;
+    const initialViewingDate = (() => {
+        if (initialDisplayedMonths !== 'previousAndCurrent') {
+            return;
+        }
+        const startDate = value?.[0] ?? defaultValue?.[0];
+        if (!startDate) {
+            const today = new Date();
+            return new Date(today.getFullYear() - 1, 0, 1);
+        }
+        const endDate = value?.[1] ?? defaultValue?.[1];
+        if (endDate && startDate.getFullYear() !== endDate.getFullYear()) {
+            return;
+        }
+        return new Date(startDate.getFullYear() - 1, 0, 1);
+    })();
+    return (_jsx(BaseRangePickerProvider, { value: currentValue, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isPickerOpen, open: openPicker, close: closePickerAndNotify, minDate: minMonth, maxDate: maxMonth, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: handleRangeChange, children: _jsx(InternalMonthRangePickerPopover, { isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, minMonth: minMonth, maxMonth: maxMonth, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+}

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.types.d.ts

@@ -0,0 +1,75 @@
+import { type PopoverProps } from '../../Popover';
+import { type DateRangeInput } from '../shared/BaseRangePicker/BaseRangePicker.types';
+export type FilterMonthRangePickerProps = {
+    /**
+     * The label to display for the filter.
+     */
+    label: string;
+    /**
+     * The selected month range (controlled). Each entry is the first day of a month.
+     */
+    value?: DateRangeInput;
+    /**
+     * The default month range for uncontrolled usage.
+     */
+    defaultValue?: DateRangeInput;
+    /**
+     * Callback fired when the selected month range changes.
+     *
+     * @param value - The new range `[startMonth, endMonth]`, or partial/empty tuples while interacting.
+     */
+    onChange?: (value: DateRangeInput) => void;
+    /**
+     * Whether the month range picker popover is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state of the picker changes.
+     *
+     * @param open - The new open state.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The display format for each bound of the range.
+     * Follows dayjs format tokens.
+     *
+     * @default 'YYYY/MM'
+     */
+    format?: string;
+    /**
+     * Props for the clear button, shown automatically when a complete range is selected.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     */
+    clearButtonProps?: {
+        'aria-label'?: string;
+    };
+    /**
+     * Whether the component is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name applied to the trigger button.
+     */
+    className?: string;
+    /**
+     * The target DOM node to render the month range picker popover into.
+     */
+    targetDOMNode?: PopoverProps['targetDOMNode'];
+    /**
+     * The minimum selectable month.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     */
+    maxMonth?: Date;
+    /**
+     * Controls which years are initially displayed in the two-panel calendar when there is no value.
+     *
+     * @default 'currentAndNext'
+     */
+    initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
+};

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.types.js

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

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.d.ts

@@ -0,0 +1,5 @@
+import { type InternalMonthRangePickerPopoverProps } from './MonthRangePickerPopover.types';
+/**
+ * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
+ */
+export declare function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }: InternalMonthRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Calendar as CalendarIcon } from '@moneyforward/mfui-icons-react';
+import { Popover } from '../../../Popover';
+import { FocusIndicator } from '../../../FocusIndicator';
+import { ClearButton } from '../../../shared';
+import { Typography } from '../../../Typography';
+import { cx } from '../../../../styled-system/css';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { MonthRangePickerPanel } from '../../MonthRangePicker/MonthRangePickerPanel';
+import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
+import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
+/**
+ * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
+ */
+export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }) {
+    const { viewingMonth, setViewingMonth, temporaryStart, temporaryEnd, startDate, endDate, setPendingFocusDate } = useBaseRangePickerContext();
+    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 handlePopoverOpen = useCallback(() => {
+        let dateToFocus;
+        if (temporaryStart) {
+            dateToFocus = temporaryStart;
+        }
+        else if (temporaryEnd) {
+            dateToFocus = temporaryEnd;
+        }
+        else if (startDate) {
+            dateToFocus = startDate;
+        }
+        else if (endDate) {
+            dateToFocus = endDate;
+        }
+        else {
+            dateToFocus = new Date();
+        }
+        const monthToFocus = dayjs(dateToFocus).startOf('month').toDate();
+        setViewingMonth(monthToFocus);
+        setPendingFocusDate(dayjs(monthToFocus).format('YYYY-MM'));
+    }, [temporaryStart, temporaryEnd, startDate, endDate, setViewingMonth, setPendingFocusDate]);
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+}

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.types.d.ts

@@ -0,0 +1,19 @@
+import { type filterMonthRangePickerSlotRecipe } from '../../../../styled-system/recipes';
+import { type FilterMonthRangePickerProps } from '../FilterMonthRangePicker.types';
+export type InternalMonthRangePickerPopoverProps = {
+    isPickerOpen: boolean;
+    togglePicker: () => void;
+    handleClear: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled: boolean;
+    className: string | undefined;
+    classes: ReturnType<typeof filterMonthRangePickerSlotRecipe>;
+    formattedValue: string | undefined;
+    hasValue: boolean;
+    label: string;
+    clearButtonProps: FilterMonthRangePickerProps['clearButtonProps'];
+    minMonth: FilterMonthRangePickerProps['minMonth'];
+    maxMonth: FilterMonthRangePickerProps['maxMonth'];
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    targetDOMNode: FilterMonthRangePickerProps['targetDOMNode'];
+    dialogId: string;
+};

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.types.js

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

package/dist/src/DateTimeSelection/FilterMonthRangePicker/index.d.ts

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

package/dist/src/DateTimeSelection/FilterMonthRangePicker/index.js

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

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

@@ -5,4 +5,4 @@ import { type MonthPickerProps } from './MonthPicker.types';
  *
  * @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;
+export declare function MonthPicker({ format, minMonth, maxMonth, checkDisabledMonth, calendarLocale, displayJapaneseCalendar, ...restProps }: MonthPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,15 +6,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * All logic and props are inherited from BasePicker, except for the popover content and format.
  * See BasePicker for implementation details.
  */
+import { useMemo } from 'react';
 import { BasePicker } from '../shared/BasePicker';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { MonthPickerPanel } from './MonthPickerPanel/MonthPickerPanel';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../shared/utilities/japaneseCalendar';
 /**
  * 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 }) })) }));
+export function MonthPicker({ format = 'YYYY/MM', minMonth, maxMonth, checkDisabledMonth, calendarLocale = 'ja', displayJapaneseCalendar = false, ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraMonthShort : dateToJapaneseEraMonth;
+    }, [displayJapaneseCalendar, calendarLocale]);
+    return (_jsx(BasePicker, { ...restProps, format: format, baseFormat: "YYYY-MM", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ viewingValue, setViewingValue, value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange }) }) })) }));
 }

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

@@ -39,4 +39,18 @@ export type MonthPickerProps = Omit<BasePickerProps, 'renderPopoverContent' | 'b
      * // Displays: "Jan", "Feb", etc. and English navigation labels
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Whether to display the month in Japanese calendar format (e.g., "令和7年1月")
+     * When enabled, the text input will show months in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, months are romanized with
+     *   a zero-padded month number (e.g., "Reiwa 7/01").
+     * - Pre-Meiji months (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12").
+     */
+    displayJapaneseCalendar?: boolean;
 };

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

@@ -2,38 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { MonthCell } from '../../../shared/MonthCell';
 import { useCalendarLocale } from '../../../shared/CalendarLocale/CalendarLocaleContext';
+import { getMonthCellMonthFormat } from '../../../shared/utilities/monthCellMonthFormat';
 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 monthFormat = useMemo(() => getMonthCellMonthFormat(locale, date), [locale, date]);
     const handleKeyDown = useMonthPickerKeyboardNavigation(onKeyDown, minMonth, maxMonth, checkDisabledMonth);
     return _jsx(MonthCell, { ...rest, date: date, monthFormat: monthFormat, onKeyDown: handleKeyDown });
 }

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

@@ -109,7 +109,7 @@ export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChang
         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') }, filterYear: shouldFilterYears ? filterYear : undefined, 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 })] }));
+    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, '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') }, filterYear: shouldFilterYears ? filterYear : undefined, onChange: handleYearSelect }), !isNextYearDisabled ? (_jsx(IconButton, { "aria-label": getMonthPickerLabel(locale, '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 }) {

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePicker.d.ts

@@ -14,4 +14,4 @@ import { type MonthRangePickerProps } from './MonthRangePicker.types';
  * />
  * ```
  */
-export declare function MonthRangePicker({ format, minMonth, maxMonth, startInputProps, endInputProps, initialDisplayedMonths, ...restProps }: MonthRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function MonthRangePicker({ format, minMonth, maxMonth, startInputProps, endInputProps, initialDisplayedMonths, displayJapaneseCalendar, calendarLocale, ...restProps }: MonthRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePicker.js

@@ -12,8 +12,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * - Keyboard navigation support
  * - Apply/Cancel workflow
  */
+import { useMemo } from 'react';
 import { BaseRangePicker } from '../shared/BaseRangePicker';
+import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { MonthRangePickerPanel } from './MonthRangePickerPanel';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../shared/utilities/japaneseCalendar';
 /**
  * MonthRangePicker component for selecting month ranges.
  *
@@ -29,7 +33,12 @@ import { MonthRangePickerPanel } from './MonthRangePickerPanel';
  * />
  * ```
  */
-export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, ...restProps }) {
+export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, displayJapaneseCalendar = false, calendarLocale = 'ja', ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraMonthShort : dateToJapaneseEraMonth;
+    }, [displayJapaneseCalendar, calendarLocale]);
     // MonthRangePicker panels are grouped by year (left = viewingYear, right = viewingYear + 1).
     // When `previousAndCurrent` is requested, we shift by a full year so the left panel
     // shows the previous year. This applies regardless of whether `value` is set.
@@ -51,11 +60,11 @@ export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, start
         // Same-year value + previousAndCurrent: show previous year on the left
         return new Date(startDate.getFullYear() - 1, 0, 1);
     })();
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
-            placeholder: '開始月',
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, pendingFocusDayjsFormat: "YYYY-MM", initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, startInputProps: {
+            placeholder: calendarLocale === 'en' ? 'Start month' : '開始月',
             ...startInputProps,
         }, endInputProps: {
-            placeholder: '終了月',
+            placeholder: calendarLocale === 'en' ? 'End month' : '終了月',
             ...endInputProps,
-        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", renderPopoverContent: ({ viewingValue, setViewingValue, value }) => (_jsx(MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth })) }));
+        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", calendarLocale: calendarLocale, renderPopoverContent: ({ viewingValue, setViewingValue, value }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth }) }) })) }));
 }

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePicker.types.d.ts

@@ -1,3 +1,4 @@
+import { type BasePickerProps } from '../shared/BasePicker';
 import { type BaseRangePickerProps } from '../shared/BaseRangePicker';
 /**
  * The props for the MonthRangePicker component
@@ -25,4 +26,24 @@ export type MonthRangePickerProps = BaseRangePickerProps & {
      * ```
      */
     maxMonth?: Date;
+    /**
+     * Whether to display the month in Japanese calendar format (e.g., "令和7年1月")
+     * When enabled, the text inputs will show months in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, months are romanized with
+     *   a zero-padded month number (e.g., "Reiwa 7/01").
+     * - Pre-Meiji months (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12").
+     */
+    displayJapaneseCalendar?: boolean;
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
 };

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.d.ts

@@ -1,4 +1,5 @@
 import { type MonthRangePickerMonthCellProps } from './MonthRangePickerMonthCell.types';
+import 'dayjs/locale/en';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { MonthCell } from '../../shared/MonthCell';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { getMonthCellMonthFormat } from '../../shared/utilities/monthCellMonthFormat';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
+import 'dayjs/locale/en';
 /**
  * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
  *
@@ -17,11 +20,15 @@ import { MONTH_RANGE_PICKER_A11Y_LABELS } from './constants';
  * @param props - MonthRangePickerMonthCell props
  */
 export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }) {
+    const calendarLocale = useCalendarLocale();
     // Calculate if this month is selected (either start or end of range)
     const selected = isRangeStart || isRangeEnd || monthCellProps.selected || false;
+    const monthFormat = useMemo(() => getMonthCellMonthFormat(calendarLocale, monthCellProps.date), [calendarLocale, monthCellProps.date]);
     // Create accessible label for range selection
     const accessibleLabel = useMemo(() => {
-        const monthText = dayjs(monthCellProps.date).format('MMMM YYYY');
+        const monthText = calendarLocale === 'en'
+            ? dayjs(monthCellProps.date).locale('en').format('MMMM YYYY')
+            : dayjs(monthCellProps.date).format('MMMM YYYY');
         const statusParts = [];
         if (monthCellProps.disabled) {
             statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
@@ -41,6 +48,6 @@ export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd,
             statusParts.push(MONTH_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
         }
         return statusParts.length > 0 ? `${monthText}, ${statusParts.join(', ')}` : monthText;
-    }, [monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
-    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
+    }, [calendarLocale, monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
+    return (_jsx("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: _jsx(MonthCell, { ...monthCellProps, monthFormat: monthFormat, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
 }