@moneyforward/mfui-components 3.19.0 → 3.21.0

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

@@ -5,11 +5,14 @@ import { cx } from '../../../../styled-system/css';
 import { monthRangePickerNavigationSlotRecipe } from '../../../../styled-system/recipes';
 import { IconButton } from '../../../IconButton';
 import { Typography } from '../../../Typography';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
+import { useDisplayJapaneseCalendar } from '../../shared/CalendarLocale/DisplayJapaneseCalendarContext';
+import { yearToEraLabel } from '../../shared/utilities/japaneseCalendar';
 // Constants for year navigation limits
 const MINIMUM_VIEWABLE_YEAR = 1900;
 const MAXIMUM_VIEWABLE_YEAR = 2100;
-const LABEL_PREV_YEAR = '前年';
-const LABEL_NEXT_YEAR = '翌年';
+const LABEL_PREV_YEAR = { ja: '前年', en: 'Previous year' };
+const LABEL_NEXT_YEAR = { ja: '翌年', en: 'Next year' };
 /**
  * Year navigation component for MonthRangePicker.
  *
@@ -21,8 +24,18 @@ const LABEL_NEXT_YEAR = '翌年';
  * @param props - MonthRangePickerNavigation props
  */
 export function MonthRangePickerNavigation({ viewingValue, setViewingValue, minMonth, maxMonth, }) {
+    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
+    const calendarLocale = useCalendarLocale();
     const currentYear = viewingValue.getFullYear();
     const nextYear = currentYear + 1;
+    const formatYear = (year) => {
+        if (displayJapaneseCalendar) {
+            return yearToEraLabel(year, calendarLocale);
+        }
+        return calendarLocale === 'en' ? String(year) : `${String(year)}年`;
+    };
+    const currentYearLabel = formatYear(currentYear);
+    const nextYearLabel = formatYear(nextYear);
     // Calculate if year navigation should be disabled based on min/max constraints
     const { isPreviousYearDisabled, isNextYearDisabled } = useMemo(() => {
         const baseMinYearDisabled = currentYear <= MINIMUM_VIEWABLE_YEAR;
@@ -65,5 +78,5 @@ export function MonthRangePickerNavigation({ viewingValue, setViewingValue, minM
         }
     }, [isNextYearDisabled, viewingValue, nextYear, setViewingValue]);
     const classNames = monthRangePickerNavigationSlotRecipe();
-    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerNavigation__root'), children: [_jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx(IconButton, { "aria-label": LABEL_PREV_YEAR, disabled: isPreviousYearDisabled, onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) }), _jsxs(Typography, { variant: "contentHeading", children: [currentYear, "\u5E74"] }), _jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') })] }), _jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') }), _jsxs(Typography, { variant: "contentHeading", children: [nextYear, "\u5E74"] }), _jsx(IconButton, { "aria-label": LABEL_NEXT_YEAR, disabled: isNextYearDisabled, onClick: handleNextYear, children: _jsx(PickerAfter, {}) })] })] }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerNavigation__root'), children: [_jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx(IconButton, { "aria-label": LABEL_PREV_YEAR[calendarLocale], disabled: isPreviousYearDisabled, onClick: handlePreviousYear, children: _jsx(PickerBefore, {}) }), _jsx(Typography, { variant: "contentHeading", children: currentYearLabel }), _jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') })] }), _jsxs("div", { className: cx(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [_jsx("div", { className: cx(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') }), _jsx(Typography, { variant: "contentHeading", children: nextYearLabel }), _jsx(IconButton, { "aria-label": LABEL_NEXT_YEAR[calendarLocale], disabled: isNextYearDisabled, onClick: handleNextYear, children: _jsx(PickerAfter, {}) })] })] }));
 }

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

