@moneyforward/mfui-components 4.10.2 → 4.10.4

package/README.md

@@ -9,7 +9,6 @@ React components for basic UI parts and layouts.
 ## Library Requirements
 
 MFUI requires certain libraries. Please check their versions.
-You can also check the recommended environment by referring to the libraries used in the projects under the `examples/` directory.
 
 ### Requirements
 

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/dist/src/SelectBox/hooks/useKeyboardNavigation.js

@@ -65,14 +65,18 @@ export function useKeyboardNavigation({ isOptionPanelOpen, loading, enableSearch
         if (activeElement?.getAttribute('role') === 'option' && optionPanelRef.current?.contains(activeElement)) {
             return;
         }
-        // When loading, focus on the option panel root div to enable ESC key functionality
-        if (loading) {
+        // When search is enabled, focus the search input regardless of the selected option or loading state.
+        // Moving the focus away while the user is typing would commit or discard the IME composition.
+        if (enableSearchOptions && searchInputRef.current) {
+            searchInputRef.current.focus({ preventScroll: true });
+        }
+        else if (loading) {
+            // When loading without a search input, there is no option to focus yet, so focus the option panel
+            // root div to enable ESC key functionality
             optionPanelRef.current?.focus({ preventScroll: true });
-            return;
         }
-        // When search is enabled, focus the search input regardless of the selected option
-        if (enableSearchOptions) {
-            searchInputRef.current?.focus({ preventScroll: true });
+        if (loading) {
+            return;
         }
         // Handle auto-scroll independently of search input focus
         // This allows both features to work together

package/dist/src/utilities/dom/useFocusTrap.js

@@ -1,5 +1,34 @@
 import { useCallback } from 'react';
+import { getDeepActiveElement } from './getDeepActiveElement';
 import { getFocusableNodes } from './getFocusableNodes';
+/**
+ * Returns the focused node as seen by the focus trap.
+ *
+ * `document.activeElement` stops at the shadow host when the wrapper is rendered inside a shadow root,
+ * so the lookup starts from the wrapper's own root node (this also works for closed shadow roots) and
+ * follows nested shadow roots down to the deepest focused element.
+ * That element is then mapped back onto `focusableNodes` by ascending shadow boundaries only, so focus
+ * inside a web component that is itself a focusable node of the trap still resolves to that host.
+ *
+ * @param wrapper - The focus trap container.
+ *
+ * @param focusableNodes - The focusable nodes inside the wrapper.
+ *
+ * @returns The focusable node holding focus, or the deepest focused element when none of them does.
+ */
+const getFocusingNode = (wrapper, focusableNodes) => {
+    const rootNode = wrapper.getRootNode();
+    const deepActiveElement = getDeepActiveElement(rootNode instanceof ShadowRoot ? rootNode : wrapper.ownerDocument);
+    let current = deepActiveElement;
+    while (current) {
+        if (focusableNodes.includes(current))
+            return current;
+        const currentRootNode = current.getRootNode();
+        // Only a ShadowRoot has a host to continue from; a Document ends the walk.
+        current = currentRootNode instanceof ShadowRoot ? currentRootNode.host : null;
+    }
+    return deepActiveElement;
+};
 /**
  * Hook to trap focus within a container.
  *
@@ -16,8 +45,8 @@ export function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } =
         if (event.key !== 'Tab')
             return;
         const wrapper = event.currentTarget;
-        const focusingElement = wrapper.ownerDocument.activeElement;
         const focusableNodes = getFocusableNodes(wrapper);
+        const focusingElement = getFocusingNode(wrapper, focusableNodes);
         const [firstFocusableNode] = focusableNodes;
         const lastFocusableNode = focusableNodes.at(-1);
         const focusingOnFirstNode = focusingElement === firstFocusableNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "4.10.2",
+  "version": "4.10.4",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -31,11 +31,11 @@
   ],
   "devDependencies": {
     "@pandacss/dev": "1.12.1",
-    "@storybook/addon-a11y": "10.6.1",
-    "@storybook/addon-docs": "10.6.1",
-    "@storybook/addon-links": "10.6.1",
+    "@storybook/addon-a11y": "10.6.5",
+    "@storybook/addon-docs": "10.6.5",
+    "@storybook/addon-links": "10.6.5",
     "@storybook/addon-mcp": "0.7.0",
-    "@storybook/react-vite": "10.6.1",
+    "@storybook/react-vite": "10.6.5",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.3",
     "@testing-library/user-event": "14.6.8",
@@ -43,15 +43,15 @@
     "@types/react": "19.2.9",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.2.0",
-    "@vitest/coverage-v8": "4.1.11",
+    "@vitest/coverage-v8": "4.1.12",
     "jsdom": "26.1.0",
     "oxlint-config-mfui": "^1.0.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "storybook": "10.6.2",
+    "storybook": "10.6.5",
     "ts-node": "10.9.2",
     "tsx": "4.23.15",
-    "vitest": "4.1.11"
+    "vitest": "4.1.12"
   },
   "peerDependencies": {
     "react": ">=18",