@moneyforward/mfui-components 3.29.1 → 3.31.1

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

@@ -1,4 +1,4 @@
-import { type FocusEventHandler, type KeyboardEventHandler, type SyntheticEvent } from 'react';
+import { type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
 import { type ButtonProps } from '../Button';
 import { type DropdownMenuButtonTriggerProps } from './DropdownMenu.types';
 type DropdownMenuButtonTriggerComponentProps = DropdownMenuButtonTriggerProps & {
@@ -25,7 +25,7 @@ type DropdownMenuButtonTriggerComponentProps = DropdownMenuButtonTriggerProps &
     /**
      * Toggles the open state of the dropdown menu.
      */
-    togglePopover: (event?: SyntheticEvent) => void;
+    togglePopover: MouseEventHandler<HTMLElement>;
     /**
      * Keyboard handler for the trigger (ArrowUp / ArrowDown focus behavior already merged in).
      */

package/dist/src/DropdownMenu/DropdownMenuContainer/DropdownMenuContainer.js

@@ -11,14 +11,21 @@ import { dropdownMenuContainerSlotRecipe } from '../../../styled-system/recipes'
 export const DropdownMenuContainer = forwardRef(({ children, className, defaultFocusItem: defaultFocus = 'first', style, onClose }, ref) => {
     const classes = dropdownMenuContainerSlotRecipe();
     const menuContainerRef = useRef(null);
+    const getFocusableItems = useCallback(() => menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])'), []);
     useEffect(() => {
-        const focusableItems = menuContainerRef.current?.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        if (defaultFocus === 'none') {
+            // No item should appear focused (e.g. the menu was opened with the mouse). Focus the
+            // container itself so keyboard interactions (Escape / ArrowDown / ArrowUp) keep working.
+            menuContainerRef.current?.focus({ preventScroll: true });
+            return;
+        }
+        const focusableItems = getFocusableItems();
         if (!focusableItems) {
             return;
         }
         const defaultFocusIndex = defaultFocus === 'first' ? 0 : focusableItems.length - 1;
         focusableItems[defaultFocusIndex]?.focus({ preventScroll: true });
-    }, [defaultFocus]);
+    }, [defaultFocus, getFocusableItems]);
     const handleKeyDown = useCallback((event) => {
         switch (event.key) {
             case 'Escape':
@@ -27,7 +34,25 @@ export const DropdownMenuContainer = forwardRef(({ children, className, defaultF
                 event.preventDefault();
                 onClose();
                 break;
+            case 'ArrowDown':
+            case 'ArrowUp': {
+                // Focused items handle arrow navigation themselves and stop propagation, so this
+                // branch only runs while the container itself is focused (defaultFocusItem 'none'):
+                // ArrowDown moves focus to the first item and ArrowUp to the last one.
+                if (event.target !== event.currentTarget) {
+                    break;
+                }
+                event.stopPropagation();
+                event.preventDefault();
+                const focusableItems = getFocusableItems();
+                if (!focusableItems || focusableItems.length === 0) {
+                    break;
+                }
+                const focusIndex = event.key === 'ArrowDown' ? 0 : focusableItems.length - 1;
+                focusableItems[focusIndex]?.focus();
+                break;
+            }
         }
-    }, [onClose]);
+    }, [onClose, getFocusableItems]);
     return (_jsx("div", { ref: mergeRefs(ref, menuContainerRef), "data-mfui-menu-container": true, role: "menu", className: cx(classes.root, 'mfui-DropdownMenuContainer__root', className), tabIndex: -1, style: style, onKeyDown: handleKeyDown, children: children }));
 });

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

@@ -1,7 +1,7 @@
 /**
  * The default focus position of the menu.
  */