@@ -7,6 +7,7 @@ import { BaseRangePickerFooter } from '../../shared/BaseRangePicker/BaseRangePic
 import { MonthRangePickerNavigation } from '../MonthRangePickerNavigation';
 import { MonthRangePickerContent } from '../MonthRangePickerContent';
 import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useCalendarLocale } from '../../shared/CalendarLocale/CalendarLocaleContext';
 /**
  * MonthRangePickerPanel component for selecting month ranges.
  *
@@ -32,6 +33,7 @@ import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRang
  */
 export function MonthRangePickerPanel({ viewingValue, setViewingValue, value, minMonth, maxMonth, }) {
     const { setPendingFocusDate, handlePreview } = useBaseRangePickerContext();
+    const calendarLocale = useCalendarLocale();
     // Cross-Panel Keyboard Navigation for MonthRangePicker
     const handleKeyboardNavigation = useCallback((event) => {
         const { key, currentTarget } = event;
@@ -85,5 +87,5 @@ export function MonthRangePickerPanel({ viewingValue, setViewingValue, value, mi
         }
     }, [viewingValue, setViewingValue, setPendingFocusDate, handlePreview]);
     const classNames = monthRangePickerPanelSlotRecipe();
-    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerPanel__root'), children: [_jsx(MonthRangePickerNavigation, { viewingValue: viewingValue, setViewingValue: setViewingValue, minMonth: minMonth, maxMonth: maxMonth }), _jsx(MonthRangePickerContent, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerFooter, {})] }));
+    return (_jsxs("div", { className: cx(classNames.root, 'mfui-MonthRangePickerPanel__root'), children: [_jsx(MonthRangePickerNavigation, { viewingValue: viewingValue, setViewingValue: setViewingValue, minMonth: minMonth, maxMonth: maxMonth }), _jsx(MonthRangePickerContent, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), _jsx(BaseRangePickerFooter, { calendarLocale: calendarLocale })] }));
 }

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

@@ -0,0 +1,43 @@
+/**
+ * TimePicker is a styled wrapper around the native `<input type="time">`.
+ *
+ * The browser owns the picker UI: typing into the segmented control, the
+ * UA-provided dropdown, and Escape-to-revert semantics all come from the
+ * platform. The trailing clock icon opens the native picker — on desktop via
+ * `HTMLInputElement.showPicker()`, on iOS Safari (where `showPicker` is not
+ * reliably implemented) by dispatching a click on the underlying input, which
+ * is what iOS Safari uses to open its native time picker.
+ *
+ * The `value` prop follows the same string format as the HTML `<input type="time">`
+ * element: `"HH:mm"` for hours and minutes, `"HH:mm:ss"` for hours, minutes, and seconds.
+ *
+ * The component does not render its own `<label>`. Consumers are expected to
+ * provide an accessible name via a parent `<label htmlFor>`, `aria-labelledby`,
+ * or `aria-label`.
+ *
+ * @example
+ * // Controlled
+ * const [time, setTime] = useState<string>('');
+ * <TimePicker value={time} onChange={setTime} />
+ *
+ * @example
+ * // With seconds
+ * <TimePicker format="HH:mm:ss" />
+ */
+export declare const TimePicker: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type" | "aria-invalid" | keyof {
+    onChange?: (value: string, event: import("react").SyntheticEvent) => void;
+    format?: "HH:mm" | "HH:mm:ss";
+    size?: "small" | "medium" | "large";
+    invalid?: boolean;
+    onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+}> & {
+    onChange?: (value: string, event: import("react").SyntheticEvent) => void;
+    format?: "HH:mm" | "HH:mm:ss";
+    size?: "small" | "medium" | "large";
+    invalid?: boolean;
+    onClear?: (event: import("react").MouseEvent<HTMLButtonElement>) => void;
+    clearButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+    pickerIndicatorIconButtonProps?: Pick<import("../..").IconButtonProps, "aria-label">;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/DateTimeSelection/TimePicker/TimePicker.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useRef, useState } from 'react';
+import { Time } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../../styled-system/css';
+import { timePickerSlotRecipe } from '../../../styled-system/recipes';
+import { FocusIndicator } from '../../FocusIndicator';
+import { InternalIconButton as IconButton } from '../../IconButton/IconButton';
+import { ClearButton } from '../../shared/ClearButton';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { getTimePickerLabel } from './constants';
+/**
+ * TimePicker is a styled wrapper around the native `<input type="time">`.
+ *
+ * The browser owns the picker UI: typing into the segmented control, the
+ * UA-provided dropdown, and Escape-to-revert semantics all come from the
+ * platform. The trailing clock icon opens the native picker — on desktop via
+ * `HTMLInputElement.showPicker()`, on iOS Safari (where `showPicker` is not
+ * reliably implemented) by dispatching a click on the underlying input, which
+ * is what iOS Safari uses to open its native time picker.
+ *
+ * The `value` prop follows the same string format as the HTML `<input type="time">`
+ * element: `"HH:mm"` for hours and minutes, `"HH:mm:ss"` for hours, minutes, and seconds.
+ *
+ * The component does not render its own `<label>`. Consumers are expected to
+ * provide an accessible name via a parent `<label htmlFor>`, `aria-labelledby`,
+ * or `aria-label`.
+ *
+ * @example
+ * // Controlled
+ * const [time, setTime] = useState<string>('');
+ * <TimePicker value={time} onChange={setTime} />
+ *
+ * @example
+ * // With seconds
+ * <TimePicker format="HH:mm:ss" />
+ */
+export const TimePicker = forwardRef(({ value, defaultValue, onChange, format = 'HH:mm', size = 'medium', disabled = false, invalid = false, step, onClear, clearButtonProps, pickerIndicatorIconButtonProps, className, ...inputProps }, ref) => {
+    const inputRef = useRef(null);
+    const mergedInputRef = mergeRefs(ref, inputRef);
+    // Track the live value internally so the clear button can read it whether
+    // the consumer is using `value` (controlled) or `defaultValue` (uncontrolled).
+    const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
+    const effectiveValue = value === undefined ? internalValue : value;
+    const hasValue = effectiveValue !== '';
+    const classes = timePickerSlotRecipe({ size, disabled, invalid });
+    const pickerLabel = pickerIndicatorIconButtonProps?.['aria-label'] ?? getTimePickerLabel('ja', 'openPicker');
+    const resolvedStep = step ?? (format === 'HH:mm:ss' ? 1 : undefined);
+    const handleClear = useCallback((event) => {
+        if (!inputRef.current)
+            return;
+        // eslint-disable-next-line @typescript-eslint/unbound-method
+        const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;
+        setter?.call(inputRef.current, '');
+        setInternalValue('');
+        onChange?.('', event);
+        inputRef.current.focus();
+        onClear?.(event);
+    }, [onChange, onClear]);
+    // Try the spec-compliant `showPicker()` API first. On iOS Safari (where
+    // `showPicker` is not reliably implemented and frequently throws), fall
+    // back to dispatching a click on the input element — iOS Safari opens its
+    // native time picker in response to a user-initiated click on the input.
+    const triggerPicker = useCallback(() => {
+        const input = inputRef.current;
+        if (!input || disabled)
+            return;
+        if (typeof input.showPicker === 'function') {
+            try {
+                input.showPicker();
+                return;
+            }
+            catch {
+                // Fall through to the click fallback below.
+            }
+        }
+        input.click();
+    }, [disabled]);
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { className: cx(classes.root, 'mfui-TimePicker__root', className), children: [_jsx("input", { ...inputProps, ref: mergedInputRef, type: "time", className: cx(classes.input, 'mfui-TimePicker__input'), value: value, defaultValue: defaultValue, disabled: disabled, step: resolvedStep, "aria-invalid": invalid || undefined, onChange: (event) => {
+                        setInternalValue(event.target.value);
+                        onChange?.(event.target.value, event);
+                    } }), hasValue && !disabled ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', className: cx(classes.clearButton, 'mfui-TimePicker__clearButton'), disabled: disabled, onClick: handleClear })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": pickerLabel, className: cx(classes.pickerButton, 'mfui-TimePicker__pickerButton'), disabled: disabled, onClick: () => {
+                        triggerPicker();
+                    }, children: _jsx(Time, {}) })] }) }));
+});

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

