@moneyforward/mfui-components 3.29.1 → 3.31.1

package/dist/src/RadioButtonCard/RadioButtonCard.d.ts

@@ -8,8 +8,8 @@ import { type RadioButtonCardResponsiveSlot } from './RadioButtonCard.types';
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
  */
 export declare const RadioButtonCard: import("react").ForwardRefExoticComponent<{
-    layout?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant["layout"];
+    layout?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant['layout'];
     label: string;
     renderDetailsSlot?: RadioButtonCardResponsiveSlot | import("./RadioButtonCard.types").RadioButtonCardRenderDetailsSlot;
-    disableResponsive?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant["disableResponsive"];
+    disableResponsive?: import("../../styled-system/recipes").RadioButtonCardSlotRecipeVariant['disableResponsive'];
 } & Omit<import("..").RadioButtonProps, "label"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/RadioButtonCard/RadioButtonCard.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from 'react';
 import { cx } from '../../styled-system/css';
 import { FocusIndicator } from '../FocusIndicator';

package/dist/src/RadioGroup/RadioGroup.d.ts

@@ -10,4 +10,4 @@
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<import("..").RadioButtonProps, "disabled" | "name" | "value" | "defaultValue" | "onChange"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<import("..").RadioButtonProps, "defaultValue" | "disabled" | "name" | "onChange" | "value"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/SearchBox/SearchBox.js

