@moneyforward/mfui-components 3.25.1 → 3.27.0

package/dist/src/DateTimeSelection/DatePicker/DatePickerCalendar/DatePickerCalendar.js

@@ -53,9 +53,11 @@ export function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDis
         setViewingValue(newDate);
     }, [setViewingValue, viewingValue]);
     const { isPrevYearDisabled, isNextYearDisabled } = useMemo(() => ({
-        isPrevYearDisabled: viewingValue.getFullYear() <= MINIMUM_VIEWABLE_YEAR,
-        isNextYearDisabled: viewingValue.getFullYear() >= MAXIMUM_VIEWABLE_YEAR,
-    }), [viewingValue]);
+        isPrevYearDisabled: viewingValue.getFullYear() <= MINIMUM_VIEWABLE_YEAR ||
+            (minDate ? viewingValue.getFullYear() <= minDate.getFullYear() : false),
+        isNextYearDisabled: viewingValue.getFullYear() >= MAXIMUM_VIEWABLE_YEAR ||
+            (maxDate ? viewingValue.getFullYear() >= maxDate.getFullYear() : false),
+    }), [viewingValue, minDate, maxDate]);
     const { isPrevMonthDisabled, isNextMonthDisabled } = useMemo(() => {
         const firstDayOfMonth = new Date(viewingValue.getFullYear(), viewingValue.getMonth(), 1);
         const firstDayOfNextMonth = new Date(viewingValue.getFullYear(), viewingValue.getMonth() + 1, 1);

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.d.ts

@@ -4,4 +4,4 @@ import { type BasePickerProps } from './BasePicker.types';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, initialViewingDate, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.js

@@ -18,7 +18,7 @@ import { getBasePickerLabel } from './constants';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale = 'ja', disabled, ...textBoxProps }) {
+export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, initialViewingDate, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale = 'ja', disabled, ...textBoxProps }) {
     const textBoxRef = useRef(null);
     const basePickerPopoverWrapperRef = useRef(null);
     const triggerRef = useRef(null);
@@ -76,7 +76,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
         }
         openPopover(event);
     }, [textBoxProps.wrapperProps, textBoxRef]);