@@ -0,0 +1,61 @@
+import { type ComponentPropsWithoutRef, type MouseEvent, type SyntheticEvent } from 'react';
+import { type IconButtonProps } from '../../IconButton';
+type TimePickerOwnProps = {
+    /**
+     * Callback fired when the time value changes.
+     *
+     * @param value - The new time string (e.g., `"09:30"`) — empty string when cleared.
+     *
+     * @param event - The originating event. A `ChangeEvent<HTMLInputElement>` for
+     * input typing, a `MouseEvent` from the clear button when the value is cleared.
+     */
+    onChange?: (value: string, event: SyntheticEvent) => void;
+    /**
+     * The display and input format. Drives the granularity of the underlying
+     * `<input type="time">` by setting `step=1` for seconds.
+     *
+     * **iOS Safari limitation**: iOS Safari ignores the `step` attribute on
+     * `<input type="time">`, so the seconds segment is never rendered or
+     * editable there. Setting `format="HH:mm:ss"` on iOS Safari still produces
+     * an HH:mm-only input; consumers that need seconds on iOS must collect
+     * them through a separate control.
+     *
+     * @default 'HH:mm'
+     */
+    format?: 'HH:mm' | 'HH:mm:ss';
+    /**
+     * Size variant matching the Figma trigger: small (24px) / medium (32px) / large (48px).
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Whether the input is invalid (applies error border + sets `aria-invalid`).
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Props for the clear IconButton. Use `aria-label` to override the default
+     * accessible name.
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+    /**
+     * Props for the picker indicator IconButton (the clock icon). Use `aria-label`
+     * to override the default accessible name.
+     */
+    pickerIndicatorIconButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+};
+/**
+ * `TimePicker` is a wrapper around `<input type="time">`, so it inherits the
+ * native input's attributes (`name`, `id`, `min`, `max`, `step`, `required`,
+ * `disabled`, `aria-*`, `onBlur`, `onFocus`, `className`, …) plus the
+ * component-specific props above. `onChange`, `size`, `type` and `aria-invalid`
+ * are intentionally omitted — they are owned by the component.
+ */
+export type TimePickerProps = Omit<ComponentPropsWithoutRef<'input'>, keyof TimePickerOwnProps | 'type' | 'aria-invalid'> & TimePickerOwnProps;
+export {};

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

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