@@ -14,10 +14,24 @@ import { normalizeFullWidth } from '../utilities/string/normalizeFullWidth';
 export const SearchBox = forwardRef(({ className, normalizeFullWidth: shouldNormalizeFullWidth = false, onChange, ...rest }, ref) => {
     const handleChange = useCallback((event) => {
         if (shouldNormalizeFullWidth) {
-            // Rewrite the native input so the displayed value reflects the normalization
-            // and the consumer's onChange sees the canonical half-width / composed-kana form.
-            // eslint-disable-next-line no-param-reassign
-            event.target.value = normalizeFullWidth(event.target.value);
+            const { value, selectionStart } = event.target;
+            const normalizedValue = normalizeFullWidth(value);
+            // Only rewrite the native input when normalization actually changes the value.
+            // Assigning to `value` resets the caret to the end even when the string is
+            // unchanged, so skipping the no-op assignment keeps the caret in place while
+            // the user edits mid-string.
+            if (normalizedValue !== value) {
+                // Map the caret by normalizing only the text before it. This keeps the caret
+                // correct even when normalization changes the string length (e.g. `ﾊﾟ` -> `パ`).
+                const caretPosition = selectionStart === null
+                    ? normalizedValue.length
+                    : normalizeFullWidth(value.slice(0, selectionStart)).length;
+                // Rewrite the native input so the displayed value reflects the normalization
+                // and the consumer's onChange sees the canonical half-width / composed-kana form.
+                // eslint-disable-next-line no-param-reassign
+                event.target.value = normalizedValue;
+                event.target.setSelectionRange(caretPosition, caretPosition);
+            }
         }
         onChange?.(event);
     }, [shouldNormalizeFullWidth, onChange]);

package/dist/src/SectionMessage/SectionMessage.d.ts

@@ -9,12 +9,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
 export declare const SectionMessage: import("react").ForwardRefExoticComponent<{
-    messageType?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["messageType"];
-    region?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant["region"];
+    messageType?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant['messageType'];
+    region?: import("../../styled-system/recipes").SectionMessageSlotRecipeVariant['region'];
     actionSlot?: import("react").ReactNode;
-    onClose?: import("..").IconButtonProps["onClick"];
+    onClose?: import("..").IconButtonProps['onClick'];
     children?: import("react").ReactNode;
-    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
-    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<"svg">, "aria-label">;
+    statusIconProps?: Pick<import("react").ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
+    closeButtonProps?: Pick<import("react").ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     disableResponsive?: boolean;
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/SectionMessage/SectionMessage.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { Error, Approval, Caution, Close } from '@moneyforward/mfui-icons-react';
+import { Error, Approval, Caution, Close, Pending } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { sectionMessageSlotRecipe } from '../../styled-system/recipes';
 import { IconButton } from '../IconButton';
+import { ProgressIndicator } from '../ProgressIndicator';
 import { Typography } from '../Typography';
 /**
  * The SectionMessage component is used to display an inline message inside a page or some container.
@@ -21,11 +22,17 @@ export const SectionMessage = forwardRef(({ messageType = 'neutral', region = 'i
         region,
         disableResponsive,
     });
+    // The status is conveyed by the message content itself, so the status icon is decorative
+    // and hidden from assistive technology unless a label is explicitly provided.
+    const statusIconLabel = statusIconProps?.['aria-label'];
+    const statusIconA11yProps = statusIconLabel === undefined ? { 'aria-hidden': true } : { 'aria-label': statusIconLabel };
     const StatusIcon = {
         neutral: null,
-        success: (_jsx(Approval, { "aria-label": statusIconProps?.['aria-label'] ?? '完了', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
-        error: (_jsx(Error, { "aria-label": statusIconProps?.['aria-label'] ?? 'エラー', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
-        caution: (_jsx(Caution, { "aria-label": statusIconProps?.['aria-label'] ?? '注意', className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        success: (_jsx(Approval, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        error: _jsx(Error, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
+        caution: (_jsx(Caution, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
+        busy: _jsx(Pending, { ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') }),
+        progress: (_jsx(ProgressIndicator, { role: "img", ...statusIconA11yProps, className: cx(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
     }[messageType];
     const contentIsString = typeof children === 'string';
     return (_jsxs("div", { ref: ref, className: cx(classes.root, 'mfui-SectionMessage__root', className), ...props, role: "alert", children: [_jsxs("div", { className: cx(classes.topSection, 'mfui-SectionMessage__topSection'), children: [_jsxs("div", { className: cx(classes.content, 'mfui-SectionMessage__content'), children: [StatusIcon, contentIsString ? _jsx(Typography, { variant: "body", children: children }) : children] }), _jsxs("div", { className: cx(classes.rightSection, 'mfui-SectionMessage__rightSection'), children: [_jsx("div", { className: cx(classes.actionSlot, classes.desktopActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-desktop", children: actionSlot }), onClose ? (_jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: onClose, children: _jsx(Close, { "aria-hidden": true, className: cx(classes.closeIcon, 'mfui-SectionMessage__closeIcon') }) })) : null] })] }), actionSlot && !disableResponsive ? (_jsx("div", { className: cx(classes.actionSlot, classes.mobileActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-mobile", children: actionSlot })) : null] }));

package/dist/src/SectionMessage/SectionMessage.types.d.ts

@@ -35,10 +35,10 @@ export type SectionMessageProps = {
     /**
      * Props for the status icon.
      *
-     * @property aria-label - The text alternative for the status icon. By default, `messageType` is:
-     * - `success`: '完了'
-     * - `error`: 'エラー'
-     * - `caution`: '注意'
+     * @property aria-label - The text alternative for the status icon.
+     * By default, the status icon is decorative and hidden from assistive technology (`aria-hidden`),
+     * because the message content itself conveys the status.
+     * Pass an `aria-label` only when the icon needs to be announced.
      */
     statusIconProps?: Pick<ComponentPropsWithoutRef<'svg'>, 'aria-label'>;
     /**

package/dist/src/SelectBox/SelectBox.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { Dropdown as DropdownIcon, Error } from '@moneyforward/mfui-icons-react';
 import { ClearButton } from '../shared/ClearButton';

package/dist/src/SelectBox/SelectBoxOption.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useCallback } from 'react';
 import { Current } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';

package/dist/src/SelectBox/SelectBoxOptionGroup.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo } from 'react';
 import { Typography } from '../Typography';
 import { SelectBoxOptionComponent } from './SelectBoxOption';

package/dist/src/SidePane/SidePane.d.ts

@@ -1,6 +1,8 @@
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
@@ -9,22 +11,22 @@ export declare const SidePane: import("react").ForwardRefExoticComponent<{
     title?: string;
     renderHeading?: (options: import("./SidePane.types").SidePaneRenderOptions) => import("react").ReactNode;
     actionSlot?: import("react").ReactNode;
-    position?: import("../../styled-system/recipes").SidePaneSlotRecipeVariant["position"];
+    position?: import("../../styled-system/recipes").SidePaneSlotRecipeVariant['position'];
     closeButtonProps?: {
         isCollapseIcon?: boolean;
-    } & Pick<import("react").ComponentPropsWithoutRef<"button">, "aria-label">;
+    } & Pick<import("react").ComponentPropsWithoutRef<'button'>, 'aria-label'>;
     targetDOMNode?: HTMLElement | null;
     enableModal?: boolean;
     disableBackdropClose?: boolean;
     enableAutoUnmount?: boolean;
-    formFooterProps?: Pick<import("..").FormFooterProps, "optionsSlot" | "actionsSlot"> & {
-        position?: import("..").FormFooterProps["position"];
+    formFooterProps?: Pick<import("..").FormFooterProps, 'optionsSlot' | 'actionsSlot'> & {
+        position?: import("..").FormFooterProps['position'];
     };
     insideProps?: {
         className?: string;
     };
     open?: boolean;
     onClose?: import("./SidePane.types").OnCloseFunction;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "open" | "onClose"> & {
-    ref?: (import("react").RefObject<HTMLDivElement | null> | import("react").RefCallback<HTMLDivElement | null> | null) | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open"> & {
+    ref?: (import("react").RefCallback<HTMLDivElement | null> | import("react").RefObject<HTMLDivElement | null> | null) | undefined;
 } & import("react").Attributes>;

package/dist/src/SidePane/SidePane.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Close, PaneExpansionToRight, PaneExpansionToLeft } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
@@ -13,16 +13,20 @@ import { Portal, TargetDomNodeProvider, useAutomaticTargetDomNode } from '../Por
 import { FormFooter } from '../FormFooter';
 /**
  * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
+ * This component extends the props of `<div>` element. The extended props and `ref` are
+ * applied to the root overlay element covering the viewport, while `role="dialog"` (and
+ * `aria-modal="true"` when `enableModal` is set) are set on the inner pane window element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
  */
 export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onClose, className, children, actionSlot, formFooterProps, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
     const classes = sidePaneSlotRecipe({ position, nonModal: !enableModal });
+    const [insideElement, setInsideElement] = useState(null);
     const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = useSidePaneStateController({
         open,
         onClose,
         ref,
+        insideElement,
     });
     const handleBackdropClick = useCallback(() => {
         if (!disableBackdropClose) {
@@ -56,8 +60,8 @@ export const SidePane = compatibleForwardRef(({ open, title, renderHeading, onCl
     const shouldRenderContent = enableAutoUnmount ? localOpen : true;
     const resolvedFormFooterPosition = formFooterProps?.position ?? 'sticky';
     const headingNode = title ? (_jsx(Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
-    return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, role: "dialog", ...props, className: cx(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
+    return (_jsx(TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? (_jsx(Portal, { targetDOMNode: targetElement, children: _jsxs("div", { ref: setSidePaneElement, ...props, className: cx(classes.root, 'mfui-SidePane__root', className), style: {
                     ...props.style,
                     ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
+                }, onKeyDown: handleOnKeyDown, children: [enableModal ? (_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, _jsxs("div", { ref: setInsideElement, role: "dialog", "aria-modal": enableModal ? 'true' : undefined, tabIndex: -1, "data-mfui-content": "inside", className: cx(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [_jsxs("header", { className: cx(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : (_jsx("div", { className: cx(classes.title, 'mfui-SidePane__title'), children: headingNode })), _jsxs("div", { className: cx(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && (_jsx("div", { className: cx(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), _jsx("div", { className: cx(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: _jsx(IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), _jsxs("main", { className: cx(classes.content, 'mfui-SidePane__content'), children: [_jsx("div", { className: cx(classes.contentBody, 'mfui-SidePane__contentBody'), children: children }), resolvedFormFooterPosition === 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] }), formFooterProps && resolvedFormFooterPosition !== 'stacking' ? (_jsx("div", { className: cx(classes.footer, 'mfui-SidePane__footer'), children: _jsx(FormFooter, { sectionPosition: "fill", ...formFooterProps, position: resolvedFormFooterPosition }) })) : null] })] }) })) : null }));
 });

package/dist/src/SidePane/hooks/useSidePaneStateController.d.ts

@@ -3,6 +3,7 @@ type UseSidePaneStateController = {
     open?: boolean;
     onClose?: () => void;
     ref?: ForwardedRef<HTMLDivElement | null>;
+    insideElement?: HTMLElement | null;
 };
 /**
  * Custom hook to control the open/close state of a SidePane.
@@ -15,9 +16,13 @@ type UseSidePaneStateController = {
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export declare function useSidePaneStateController({ open, onClose, ref }: UseSidePaneStateController): {
+export declare function useSidePaneStateController({ open, onClose, ref, insideElement }: UseSidePaneStateController): {
     localOpen: boolean | undefined;
     handleCloseSidePane: () => void;
     handleStopCloseSidePane: (event: React.MouseEvent<HTMLDivElement>) => void;

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

@@ -12,9 +12,13 @@ import { useSidePaneOpenStateWithAnimation } from './useSidePaneOpenStateWithAni
  *
  * @param options.onClose - Callback function to execute when closing the SidePane.
  *
- * @returns Object containing functions to handle closing the SidePane and ref Object to attach Dialog element.
+ * @param options.insideElement - The pane window element with `role="dialog"`. It receives
+ * default focus when the SidePane opens, keeping focus inside the `aria-modal` boundary.
+ *
+ * @returns Object containing the local open state, close/click handlers, and a callback
+ * ref (`setSidePaneElement`) to attach to the root overlay element.
  */
-export function useSidePaneStateController({ open, onClose, ref }) {
+export function useSidePaneStateController({ open, onClose, ref, insideElement }) {
     const [sidePaneElement, setSidePaneElement] = useState(null);
     const { localOpen, openSidePane, closeSidePane } = useSidePaneOpenStateWithAnimation({ open, sidePaneElement });
     const setSidePaneElementRef = useCallback((element) => {
@@ -49,12 +53,14 @@ export function useSidePaneStateController({ open, onClose, ref }) {
     const handleStopCloseSidePane = useCallback((event) => {
         event.stopPropagation();
     }, []);
-    // Autofocus to the SidePane itself when it opens
+    // 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.
     useEffect(() => {
         if (!localOpen)
             return;
-        sidePaneElement?.focus();
-    }, [sidePaneElement, localOpen]);
+        (insideElement ?? sidePaneElement)?.focus();
+    }, [insideElement, sidePaneElement, localOpen]);
     return {
         localOpen,
         handleCloseSidePane,

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

@@ -2,8 +2,9 @@ import { type SidebarProps } from './Sidebar.types';
 import { SidebarServiceMenu } from './SidebarServiceMenu';
 import { SidebarTenantMenu } from './SidebarTenantMenu';
 import { SidebarUserMenu } from './SidebarUserMenu';
+import { SidebarTenantMenuHeading, SidebarUserMenuHeading } from './SidebarMenuHeading';
 import { SidebarNavigationItem } from './SidebarNavigationItem';
-declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, mainNavigationLabel, extraNavigationLabel, resizeHandleLabel, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, enableCollapsible, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonLabel, expandButtonLabel, mainNavigationLabel, extraNavigationLabel, resizeHandleLabel, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The sidebar component.
  * A navigation layout component that combines a logo header, a navigation area,
@@ -20,6 +21,10 @@ declare function SidebarBase({ className, logoSlot, mainNavigationItems, extraNa
  * - `Sidebar.ServiceMenu` — the header service menu trigger, intended to wrap a list of services.
  * - `Sidebar.TenantMenu` — the footer tenant (business) name and its menu.
  * - `Sidebar.UserMenu` — the footer user (account) name and its menu.
+ * - `Sidebar.TenantMenuHeading` — the heading block inside `Sidebar.TenantMenu`: the tenant name and
+ *   its identification-number row (optionally copyable to the clipboard).
+ * - `Sidebar.UserMenuHeading` — the heading block inside `Sidebar.UserMenu`: the user name and
+ *   its identification-number row (optionally copyable to the clipboard).
  *
  * @example
  * ```tsx
@@ -59,5 +64,9 @@ export declare const Sidebar: typeof SidebarBase & {
     TenantMenu: typeof SidebarTenantMenu;
     /** @see {@link SidebarUserMenu} */
     UserMenu: typeof SidebarUserMenu;
+    /** @see {@link SidebarTenantMenuHeading} */
+    TenantMenuHeading: typeof SidebarTenantMenuHeading;
+    /** @see {@link SidebarUserMenuHeading} */
+    UserMenuHeading: typeof SidebarUserMenuHeading;
 };
 export {};

package/dist/src/Sidebar/Sidebar.js

@@ -1,28 +1,50 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SidebarController } from '@moneyforward/mfui-icons-react';
+import { useId, useMemo, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { sidebarSlotRecipe } from '../../styled-system/recipes';
+import { IconButton } from '../IconButton';
+import { Tooltip } from '../Tooltip';
 import { SidebarServiceMenu } from './SidebarServiceMenu';
 import { SidebarTenantMenu } from './SidebarTenantMenu';
 import { SidebarUserMenu } from './SidebarUserMenu';
+import { SidebarTenantMenuHeading, SidebarUserMenuHeading } from './SidebarMenuHeading';
 import { SidebarNavigationItem } from './SidebarNavigationItem';
+import { SidebarContext } from './SidebarContext';
 import { useSidebarResize } from './hooks/useSidebarResize';
-function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, mainNavigationLabel = 'メインナビゲーション', extraNavigationLabel = '追加ナビゲーション', resizeHandleLabel = 'サイドバーの幅を調整', }) {
+function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, enableCollapsible = false, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonLabel = 'ナビゲーションを折りたたむ', expandButtonLabel = 'ナビゲーションを拡げる', mainNavigationLabel = 'メインナビゲーション', extraNavigationLabel = '追加ナビゲーション', resizeHandleLabel = 'サイドバーの幅を調整', }) {
+    const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
+    const isControlled = controlledIsCollapsed !== undefined;
+    const isCollapsed = enableCollapsible ? (isControlled ? controlledIsCollapsed : localIsCollapsed) : false;
+    const navId = useId();
     const classes = sidebarSlotRecipe();
     const { width, minWidth: resolvedMinWidth, maxWidth: resolvedMaxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown, } = useSidebarResize({
         minWidth,
         maxWidth,
         defaultWidth,
         onWidthChange,
+        isCollapsed,
     });
-    return (_jsxs("div", { ref: rootRef, className: cx(classes.root, 'mfui-Sidebar__root', className), style: { width: `${String(width)}px` }, "data-mfui-dragging": isDragging ? true : undefined, children: [_jsx("header", { className: cx(classes.header, 'mfui-Sidebar__header'), children: _jsxs("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: [serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-Sidebar__logo'), children: logoSlot })] }) }), _jsxs("div", { className: cx(classes.navigationWrapper, 'mfui-Sidebar__navigationWrapper'), children: [mainNavigationItems && mainNavigationItems.length > 0 ? (_jsx("nav", { "aria-label": mainNavigationLabel, className: cx(classes.mainNavigation, 'mfui-Sidebar__mainNavigation'), children: _jsx("ul", { className: cx(classes.navigationList, 'mfui-Sidebar__navigationList'), children: mainNavigationItems.map((item, index) => {
-                                if ('type' in item) {
-                                    return (_jsx("li", { "aria-hidden": "true", className: cx(classes.navigationDivider, 'mfui-Sidebar__navigationDivider') }, index));
-                                }
-                                return _jsx(SidebarNavigationItem, { ...item }, index);
-                            }) }) })) : null, extraNavigationSlot ? (_jsx("nav", { "aria-label": extraNavigationLabel, className: cx(classes.extraNavigation, 'mfui-Sidebar__extraNavigation'), children: extraNavigationSlot })) : null] }), _jsxs("div", { className: cx(classes.footer, 'mfui-Sidebar__footer'), children: [footerSlot ? _jsx("div", { className: cx(classes.footerSlot, 'mfui-Sidebar__footerSlot'), children: footerSlot }) : null, _jsx("div", { className: cx(classes.footerIconMenu, 'mfui-Sidebar__footerIconMenu'), children: footerIconMenuSlot }), tenantSlot || userSlot ? (_jsxs("div", { className: cx(classes.footerUserIdMenu, 'mfui-Sidebar__footerUserIdMenu'), children: [tenantSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: tenantSlot })) : null, userSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: userSlot })) : null] })) : null] }), _jsx("div", { "data-mfui-handle": true, "data-mfui-dragging": isDragging ? true : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": resizeHandleLabel, "aria-valuenow": width, "aria-valuemin": resolvedMinWidth, "aria-valuemax": resolvedMaxWidth, 
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, className: cx(classes.handle, 'mfui-Sidebar__handle'), onPointerDown: handlePointerDown, onKeyDown: handleKeyDown })] }));
+    const hasMainNavigation = !!mainNavigationItems?.length;
+    const toggleButtonLabel = isCollapsed ? expandButtonLabel : collapseButtonLabel;
+    const contextValue = useMemo(() => ({ isCollapsed }), [isCollapsed]);
+    const handleToggle = () => {
+        const next = !isCollapsed;
+        if (!isControlled) {
+            setLocalIsCollapsed(next);
+        }
+        onCollapsedChange?.(next);
+    };
+    return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsxs("div", { ref: rootRef, className: cx(classes.root, 'mfui-Sidebar__root', className), style: { width: `${String(width)}px` }, "data-mfui-collapsed": isCollapsed ? true : undefined, "data-mfui-dragging": isDragging ? true : undefined, children: [_jsxs("header", { className: cx(classes.header, 'mfui-Sidebar__header'), children: [_jsx("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: !isCollapsed ? (_jsxs(_Fragment, { children: [serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : null, _jsx("div", { className: cx(classes.logo, 'mfui-Sidebar__logo'), children: logoSlot })] })) : null }), enableCollapsible ? (_jsx("div", { className: cx(classes.rightPane, 'mfui-Sidebar__rightPane'), children: _jsx(SidebarToggleButton, { isCollapsed: isCollapsed, ariaLabel: toggleButtonLabel, navId: hasMainNavigation ? navId : undefined, onClick: handleToggle }) })) : null] }), _jsxs("div", { className: cx(classes.navigationWrapper, 'mfui-Sidebar__navigationWrapper'), children: [hasMainNavigation ? (_jsx("nav", { id: navId, "aria-label": mainNavigationLabel, className: cx(classes.mainNavigation, 'mfui-Sidebar__mainNavigation'), children: _jsx("ul", { className: cx(classes.navigationList, 'mfui-Sidebar__navigationList'), children: mainNavigationItems.map((item, index) => {
+                                    if ('type' in item) {
+                                        return (_jsx("li", { "aria-hidden": "true", className: cx(classes.navigationDivider, 'mfui-Sidebar__navigationDivider') }, index));
+                                    }
+                                    return _jsx(SidebarNavigationItem, { ...item }, index);
+                                }) }) })) : null, extraNavigationSlot ? (_jsx("nav", { "aria-label": extraNavigationLabel, className: cx(classes.extraNavigation, 'mfui-Sidebar__extraNavigation'), children: extraNavigationSlot })) : null] }), _jsxs("div", { className: cx(classes.footer, 'mfui-Sidebar__footer'), children: [footerSlot ? _jsx("div", { className: cx(classes.footerSlot, 'mfui-Sidebar__footerSlot'), children: footerSlot }) : null, _jsx("div", { className: cx(classes.footerIconMenu, 'mfui-Sidebar__footerIconMenu'), children: typeof footerIconMenuSlot === 'function' ? footerIconMenuSlot({ isCollapsed }) : footerIconMenuSlot }), !isCollapsed && (tenantSlot || userSlot) ? (_jsxs("div", { className: cx(classes.footerUserIdMenu, 'mfui-Sidebar__footerUserIdMenu'), children: [tenantSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: tenantSlot })) : null, userSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: userSlot })) : null] })) : null] }), _jsx("div", { "data-mfui-handle": true, "data-mfui-dragging": isDragging ? true : undefined, "data-mfui-collapsed": isCollapsed ? true : undefined, role: isCollapsed ? undefined : 'separator', "aria-orientation": isCollapsed ? undefined : 'vertical', "aria-label": isCollapsed ? undefined : resizeHandleLabel, "aria-valuenow": isCollapsed ? undefined : width, "aria-valuemin": isCollapsed ? undefined : resolvedMinWidth, "aria-valuemax": isCollapsed ? undefined : resolvedMaxWidth, tabIndex: isCollapsed ? -1 : 0, className: cx(classes.handle, 'mfui-Sidebar__handle'), onPointerDown: handlePointerDown, onKeyDown: handleKeyDown })] }) }));
+}
+function SidebarToggleButton({ isCollapsed, ariaLabel, navId, onClick, }) {
+    return (_jsx(Tooltip, { content: ariaLabel, placement: isCollapsed ? 'right' : 'bottom', children: _jsx(IconButton, { "aria-pressed": !isCollapsed, "aria-controls": navId, "aria-label": ariaLabel, className: "mfui-Sidebar__toggleButton", onClick: onClick, children: _jsx(SidebarController, { "aria-hidden": true }) }) }));
 }
 /**
  * The sidebar component.
@@ -40,6 +62,10 @@ function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigation
  * - `Sidebar.ServiceMenu` — the header service menu trigger, intended to wrap a list of services.
  * - `Sidebar.TenantMenu` — the footer tenant (business) name and its menu.
  * - `Sidebar.UserMenu` — the footer user (account) name and its menu.
+ * - `Sidebar.TenantMenuHeading` — the heading block inside `Sidebar.TenantMenu`: the tenant name and
+ *   its identification-number row (optionally copyable to the clipboard).
+ * - `Sidebar.UserMenuHeading` — the heading block inside `Sidebar.UserMenu`: the user name and
+ *   its identification-number row (optionally copyable to the clipboard).
  *
  * @example
  * ```tsx
@@ -79,4 +105,8 @@ export const Sidebar = Object.assign(SidebarBase, {
     TenantMenu: SidebarTenantMenu,
     /** @see {@link SidebarUserMenu} */
     UserMenu: SidebarUserMenu,
+    /** @see {@link SidebarTenantMenuHeading} */
+    TenantMenuHeading: SidebarTenantMenuHeading,
+    /** @see {@link SidebarUserMenuHeading} */
+    UserMenuHeading: SidebarUserMenuHeading,
 });

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

@@ -54,6 +54,12 @@ export type SidebarNavigationDivider = {
     type: 'divider';
 };
 export type SidebarNavigationEntry = SidebarNavigationItem | SidebarNavigationDivider;
+export type SidebarFooterIconMenuSlotState = {
+    /**
+     * Whether the sidebar is currently collapsed.
+     */
+    isCollapsed: boolean;
+};
 export type SidebarProps = {
     /**
      * Additional class names to apply to the component.
@@ -85,9 +91,10 @@ export type SidebarProps = {
     serviceMenuSlot: ReactNode;
     /**
      * Elements to be displayed in the footer icon menu area.
-     * Icon buttons with dropdowns should open upward (placement: top).
+     * Pass a function to adapt the content to the current collapsed state, such as switching tooltip placement.
+     * The plain node form still works for static content.
      */
-    footerIconMenuSlot: ReactNode;
+    footerIconMenuSlot: ReactNode | ((state: SidebarFooterIconMenuSlotState) => ReactNode);
     /**
      * Elements to be displayed below the footer icon menu.
      * Intended for the tenant (business) name and its menu.
@@ -121,6 +128,36 @@ export type SidebarProps = {
      * Use this to persist the value in your own storage (e.g. via an API call).
      */
     onWidthChange: (width: number) => void;
+    /**
+     * Whether the sidebar can be collapsed to an icon-only rail.
+     * When `true`, a toggle button is rendered in the header.
+     *
+     * @default false
+     */
+    enableCollapsible?: boolean;
+    /**
+     * The collapsed state of the sidebar (controlled).
+     * When provided, the component behaves as a controlled component.
+     * Only effective when `enableCollapsible` is `true`.
+     */
+    isCollapsed?: boolean;
+    /**
+     * Called when the collapse toggle is clicked with the new collapsed state.
+     * Only called when `enableCollapsible` is `true`.
+     */
+    onCollapsedChange?: (isCollapsed: boolean) => void;
+    /**
+     * Accessible name for the toggle button when expanded (clicking will collapse).
+     *
+     * @default 'ナビゲーションを折りたたむ'
+     */
+    collapseButtonLabel?: string;
+    /**
+     * Accessible name for the toggle button when collapsed (clicking will expand).
+     *
+     * @default 'ナビゲーションを拡げる'
+     */
+    expandButtonLabel?: string;
     /**
      * The accessible name for the primary navigation landmark.
      *

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

@@ -0,0 +1,3 @@
+export declare const SidebarContext: import("react").Context<{
+    isCollapsed: boolean;
+}>;

package/dist/src/Sidebar/SidebarContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SidebarContext = createContext({ isCollapsed: false });

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

@@ -0,0 +1,49 @@
+import { type SidebarTenantMenuHeadingProps, type SidebarUserMenuHeadingProps } from './SidebarMenuHeading.types';
+/**
+ * The heading block of the Sidebar tenant menu: the tenant name heading and the
+ * identification-number row. Place it as the first child of `Sidebar.TenantMenu`.
+ *
+ * Pass the `copy` prop to make the identification-number row copy its value to the clipboard,
+ * with a tooltip and a screen-reader announcement. The feedback after copying reads `コピーしました`
+ * by default and can be changed via `copy.copiedLabel`. Without `copy`, the row is static text.
+ *
+ * @param props - The props of the `Sidebar.TenantMenuHeading` component.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.TenantMenu name="株式会社サンプル" tooltipLabel="事業者">
+ *   <Sidebar.TenantMenuHeading
+ *     name="株式会社サンプル"
+ *     identificationNumber="事業者番号：0123-4567"
+ *     copy={{ text: '0123-4567', label: '事業者番号をコピーする' }}
+ *   />
+ *   <DropdownMenu.Divider />
+ *   <DropdownMenu.Item href="https://example.com">事業者設定</DropdownMenu.Item>
+ * </Sidebar.TenantMenu>
+ * ```
+ */
+export declare function SidebarTenantMenuHeading(props: SidebarTenantMenuHeadingProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The heading block of the Sidebar user menu: the user (account) name heading and the
+ * identification-number row. Place it as the first child of `Sidebar.UserMenu`.
+ *
+ * Pass the `copy` prop to make the identification-number row copy its value to the clipboard,
+ * with a tooltip and a screen-reader announcement. The feedback after copying reads `コピーしました`
+ * by default and can be changed via `copy.copiedLabel`. Without `copy`, the row is static text.
+ *
+ * @param props - The props of the `Sidebar.UserMenuHeading` component.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.UserMenu name="山田 太郎" tooltipLabel="アカウント">
+ *   <Sidebar.UserMenuHeading
+ *     name="山田 太郎"
+ *     identificationNumber="従業員番号：1234"
+ *     copy={{ text: '1234', label: '従業員番号をコピーする' }}
+ *   />
+ *   <DropdownMenu.Divider />
+ *   <DropdownMenu.Item onClick={handleLogout}>ログアウト</DropdownMenu.Item>
+ * </Sidebar.UserMenu>
+ * ```
+ */
+export declare function SidebarUserMenuHeading(props: SidebarUserMenuHeadingProps): import("react/jsx-runtime").JSX.Element;