@moneyforward/mfui-components 3.4.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/dist/src/HelpMessage/HelpMessage.d.ts

@@ -1,6 +1,10 @@
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
@@ -8,6 +12,7 @@
  */
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
     messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    showIcon?: boolean;
     messageAlign?: "left" | "center";
     children?: import("..").TypographyProps["children"];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/HelpMessage/HelpMessage.js

@@ -1,20 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useId } from 'react';
-import { Error } from '@moneyforward/mfui-icons-react';
+import { Approval, Caution, Error, Info } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { helpMessageRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
+const messageTypeRoleMap = {
+    neutral: undefined,
+    error: 'alert',
+    caution: undefined,
+    success: 'status',
+};
+const messageTypeIconMap = {
+    neutral: Info,
+    error: Error,
+    caution: Caution,
+    success: Approval,
+};
 /**
- * The HelpMessage component
- * This component switches the variants of looks depends on the props: messageType.
+ * The HelpMessage component displays contextual messages with an icon and color
+ * that reflect the message's intent. Supports four variants via `messageType`:
+ * - `neutral` (default): informational, uses IconInfo. Icon is hidden by default; opt in with `showIcon`. No ARIA role.
+ * - `error`: validation or system error, uses IconError. Sets `role="alert"` — announces immediately to screen readers.
+ * - `caution`: warning or advisory, uses IconCaution. No ARIA role by default — add `role="status"` or `aria-live="polite"` when rendered dynamically.
+ * - `success`: confirmation or positive feedback, uses IconApproval. Sets `role="status"` — announces politely when the user is idle.
  *
  * Also extends the props of the `<div>` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', children, className, ...props }, ref) => {
+export const HelpMessage = forwardRef(({ messageType = 'neutral', messageAlign = 'left', showIcon, children, className, ...props }, ref) => {
     const classes = helpMessageRecipe({ messageType, messageAlign });
     const id = useId();
     const ariaLabelledByContentId = `help-message-content-${id}`;
-    return (_jsxs("div", { ref: ref, role: messageType === 'error' ? 'alert' : undefined, "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [messageType === 'error' ? _jsx(Error, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
+    const shouldShowIcon = showIcon ?? messageType !== 'neutral';
+    const Icon = messageTypeIconMap[messageType];
+    return (_jsxs("div", { ref: ref, role: messageTypeRoleMap[messageType], "aria-labelledby": ariaLabelledByContentId, ...props, className: cx(classes.root, 'mfui-HelpMessage__root', className), children: [shouldShowIcon ? _jsx(Icon, { "aria-hidden": true, className: cx(classes.icon, 'mfui-HelpMessage__icon') }) : null, _jsx(Typography, { id: ariaLabelledByContentId, variant: "helpMessage", className: cx(classes.message, 'mfui-HelpMessage__message'), children: children })] }));
 });

package/dist/src/HelpMessage/HelpMessage.types.d.ts

@@ -6,13 +6,20 @@ import { type TypographyProps } from '../Typography';
  */
 export type HelpMessageProps = {
     /**
-     * The type of message to display.
-     * The color of the message will change based on this value.
-     * The error icon will be displayed next to the message if this value is 'error'.
+     * The intent of the message. Controls the icon and color.
+     * - `neutral`: informational (IconInfo)
+     * - `error`: validation or system error (IconError). Sets `role="alert"` for screen readers.
+     * - `caution`: warning or advisory (IconCaution). No ARIA role is set by default — add `role="status"` or `aria-live="polite"` when rendering dynamically.
+     * - `success`: confirmation or positive feedback (IconApproval)
      *
      * @default 'neutral'
      */
     messageType?: HelpMessageRecipeVariant['messageType'];
+    /**
+     * Whether to display the icon next to the message.
+     * Defaults to `false` for `neutral` (for backward compatibility) and `true` for all other types.
+     */
+    showIcon?: boolean;
     /**
      * The alignment of the message.
      *

package/dist/src/SubNavigation/SubNavigation.js

@@ -65,6 +65,12 @@ function NavigationLabelGroup({ label, labelIcon, locked, lockIconProps, statusS
  */
 function NavigationLink({ navigationItem, customLinkComponent, classes, }) {
     const { label, href, isCurrent, isExternal, labelIcon, statusSlot, locked, lockIconProps } = navigationItem;
+    if (navigationItem.children === undefined && navigationItem.onClick) {
+        const { onClick } = navigationItem;
+        return (_jsx(FocusIndicator, { children: _jsx("button", { type: "button", className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, onClick: () => {
+                    onClick(navigationItem.href);
+                }, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));
+    }
     if (customLinkComponent && !isExternal) {
         const Tag = customLinkComponent;
         return (_jsx(FocusIndicator, { children: _jsx(Tag, { href: href, className: cx(classes.link, 'mfui-SubNavigation__link'), "aria-current": isCurrent ? 'page' : undefined, children: _jsx(NavigationLabelGroup, { label, labelIcon, locked, lockIconProps, statusSlot, classes }) }) }));

package/dist/src/SubNavigation/SubNavigation.types.d.ts

@@ -68,6 +68,14 @@ type ChildlessNavigationItem = BaseNavigationItem & {
      * The path or URL to the linked page.
      */
     href: string;
+    /**
+     * If provided, the item is rendered as a button instead of a link.
+     * The handler is called with the item's `href` value as an argument.
+     *
+     * Use this for state-based navigation patterns where you want to update
+     * application state on click without performing browser navigation.
+     */
+    onClick?: (href: string) => void;
 };
 /**
  * The navigation item that has nested children.

package/dist/styled-system/recipes/help-message-recipe.d.ts

@@ -4,7 +4,7 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface HelpMessageRecipeVariant {
   messageAlign: "left" | "center"
-messageType: "neutral" | "error"
+messageType: "neutral" | "error" | "caution" | "success"
 }
 
 type HelpMessageRecipeVariantMap = {

package/dist/styled-system/recipes/help-message-recipe.js

@@ -38,7 +38,9 @@ export const helpMessageRecipe = /* @__PURE__ */ Object.assign(helpMessageRecipe
         ],
         "messageType": [
             "neutral",
-            "error"
+            "error",
+            "caution",
+            "success"
         ]
     },
     splitVariantProps(props) {

package/dist/styles.css

@@ -2947,13 +2947,18 @@
 }
 
 .mfui-ljuOJV {
+  border: none;
   text-decoration: none;
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.vertical\.comfort);
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.sub-navigation\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  background-color: transparent;
+  cursor: pointer;
+  text-align: left;
   display: flex;
   align-items: flex-start;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
+  width: 100%;
 }
 
 .mfui-ljuOJV[aria-current=page] {
@@ -5596,6 +5601,14 @@
   color: var(--mfui-colors-mfui\.color\.signal-red\.content\.none);
 }
 
+.mfui-LuZio {
+  color: var(--mfui-colors-mfui\.color\.signal-yellow\.content\.none);
+}
+
+.mfui-foXPig {
+  color: var(--mfui-colors-mfui\.color\.signal-green\.content\.none);
+}
+
 .mfui-dTaPGi {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.4.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",