@moneyforward/mfui-components 3.29.0 → 3.30.0

package/dist/src/MultipleSelectBox/utils/getDeepActiveElement.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Returns the truly focused element, traversing into shadow roots recursively.
+ *
+ * `document.activeElement` stops at the shadow host when focus is inside a Shadow DOM.
+ * This function follows the chain of `shadowRoot.activeElement` until the deepest focused element is found.
+ *
+ * @param root - The root to start from (defaults to `document`)
+ *
+ * @returns The deepest active element, or `null` if nothing is focused
+ */
+export declare const getDeepActiveElement: (root?: Document | ShadowRoot) => Element | null;

package/dist/src/MultipleSelectBox/utils/getDeepActiveElement.js

@@ -0,0 +1,17 @@
+/**
+ * Returns the truly focused element, traversing into shadow roots recursively.
+ *
+ * `document.activeElement` stops at the shadow host when focus is inside a Shadow DOM.
+ * This function follows the chain of `shadowRoot.activeElement` until the deepest focused element is found.
+ *
+ * @param root - The root to start from (defaults to `document`)
+ *
+ * @returns The deepest active element, or `null` if nothing is focused
+ */
+export const getDeepActiveElement = (root = document) => {
+    const active = root.activeElement;
+    if (active?.shadowRoot) {
+        return getDeepActiveElement(active.shadowRoot) ?? active;
+    }
+    return active;
+};

package/dist/src/NumberBox/NumberBox.d.ts