package/dist/src/DateTimeSelection/TimePicker/constants.d.ts

@@ -0,0 +1,4 @@
+type TimePickerLabelKey = 'openPicker';
+export declare const TIME_PICKER_LABELS: Record<'ja' | 'en', Record<TimePickerLabelKey, string>>;
+export declare function getTimePickerLabel(locale: 'ja' | 'en', key: TimePickerLabelKey): string;
+export {};

package/dist/src/DateTimeSelection/TimePicker/constants.js

@@ -0,0 +1,12 @@
+export const TIME_PICKER_LABELS = {
+    ja: {
+        openPicker: '時刻を開く',
+    },
+    en: {
+        openPicker: 'Open time picker',
+    },
+};
+export function getTimePickerLabel(locale, key) {
+    const safeLocale = locale in TIME_PICKER_LABELS ? locale : 'ja';
+    return TIME_PICKER_LABELS[safeLocale][key];
+}

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

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

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

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

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

@@ -1,5 +1,9 @@
 export * from './DatePicker';
 export * from './FilterDatePicker';
+export * from './FilterDateRangePicker';
+export * from './FilterMonthPicker';
+export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';
+export * from './TimePicker';

package/dist/src/DateTimeSelection/index.js

@@ -1,5 +1,9 @@
 export * from './DatePicker';
 export * from './FilterDatePicker';
+export * from './FilterDateRangePicker';
+export * from './FilterMonthPicker';
+export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';
+export * from './TimePicker';

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.d.ts

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.js

@@ -9,8 +9,8 @@ import { dayjs } from '../../../utilities/date/dayjs';
 /**
  * Internal component that has access to BaseRangePickerContext
  */
-function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
-    const { setPendingFocusDate, temporaryStart, temporaryEnd, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
+function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
+    const { setPendingFocusDate, temporaryStart, temporaryEnd, startDate, endDate, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
     const handlePopoverOpen = useCallback((event) => {
@@ -31,7 +31,7 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         // 3. Selected start date (if exists)
         // 4. Selected end date (if exists and no start date)
         // 5. Current date (today)
-        // 6. First non-disabled date (handled by CalendarGrid automatically)
+        // 6. First non-disabled cell (handled by CalendarGrid / MonthGrid automatically)
         let dateToFocus;
         if (temporaryStart) {
             dateToFocus = temporaryStart;
@@ -39,16 +39,32 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         else if (temporaryEnd) {
             dateToFocus = temporaryEnd;
         }
+        else if (startDate) {
+            dateToFocus = startDate;
+        }
+        else if (endDate) {
+            dateToFocus = endDate;
+        }
         else {
-            // Default to today's date - CalendarGrid will handle finding first non-disabled date if today is disabled
+            // Default to today's date - the grid will focus the first non-disabled cell if needed
             dateToFocus = new Date();
         }
-        // Set the pending focus date so CalendarGrid can focus on it when it renders
-        // Use the format from the context to handle both date and month formats
-        const formattedDate = dayjs(dateToFocus).format(format);
+        // Set the pending focus key so the popover grid can focus the matching cell when it renders.
+        // Must match DateCell `data-mfui-date` (YYYY-MM-DD) or MonthCell `data-mfui-month` (YYYY-MM).
+        const formattedDate = dayjs(dateToFocus).format(pendingFocusDayjsFormat);
         setPendingFocusDate(formattedDate);
         open();
-    }, [startInputRef, endInputRef, temporaryStart, temporaryEnd, setPendingFocusDate, open, format]);
+    }, [
+        startInputRef,
+        endInputRef,
+        temporaryStart,
+        temporaryEnd,
+        startDate,
+        endDate,
+        setPendingFocusDate,
+        open,
+        pendingFocusDayjsFormat,
+    ]);
     return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
@@ -61,12 +77,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.types.d.ts

@@ -270,6 +270,16 @@ export type BaseRangePickerProps = {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Custom function to format a Date value for display in the input fields.
+     * When provided, overrides the default dayjs formatting.
+     * Use this with `displayJapaneseCalendar` to show era-format strings in the inputs.
+     *
+     * @param date - The date to format
+     *
+     * @returns The formatted string to display
+     */
+    customFormatValue?: (date: Date) => string;
     /**
      * Controls which months are initially displayed in the two-panel calendar view.
      * - `'currentAndNext'`: Shows the value's start month on the left and the next month on the right.
@@ -307,4 +317,13 @@ export type BaseRangePickerProps = {
      * @internal
      */
     initialViewingDate?: Date;
+    /**
+     * dayjs format for pending grid focus strings (`pendingFocusDate` / `pendingFocusMonth`).
+     * Must match the grid: `YYYY-MM-DD` for day calendars, `YYYY-MM` for month grids.
+     *
+     * @internal
+     *
+     * @default 'YYYY-MM-DD'
+     */
+    pendingFocusDayjsFormat?: 'YYYY-MM-DD' | 'YYYY-MM';
 };

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.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 { parseInputDate } from '../../utilities/dateParsing';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
 // Normalizes a date to the first of the month
@@ -97,11 +98,12 @@ function autoCompletePartialRange(dates) {
     }
     return dates;
 }
