@moneyforward/mfui-components 3.5.0 → 3.6.0

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

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

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

@@ -29,8 +29,17 @@ import { MonthRangePickerPanel } from './MonthRangePickerPanel';
  * />
  * ```
  */
-export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, ...restProps }) {
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, startInputProps: {
+export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, ...restProps }) {
+    // MonthRangePicker panels are grouped by year (left = viewingYear, right = viewingYear + 1).
+    // When `previousAndCurrent` is requested, we must shift by a full year so the left panel
+    // shows the previous year instead of the current year.
+    const initialViewingDate = initialDisplayedMonths === 'previousAndCurrent' && !restProps.value && !restProps.defaultValue
+        ? (() => {
+            const today = new Date();
+            return new Date(today.getFullYear() - 1, 0, 1);
+        })()
+        : undefined;
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
             placeholder: '開始月',
             ...startInputProps,
         }, endInputProps: {

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, }: 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, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -61,12 +61,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', }) {
+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, }) {
     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, 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, 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 }) }));
 }

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

@@ -270,4 +270,32 @@ export type BaseRangePickerProps = {
      * @default 'ja'
      */
     calendarLocale?: BasePickerProps['calendarLocale'];
+    /**
+     * Controls which months are initially displayed in the two-panel calendar view.
+     * - `'currentAndNext'`: Shows current month on the left and next month on the right (default behavior).
+     * - `'previousAndCurrent'`: Shows previous month on the left and current month on the right.
+     *   Useful for log date range selection where showing future months is not meaningful.
+     *
+     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
+     * When a `value` or `defaultValue` is set, the calendar will show the months containing the selected dates.
+     *
+     * @default 'currentAndNext'
+     *
+     * @example
+     * ```tsx
+     * // Show previous month + current month for log date selection
+     * <DateRangePicker initialDisplayedMonths="previousAndCurrent" />
+     * ```
+     */
+    initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
+    /**
+     * Overrides the computed initial viewing date derived from `initialDisplayedMonths`.
+     * Use this when the component operates at a different granularity than months
+     * (e.g., MonthRangePicker uses years for panel navigation).
+     *
+     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
+     *
+     * @internal
+     */
+    initialViewingDate?: Date;
 };

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

@@ -63,7 +63,7 @@ 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, }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, }) => {
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
         const [startDate, endDate] = value ?? defaultValue ?? [undefined, undefined];
@@ -73,7 +73,12 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const [startDateString, endDateString] = dateStrings;
     // Add viewingMonth state
     const today = useMemo(() => new Date(), []);
-    const [viewingMonth, setViewingMonth] = useTransformedState(value?.[0] ?? defaultValue?.[0] ?? new Date(today.getFullYear(), today.getMonth(), 1), normalizeToFirstOfMonth);
+    const [viewingMonth, setViewingMonth] = useTransformedState(value?.[0] ??
+        defaultValue?.[0] ??
+        initialViewingDate ??
+        (initialDisplayedMonths === 'previousAndCurrent'
+            ? new Date(today.getFullYear(), today.getMonth() - 1, 1)
+            : new Date(today.getFullYear(), today.getMonth(), 1)), normalizeToFirstOfMonth);
     // --- Selection/Preview State and Logic ---
     const [selecting, setSelecting] = useState('start');
     const [temporaryStart, setTemporaryStart] = useState(startDate);

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

@@ -77,4 +77,24 @@ export type BaseRangePickerProviderProps = {
      * @default undefined
      */
     maxDate?: Date;
+    /**
+     * Controls which months are initially displayed in the two-panel calendar view.
+     * - `'currentAndNext'`: Shows current month on the left and next month on the right (default behavior).
+     * - `'previousAndCurrent'`: Shows previous month on the left and current month on the right.
+     *
+     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
+     *
+     * @default 'currentAndNext'
+     */
+    initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
+    /**
+     * Overrides the computed initial viewing date derived from `initialDisplayedMonths`.
+     * Use this when the component operates at a different granularity than months
+     * (e.g., MonthRangePicker uses years).
+     *
+     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
+     *
+     * @internal
+     */
+    initialViewingDate?: Date;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -47,7 +47,7 @@
     "jsdom": "26.1.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "storybook": "9.1.17",
+    "storybook": "9.1.19",
     "ts-node": "10.9.2",
     "tsx": "4.21.0",
     "vitest": "3.2.4"
@@ -60,8 +60,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.0.0",
-    "@moneyforward/mfui-icons-react": "^3.0.0"
+    "@moneyforward/mfui-icons-react": "^3.0.0",
+    "@moneyforward/mfui-design-tokens": "^3.0.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",