@moneyforward/mfui-components 4.10.3 → 4.10.4

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

@@ -53,6 +53,7 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const [temporaryEnd, setTemporaryEnd] = useState(endDate);
     const [previewDate, setPreviewDate] = useState();
     // --- Focus Management ---
+    // Moves DOM focus into the grid; typing must never set it (see BaseRangePickerProvider)
     const [pendingFocusDate, setPendingFocusDate] = useState(null);
     useUpdateEffect(() => {
         if (startDate) {
@@ -98,15 +99,12 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
             setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
             setTemporaryStart(parsedDate);
-            // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(dayjs(parsedDate).format('YYYY-MM-DD'));
         }
         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]);
     const handleEndDateStringChange = useCallback((value) => {
         setDateStrings([startDateString, value]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
@@ -115,15 +113,12 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
             setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
             setTemporaryEnd(parsedDate);
-            // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(dayjs(parsedDate).format('YYYY-MM-DD'));
         }
         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]);
     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/BaseRangePicker.js

@@ -11,6 +11,20 @@ import { dayjs } from '../../../utilities/date/dayjs';
  */
 function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, caution, 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();
+    // Moves DOM focus into the popover grid, onto the most relevant date
+    const focusGridDate = useCallback(() => {
+        // Determine which date to focus on with priority:
+        // 1. Temporary start date (if exists - from typed input)
+        // 2. Temporary end date (if exists and no start date - from typed input)
+        // 3. Selected start date (if exists)
+        // 4. Selected end date (if exists and no start date)
+        // 5. Current date (today)
+        // 6. First non-disabled cell (handled by CalendarGrid / MonthGrid automatically)
+        const dateToFocus = temporaryStart ?? temporaryEnd ?? startDate ?? endDate ?? new Date();
+        // 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).
+        setPendingFocusDate(dayjs(dateToFocus).format(pendingFocusDayjsFormat));
+    }, [temporaryStart, temporaryEnd, startDate, endDate, setPendingFocusDate, pendingFocusDayjsFormat]);
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
     const handlePopoverOpen = useCallback((event) => {
@@ -25,47 +39,21 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         }
         // For all other cases (calendar button, keyboard navigation, etc.),
         // implement smart focus management for the calendar
-        // Determine which date to focus on with priority:
-        // 1. Temporary start date (if exists - from typed input)
-        // 2. Temporary end date (if exists and no start date - from typed input)
-        // 3. Selected start date (if exists)
-        // 4. Selected end date (if exists and no start date)
-        // 5. Current date (today)
-        // 6. First non-disabled cell (handled by CalendarGrid / MonthGrid automatically)
-        let dateToFocus;
-        if (temporaryStart) {
-            dateToFocus = temporaryStart;
-        }
-        else if (temporaryEnd) {
-            dateToFocus = temporaryEnd;
-        }
-        else if (startDate) {
-            dateToFocus = startDate;
-        }
-        else if (endDate) {
-            dateToFocus = endDate;
-        }
-        else {
-            // Default to today's date - the grid will focus the first non-disabled cell if needed
-            dateToFocus = new Date();
-        }
-        // 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);
+        focusGridDate();
         open();
-    }, [
-        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, caution: caution, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
+    }, [startInputRef, endInputRef, focusGridDate, open]);
+    // Popover fires `onOpen` only on a closed -> open transition, so Up/Down while the popover is
+    // already open (e.g. opened by clicking an input) has to move focus into the grid here.
+    const createTriggerKeyDownHandler = useCallback((handleTriggerKeyDown) => (event) => {
+        if (isOpen && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            event.stopPropagation();
+            event.preventDefault();
+            focusGridDate();
+            return;
+        }
+        handleTriggerKeyDown(event);
+    }, [isOpen, focusGridDate]);
+    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, caution: caution, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: createTriggerKeyDownHandler(handleTriggerKeyDown) })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
             value: [temporaryStart, temporaryEnd],
@@ -84,5 +72,5 @@ export function BaseRangePicker({ value, defaultValue, disabled, invalid, cautio
     // 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, disableAutoSwap: disableAutoSwap, 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, caution: caution, 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 }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, disableAutoSwap: disableAutoSwap, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, customFormatValue: customFormatValue, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, caution: caution, 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/BaseRangePickerProvider/BaseRangePickerProvider.js

@@ -98,7 +98,7 @@ function autoCompletePartialRange(dates) {
     }
     return dates;
 }
-const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, disableAutoSwap = false, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, disableAutoSwap = false, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, customFormatValue, }) => {
     const formatDate = useMemo(() => customFormatValue ?? ((d) => dayjs(d).format(format)), [customFormatValue, format]);
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
@@ -122,6 +122,10 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const [temporaryEnd, setTemporaryEnd] = useState(endDate);
     const [previewDate, setPreviewDate] = useState();
     // --- Focus Management ---
+    // `pendingFocusDate` moves real DOM focus into the grid, so it must only be set by deliberate
+    // navigation (opening the popover, Up/Down). Typing must never write it: the typed date is
+    // highlighted through `viewingMonth` and `temporaryStart`/`temporaryEnd` instead, so the caret
+    // stays in the input and a partially typed date is not committed on blur.
     const [pendingFocusDate, setPendingFocusDate] = useState(null);
     // The committed range anchors the view on its start; the end is only a fallback
     // for a range whose start has been cleared. Keeping this in one effect avoids the
@@ -182,24 +186,12 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
             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(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,
-        pendingFocusDayjsFormat,
-    ]);
+    }, [endDateString, format, minDate, maxDate, setViewingMonth, setTemporaryStart]);
     const handleEndDateStringChange = useCallback((value) => {
         setDateStrings([startDateString, value]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
@@ -211,24 +203,12 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
             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(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,
-        pendingFocusDayjsFormat,
-    ]);
+    }, [startDateString, format, minDate, maxDate, setViewingMonth, setTemporaryEnd]);
     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

@@ -114,14 +114,4 @@ export type BaseRangePickerProviderProps = {
      * @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "4.10.3",
+  "version": "4.10.4",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",