@moneyforward/mfui-components 3.19.0 → 3.20.0

package/dist/src/CheckboxCard/CheckboxCard.js

@@ -29,11 +29,5 @@ export const CheckboxCard = forwardRef(({ label, layout = 'vertical', renderDeta
         disableResponsive,
         isResponsive: Boolean(responsiveSlot.narrowViewport),
     });
-    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
-            /* When responsive is disabled, render single element but with both contents using CSS for switching */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.narrowViewport ? (
-            /* When responsive is enabled, render separate wide/narrow elements */
-            _jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.base ? (
-            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
-            _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })) : null] }));
+    return (_jsxs("div", { className: cx(classes.root, 'mfui-CheckboxCard__root', className), children: [_jsx(FocusIndicator, { disableNestedFocus: true, children: _jsxs(Typography, { variant: "label", className: cx(classes.inputWrapper, 'mfui-CheckboxCard__inputWrapper'), as: "label", htmlFor: props.id, children: [_jsx(Checkbox, { ref: ref, ...props, className: cx(classes.input, 'mfui-CheckboxCard__input') }), _jsx("span", { className: cx(classes.label, 'mfui-CheckboxCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.narrowViewport ? (_jsxs(_Fragment, { children: [_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsWide, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) }), _jsx("div", { "data-mfui-content": "details", className: cx(classes.details, classes.detailsNarrow, 'mfui-CheckboxCard__details'), children: responsiveSlot.narrowViewport(checkboxState) })] })) : responsiveSlot.base ? (_jsx("div", { "data-mfui-content": "details", className: cx(classes.details, 'mfui-CheckboxCard__details'), children: responsiveSlot.base(checkboxState) })) : null] }));
 });

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerProvider/DateRangePickerProvider.js

@@ -5,6 +5,7 @@ import { flushSync } from 'react-dom';
 import { dayjs } from '../../../utilities/date/dayjs';
 import { useUpdateEffect } from '../../../utilities/effect/useUpdateEffect';
 import { useTransformedState } from '../../../utilities/state/useTransformedState';
+import { parseInputDateSimple } from '../../shared/utilities/dateParsing';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
 // Normalizes a date to the first of the month
@@ -92,14 +93,13 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const handleStartDateStringChange = useCallback((value) => {
         setDateStrings([value, endDateString]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = dayjs(value, format, true);
-        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate)) {
-            const newDate = parsedDate.toDate();
-            setViewingMonth(newDate);
+        const parsedDate = parseInputDateSimple(value, format);
+        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate)) {
+            setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryStart(newDate);
+            setTemporaryStart(parsedDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(parsedDate).format('YYYY-MM-DD'));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
@@ -110,14 +110,13 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const handleEndDateStringChange = useCallback((value) => {
         setDateStrings([startDateString, value]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = dayjs(value, format, true);
-        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate)) {
-            const newDate = parsedDate.toDate();
-            setViewingMonth(newDate);
+        const parsedDate = parseInputDateSimple(value, format);
+        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate)) {
+            setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryEnd(newDate);
+            setTemporaryEnd(parsedDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(parsedDate).format('YYYY-MM-DD'));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty

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

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { dayjs } from '../../../../utilities/date/dayjs';
 import { useDateRangePickerContext } from '../../DateRangePickerProvider';
+import { parseInputDateSimple } from '../../../shared/utilities/dateParsing';
 const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
     ...baseProps,
     value,
@@ -15,12 +16,12 @@ const createInputProps = (baseProps, value, format, onStringChange, onDateChange
         if (event.defaultPrevented)
             return;
         baseProps.onBlur?.(event);
-        const dateValue = dayjs(value, format, true);
-        if (!dateValue.isValid()) {
+        const parsedDate = parseInputDateSimple(value, format);
+        if (!parsedDate) {
             onDateChange(undefined, otherDate);
             return;
         }
-        const currentDate = dateValue.startOf('day').toDate();
+        const currentDate = dayjs(parsedDate).startOf('day').toDate();
         // Check if the date is disabled due to constraints
         if (isDateDisabled?.(currentDate)) {
             // Clear the input if the date violates constraints

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.d.ts

@@ -0,0 +1,6 @@
+import { type InternalDateRangePickerContentProps } from './DateRangePickerContent.types';
+/**
+ * Internal component that accesses BaseRangePickerContext for display and clear handling.
+ * Must be rendered inside a BaseRangePickerProvider.
+ */
+export declare function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }: InternalDateRangePickerContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.js

@@ -0,0 +1,33 @@
+'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 { DateRangePickerPopover } from '../../DateRangePicker/DateRangePickerPopover';
+import { CalendarLocaleProvider } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+/**
+ * Internal component that accesses BaseRangePickerContext for display and clear handling.
+ * Must be rendered inside a BaseRangePickerProvider.
+ */
+export function InternalDateRangePickerContent({ classes, triggerRef, dialogId, label, format, disabled, className, clearButtonProps, targetDOMNode, isCalendarOpen, toggleCalendar, calendarLocale, }) {
+    const { startDate, endDate, handleClear: contextHandleClear, setPendingFocusDate } = useBaseRangePickerContext();
+    const formattedStartDate = startDate ? dayjs(startDate).format(format) : undefined;
+    const formattedEndDate = endDate ? dayjs(endDate).format(format) : undefined;
+    const hasValue = !!(formattedStartDate && formattedEndDate);
+    const formattedValue = hasValue ? `${formattedStartDate}〜${formattedEndDate}` : undefined;
+    const handleTriggerClear = useCallback((event) => {
+        event.stopPropagation();
+        contextHandleClear();
+    }, [contextHandleClear]);
+    const handlePopoverOpen = useCallback(() => {
+        const dateToFocus = startDate ?? endDate ?? new Date();
+        setPendingFocusDate(dayjs(dateToFocus).format('YYYY-MM-DD'));
+    }, [startDate, endDate, setPendingFocusDate]);
+    return (_jsx(Popover, { open: isCalendarOpen, targetDOMNode: targetDOMNode, minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterDateRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterDateRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isCalendarOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterDateRangePicker__content'), "data-mfui-content": "filter-date-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-date-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-date-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterDateRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterDateRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-date-range-picker-clear-button", disabled: disabled, onClick: handleTriggerClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: cx(classes.popoverWrapper, 'mfui-FilterDateRangePicker__popoverWrapper'), children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })), onOpenStateChanged: toggleCalendar, onOpen: handlePopoverOpen }));
+}

package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.types.d.ts

@@ -0,0 +1,17 @@
+import { type filterDateRangePickerSlotRecipe } from '../../../../styled-system/recipes';
+import { type FilterDateRangePickerProps } from '../FilterDateRangePicker.types';
+import { type BasePickerProps } from '../../shared/BasePicker';
+export type InternalDateRangePickerContentProps = {
+    classes: ReturnType<typeof filterDateRangePickerSlotRecipe>;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    dialogId: string;
+    label: string;
+    format: string;
+    disabled: boolean;
+    className: string | undefined;
+    clearButtonProps: FilterDateRangePickerProps['clearButtonProps'];
+    targetDOMNode: FilterDateRangePickerProps['targetDOMNode'];
+    isCalendarOpen: boolean;
+    toggleCalendar: () => void;
+    calendarLocale: NonNullable<BasePickerProps['calendarLocale']>;
+};

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

@@ -0,0 +1,14 @@
+import { type FilterDateRangePickerProps } from './FilterDateRangePicker.types';
+/**
+ * FilterDateRangePicker component.
+ *
+ * A filter trigger component that allows selecting a date range via a dual-calendar picker.
+ * Displays the label alone when no range is selected, and "label：startDate〜endDate"
+ * after a range is applied. Conforms to the FilterSelectBox 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. FilterDateRangePicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export declare function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, clearButtonProps, disabled, className, targetDOMNode, minDate, maxDate, calendarLocale, }: FilterDateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId, useRef } from 'react';
+import { filterDateRangePickerSlotRecipe } from '../../../styled-system/recipes';
+import { useDisclosure } from '../../utilities/state/useDisclosure';
+import { BaseRangePickerProvider } from '../shared/BaseRangePicker/BaseRangePickerProvider';
+import { InternalDateRangePickerContent } from './DateRangePickerContent/DateRangePickerContent';
+const DEFAULT_FORMAT = 'YYYY/MM/DD';
+/**
+ * FilterDateRangePicker component.
+ *
+ * A filter trigger component that allows selecting a date range via a dual-calendar picker.
+ * Displays the label alone when no range is selected, and "label：startDate〜endDate"
+ * after a range is applied. Conforms to the FilterSelectBox 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. FilterDateRangePicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export function FilterDateRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, clearButtonProps, disabled = false, className, targetDOMNode, minDate, maxDate, calendarLocale = 'ja', }) {
+    const classes = filterDateRangePickerSlotRecipe();
+    const triggerRef = useRef(null);
+    const dialogId = useId();
+    const { isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, toggle: toggleCalendar, } = useDisclosure({
+        // disabled takes precedence: never open the calendar when the trigger is disabled.
+        value: disabled ? false : open,
+        // onToggle fires for Escape and outside-click; focus trigger on close.
+        onToggle: (nextOpen) => {
+            if (!nextOpen) {
+                triggerRef.current?.focus();
+            }
+            onOpenStateChanged?.(nextOpen);
+        },
+        // onClose fires for programmatic close (Apply/Cancel buttons); focus trigger there too.
+        onClose: () => {
+            triggerRef.current?.focus();
+            onOpenStateChanged?.(false);
+        },
+    });
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, format: format, isOpen: isCalendarOpen, open: openCalendar, close: closeCalendar, minDate: minDate, maxDate: maxDate, disabled: disabled, onChange: onChange, children: _jsx(InternalDateRangePickerContent, { classes: classes, triggerRef: triggerRef, dialogId: dialogId, label: label, format: format, disabled: disabled, className: className, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, isCalendarOpen: isCalendarOpen, toggleCalendar: toggleCalendar, calendarLocale: calendarLocale }) }));
+}

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

@@ -0,0 +1,78 @@
+import { type PopoverProps } from '../../Popover';
+import { type BasePickerProps } from '../shared/BasePicker';
+import { type DateRangeInput } from '../shared/BaseRangePicker/BaseRangePicker.types';
+export type FilterDateRangePickerProps = {
+    /**
+     * The label to display for the filter.
+     */
+    label: string;
+    /**
+     * The selected date range value (controlled).
+     * Pass `[undefined, undefined]` to clear the selection in controlled mode.
+     */
+    value?: DateRangeInput;
+    /**
+     * The default selected date range value for uncontrolled usage.
+     */
+    defaultValue?: DateRangeInput;
+    /**
+     * Callback fired when the selected date range changes.
+     * Called with `[startDate, endDate]` when a range is applied, or `[undefined, undefined]` when cleared.
+     *
+     * @param dates - The new selected date range.
+     */
+    onChange?: (dates: DateRangeInput) => void;
+    /**
+     * Whether the calendar popover is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state of the calendar changes.
+     *
+     * @param open - The new open state.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The display format for the selected dates.
+     * Follows dayjs format tokens.
+     *
+     * @default 'YYYY/MM/DD'
+     */
+    format?: string;
+    /**
+     * Props for the clear button, shown automatically when a date 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 calendar popover into.
+     */
+    targetDOMNode?: PopoverProps['targetDOMNode'];
+    /**
+     * The minimum selectable date.
+     */
+    minDate?: Date;
+    /**
+     * The maximum selectable date.
+     */
+    maxDate?: Date;
+    /**
+     * The locale of the calendar (affects navigation labels and month display format).
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { type FilterMonthPickerProps } from './FilterMonthPicker.types';
+/**
+ * FilterMonthPicker component.
+ *
+ * A filter trigger component that allows selecting a month via a month picker.
+ * Displays the label alone when no month is selected, and "label：formatted month"
+ * after a month is selected. Conforms to the FilterSelectBox 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. FilterMonthPicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export declare function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format, clearButtonProps, disabled, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale, }: FilterMonthPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,75 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { BasePickerProvider } from '../shared/BasePicker/BasePickerProvider';
+import { useDisclosure } from '../../utilities/state/useDisclosure';
+import { dayjs } from '../../utilities/date/dayjs';
+import { filterMonthPickerSlotRecipe } from '../../../styled-system/recipes';
+import { InternalMonthPickerPopover } from './MonthPickerPopover/MonthPickerPopover';
+const DEFAULT_FORMAT = 'YYYY/MM';
+/**
+ * FilterMonthPicker component.
+ *
+ * A filter trigger component that allows selecting a month via a month picker.
+ * Displays the label alone when no month is selected, and "label：formatted month"
+ * after a month is selected. Conforms to the FilterSelectBox 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. FilterMonthPicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export function FilterMonthPicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, clearButtonProps, disabled = false, className, targetDOMNode, checkDisabledMonth, minMonth, maxMonth, calendarLocale = 'ja', }) {
+    const classes = filterMonthPickerSlotRecipe();
+    const triggerRef = useRef(null);
+    const dialogId = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = value !== undefined ? value : internalValue;
+    // When a controlled value transitions back to undefined, clear any stale internal value
+    // so the component doesn't show a previously-selected uncontrolled month.
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        const previousValue = previousValueRef.current;
+        previousValueRef.current = value;
+        if (previousValue !== undefined && value === undefined) {
+            setInternalValue(undefined);
+        }
+    }, [value]);
+    const { isOpen: isPickerOpen, toggle: togglePicker, close: closePicker, } = useDisclosure({
+        // disabled takes precedence: never open the picker when the trigger is disabled.
+        value: disabled ? false : open,
+        // onToggle fires for Escape and outside-click (via togglePicker); focus trigger on close.
+        onToggle: (nextOpen) => {
+            if (!nextOpen) {
+                triggerRef.current?.focus();
+            }
+            onOpenStateChanged?.(nextOpen);
+        },
+        // onClose fires for programmatic close (month selection); focus trigger there too.
+        onClose: () => {
+            triggerRef.current?.focus();
+        },
+    });
+    const handleValueChange = useCallback((date) => {
+        if (value === undefined) {
+            setInternalValue(date);
+        }
+        onChange?.(date);
+        // closePicker() fires useDisclosure.onClose (returns focus to trigger) but intentionally
+        // does NOT fire onToggle. The explicit onOpenStateChanged call below is the single path
+        // for notifying the parent when a month selection closes the popover.
+        closePicker();
+        onOpenStateChanged?.(false);
+    }, [value, onChange, closePicker, onOpenStateChanged]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (value === undefined) {
+            setInternalValue(undefined);
+        }
+        onChange?.();
+        triggerRef.current?.focus();
+    }, [value, onChange, triggerRef]);
+    const formattedValue = currentValue ? dayjs(currentValue).format(format) : undefined;
+    const hasValue = !!formattedValue;
+    return (_jsx(BasePickerProvider, { value: currentValue, baseFormat: "YYYY-MM", children: _jsx(InternalMonthPickerPopover, { currentValue: currentValue, defaultValue: defaultValue, isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleValueChange: handleValueChange, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, checkDisabledMonth: checkDisabledMonth, minMonth: minMonth, maxMonth: maxMonth, calendarLocale: calendarLocale, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+}

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

@@ -0,0 +1,83 @@
+import { type PopoverProps } from '../../Popover';
+import { type BasePickerProps } from '../shared/BasePicker';
+export type FilterMonthPickerProps = {
+    /**
+     * The label to display for the filter.
+     */
+    label: string;
+    /**
+     * The selected month value (controlled).
+     */
+    value?: Date;
+    /**
+     * The default selected month value for uncontrolled usage.
+     */
+    defaultValue?: Date;
+    /**
+     * Callback fired when the selected month changes.
+     *
+     * @param value - The new selected month, or undefined when cleared.
+     */
+    onChange?: (value?: Date) => void;
+    /**
+     * Whether the month 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 the selected month.
+     * Follows dayjs format tokens.
+     *
+     * @default 'YYYY/MM'
+     */
+    format?: string;
+    /**
+     * Props for the clear button, shown automatically when a month 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 picker popover into.
+     */
+    targetDOMNode?: PopoverProps['targetDOMNode'];
+    /**
+     * Function to check if a month should be disabled in the picker.
+     *
+     * @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.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     */
+    maxMonth?: Date;
+    /**
+     * The locale of the calendar (affects navigation labels and month display format).
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};

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

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

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;