@moneyforward/mfui-components 4.10.2 → 4.10.3

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/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.3",
   "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",