-    return (_jsx(BasePickerProvider, { initialViewingValue: value ?? defaultValue, value: value, internalValue: inputValueProps.value, format: format, baseFormat: baseFormat, children: _jsx(InternalPopover, { renderTrigger: ({ setTriggerRef, togglePopover, openPopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(TextBox, { ref: textBoxRef, ...inputValueProps, touchDeviceReadOnly: true, suffixSlot: _jsx(IconButton, { size: textBoxProps.textBoxSize === 'small' ? 'small' : 'default', "aria-label": calendarIconButtonProps?.['aria-label'] ?? calendarIconLabel, "data-active": shouldCalendarIconActive, "data-mfui-content": "calendar-icon-button", disabled: disabled, onClick: togglePopover, onBlur: handleTriggerBlur, children: _jsx(Calendar, {}) }), disabled: disabled, ...textBoxProps, wrapperProps: {
+    return (_jsx(BasePickerProvider, { initialViewingValue: value ?? defaultValue ?? initialViewingDate, value: value, internalValue: inputValueProps.value, format: format, baseFormat: baseFormat, children: _jsx(InternalPopover, { renderTrigger: ({ setTriggerRef, togglePopover, openPopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(TextBox, { ref: textBoxRef, ...inputValueProps, touchDeviceReadOnly: true, suffixSlot: _jsx(IconButton, { size: textBoxProps.textBoxSize === 'small' ? 'small' : 'default', "aria-label": calendarIconButtonProps?.['aria-label'] ?? calendarIconLabel, "data-active": shouldCalendarIconActive, "data-mfui-content": "calendar-icon-button", disabled: disabled, onClick: togglePopover, onBlur: handleTriggerBlur, children: _jsx(Calendar, {}) }), disabled: disabled, ...textBoxProps, wrapperProps: {
                     ...textBoxProps.wrapperProps,
                     ref: mergeRefs(setTriggerRef, triggerRef, textBoxProps.wrapperProps?.ref),
                     onKeyDown: (event) => {
@@ -93,7 +93,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
                     inputValueProps.onBlur(event);
                     // Then call the Popover's smart blur detection
                     handleTriggerBlur(event);
-                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
+                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, initialViewingDate: initialViewingDate, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
 }
 /**
  * Internal Popover component that needs access to BasePickerContext.
@@ -101,7 +101,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
  * which requires being within a BasePickerProvider. Creating it as an internal
  * component ensures proper context access while keeping the logic encapsulated.
  */
-function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, enableViewportConstraint, ...popoverProps }) {
+function InternalPopover({ value, defaultValue, initialViewingDate, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, enableViewportConstraint, ...popoverProps }) {
     // Always call the hook at the top level to ensure consistent hook order
     const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const handlePopoverOpen = useCallback((event) => {
@@ -119,8 +119,8 @@ function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseForm
             !isClickOnClearButton;
         if (isClickOnTextBox || isClickOnWrapper)
             return;
-        // Get the date to focus on (selected date or today)
-        const dateToFocus = dayjs(value ?? defaultValue ?? new Date())
+        // Get the date to focus on: selected value → initialViewingDate → today
+        const dateToFocus = dayjs(value ?? defaultValue ?? initialViewingDate ?? new Date())
             .startOf('day')
             .toDate();
         const formattedDate = dayjs(dateToFocus).format(baseFormat);
@@ -128,7 +128,7 @@ function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseForm
         setViewingValue(dayjs(dateToFocus).startOf('month').startOf('day').toDate());
         // Set the pending focus date to ensure proper focus after month change
         setPendingFocusDate(formattedDate);
-    }, [textBoxRef, triggerRef, value, defaultValue, baseFormat, setViewingValue, setPendingFocusDate]);
+    }, [textBoxRef, triggerRef, value, defaultValue, initialViewingDate, baseFormat, setViewingValue, setPendingFocusDate]);
     return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: enableViewportConstraint ?? false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
                 viewingValue,
                 setViewingValue,

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.types.d.ts

@@ -97,6 +97,17 @@ export type BasePickerProps = {
      * @default 'ja'
      */
     calendarLocale?: 'ja' | 'en';
+    /**
+     * The initial date the calendar view is centered on when the picker is opened without a selected value.
+     * Useful when `minDate` is in the future — without this, the calendar would open showing today
+     * even though all visible dates are disabled.
+     *
+     * When `value` or `defaultValue` is set, this prop is ignored because the calendar always
+     * navigates to the selected date's month.
+     *
+     * @default undefined (falls back to today)
+     */
+    initialViewingDate?: Date;
     /**
      * Custom render function for the popover content. This is required to make BasePicker truly generic.
      *

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/MultipleSelectBox/MultipleSelectBox.js

@@ -295,10 +295,15 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
         tabbableOptionIndex,
     ]);
     // Render infinite scroll error message with retry button
-    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-MultipleSelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-MultipleSelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-MultipleSelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-MultipleSelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
-                        event.stopPropagation();
-                        retryInfiniteScroll();
-                    }, children: infiniteScrollRetryButtonText }) })] })) : null, [
+    const renderInfiniteScrollError = useCallback((as = 'li') => {
+        if (!infiniteScrollError)
+            return null;
+        const Tag = as;
+        return (_jsxs(Tag, { className: cx(classes.infiniteScrollError, 'mfui-MultipleSelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-MultipleSelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-MultipleSelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-MultipleSelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
+                            event.stopPropagation();
+                            retryInfiniteScroll();
+                        }, children: infiniteScrollRetryButtonText }) })] }));
+    }, [
         infiniteScrollError,
         classes.infiniteScrollError,
         classes.infiniteScrollErrorIcon,
@@ -317,26 +322,29 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
             : (selectedCountProps?.render?.(localSelectedValuesSet.size) ??
                 `${String(localSelectedValuesSet.size)}件選択中`) })) : null;
     const applyControlsNode = enableApplyControls ? (_jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })) : null;
-    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
-                ? {
-                    height: `${String(totalSize)}px`,
-                    position: 'relative',
-                }
-                : undefined, children: loading
-                ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
-                : isVirtualized && virtualItems.length > 0
-                    ? // Virtualized rendering with group support
-                        [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
-                    : filteredOptions.length > 0
-                        ? [...renderNonVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
-                        : [
-                            _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                                        ? notFoundMessage
-                                        : options.length > 0
+    const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
+                    ? {
+                        height: `${String(totalSize)}px`,
+                        position: 'relative',
+                    }
+                    : undefined, children: loading
+                    ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
+                    : isVirtualized && virtualItems.length > 0
+                        ? renderVirtualizedItems()
+                        : filteredOptions.length > 0
+                            ? [
+                                ...renderNonVirtualizedItems(),
+                                !isVirtualized && renderInfiniteScrollLoading(),
+                                !isVirtualized && renderInfiniteScrollError(),
+                            ].filter(Boolean)
+                            : [
+                                _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
                                             ? notFoundMessage
-                                            : emptyMessage }) }, "empty"),
-                            renderInfiniteScrollError(),
-                        ].filter(Boolean) }) }));
+                                            : options.length > 0
+                                                ? notFoundMessage
+                                                : emptyMessage }) }, "empty"),
+                                !isVirtualized && renderInfiniteScrollError(),
+                            ].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null] }));
     const createOptionAreaNode = isCreateOptionVisible ? (_jsxs("div", { className: cx(classes.createOptionArea, 'mfui-MultipleSelectBox__createOptionArea'), children: [_jsxs("button", { "data-mfui-content": "create-new-option", type: "button", className: cx(classes.createOptionButton, 'mfui-MultipleSelectBox__createOptionButton'), disabled: isCreating, onClick: handleCreateOption, children: [_jsx(Add, { "aria-hidden": true }), createOptionProps?.renderLabel?.(searchText.trim()) ?? (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "strongBody", children: searchText.trim() }), _jsx(Typography, { variant: "body", children: "\u3092\u8FFD\u52A0" })] }))] }), createError ? (_jsx("div", { className: cx(classes.createOptionErrorMessage, 'mfui-MultipleSelectBox__createOptionErrorMessage'), children: _jsx(HelpMessage, { messageType: "error", children: createOptionProps?.renderErrorMessage?.(searchText.trim()) ??
                         `${searchText.trim()}を追加できませんでした。` }) })) : null] })) : null;
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 

package/dist/src/SelectBox/SelectBox.js

@@ -284,10 +284,15 @@ export const SelectBox = forwardRef((props, ref) => {
                     ? notFoundMessage
                     : emptyMessage }) }, "empty-message")), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
     // Render infinite scroll error message with retry button
-    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-SelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-SelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-SelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-SelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
-                        event.stopPropagation();
-                        retryInfiniteScroll();
-                    }, children: infiniteScrollRetryButtonText }) })] }, "infinite-scroll-error")) : null, [
+    const renderInfiniteScrollError = useCallback((as = 'li') => {
+        if (!infiniteScrollError)
+            return null;
+        const Tag = as;
+        return (_jsxs(Tag, { className: cx(classes.infiniteScrollError, 'mfui-SelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-SelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-SelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-SelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
+                            event.stopPropagation();
+                            retryInfiniteScroll();
+                        }, children: infiniteScrollRetryButtonText }) })] }, "infinite-scroll-error"));
+    }, [
         infiniteScrollError,
         classes.infiniteScrollError,
         classes.infiniteScrollErrorIcon,
@@ -299,19 +304,22 @@ export const SelectBox = forwardRef((props, ref) => {
     ]);
     // Render infinite scroll loading indicator
     const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-SelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) }, "infinite-scroll-loading")) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
-    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
-                ? {
-                    height: `${String(totalSize)}px`,
-                    position: 'relative',
-                }
-                : undefined, children: loading
-                ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
-                : isVirtualized && virtualItems.length > 0
-                    ? // Virtualized rendering with group support
-                        [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
-                    : filteredOptions.length > 0
-                        ? [...renderNonVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
-                        : [renderEmptyMessage(), renderInfiniteScrollError()].filter(Boolean) }) }));
+    const optionsNode = (_jsxs("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: [_jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
+                    ? {
+                        height: `${String(totalSize)}px`,
+                        position: 'relative',
+                    }
+                    : undefined, children: loading
+                    ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
+                    : isVirtualized && virtualItems.length > 0
+                        ? renderVirtualizedItems()
+                        : filteredOptions.length > 0
+                            ? [
+                                ...renderNonVirtualizedItems(),
+                                !isVirtualized && renderInfiniteScrollLoading(),
+                                !isVirtualized && renderInfiniteScrollError(),
+                            ].filter(Boolean)
+                            : [renderEmptyMessage(), !isVirtualized && renderInfiniteScrollError()].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null] }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);

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 {};