@moneyforward/mfui-components 3.13.0 → 3.13.1

package/dist/src/Accordion/Accordion.js

@@ -63,7 +63,7 @@ const AccordionTrigger = forwardRef(({ children, className, onClick, ...props },
         toggle();
         onClick?.(event);
     }, [onClick, toggle]);
-    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, {}) : _jsx(DisclosureBasicCollapsed, {})] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, { "aria-hidden": "true" }) : _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" })] }) }));
 });
 const AccordionTarget = forwardRef(({ children, className, style, ...props }, ref) => {
     const { size } = useAccordionContext();

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

@@ -31,14 +31,26 @@ import { MonthRangePickerPanel } from './MonthRangePickerPanel';
  */
 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
-        ? (() => {
+    // When `previousAndCurrent` is requested, we shift by a full year so the left panel
+    // shows the previous year. This applies regardless of whether `value` is set.
+    const initialViewingDate = (() => {
+        if (initialDisplayedMonths !== 'previousAndCurrent') {
+            return;
+        }
+        const startDate = restProps.value?.[0] ?? restProps.defaultValue?.[0];
+        if (!startDate) {
+            // No value: show previous year relative to today
             const today = new Date();
             return new Date(today.getFullYear() - 1, 0, 1);
-        })()
-        : undefined;
+        }
+        const endDate = restProps.value?.[1] ?? restProps.defaultValue?.[1];
+        if (endDate && startDate.getFullYear() !== endDate.getFullYear()) {
+            // Value spans different years: provider handles it via the multi-month path
+            return;
+        }
+        // Same-year value + previousAndCurrent: show previous year on the left
+        return new Date(startDate.getFullYear() - 1, 0, 1);
+    })();
     return (_jsx(BaseRangePicker, { ...restProps, format: format, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
             placeholder: '開始月',
             ...startInputProps,

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

@@ -272,12 +272,15 @@ export type BaseRangePickerProps = {
     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.
+     * - `'currentAndNext'`: Shows the value's start month on the left and the next month on the right.
+     *   When no value is set, shows the current month on the left and next month on the right.
+     * - `'previousAndCurrent'`: Shows the month before the value's start month on the left and
+     *   the value's start month on the right.
+     *   When no value is set, shows the 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.
+     * When `value`/`defaultValue` spans two different months, the calendar always shows both selected
+     * months regardless of this setting.
      *
      * @default 'currentAndNext'
      *
@@ -285,6 +288,12 @@ export type BaseRangePickerProps = {
      * ```tsx
      * // Show previous month + current month for log date selection
      * <DateRangePicker initialDisplayedMonths="previousAndCurrent" />
+     *
+     * // With a value set: shows February (left) and March (right)
+     * <DateRangePicker
+     *   initialDisplayedMonths="previousAndCurrent"
+     *   value={[new Date(2024, 2, 1), new Date(2024, 2, 15)]}
+     * />
      * ```
      */
     initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
@@ -293,7 +302,7 @@ export type BaseRangePickerProps = {
      * 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.
+     * Takes the highest priority in the `viewingMonth` computation.
      *
      * @internal
      */

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

@@ -11,6 +11,40 @@ const noop = () => { };
 function normalizeToFirstOfMonth(date) {
     return dayjs(date).startOf('month').toDate();
 }
+/**
+ * Computes the initial viewing month for the dual-panel calendar.
+ *
+ * Priority:
+ * 1. `initialViewingDate` — explicit internal override (used by MonthRangePicker for year-level navigation)
+ * 2. `value`/`defaultValue` spans **different** months → use start month (both selected months visible)
+ * 3. `value`/`defaultValue` within a **single** month:
+ *    - `previousAndCurrent` → start month − 1 month (left panel = month before value, right = value month)
+ *    - `currentAndNext` → start month (left panel = value month, right = next month)
+ * 4. No value → `initialDisplayedMonths` relative to today
+ */
+function computeInitialViewingMonth({ value, defaultValue, initialViewingDate, initialDisplayedMonths, today, }) {
+    if (initialViewingDate) {
+        return initialViewingDate;
+    }
+    const rangeStart = value?.[0] ?? defaultValue?.[0];
+    const rangeEnd = value?.[1] ?? defaultValue?.[1];
+    if (rangeStart) {
+        if (rangeEnd && !dayjs(rangeStart).isSame(rangeEnd, 'month')) {
+            // Spans different months: show start month on the left
+            return rangeStart;
+        }
+        // Single-month value: apply initialDisplayedMonths
+        if (initialDisplayedMonths === 'previousAndCurrent') {
+            return dayjs(rangeStart).subtract(1, 'month').toDate();
+        }
+        return rangeStart;
+    }
+    // No value: apply initialDisplayedMonths relative to today
+    if (initialDisplayedMonths === 'previousAndCurrent') {
+        return new Date(today.getFullYear(), today.getMonth() - 1, 1);
+    }
+    return new Date(today.getFullYear(), today.getMonth(), 1);
+}
 /**
  * Checks if a date is outside the specified constraints
  *
@@ -73,12 +107,13 @@ 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] ??
-        initialViewingDate ??
-        (initialDisplayedMonths === 'previousAndCurrent'
-            ? new Date(today.getFullYear(), today.getMonth() - 1, 1)
-            : new Date(today.getFullYear(), today.getMonth(), 1)), normalizeToFirstOfMonth);
+    const [viewingMonth, setViewingMonth] = useTransformedState(computeInitialViewingMonth({
+        value,
+        defaultValue,
+        initialViewingDate,
+        initialDisplayedMonths,
+        today,
+    }), normalizeToFirstOfMonth);
     // --- Selection/Preview State and Logic ---
     const [selecting, setSelecting] = useState('start');
     const [temporaryStart, setTemporaryStart] = useState(startDate);

package/dist/src/SelectBox/SelectBox.js

@@ -328,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
-                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
+                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, { "aria-hidden": "true", focusable: false }), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
                             event.stopPropagation();
                             handleClearValue();
                         } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));

package/dist/styles.css

@@ -1326,6 +1326,8 @@
   background-color: var(--mfui-colors-mfui\.color\.neutral\.background\.none);
   color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
   box-shadow: var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-1);
+  word-break: break-word;
+  overflow-wrap: break-word;
   min-height: 24px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.13.0",
+  "version": "3.13.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-icons-react": "^3.1.0",
-    "@moneyforward/mfui-design-tokens": "^3.1.0"
+    "@moneyforward/mfui-design-tokens": "^3.1.0",
+    "@moneyforward/mfui-icons-react": "^3.1.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",