@moneyforward/mfui-components 3.26.0 → 3.27.0

package/dist/src/DropdownMenu/DropdownMenu.d.ts

@@ -19,7 +19,7 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenu({ icon, label, children, triggerProps, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }: DropdownMenuProps<ReactElement | undefined>): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }: DropdownMenuProps<ReactElement | undefined>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DropdownMenu {
     var Divider: typeof DropdownMenuDivider;
     var Item: typeof DropdownMenuItem;

package/dist/src/DropdownMenu/DropdownMenu.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Button } from '../Button';
+import { DropdownMenuButtonTrigger } from './DropdownMenuButtonTrigger';
 import { DropdownMenuContainer } from './DropdownMenuContainer';
 import { DropdownMenuDivider } from './DropdownMenuDivider';
 import { DropdownMenuItem } from './DropdownMenuItem';
@@ -27,7 +27,7 @@ import { DropdownMenuHeading } from './DropdownMenuHeading';
  * </DropdownMenu>
  * ```
  */
-export function DropdownMenu({ icon, label, children, triggerProps, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
+export function DropdownMenu({ icon, label, children, triggerProps, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, menuPopoverProps, disabled, targetDOMNode, enableAutoUnmount, onOpenStateChanged, onBlur, }) {
     const [menuDefaultFocusPosition, setMenuDefaultFocusPosition] = useState('first');
     const handleTriggerKeyDownLocal = useCallback((event) => {
         switch (event.key) {
@@ -49,7 +49,7 @@ export function DropdownMenu({ icon, label, children, triggerProps, menuPopoverP
                 handleTriggerKeyDownLocal(event);
                 handleTriggerKeyDown(event);
             };
-            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleTriggerBlur, onClick: togglePopover, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(Button, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleTriggerBlur, onClick: togglePopover, ...triggerProps, isDropdownTrigger: true, children: label }));
+            return icon ? (_jsx(IconButton, { ref: setTriggerRef, "aria-expanded": isPopoverOpen, "aria-haspopup": "menu", disabled: disabled, onKeyDown: handleKeyDownCommon, onBlur: handleTriggerBlur, onClick: togglePopover, ...triggerProps, "aria-label": label, children: icon })) : (_jsx(DropdownMenuButtonTrigger, { label: label, tooltipLabel: tooltipLabel, tooltipPlacement: tooltipPlacement, triggerMiddleTruncate: triggerMiddleTruncate, triggerTypographyVariant: triggerTypographyVariant, triggerProps: triggerProps, disabled: disabled, isPopoverOpen: isPopoverOpen, setTriggerRef: setTriggerRef, togglePopover: togglePopover, handleTriggerKeyDown: handleKeyDownCommon, handleTriggerBlur: handleTriggerBlur }));
         }, renderContent: ({ closePopover }) => (_jsx(DropdownMenuProvider, { value: { closeMenuPopover: closePopover }, children: _jsx(DropdownMenuContainer, { defaultFocusItem: menuDefaultFocusPosition, onClose: closePopover, children: children }) })), enableAutoFocusOnPopover: false, enableAutoUnmount: enableAutoUnmount, contentProps: {
             className: cx(classes.popover, menuPopoverProps?.className),
         }, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }));

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

@@ -2,6 +2,47 @@ import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from
 import { type ButtonProps } from '../Button';
 import { type IconButtonProps } from '../IconButton';
 import { type PopoverProps } from '../Popover';
+import { type TooltipProps } from '../Tooltip';
+import { type TypographyProps } from '../Typography';
+/**
+ * The props of the default Button-based trigger that are managed by the DropdownMenu itself
+ * (as opposed to `triggerProps`, which is forwarded to the underlying Button).
+ *
+ * These describe trigger-presentation concerns that the Button cannot express on its own:
+ * a describing tooltip and middle truncation of the label.
+ */
+export type DropdownMenuButtonTriggerProps = {
+    /**
+     * The tooltip label describing what the trigger is (e.g. `"事業者"`).
+     * Shown on hover/focus and wired to the trigger via `aria-describedby` for screen readers.
+     * When omitted, no tooltip is shown.
+     */
+    tooltipLabel?: string;
+    /**
+     * The placement of the trigger tooltip (only applied when `tooltipLabel` is set).
+     *
+     * Accepts a single placement (e.g. `"top"`) for fixed positioning, or an array
+     * (e.g. `["top", "bottom"]`) for priority-based positioning with fallbacks.
+     * When omitted, the tooltip is placed automatically.
+     */
+    tooltipPlacement?: TooltipProps['placement'];
+    /**
+     * Whether the trigger label is middle-truncated (e.g. `"Money…ward"`) when it overflows
+     * the available width. When omitted, the label is not truncated by the component.
+     *
+     * @default false
+     */
+    triggerMiddleTruncate?: boolean;
+    /**
+     * The Typography variant of the trigger label. Use this when the label needs a different
+     * type style than the default (e.g. `"condensedControlLabel"`).
+     *
+     * Only applied when `tooltipLabel` or `triggerMiddleTruncate` is set.
+     *
+     * @default 'controlLabel'
+     */
+    triggerTypographyVariant?: TypographyProps['variant'];
+};
 type DropdownMenuCommonProps = {
     /**
      * The list of the dropdown menu.
@@ -26,7 +67,7 @@ type DropdownMenuCommonProps = {
      * If the icon prop is provided, the label prop will be set as the aria-label of the icon button.
      * If the icon prop is not provided, the label prop will be set as the label of the button.
      */
-    label: string;
+    label?: string;
     /**
      * The properties for the popover content panel.
      *
@@ -77,7 +118,14 @@ type DropdownMenuCommonProps = {
      */
     onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
 };
-type DropdownMenuPropsWithIcon = {
+type DropdownMenuButtonTriggerPropsNever = {
+    [K in keyof DropdownMenuButtonTriggerProps]?: undefined;
+};
+type DropdownMenuPropsWithIcon = DropdownMenuButtonTriggerPropsNever & {
+    /**
+     * The aria-label of the trigger icon button of the dropdown menu.
+     */
+    label: string;
     icon: ReactElement;
     /**
      * Button component and the IconButton component.
@@ -90,6 +138,10 @@ type DropdownMenuPropsWithIcon = {
     triggerProps?: Pick<IconButtonProps, 'outlined' | 'className'>;
 };
 type DropdownMenuPropsWithoutIcon = {
+    /**
+     * The label of the trigger button of the dropdown menu.
+     */
+    label: string;
     icon?: undefined;
     /**
      * Button component and the IconButton component.
@@ -97,9 +149,9 @@ type DropdownMenuPropsWithoutIcon = {
      * Use this prop if you need to customize the style of the trigger button.
      *
      * If the icon prop is not provided, the following props are acceptable as props of the Button component:
-     *   'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className'
+     *   'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className' | 'isDropdownTrigger'
      */
-    triggerProps?: Pick<ButtonProps, 'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className'>;
-};
+    triggerProps?: Pick<ButtonProps, 'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className' | 'isDropdownTrigger'>;
+} & DropdownMenuButtonTriggerProps;
 export type DropdownMenuProps<IconType = undefined> = DropdownMenuCommonProps & (IconType extends ReactElement ? DropdownMenuPropsWithIcon : DropdownMenuPropsWithoutIcon) & Pick<PopoverProps, 'targetDOMNode' | 'enableAutoUnmount'>;
 export {};

package/dist/src/DropdownMenu/DropdownMenuButtonTrigger.d.ts

@@ -0,0 +1,46 @@
+import { type FocusEventHandler, type KeyboardEventHandler, type SyntheticEvent } from 'react';
+import { type ButtonProps } from '../Button';
+import { type DropdownMenuButtonTriggerProps } from './DropdownMenu.types';
+type DropdownMenuButtonTriggerComponentProps = DropdownMenuButtonTriggerProps & {
+    /**
+     * The accessible label / visible text of the trigger button.
+     */
+    label: string;
+    /**
+     * Props forwarded to the underlying Button for design customization.
+     */
+    triggerProps?: Pick<ButtonProps, 'size' | 'priority' | 'destructive' | 'leftIcon' | 'loading' | 'className' | 'isDropdownTrigger'>;
+    /**
+     * The disabled state of the trigger.
+     */
+    disabled?: boolean;
+    /**
+     * The current open state of the dropdown menu, used for `aria-expanded`.
+     */
+    isPopoverOpen: boolean;
+    /**
+     * Ref setter for the trigger element so the popover can position itself.
+     */
+    setTriggerRef: (element: HTMLElement | null) => void;
+    /**
+     * Toggles the open state of the dropdown menu.
+     */
+    togglePopover: (event?: SyntheticEvent) => void;
+    /**
+     * Keyboard handler for the trigger (ArrowUp / ArrowDown focus behavior already merged in).
+     */
+    handleTriggerKeyDown: KeyboardEventHandler<HTMLElement>;
+    /**
+     * Blur handler for the trigger with smart blur detection.
+     */
+    handleTriggerBlur: FocusEventHandler<HTMLElement>;
+};
+/**
+ * The default Button-based trigger of the DropdownMenu.
+ *
+ * On top of the plain Button trigger, it wires up the optional trigger features that are owned by
+ * the DropdownMenu rather than the Button: a describing tooltip (`tooltipLabel`) and middle
+ * truncation of the label (`triggerMiddleTruncate`). Design customization stays on `triggerProps`.
+ */
+export declare function DropdownMenuButtonTrigger({ label, tooltipLabel, tooltipPlacement, triggerMiddleTruncate, triggerTypographyVariant, triggerProps, disabled, isPopoverOpen, setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur, }: DropdownMenuButtonTriggerComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/DropdownMenu/DropdownMenuButtonTrigger.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Button } from '../Button';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+import { useMiddleTruncatedText } from '../utilities/dom/useMiddleTruncatedText';
+const TRUNCATED_LABEL_STYLE = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    flex: '1 0 0',
+    minWidth: '1px',
+    color: 'inherit',
+};
+// The tooltip wraps the trigger Button (so focus on the button bubbles up to the tooltip and shows
+// it on keyboard focus). The wrapper must not shrink the full-width trigger, hence `width: 100%`.
+const TOOLTIP_WRAPPER_STYLE = {
+    display: 'flex',
+    minWidth: 0,
+};
+/**
+ * The default Button-based trigger of the DropdownMenu.
+ *
+ * On top of the plain Button trigger, it wires up the optional trigger features that are owned by
+ * the DropdownMenu rather than the Button: a describing tooltip (`tooltipLabel`) and middle
+ * truncation of the label (`triggerMiddleTruncate`). Design customization stays on `triggerProps`.
+ */
+export function DropdownMenuButtonTrigger({ label, tooltipLabel, tooltipPlacement, triggerMiddleTruncate = false, triggerTypographyVariant = 'controlLabel', triggerProps, disabled, isPopoverOpen, setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur, }) {
+    const labelRef = useRef(null);
+    // The ref is only attached when middle truncation is enabled, so the hook is a no-op otherwise.
+    const truncatedLabel = useMiddleTruncatedText(label, labelRef);
+    const sharedButtonProps = {
+        ref: setTriggerRef,
+        'aria-expanded': isPopoverOpen,
+        'aria-haspopup': 'menu',
+        disabled,
+        onKeyDown: handleTriggerKeyDown,
+        onBlur: handleTriggerBlur,
+        onClick: togglePopover,
+    };
+    // The label needs custom rendering (Typography / truncation span) only when one of the managed
+    // trigger features is requested. Otherwise the plain string label is passed to the Button,
+    // preserving the existing default-trigger behavior.
+    const needsCustomLabel = tooltipLabel != null || triggerMiddleTruncate;
+    if (!needsCustomLabel) {
+        return (_jsx(Button, { isDropdownTrigger: true, ...sharedButtonProps, ...triggerProps, children: label }));
+    }
+    const trigger = (_jsx(Button, { isDropdownTrigger: true, ...sharedButtonProps, ...triggerProps, "aria-label": label, children: _jsx(Typography, { variant: triggerTypographyVariant, style: TRUNCATED_LABEL_STYLE, children: triggerMiddleTruncate ? _jsx("span", { ref: labelRef, children: truncatedLabel }) : label }) }));
+    if (tooltipLabel == null) {
+        return trigger;
+    }
+    // Wrap the trigger (not its inner label) so the tooltip opens on keyboard focus of the button and
+    // its content is wired to the button via `aria-describedby` automatically by the Tooltip.
+    return (_jsx(Tooltip, { content: tooltipLabel, placement: tooltipPlacement, style: TOOLTIP_WRAPPER_STYLE, children: trigger }));
+}

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

@@ -0,0 +1,63 @@
+import { type SidebarProps } from './Sidebar.types';
+import { SidebarServiceMenu } from './SidebarServiceMenu';
+import { SidebarTenantMenu } from './SidebarTenantMenu';
+import { SidebarUserMenu } from './SidebarUserMenu';
+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;
+/**
+ * The sidebar component.
+ * A navigation layout component that combines a logo header, a navigation area,
+ * and a footer with icon menu and user information.
+ *
+ * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
+ *
+ * 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`.
+ *
+ * The following composition components are provided as sub-components:
+ * - `Sidebar.NavigationItem` — a single navigation item; `mainNavigationItems` renders these for you,
+ *   but it can also be used directly inside `extraNavigationSlot`.
+ * - `Sidebar.ServiceMenu` — the footer 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.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   logoSlot={<YourLogo />}
+ *   defaultWidth={savedWidth}
+ *   onWidthChange={(width) => persistWidth(width)}
+ *   mainNavigationItems={[
+ *     { label: 'Home', icon: <HomeIcon />, href: '/', isCurrent: true },
+ *     { label: 'Search', icon: <SearchIcon />, onClick: handleSearch },
+ *   ]}
+ *   serviceMenuSlot={
+ *     <Sidebar.ServiceMenu label="サービス" icon={<ApplicationsIcon />}>
+ *       <DropdownMenu.Item href="https://example.com">マイページ</DropdownMenu.Item>
+ *     </Sidebar.ServiceMenu>
+ *   }
+ *   footerIconMenuSlot={<YourIconButtons />}
+ *   tenantSlot={
+ *     <Sidebar.TenantMenu name="株式会社サンプル" tooltipLabel="事業者">
+ *       <DropdownMenu.Item href="https://example.com">事業者設定</DropdownMenu.Item>
+ *     </Sidebar.TenantMenu>
+ *   }
+ *   userSlot={
+ *     <Sidebar.UserMenu name="山田 太郎" tooltipLabel="アカウント">
+ *       <DropdownMenu.Item onClick={handleLogout}>ログアウト</DropdownMenu.Item>
+ *     </Sidebar.UserMenu>
+ *   }
+ * />
+ * ```
+ */
+export declare const Sidebar: typeof SidebarBase & {
+    /** @see {@link SidebarNavigationItem} */
+    NavigationItem: typeof SidebarNavigationItem;
+    /** @see {@link SidebarServiceMenu} */
+    ServiceMenu: typeof SidebarServiceMenu;
+    /** @see {@link SidebarTenantMenu} */
+    TenantMenu: typeof SidebarTenantMenu;
+    /** @see {@link SidebarUserMenu} */
+    UserMenu: typeof SidebarUserMenu;
+};
+export {};

package/dist/src/Sidebar/Sidebar.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../styled-system/css';
+import { sidebarSlotRecipe } from '../../styled-system/recipes';
+import { SidebarServiceMenu } from './SidebarServiceMenu';
+import { SidebarTenantMenu } from './SidebarTenantMenu';
+import { SidebarUserMenu } from './SidebarUserMenu';
+import { SidebarNavigationItem } from './SidebarNavigationItem';
+import { useSidebarResize } from './hooks/useSidebarResize';
+function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, mainNavigationLabel = 'メインナビゲーション', extraNavigationLabel = '追加ナビゲーション', resizeHandleLabel = 'サイドバーの幅を調整', }) {
+    const classes = sidebarSlotRecipe();
+    const { width, minWidth: resolvedMinWidth, maxWidth: resolvedMaxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown, } = useSidebarResize({
+        minWidth,
+        maxWidth,
+        defaultWidth,
+        onWidthChange,
+    });
+    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: _jsx("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: _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, serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : 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 })] }));
+}
+/**
+ * The sidebar component.
+ * A navigation layout component that combines a logo header, a navigation area,
+ * and a footer with icon menu and user information.
+ *
+ * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
+ *
+ * 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`.
+ *
+ * The following composition components are provided as sub-components:
+ * - `Sidebar.NavigationItem` — a single navigation item; `mainNavigationItems` renders these for you,
+ *   but it can also be used directly inside `extraNavigationSlot`.
+ * - `Sidebar.ServiceMenu` — the footer 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.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   logoSlot={<YourLogo />}
+ *   defaultWidth={savedWidth}
+ *   onWidthChange={(width) => persistWidth(width)}
+ *   mainNavigationItems={[
+ *     { label: 'Home', icon: <HomeIcon />, href: '/', isCurrent: true },
+ *     { label: 'Search', icon: <SearchIcon />, onClick: handleSearch },
+ *   ]}
+ *   serviceMenuSlot={
+ *     <Sidebar.ServiceMenu label="サービス" icon={<ApplicationsIcon />}>
+ *       <DropdownMenu.Item href="https://example.com">マイページ</DropdownMenu.Item>
+ *     </Sidebar.ServiceMenu>
+ *   }
+ *   footerIconMenuSlot={<YourIconButtons />}
+ *   tenantSlot={
+ *     <Sidebar.TenantMenu name="株式会社サンプル" tooltipLabel="事業者">
+ *       <DropdownMenu.Item href="https://example.com">事業者設定</DropdownMenu.Item>
+ *     </Sidebar.TenantMenu>
+ *   }
+ *   userSlot={
+ *     <Sidebar.UserMenu name="山田 太郎" tooltipLabel="アカウント">
+ *       <DropdownMenu.Item onClick={handleLogout}>ログアウト</DropdownMenu.Item>
+ *     </Sidebar.UserMenu>
+ *   }
+ * />
+ * ```
+ */
+export const Sidebar = Object.assign(SidebarBase, {
+    /** @see {@link SidebarNavigationItem} */
+    NavigationItem: SidebarNavigationItem,
+    /** @see {@link SidebarServiceMenu} */
+    ServiceMenu: SidebarServiceMenu,
+    /** @see {@link SidebarTenantMenu} */
+    TenantMenu: SidebarTenantMenu,
+    /** @see {@link SidebarUserMenu} */
+    UserMenu: SidebarUserMenu,
+});

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

@@ -0,0 +1,143 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from 'react';
+type AnchorNavigationItemProps = {
+    /**
+     * The URL to navigate to when the item is clicked.
+     * When provided, the item is rendered as an anchor (`<a>`) element.
+     */
+    href: string;
+    /**
+     * The target attribute for the anchor element.
+     */
+    target?: string;
+    /**
+     * Custom link component to use instead of the default anchor element.
+     * Useful for client-side routing libraries (e.g. next/link).
+     */
+    customLinkComponent?: ElementType;
+    onClick?: undefined;
+};
+type ButtonNavigationItemProps = {
+    href?: undefined;
+    target?: undefined;
+    customLinkComponent?: undefined;
+    /**
+     * The click handler for the navigation item.
+     * When provided without `href`, the item is rendered as a button (`<button>`) element.
+     */
+    onClick: ComponentPropsWithoutRef<'button'>['onClick'];
+};
+export type SidebarNavigationItem = {
+    /**
+     * The label of the navigation item.
+     */
+    label: string;
+    /**
+     * The icon of the navigation item.
+     */
+    icon: ReactElement;
+    /**
+     * Whether the navigation item is the current page.
+     */
+    isCurrent?: boolean;
+    /**
+     * Maximum number of lines before truncating with an ellipsis.
+     * When the label is truncated, a tooltip with the full text is shown automatically.
+     *
+     * @default 1
+     */
+    maxLines?: number;
+} & (AnchorNavigationItemProps | ButtonNavigationItemProps);
+/**
+ * A visual divider that separates groups of navigation items.
+ */
+export type SidebarNavigationDivider = {
+    type: 'divider';
+};
+export type SidebarNavigationEntry = SidebarNavigationItem | SidebarNavigationDivider;
+export type SidebarProps = {
+    /**
+     * Additional class names to apply to the component.
+     */
+    className?: string;
+    /**
+     * Elements to be displayed on the logo area at the top of the sidebar.
+     */
+    logoSlot: ReactNode;
+    /**
+     * Navigation items to be displayed in the primary navigation area.
+     * Use `{ type: 'divider' }` to insert a visual separator between groups of items.
+     */
+    mainNavigationItems?: SidebarNavigationEntry[];
+    /**
+     * Elements to be displayed in the secondary navigation area, below the primary navigation.
+     * This slot accepts any content.
+     */
+    extraNavigationSlot?: ReactNode;
+    /**
+     * Elements to be displayed above the service menu in the footer.
+     * This slot accepts any content.
+     */
+    footerSlot?: ReactNode;
+    /**
+     * Elements to be displayed as the service menu in the footer.
+     * Intended for a dropdown menu listing available services.
+     */
+    serviceMenuSlot: ReactNode;
+    /**
+     * Elements to be displayed in the footer icon menu area.
+     * Icon buttons with dropdowns should open upward (placement: top).
+     */
+    footerIconMenuSlot: ReactNode;
+    /**
+     * Elements to be displayed below the footer icon menu.
+     * Intended for the tenant (business) name and its menu.
+     */
+    tenantSlot?: ReactNode;
+    /**
+     * Elements to be displayed below the tenant area.
+     * Intended for the user (account) name and its menu.
+     */
+    userSlot?: ReactNode;
+    /**
+     * Minimum width in pixels when resizing.
+     *
+     * @default 180
+     */
+    minWidth?: number;
+    /**
+     * Maximum width in pixels when resizing.
+     *
+     * @default 280
+     */
+    maxWidth?: number;
+    /**
+     * The initial (or server-persisted) width in pixels.
+     * Use this to restore the sidebar width from your own storage (e.g. a server-side user preference).
+     * When provided, the sidebar opens at this width clamped to `[minWidth, maxWidth]`.
+     */
+    defaultWidth?: number;
+    /**
+     * Called whenever the user finishes resizing the sidebar, with the new width in pixels.
+     * Use this to persist the value in your own storage (e.g. via an API call).
+     */
+    onWidthChange: (width: number) => void;
+    /**
+     * The accessible name for the primary navigation landmark.
+     *
+     * @default 'メインナビゲーション'
+     */
+    mainNavigationLabel?: string;
+    /**
+     * The accessible name for the secondary navigation landmark.
+     *
+     * @default '追加ナビゲーション'
+     */
+    extraNavigationLabel?: string;
+    /**
+     * The accessible name for the resize handle.
+     *
+     * @default 'サイドバーの幅を調整'
+     */
+    resizeHandleLabel?: string;
+};
+export {};

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

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

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

@@ -0,0 +1,9 @@
+import { type SidebarNavigationItem as SidebarNavigationItemType } from './Sidebar.types';
+export type SidebarNavigationItemProps = SidebarNavigationItemType;
+/**
+ * A single navigation item shown in the Sidebar.
+ *
+ * Renders as an anchor (`<a>`) when `href` is provided, or a button (`<button>`) when `onClick` is provided.
+ * Long labels are truncated to `maxLines` with an automatic tooltip showing the full text.
+ */
+export declare function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...rest }: SidebarNavigationItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarNavigationItem.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useRef, useState } from 'react';
+import { cx } from '../../styled-system/css';
+import { sidebarSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+import { useIsomorphicLayoutEffect } from '../utilities/react/useIsomorphicLayoutEffect';
+/**
+ * A single navigation item shown in the Sidebar.
+ *
+ * Renders as an anchor (`<a>`) when `href` is provided, or a button (`<button>`) when `onClick` is provided.
+ * Long labels are truncated to `maxLines` with an automatic tooltip showing the full text.
+ */
+export function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...rest }) {
+    const classes = sidebarSlotRecipe();
+    const labelRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const element = labelRef.current;
+        if (!element)
+            return;
+        const check = () => {
+            setIsTruncated(element.scrollHeight > element.clientHeight);
+        };
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+        // Re-check when label/maxLines change: a content change may not alter the observed
+        // box size, so ResizeObserver alone would leave isTruncated stale.
+    }, [label, maxLines]);
+    const isAnchor = 'href' in rest && rest.href !== undefined;
+    const Tag = isAnchor
+        ? (rest.customLinkComponent ?? 'a')
+        : 'button';
+    const href = isAnchor ? rest.href : undefined;
+    const target = 'target' in rest ? rest.target : undefined;
+    const onClick = 'onClick' in rest ? rest.onClick : undefined;
+    return (_jsx("li", { className: cx(classes.navigationListItem, 'mfui-Sidebar__navigationListItem'), style: maxLines !== undefined ? { '--mfui-sidebar-max-lines': maxLines } : undefined, children: _jsx(Tooltip, { content: label, disabled: !isTruncated, placement: "right", children: _jsx(FocusIndicator, { children: _jsx(Tag, { "data-mfui-focusable": true, href: href, target: target, type: isAnchor ? undefined : 'button', "aria-current": isCurrent ? 'page' : undefined, className: cx(classes.navigationLink, 'mfui-Sidebar__navigationLink'), onClick: onClick, children: _jsxs("div", { className: cx(classes.navigationLinkInner, 'mfui-Sidebar__navigationLinkInner'), children: [_jsx("span", { className: cx(classes.navigationLinkIcon, 'mfui-Sidebar__navigationLinkIcon'), children: cloneElement(icon, {
+                                    width: 18,
+                                    height: 18,
+                                    'aria-hidden': true,
+                                }) }), _jsx(Typography, { ref: labelRef, variant: "controlLabel", className: cx(classes.navigationLinkLabel, 'mfui-Sidebar__navigationLinkLabel'), children: label })] }) }) }) }) }));
+}

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

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type SidebarServiceMenuProps = {
+    /**
+     * The label shown in the service switcher trigger.
+     */
+    label: string;
+    /**
+     * The icon shown in the service switcher trigger.
+     */
+    icon: ReactElement;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The service switcher menu shown in the Sidebar footer.
+ *
+ * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
+ * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
+ * menu items only.
+ */
+export declare function SidebarServiceMenu({ label, icon, children }: SidebarServiceMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarServiceMenu.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The service switcher menu shown in the Sidebar footer.
+ *
+ * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
+ * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
+ * menu items only.
+ */
+export function SidebarServiceMenu({ label, icon, children }) {
+    return (_jsx(DropdownMenu, { label: label, triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            leftIcon: icon,
+            // Styled via the `serviceMenu` slot's `& .mfui-Sidebar__serviceTrigger` descendant selector.
+            className: 'mfui-Sidebar__serviceTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}