-export type DropdownMenuDefaultFocusItem = 'first' | 'last';
+export type DropdownMenuDefaultFocusItem = 'first' | 'last' | 'none';
 export type DropdownMenuContainerProps = {
     /**
      * The content of the component.
@@ -16,10 +16,13 @@ export type DropdownMenuContainerProps = {
     /**
      * The default focus position of the dropdown menu.
      *
-     * It should be either 'first' or 'last'.
+     * It should be either 'first', 'last' or 'none'.
      *
      * If 'first', the first focusable item will be focused.
      * If 'last', the last focusable item will be focused.
+     * If 'none', no item will be focused; the menu container itself receives focus instead so that
+     * keyboard interactions (Escape / ArrowDown / ArrowUp) keep working. Use this when the menu is
+     * opened with a pointer, where visually focusing an item is not expected.
      *
      * @default 'first'
      */

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

@@ -12,4 +12,4 @@ import { type DropdownMenuItemProps } from './DropdownMenuItem.types';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, disabledMessage, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -1,8 +1,8 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
+import { Info } from '@moneyforward/mfui-icons-react';
 import { cx } from '../../../styled-system/css';
-import { findSiblingElements } from '../../utilities/dom/findSiblingElements';
 import { FocusIndicator } from '../../FocusIndicator';
 import { dropdownMenuItemSlotRecipe } from '../../../styled-system/recipes';
 import { Typography } from '../../Typography';
@@ -20,13 +20,18 @@ import { useDropdownMenuContext } from '../DropdownMenuContext';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }) {
+export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, disabledMessage, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, ...rest }) {
     const classes = dropdownMenuItemSlotRecipe();
     const { closeMenuPopover } = useDropdownMenuContext();
     const id = useId();
     const itemRef = useRef(null);
     const handleKeyDown = useCallback((event) => {
-        const siblingElements = findSiblingElements(event.currentTarget, '[data-mfui-menu-item]:is([data-mfui-focusable=true])');
+        // Search from the menu container (not the immediate parent) so arrow navigation still works
+        // when items are wrapped in another element such as a Tooltip.
+        const container = event.currentTarget.closest('[data-mfui-menu-container]');
+        const siblingElements = container
+            ? [...container.querySelectorAll('[data-mfui-menu-item]:is([data-mfui-focusable=true])')]
+            : [];
         const currentIndex = siblingElements.indexOf(event.currentTarget);
         // If the current element is the last element, move to the first element.
         const nextIndex = siblingElements.length - 1 === currentIndex ? 0 : currentIndex + 1;
@@ -52,7 +57,11 @@ export function DropdownMenuItem({ children, className, href, target, customLink
             return;
         if (onClick) {
             onClick(event);
-            closeMenuPopover?.();
+            // Consumers can keep the menu open after a click by calling `event.preventDefault()`
+            // in their `onClick` handler (e.g. for in-menu actions like copy-to-clipboard).
+            if (!event.defaultPrevented) {
+                closeMenuPopover?.();
+            }
         }
     }, [disabled, onClick, closeMenuPopover]);
     const isButton = useMemo(() => onClick && !href, [onClick, href]);
@@ -79,5 +88,19 @@ export function DropdownMenuItem({ children, className, href, target, customLink
         : disabled
             ? { 'aria-disabled': true, 'data-disabled': '' }
             : {};
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
+    const showMessage = Boolean(disabled && disabledMessage);
+    const labelId = `${id}-label`;
+    const messageId = `${id}-message`;
+    const label = typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children;
+    // With a message, the accessible name must reference only the label span so the message
+    // stays a description; without one, keep the existing self-reference via the item's own id.
+    const resolvedAriaLabelledby = showMessage
+        ? [ariaLabelledby, labelId].filter(Boolean).join(' ')
+        : ariaLabelledby
+            ? `${ariaLabelledby} ${id}`
+            : undefined;
+    const resolvedAriaDescribedby = showMessage
+        ? [ariaDescribedby, messageId].filter(Boolean).join(' ')
+        : ariaDescribedby;
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": resolvedAriaLabelledby, "aria-describedby": resolvedAriaDescribedby, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: showMessage ? (_jsxs("span", { className: cx(classes.content, 'mfui-DropdownMenuItem__content'), children: [_jsx("span", { id: labelId, children: label }), _jsxs("span", { id: messageId, className: cx(classes.disabledMessage, 'mfui-DropdownMenuItem__disabledMessage'), children: [_jsx(Info, { "aria-hidden": true, className: cx(classes.disabledMessageIcon, 'mfui-DropdownMenuItem__disabledMessageIcon') }), _jsx(Typography, { variant: "helpMessage", children: disabledMessage })] })] })) : (label) }) }));
 }

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

@@ -77,6 +77,12 @@ export type DropdownMenuItemProps = {
      * The class name to apply to the component.
      */
     className?: string;
+    /**
+     * An explanatory message displayed inline below the item label when the item is disabled.
+     * Rendered with an info icon. Ignored unless `disabled` is true.
+     * Exposed to screen readers as the item's accessible description (aria-describedby).
+     */
+    disabledMessage?: React.ReactNode;
     /**
      * The aria-labelledby attribute for accessibility.
      *

package/dist/src/EmbeddedSidePane/EmbeddedSidePane.d.ts

@@ -7,7 +7,7 @@
  */
 export declare const EmbeddedSidePane: import("react").ForwardRefExoticComponent<{
     container?: HTMLElement | null;
-} & Omit<import("..").SidePaneProps, "targetDOMNode" | "enableNonModal"> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<import("..").SidePaneProps, "enableNonModal" | "targetDOMNode"> & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * The `EmbeddedSidePane.Container` component is used to define the container for the `EmbeddedSidePane`.
      * It should be a parent element that has `position: relative` for proper positioning and `overflow: hidden/clip` for clipping.

package/dist/src/FileBox/FileBox.d.ts

@@ -6,12 +6,12 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
  */
 export declare const FileBox: import("react").ForwardRefExoticComponent<{
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
     disabled?: boolean;
-    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
-    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
+    multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
+    accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
     buttonLabel?: string;
     placeholder?: string;
     multipleFilesSuffixLabel?: string;
-    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
+    clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
 } & Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/FileBox/FileBox.js

@@ -1,5 +1,5 @@
 'use client';
-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 { forwardRef, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { fileBoxSlotRecipe } from '../../styled-system/recipes';

package/dist/src/FileDropZone/FileDropZone.d.ts

@@ -28,11 +28,11 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
  */
 export declare const FileDropZone: import("react").ForwardRefExoticComponent<{
-    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant["invalid"];
+    invalid?: import("../../styled-system/recipes").TextBoxSlotRecipeVariant['invalid'];
     disabled?: boolean;
-    multiple?: import("react").ComponentPropsWithoutRef<"input">["multiple"];
-    accept?: import("react").ComponentPropsWithoutRef<"input">["accept"];
-    clearButtonProps?: Pick<import("..").IconButtonProps, "aria-label">;
+    multiple?: import("react").ComponentPropsWithoutRef<'input'>['multiple'];
+    accept?: import("react").ComponentPropsWithoutRef<'input'>['accept'];
+    clearButtonProps?: Pick<import("..").IconButtonProps, 'aria-label'>;
     errorMessage?: string;
     helperMessage?: string;
     illustrationUrl?: string;

package/dist/src/FileDropZone/utils/fileHelpers.d.ts

@@ -81,7 +81,7 @@ export declare function createValidationResult(isValid: boolean, error?: string)
  * @property ARCHIVES - The archive file types
  */
 export declare const FILE_TYPES: {
-    readonly IMAGES: readonly ["image/jpeg", "image/png", "image/gif", "image/webp", "image/svg+xml"];
-    readonly DOCUMENTS: readonly ["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "text/plain"];
-    readonly ARCHIVES: readonly ["application/zip", "application/x-rar-compressed", "application/x-tar"];
+    readonly IMAGES: readonly ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
+    readonly DOCUMENTS: readonly ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/plain'];
+    readonly ARCHIVES: readonly ['application/zip', 'application/x-rar-compressed', 'application/x-tar'];
 };

package/dist/src/FilterTrigger/FilterTrigger.d.ts

@@ -5,11 +5,11 @@
 export declare const FilterTrigger: import("react").ForwardRefExoticComponent<{
     label: string;
     value?: string;
-    inputProps?: Omit<import("react").ComponentPropsWithoutRef<"input">, "type">;
+    inputProps?: Omit<import("react").ComponentPropsWithoutRef<'input'>, 'type'>;
     className?: string;
     enableClearButton?: boolean;
     clearButtonProps?: {
-        "aria-label"?: string;
+        'aria-label'?: string;
         onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     };
 } & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/src/Heading/Heading.d.ts

@@ -11,6 +11,6 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
  */
 export declare const Heading: import("react").ForwardRefExoticComponent<{
-    variant: "pageHeading1" | "pageHeading2" | "sectionHeading1" | "sectionHeading2" | "contentHeading";
-    tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    variant: 'pageHeading1' | 'pageHeading2' | 'sectionHeading1' | 'sectionHeading2' | 'contentHeading';
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/src/HelpMessage/HelpMessage.d.ts

@@ -11,8 +11,8 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
 export declare const HelpMessage: import("react").ForwardRefExoticComponent<{
-    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant["messageType"];
+    messageType?: import("../../styled-system/recipes").HelpMessageRecipeVariant['messageType'];
     showIcon?: boolean;
-    messageAlign?: "left" | "center";
-    children?: import("..").TypographyProps["children"];
+    messageAlign?: 'left' | 'center';
+    children?: import("..").TypographyProps['children'];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/IconButton/IconButton.d.ts

@@ -1,16 +1,16 @@
 export declare const InternalIconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
-    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
-} & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel" | "target" | "type"> & {
+    size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['size'];
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
-    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["outlined"];
+    outlined?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant['outlined'];
     children: React.ReactNode;
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel" | "target" | "type"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/src/KeyValue/KeyValue.d.ts

@@ -3,8 +3,8 @@
  * Both the key and value areas accept any elements and are rendered with predefined layout styles.
  */
 export declare const KeyValue: import("react").ForwardRefExoticComponent<{
-    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant["size"];
+    size?: import("../../styled-system/recipes").KeyValueSlotRecipeVariant['size'];
     keyItem: React.ReactNode;
     valueItem: React.ReactNode;
-    gridTemplateColumns?: import("react").CSSProperties["gridTemplateColumns"];
+    gridTemplateColumns?: import("react").CSSProperties['gridTemplateColumns'];
 } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -3,4 +3,4 @@ import { type MainNavigationProps } from './MainNavigation.types';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -13,7 +13,7 @@ import { Popover } from '../Popover';
  * The component for the main navigation on the normal viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, }) {
+export function BaseMainNavigation({ className, featureShortcut, navigationItems, enableCollapsible = false, width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
     const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
     const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
     const isControlled = controlledIsCollapsed !== undefined;
@@ -28,7 +28,9 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
     };
     const classes = baseMainNavigationSlotRecipe({ width, disableResponsive });
     const InternalLinkTag = customLinkComponent ?? 'a';
-    const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
+    const toggleButtonLabel = isCollapsed
+        ? (expandButtonProps?.label ?? 'ナビゲーションを拡げる')
+        : (collapseButtonProps?.label ?? 'ナビゲーションを折りたたむ');
     return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => {
                             const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                             const isGroupMenu = 'isGroupMenu' in navigation && navigation.isGroupMenu;

package/dist/src/MainNavigation/MainNavigation.js

@@ -1,4 +1,4 @@
-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 { forwardRef } from 'react';
 import { BaseMainNavigation } from './BaseMainNavigation';
 import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
@@ -9,7 +9,7 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  * When the viewport is narrow, the navigation will be displayed as a drawer.
  * When the viewport is not narrow, the navigation will be displayed as a sidebar.
  */
-export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, }, ref) => {
+export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {
         className,
         featureShortcut,
@@ -17,5 +17,5 @@ export const MainNavigation = forwardRef(({ className, featureShortcut, navigati
         width,
         customLinkComponent,
     };
-    return (_jsxs(_Fragment, { children: [_jsx(BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange }), !disableResponsive && _jsx(NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(BaseMainNavigation, { ...commonProps, enableCollapsible: enableCollapsible, disableResponsive: disableResponsive, isCollapsed: isCollapsed, onCollapsedChange: onCollapsedChange, collapseButtonProps: collapseButtonProps, expandButtonProps: expandButtonProps }), !disableResponsive && _jsx(NarrowViewportMainNavigation, { ...commonProps, ref: ref })] }));
 });

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

@@ -230,6 +230,24 @@ export type MainNavigationProps = {
      * This prop is only effective when `enableCollapsible` is `true`.
      */
     isCollapsed?: boolean;
+    /**
+     * The properties for the toggle button when the navigation is expanded (clicking will collapse).
+     * This prop is only effective when `enableCollapsible` is `true`.
+     *
+     * @property label - Accessible name for the toggle button. It is used for both the tooltip content and the `aria-label` of the toggle button. default is 'ナビゲーションを折りたたむ'.
+     */
+    collapseButtonProps?: {
+        label?: string;
+    };
+    /**
+     * The properties for the toggle button when the navigation is collapsed (clicking will expand).
+     * This prop is only effective when `enableCollapsible` is `true`.
+     *
+     * @property label - Accessible name for the toggle button. It is used for both the tooltip content and the `aria-label` of the toggle button. default is 'ナビゲーションを拡げる'.
+     */
+    expandButtonProps?: {
+        label?: string;
+    };
     /**
      * Callback function called when the collapsed state changes.
      * This is triggered when the toggle button is clicked.

package/dist/src/MultipleSelectBox/MultipleSelectBox.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, useId, useMemo, useRef } from 'react';
 import { Add, CheckboxChecked, CheckboxUnchecked, Error } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';

package/dist/src/MultipleSelectBox/hooks/useApplyControls.d.ts

@@ -22,7 +22,7 @@ type UseApplyControlsProps<T extends AllowedValueTypes = string, AdditionalProps
  */
 export declare function useApplyControls<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, onValuesChange, closeOptionPanel }: UseApplyControlsProps<T, AdditionalProps>): {
     temporaryValues: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
-    updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
     openWithSelectedOptions: (selectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
     initializeTemporaryValues: () => void;
     handleCancelButtonClick: () => void;

package/dist/src/MultipleSelectBox/hooks/useSelectedValues.d.ts

@@ -28,7 +28,7 @@ type UseSelectedValuesProps<T extends AllowedValueTypes = string, AdditionalProp
 export declare function useSelectedValues<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, defaultValue, value, onChange }: UseSelectedValuesProps<T, AdditionalProps>): {
     localSelectedValuesSet: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
     localSelectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
-    updateSelectedValues: (newValues: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    updateSelectedValues: (newValues: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
     updateSelectedOptions: (newOptions: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
 };
 export {};

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

@@ -1,15 +1,19 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef, useState, useEffect } from 'react';
+import { forwardRef, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 import { TextBox } from '../TextBox';
 /**
- * Convert full-width digits, minus sign, and decimal point to half-width.
+ * Convert full-width digits, minus signs, and decimal points to half-width.
+ * Kana-mode IMEs can emit prolonged sound marks for the minus key.
  *
  * @param value - The string to convert.
  */
-const toHalfWidth = (value) => value.replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0));
+const toHalfWidth = (value) => value
+    .replaceAll(/[\uFF10-\uFF19\uFF0D\uFF0E]/g, (char) => String.fromCodePoint((char.codePointAt(0) ?? 0) - 0xfe_e0))
+    .replaceAll(/[\u3002\uFF61]/g, '.')
+    .replaceAll(/[\u2212\u30FC\uFF70\u2015]/g, '-');
 /**
  * Sanitize input: convert full-width characters, then keep only valid numeric characters.
  * Allows: digits 0-9, a single leading minus, a single decimal point after a digit.
@@ -69,6 +73,35 @@ const formatWithCommas = (raw) => {
  * @param display - The formatted display string.
  */
 const stripFormatting = (display) => display.replaceAll(',', '');
+/**
+ * Map a display cursor position to the equivalent index in the raw numeric string.
+ *
+ * @param display - The formatted display string.
+ * @param displayCursor - The cursor position in the display string.
+ */
+const mapDisplayCursorToRaw = (display, displayCursor) => {
+    const commasBefore = (display.slice(0, displayCursor).match(/,/g) ?? []).length;
+    return displayCursor - commasBefore;
+};
+/**
+ * Map a raw numeric cursor position to the equivalent index in the formatted display string.
+ *
+ * @param formatted - The formatted display string.
+ * @param rawCursor - The cursor position in the raw numeric string.
+ */
+const mapRawCursorToDisplay = (formatted, rawCursor) => {
+    let rawCount = 0;
+    let index = 0;
+    for (const char of formatted) {
+        if (rawCount >= rawCursor) {
+            return index;
+        }
+        if (char !== ',')
+            rawCount += 1;
+        index += 1;
+    }
+    return formatted.length;
+};
 /**
  * NumberBox is a numeric input component that wraps TextBox.
  * It provides real-time comma formatting, full-width digit conversion,
@@ -79,6 +112,7 @@ const stripFormatting = (display) => display.replaceAll(',', '');
 export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, ...rest }, ref) => {
     const inputRef = useRef(null);
     const pendingCursorRef = useRef(null);
+    const [cursorRestoreToken, requestCursorRestore] = useReducer((count) => count + 1, 0);
     const [displayValue, setDisplayValue] = useState(() => formatWithCommas(sanitizeInput(String(value ?? defaultValue ?? ''))));
     // Sync with controlled value
     useEffect(() => {
@@ -89,16 +123,22 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     // Restore cursor position after display value update
     useLayoutEffect(() => {
         if (pendingCursorRef.current !== null && inputRef.current) {
-            inputRef.current.setSelectionRange(pendingCursorRef.current, pendingCursorRef.current);
+            const input = inputRef.current;
+            const cursor = pendingCursorRef.current;
             pendingCursorRef.current = null;
+            if (input.value !== displayValue) {
+                input.value = displayValue;
+            }
+            input.setSelectionRange(cursor, cursor);
         }
-    }, [displayValue]);
+    }, [displayValue, cursorRestoreToken]);
     const handleChange = useCallback((event) => {
+        const inputDisplay = event.target.value;
         const cursorPos = event.target.selectionStart ?? 0;
-        const rawInput = stripFormatting(toHalfWidth(event.target.value));
-        // Calculate cursor position accounting for comma changes
-        const commasBefore = (displayValue.slice(0, cursorPos).match(/,/g) ?? []).length;
-        let rawCursor = cursorPos - commasBefore;
+        const prevSanitized = stripFormatting(displayValue);
+        const rawInput = stripFormatting(toHalfWidth(inputDisplay));
+        // Use the current input value so comma positions match the cursor.
+        let rawCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
         // When two dots appear, the user is moving the decimal point.
         // Keep the newly typed dot (at rawCursor - 1) and remove the old one.
         let processedRawInput = rawInput;
@@ -114,22 +154,29 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
                     rawCursor -= 1;
             }
         }
-        const sanitized = sanitizeInput(processedRawInput);
-        const formatted = formatWithCommas(sanitized);
-        let newCursor = formatted.length;
-        let rawCount = 0;
-        let index = 0;
-        for (const char of formatted) {
-            if (rawCount >= rawCursor) {
-                newCursor = index;
-                break;
+        let sanitized = sanitizeInput(processedRawInput);
+        // Backspace right after a comma deletes the digit before the comma.
+        const isBackspaceOnComma = sanitized === prevSanitized && cursorPos < displayValue.length && displayValue[cursorPos] === ',';
+        if (isBackspaceOnComma) {
+            const rawPos = mapDisplayCursorToRaw(displayValue, cursorPos);
+            if (rawPos > 0) {
+                sanitized = prevSanitized.slice(0, rawPos - 1) + prevSanitized.slice(rawPos);
+                rawCursor = rawPos - 1;
             }
-            if (char !== ',')
-                rawCount += 1;
-            index += 1;
+        }
+        const formatted = formatWithCommas(sanitized);
+        let newCursor = mapRawCursorToDisplay(formatted, rawCursor);
+        // Rejected characters keep the cursor before the ignored input.
+        const rejectedCharCount = rawInput.length - sanitized.length;
+        if (sanitized === prevSanitized && !isBackspaceOnComma && rejectedCharCount > 0) {
+            const rawBeforeCursor = mapDisplayCursorToRaw(inputDisplay, cursorPos);
+            newCursor = mapRawCursorToDisplay(formatted, rawBeforeCursor - rejectedCharCount);
         }
         pendingCursorRef.current = newCursor;
         setDisplayValue(formatted);
+        if (formatted === displayValue) {
+            requestCursorRestore();
+        }
         onChange?.(sanitized);
     }, [displayValue, onChange]);
     return (_jsx(TextBox, { ref: mergeRefs(ref, inputRef), ...rest, className: cx('mfui-NumberBox__root', rest.className), enableClearButton: Boolean(enableClearButton) && displayValue !== '', style: { textAlign, ...style }, value: displayValue, onChange: handleChange }));

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