-const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
+    const formatDate = useMemo(() => customFormatValue ?? ((d) => dayjs(d).format(format)), [customFormatValue, format]);
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
         const [startDate, endDate] = value ?? defaultValue ?? [undefined, undefined];
-        return [startDate ? dayjs(startDate).format(format) : '', endDate ? dayjs(endDate).format(format) : ''];
+        return [startDate ? formatDate(startDate) : '', endDate ? formatDate(endDate) : ''];
     });
     const [startDate, endDate] = value ?? dates;
     const [startDateString, endDateString] = dateStrings;
@@ -134,9 +136,9 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     useUpdateEffect(() => {
         if (value) {
             setDates(value);
-            setDateStrings([value[0] ? dayjs(value[0]).format(format) : '', value[1] ? dayjs(value[1]).format(format) : '']);
+            setDateStrings([value[0] ? formatDate(value[0]) : '', value[1] ? formatDate(value[1]) : '']);
         }
-    }, [value, format, setDates]);
+    }, [value, formatDate, setDates]);
     const handleChange = useCallback((newDates) => {
         let [newStartDate, newEndDate] = normalizeToStartOfDay(newDates);
         // Swap dates if start date is after end date
@@ -145,12 +147,9 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
         setDates([newStartDate, newEndDate]);
         // In uncontrolled mode, update dateStrings for input display
-        setDateStrings([
-            newStartDate ? dayjs(newStartDate).format(format) : '',
-            newEndDate ? dayjs(newEndDate).format(format) : '',
-        ]);
+        setDateStrings([newStartDate ? formatDate(newStartDate) : '', newEndDate ? formatDate(newEndDate) : '']);
         onChange?.([newStartDate, newEndDate]);
-    }, [onChange, format, setDates]);
+    }, [onChange, formatDate, setDates]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
         const proposedEndDate = nextEndDate !== undefined ? nextEndDate : endDate;
         // Apply auto-completion behavior when start date is set and end date is missing