@@ -8,5 +8,5 @@ import React from 'react';
  */
 export declare const NumberBox: React.ForwardRefExoticComponent<Omit<import("..").TextBoxProps, "onChange" | "prefixSlot" | "suffixSlot"> & {
     onChange?: (value: string) => void;
-    textAlign?: "left" | "right";
+    textAlign?: 'left' | 'right';
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/Pagination/ItemsCount/ItemsCount.js

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

package/dist/src/Popover/Popover.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 { useCallback, useEffect, useMemo, useState, useRef, } from 'react';
 import { getOverflowAncestors } from '@floating-ui/react-dom';
 import { PopoverContextProvider, usePopoverContext } from './PopoverContext';

package/dist/src/RadioButton/RadioButton.d.ts

@@ -10,4 +10,4 @@ export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     label?: string;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "checked" | "disabled"> & import("react").RefAttributes<HTMLInputElement>>;

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/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

@@ -9,22 +9,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/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;

package/dist/src/Sidebar/SidebarMenuHeading/SidebarMenuHeading.js

@@ -0,0 +1,113 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Copy, Current } from '@moneyforward/mfui-icons-react';
+import { cx } from '../../../styled-system/css';
+import { sidebarMenuHeadingSlotRecipe } from '../../../styled-system/recipes';
+import { DropdownMenu } from '../../DropdownMenu';
+import { Tooltip } from '../../Tooltip';
+import { CLOSE_DELAY } from '../../Tooltip/Tooltip.constants';
+import { Typography } from '../../Typography';
+// How long the "copied" feedback stays while the user remains on the row.
+const COPIED_FEEDBACK_DURATION_MS = 5000;
+// Copy-to-clipboard feedback for the identification-number row: `copied` drives the tooltip text,
+// the icon swap, and the live region; the handlers are spread onto the `DropdownMenu.Item`.
+function useCopyFeedback(text) {
+    const [copied, setCopied] = useState(false);
+    const timerRef = useRef(undefined);
+    useEffect(() => () => {
+        window.clearTimeout(timerRef.current);
+    }, []);
+    // On blur (keyboard focus moved on), dismiss immediately so the tooltip never lingers next to a
+    // newly focused item; the copy result is still announced by the `role="status"` live region.
+    const onBlur = () => {
+        window.clearTimeout(timerRef.current);
+        setCopied(false);
+    };
+    // On mouse leave, dismiss after the same delay as the Tooltip's own close behavior.
+    const onMouseLeave = () => {
+        window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => {
+            setCopied(false);
+        }, CLOSE_DELAY);
+    };
+    // Copy the text, keep the menu open, and show the "copied" feedback (tooltip + icon) while the
+    // user stays on the row. The feedback only appears once the clipboard write succeeds; on failure
+    // the row keeps its copy label so the user can retry.
+    const onClick = (event) => {
+        event.preventDefault(); // keep the menu open after copying
+        navigator.clipboard
+            .writeText(text ?? '')
+            .then(() => {
+            setCopied(true);
+            window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => {
+                setCopied(false);
+            }, COPIED_FEEDBACK_DURATION_MS);
+        })
+            .catch(() => {
+            // Swallow the rejection (insecure context, missing clipboard-write permission, etc.) so it
+            // does not surface as an unhandled promise rejection.
+        });
+    };
+    return { copied, onClick, onBlur, onMouseLeave };
+}
+function SidebarMenuHeading({ name, identificationNumber, copy }) {
+    const classes = sidebarMenuHeadingSlotRecipe();
+    const { copied, ...copyHandlers } = useCopyFeedback(copy?.text);
+    const copiedLabel = copy?.copiedLabel ?? 'コピーしました';
+    const numberRow = (_jsxs(DropdownMenu.Item, { className: cx(classes.numberRow, 'mfui-SidebarMenuHeading__numberRow'), ...(copy ? copyHandlers : {}), children: [_jsx(Typography, { className: cx(classes.numberText, 'mfui-SidebarMenuHeading__numberText'), children: identificationNumber }), copy ? (copied ? (_jsx(Current, { "aria-hidden": true, className: cx(classes.numberIcon, 'mfui-SidebarMenuHeading__numberIcon') })) : (_jsx(Copy, { "aria-hidden": true, className: cx(classes.numberIcon, 'mfui-SidebarMenuHeading__numberIcon') }))) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenu.Heading, { children: name }), copy ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: copied ? copiedLabel : copy.label, open: copied || undefined, placement: "right", targetDOMNode: typeof document === 'undefined' ? undefined : document.body, className: cx(classes.tooltip, 'mfui-SidebarMenuHeading__tooltip'), children: numberRow }), _jsx("span", { role: "status", className: cx(classes.status, 'mfui-SidebarMenuHeading__status'), children: copied ? copiedLabel : '' })] })) : (numberRow)] }));
+}
+/**
+ * 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 function SidebarTenantMenuHeading(props) {
+    return _jsx(SidebarMenuHeading, { ...props });
+}
+/**
+ * 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 function SidebarUserMenuHeading(props) {
+    return _jsx(SidebarMenuHeading, { ...props });
+}

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

@@ -0,0 +1,36 @@
+/**
+ * The copy-to-clipboard settings for the identification-number row.
+ */
+export type SidebarMenuHeadingCopy = {
+    /**
+     * The text written to the clipboard when the row is selected (e.g. `"0123-4567"`).
+     */
+    text: string;
+    /**
+     * The tooltip label prompting the copy action (e.g. `"事業者番号をコピーする"`).
+     */
+    label: string;
+    /**
+     * The label shown in the tooltip and announced to screen readers right after copying.
+     *
+     * @default 'コピーしました'
+     */
+    copiedLabel?: string;
+};
+export type SidebarMenuHeadingProps = {
+    /**
+     * The tenant (business) or user (account) name shown as the menu heading.
+     */
+    name: string;
+    /**
+     * The identification-number row text (e.g. `"事業者番号：0123-4567"`).
+     */
+    identificationNumber: string;
+    /**
+     * Enables copy-to-clipboard on the identification-number row: the row becomes a menu item button
+     * with a copy icon, a tooltip, and a screen-reader announcement. When omitted, the row is static text.
+     */
+    copy?: SidebarMenuHeadingCopy;
+};
+export type SidebarTenantMenuHeadingProps = SidebarMenuHeadingProps;
+export type SidebarUserMenuHeadingProps = SidebarMenuHeadingProps;

package/dist/src/Sidebar/SidebarMenuHeading/SidebarMenuHeading.types.js

@@ -0,0 +1 @@
+export {};