@moneyforward/mfui-components 3.19.0 → 3.21.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/DatePicker/DatePicker.js

@@ -4,7 +4,7 @@ import { BasePicker } from '../shared/BasePicker';
 import { DatePickerPanel } from './DatePickerPanel';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
 import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
-import { dateToEnglishEraShort } from '../shared/utilities/japaneseCalendar';
+import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
  * DatePicker component
  *
@@ -15,16 +15,7 @@ export function DatePicker({ format = 'YYYY/MM/DD', checkDisabledDate, minDate,
     const customFormatValue = useMemo(() => {
         if (!displayJapaneseCalendar)
             return;
-        if (calendarLocale === 'en') {
-            return (date) => dateToEnglishEraShort(date);
-        }
-        const formatter = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {
-            era: 'long',
-            year: 'numeric',
-            month: 'narrow',
-            day: 'numeric',
-        });
-        return (date) => formatter.format(date);
+        return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
     }, [displayJapaneseCalendar, calendarLocale]);
     return (_jsx(BasePicker, { ...props, format: format, baseFormat: "YYYY-MM-DD", calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: ({ value, onChange }) => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DatePickerPanel, { value: value, checkDisabledDate: checkDisabledDate, minDate: minDate, maxDate: maxDate, prevMonthIconButtonProps: prevMonthIconButtonProps, nextMonthIconButtonProps: nextMonthIconButtonProps, todayButtonProps: todayButtonProps, onChange: onChange }) }) })) }));
 }

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

@@ -5,4 +5,4 @@ import { type DateRangePickerProps } from './DateRangePicker.types';
  *
  * @param props - DateRangePicker props
  */
-export declare function DateRangePicker({ format, calendarLocale, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ format, calendarLocale, displayJapaneseCalendar, ...restProps }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -6,15 +6,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * All logic and props are inherited from BaseRangePicker.
  * See BaseRangePicker for implementation details.
  */
+import { useMemo } from 'react';
 import { BaseRangePicker } from '../shared/BaseRangePicker';
 import { CalendarLocaleProvider } from '../shared/CalendarLocale/CalendarLocaleContext';
+import { DisplayJapaneseCalendarProvider } from '../shared/CalendarLocale/DisplayJapaneseCalendarContext';
 import { DateRangePickerPopover } from './DateRangePickerPopover/DateRangePickerPopover';
+import { dateToEnglishEraShort, dateToJapaneseEra } from '../shared/utilities/japaneseCalendar';
 /**
  * DateRangePicker component for selecting date ranges.
  * Extends BaseRangePicker with date-specific functionality.
  *
  * @param props - DateRangePicker props
  */
-export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', ...restProps }) {
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, renderPopoverContent: () => (_jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) })) }));
+export function DateRangePicker({ format = 'YYYY/MM/DD', calendarLocale = 'ja', displayJapaneseCalendar = false, ...restProps }) {
+    const customFormatValue = useMemo(() => {
+        if (!displayJapaneseCalendar)
+            return;
+        return calendarLocale === 'en' ? dateToEnglishEraShort : dateToJapaneseEra;
+    }, [displayJapaneseCalendar, calendarLocale]);
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, calendarLocale: calendarLocale, customFormatValue: customFormatValue, renderPopoverContent: () => (_jsx(DisplayJapaneseCalendarProvider, { value: displayJapaneseCalendar, children: _jsx(CalendarLocaleProvider, { value: calendarLocale, children: _jsx(DateRangePickerPopover, {}) }) })) }));
 }

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

@@ -10,4 +10,18 @@ export type DateRangePickerProps = BaseRangePickerProps & {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Whether to display the date in Japanese calendar format (e.g., "令和7年1月15日")
+     * When enabled, the text inputs will show dates in Japanese calendar format
+     * while internal value handling remains unchanged.
+     *
+     * @default false
+     *
+     * @remarks
+     * - When combined with `calendarLocale="en"`, dates are romanized with
+     *   zero-padded month/day (e.g., "Reiwa 7/01/15").
+     * - Pre-Meiji dates (year < 1868) fall back to the Gregorian year
+     *   (e.g., "1867/12/31").
+     */
+    displayJapaneseCalendar?: boolean;
 };

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

@@ -13,6 +13,8 @@ import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
 import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
 import { getBasePickerLabel } from '../../shared/BasePicker/constants';
 import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { dateToEnglishEraMonthShort, dateToJapaneseEraMonth } from '../../shared/utilities/japaneseCalendar';
 // Utility function to add months to a date
 const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
 /**
@@ -38,6 +40,7 @@ const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth()
 export function DateRangePickerPopover() {
     const { viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled, minDate, maxDate } = useBaseRangePickerContext();
     const calendarLocale = useCalendarLocale();
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
     const rightViewingMonth = useMemo(() => addMonths(viewingMonth, 1), [viewingMonth]);
     // Check if navigation buttons should be disabled based on constraints
     const isPreviousMonthDisabled = useCallback(() => {
@@ -129,14 +132,19 @@ export function DateRangePickerPopover() {
     // 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) => {
+    // Localized month labels (Gregorian vs Japanese-calendar era, matching trigger formatting)
+    const formatMonth = useMemo(() => {
+        const firstOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+        if (displayJapaneseCalendar) {
+            const formatEra = calendarLocale === 'ja' ? dateToJapaneseEraMonth : dateToEnglishEraMonthShort;
+            return (date) => formatEra(firstOfMonth(date));
+        }
         if (calendarLocale === 'ja') {
-            return `${String(date.getFullYear())}年${String(date.getMonth() + 1)}月`;
+            return (date) => `${String(firstOfMonth(date).getFullYear())}年${String(firstOfMonth(date).getMonth() + 1)}月`;
         }
         const monthFormatter = new Intl.DateTimeFormat('en-US', { month: 'long' });
-        return `${monthFormatter.format(date)} ${String(date.getFullYear())}`;
-    }, [calendarLocale]);
+        return (date) => `${monthFormatter.format(firstOfMonth(date))} ${String(firstOfMonth(date).getFullYear())}`;
+    }, [calendarLocale, displayJapaneseCalendar]);
     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));

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

@@ -51,8 +51,8 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         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}/);
+        // Month navigation headings: Gregorian JA/EN, Japanese-era JA, or romanized-era EN (e.g. Reiwa 7/01)
+        const monthLabels = screen.getAllByText(/年[0-9０-９]*月|\d{4}年\d{1,2}月|\b(?:January|February|March|April|May|June|July|August|September|October|November|December)\b \d{4}|\b(?:Reiwa|Heisei|Showa|Taisho|Meiji)\s+\d{1,2}\/\d{2}|(?:令和|平成|昭和|大正|明治)(?:元|[0-9０-９]{1,2})年[0-9０-９]{1,2}月/);
         return monthLabels[0]?.textContent ?? null;
     }
     // Actions

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/DateRangePicker/DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility.js

@@ -12,7 +12,9 @@ export function createDateRangePickerTriggerTestUtility({ user }) {
         return screen.queryByRole('button', { name: LOCALE.CLEAR_BUTTON_LABEL });
     }
     function getCalendarButton() {
-        return screen.getByRole('button', { name: LOCALE.CALENDAR_BUTTON_LABEL });
+        return screen.getByRole('button', {
+            name: new RegExp(`^(?:${LOCALE.CALENDAR_BUTTON_LABEL}|Open calendar)$`),
+        });
     }
     // Value Queries
     function getStartValue() {

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 {};