@moneyforward/mfui-components 4.1.1 → 4.1.2

package/dist/src/GlobalHeader/GlobalHeader.d.ts

@@ -2,5 +2,8 @@ import { type GlobalHeaderProps } from './GlobalHeader.types';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ *
+ * `GlobalHeader` should generally be paired with `MainNavigation` for the primary navigation area.
+ * If you need a self-contained layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export declare function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive, }: GlobalHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/GlobalHeader/GlobalHeader.js

@@ -8,6 +8,9 @@ import { ApplicationsExperimentalIcon } from './ApplicationsExperimentalIcon';
 /**
  * The global header component.
  * The global header component is a top-level navigation component that is used to display the application's logo and navigation elements.
+ *
+ * `GlobalHeader` should generally be paired with `MainNavigation` for the primary navigation area.
+ * If you need a self-contained layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export function GlobalHeader({ className, mainNavigationButtonProps, applicationsMenuSlot, experimentalApplicationsMenuButtonProps, logoSlot, rightPaneSlot, disableResponsive = false, }) {
     const responsive = !disableResponsive;

package/dist/src/MainNavigation/MainNavigation.d.ts

@@ -5,5 +5,8 @@ import { type MainNavigationProps, type MainNavigationRef } from './MainNavigati
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
+ * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export declare const MainNavigation: import("react").ForwardRefExoticComponent<MainNavigationProps & import("react").RefAttributes<MainNavigationRef>>;

package/dist/src/MainNavigation/MainNavigation.js

@@ -8,6 +8,9 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  *
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
+ *
+ * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
+ * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
 export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {

package/dist/src/SidePane/hooks/useSidePaneStateController.js

@@ -56,10 +56,14 @@ export function useSidePaneStateController({ open, onClose, ref, insideElement }
     // Autofocus to the pane window (`role="dialog"` element) when it opens.
     // Screen readers honor `aria-modal` only when focus is on the `role="dialog"`
     // element or its descendants, so the root wrapper must not be the focus target.
+    // `preventScroll` is required because the pane window starts outside its container
+    // (the slide-in animation begins at `right: -100%`). Without it the browser scrolls
+    // the container to reveal the pane, which shifts the surrounding content and hides
+    // the animation — `overflow: hidden` containers are still programmatically scrollable.
     useEffect(() => {
         if (!localOpen)
             return;
-        (insideElement ?? sidePaneElement)?.focus();
+        (insideElement ?? sidePaneElement)?.focus({ preventScroll: true });
     }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,

package/dist/src/Sidebar/Sidebar.d.ts

@@ -10,6 +10,9 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/dist/src/Sidebar/Sidebar.js

@@ -51,6 +51,9 @@ function SidebarToggleButton({ isCollapsed, ariaLabel, navId, onClick, }) {
  * A navigation layout component that combines a logo header, a navigation area,
  * and a footer with icon menu and user information.
  *
+ * `Sidebar` is a self-contained alternative to `GlobalHeader` and `MainNavigation`, since it
+ * already includes both header and navigation features.
+ *
  * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
  * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
  *

package/package.json

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