@@ -176,39 +175,61 @@ const useBaseRangePickerContextValue = ({ 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, format)) {
-            const newDate = parsedDate.toDate();
+        const parseResult = parseInputDate(value, format);
+        if (parseResult.isValid &&
+            parseResult.result &&
+            !isDateOutsideConstraints(parseResult.result, minDate, maxDate, format)) {
+            const newDate = parseResult.result;
             setViewingMonth(newDate);
             // Update temporary selection for immediate calendar visual feedback
             setTemporaryStart(newDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(newDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
             setTemporaryStart(undefined);
             setPendingFocusDate(null);
         }
-    }, [endDateString, format, minDate, maxDate, setViewingMonth, setTemporaryStart, setPendingFocusDate]);
+    }, [
+        endDateString,
+        format,
+        minDate,
+        maxDate,
+        setViewingMonth,
+        setTemporaryStart,
+        setPendingFocusDate,
+        pendingFocusDayjsFormat,
+    ]);
     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, format)) {
-            const newDate = parsedDate.toDate();
+        const parseResult = parseInputDate(value, format);
+        if (parseResult.isValid &&
+            parseResult.result &&
+            !isDateOutsideConstraints(parseResult.result, minDate, maxDate, format)) {
+            const newDate = parseResult.result;
             setViewingMonth(newDate);
             // Update temporary selection for immediate calendar visual feedback
             setTemporaryEnd(newDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(newDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
             setTemporaryEnd(undefined);
             setPendingFocusDate(null);
         }
-    }, [startDateString, format, minDate, maxDate, setViewingMonth, setTemporaryEnd, setPendingFocusDate]);
+    }, [
+        startDateString,
+        format,
+        minDate,
+        maxDate,
+        setViewingMonth,
+        setTemporaryEnd,
+        setPendingFocusDate,
+        pendingFocusDayjsFormat,
+    ]);
     const handleClear = useCallback(() => {
         // handleChange already calls setDates and setDateStrings, so we don't need to call them again
         handleChange([undefined, undefined]);

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.types.d.ts

@@ -97,4 +97,23 @@ export type BaseRangePickerProviderProps = {
      * @internal
      */
     initialViewingDate?: Date;
+    /**
+     * Custom function to format a Date value for display in the input fields.
+     * When provided, overrides the default dayjs formatting.
+     *
+     * @param date - The date to format
+     *
+     * @returns The formatted string to display
+     */
+    customFormatValue?: (date: Date) => string;
+    /**
+     * dayjs format string for `pendingFocusDate` so it matches the focused grid cell's `data-mfui-*` attribute.
+     *
+     * @internal
+     *
+     * @default 'YYYY-MM-DD' — matches {@link DateCell} `data-mfui-date`
+     *
+     * @example 'YYYY-MM' — matches {@link MonthCell} `data-mfui-month` (MonthRangePicker)
+     */
+    pendingFocusDayjsFormat?: 'YYYY-MM-DD' | 'YYYY-MM';
 };

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/BaseRangePickerTrigger.js

@@ -19,7 +19,7 @@ import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputC
  */
 export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', calendarLocale = 'ja', ...props }, ref) => {
     const isTouchDevice = useIsTouchDevice();
-    const { toggle, disableAutoOpen } = useBaseRangePickerContext();
+    const { toggle, disableAutoOpen, isOpen } = useBaseRangePickerContext();
     const { handleInputClick } = useDateRangeTriggerInputClick(disableAutoOpen ?? false, popoverOpenFunction);
     const { onClick: onClickClearButton, 'aria-label': clearAriaLabel } = clearButtonProps;
     const { onClick: onCalendarClick, 'aria-label': calendarAriaLabel } = calendarButtonProps;
@@ -41,14 +41,12 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
     const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    // Popover open: mark calendar icon active. Use `undefined` when closed — `data-active="false"` is still truthy in CSS.
+    const shouldCalendarIconActive = isOpen ? true : undefined;
     const handleClickClearButton = useCallback((event) => {
         handleClear();
         onClickClearButton?.(event);
     }, [handleClear, onClickClearButton]);
-    return (_jsxs("div", { ...wrapperProps, ...props, ref: ref, className: cx(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [_jsx("div", { className: cx(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (
-                // Touch device: hidden inputs + display divs
-                _jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), _jsx("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: enhancedStartInputProps.value || finalStartPlaceholder }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: enhancedEndInputProps.value || finalEndPlaceholder })] })) : (
-                // Desktop: Standard inputs with FocusIndicator
-                _jsxs(_Fragment, { children: [_jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: startInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: endInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: onCalendarClick ?? toggle, children: _jsx(Calendar, {}) })] }));
+    return (_jsxs("div", { ...wrapperProps, ...props, ref: ref, className: cx(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [_jsx("div", { className: cx(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), _jsx("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: enhancedStartInputProps.value || finalStartPlaceholder }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: enhancedEndInputProps.value || finalEndPlaceholder })] })) : (_jsxs(_Fragment, { children: [_jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: startInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: endInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), "data-active": shouldCalendarIconActive, disabled: disabled, onClick: onCalendarClick ?? toggle, children: _jsx(Calendar, {}) })] }));
 });
 BaseRangePickerTrigger.displayName = 'BaseRangePicker.Trigger';