@moneyforward/mfui-components 4.3.1 → 4.6.0

package/dist/src/DateTimeSelection/shared/utilities/japaneseCalendar.js

@@ -141,8 +141,8 @@ export function warekiToDate(wareki) {
         // Traditional format: groups 3,4 (month, day)
         // Western format: groups 5,6 (month, day)
         // Month-only format: group 7 (month), day defaults to 1
-        const month = Number(matchedWareki[3] || matchedWareki[5] || matchedWareki[7]);
-        const day = matchedWareki[7] !== undefined ? 1 : Number(matchedWareki[4] || matchedWareki[6]);
+        const month = Number(matchedWareki[3] ?? matchedWareki[5] ?? matchedWareki[7]);
+        const day = matchedWareki[7] !== undefined ? 1 : Number(matchedWareki[4] ?? matchedWareki[6]);
         // Validation: ensure era year is reasonable (1-200 years per era)
         if (eraYear < 1 || eraYear > 200) {
             return {

package/dist/src/Dialog/Dialog.d.ts

@@ -19,6 +19,6 @@ export declare const Dialog: import("react").ForwardRefExoticComponent<{
     enableAutoUnmount?: boolean;
     disableBackdropClose?: boolean;
     customFocusElement?: import("react").RefObject<HTMLElement | null> | HTMLElement | null;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open"> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onClose" | "open" | "title"> & {
     ref?: (import("react").RefCallback<HTMLDivElement> | import("react").RefObject<HTMLDivElement | null> | null) | undefined;
 } & import("react").Attributes>;

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

@@ -97,4 +97,4 @@ export type DialogProps = {
      * ```
      */
     customFocusElement?: RefObject<HTMLElement | null> | HTMLElement | null;
-} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'open' | 'onClose' | 'title'>;

package/dist/src/FileDropZone/FileDropZone.js

@@ -231,7 +231,7 @@ fileSelectButtonLabel = 'ファイルを選択', instructionText, fileCountLabel
     return (_jsxs("div", { className: cx(classes.root, 'mfui-FileDropZone__root'), children: [_jsx("input", { ref: mergeRefs(ref, inputRef), id: id, type: "file", disabled: disabled, multiple: multiple, accept: accept, className: cx(classes.input, 'mfui-FileDropZone__input'), tabIndex: -1, "aria-hidden": "true", onChange: handleChange, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDrop: handleDrop, ...props }, key), _jsxs("div", { "data-mfui-content": "file-drop-zone-container", className: cx(classes.container, 'mfui-FileDropZone__container', className), style: style, onClick: handleContainerClick, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [illustrationUrl ? (_jsx("div", { "data-mfui-content": "file-drop-zone-illustration", className: cx(classes.illustration, 'mfui-FileDropZone__illustration'), children: _jsx("img", { src: illustrationUrl, alt: "illustration" }) })) : null, _jsxs("div", { "data-mfui-content": "file-drop-zone-main-container", className: cx(classes.mainContainer, 'mfui-FileDropZone__mainContainer'), children: [_jsx("div", { "data-mfui-content": "file-drop-zone-instruction", className: cx(classes.instruction, 'mfui-FileDropZone__instruction'), style: fileBoxMaxWidthStyle, children: _jsx("p", { className: cx(classes.phrase, 'mfui-FileDropZone__phrase'), children: normalizedInstructionText }) }), _jsxs("div", { "data-mfui-content": "file-drop-zone-button-container", className: cx(classes.buttonContainer, 'mfui-FileDropZone__buttonContainer'), style: fileBoxMaxWidthStyle, children: [_jsx(Button, { ref: buttonRef, className: cx(classes.button, 'mfui-FileDropZone__button'), disabled: disabled, "aria-describedby": errorMessages.length > 0 || helperMessage || (displayValues && displayValues.length > 0)
                                             ? `${id ? `${id}-` : ''}file-drop-zone-messages`
                                             : undefined, onClick: handleFileInputTrigger, children: fileSelectButtonLabel }), displayValues !== undefined && displayValues.length > 0 && (_jsxs("div", { "data-mfui-content": "file-drop-zone-file-info", className: cx(classes.fileInfo, 'mfui-FileDropZone__fileInfo'), style: { maxWidth: `${(fileInfoWidth || 147).toString()}px` }, children: [renderDisplayValues, _jsx(ClearButton, { ...clearButtonProps, "aria-label": clearButtonProps?.['aria-label'] ?? 'ファイルをクリアする', className: cx(classes.clearButton, 'mfui-FileDropZone__clearButton'), disabled: disabled, onClick: handleClear })] }))] }), _jsxs("div", { id: id ? `${id}-file-drop-zone-messages` : 'file-drop-zone-messages', "data-mfui-content": "file-drop-zone-help-message", className: cx(classes.helpMessage, 'mfui-FileDropZone__helpMessage'), children: [errorMessages.length > 0 ? (_jsx("div", { role: "alert", "data-mfui-content": "file-drop-zone-error-messages", className: cx(classes.errorMessages, 'mfui-FileDropZone__errorMessages'), children: errorMessages.map((message, index) => (_jsx(HelpMessage, { role: undefined, messageType: "error", messageAlign: "center", children: message }, index))) })) : null, helperMessage ? _jsx(HelpMessage, { messageAlign: "center", children: helperMessage }) : null, displayValues && displayValues.length > 0 ? (_jsx("div", { className: "sr-only", children: displayValues.length === 1
-                                            ? getScreenReaderText('single', displayValues[0] || '')
+                                            ? getScreenReaderText('single', displayValues[0] ?? '')
                                             : getScreenReaderText('multiple', displayValues.length) })) : null] })] }), extraElement ? (_jsx("div", { "data-mfui-content": "file-drop-zone-extra", className: cx(classes.extra, 'mfui-FileDropZone__extra'), children: extraElement })) : null] })] }));
 });
 FileDropZone.displayName = 'FileDropZone';

package/dist/src/FileDropZone/utils/fileHelpers.js

@@ -23,7 +23,7 @@ export function formatFileSize(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     const unitIndex = Math.min(i, units.length - 1);
     const size = bytes / k ** unitIndex;
-    return `${size.toFixed(1)} ${units[unitIndex] || 'B'}`;
+    return `${size.toFixed(1)} ${units[unitIndex] ?? 'B'}`;
 }
 /**
  * Get file extension from filename

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, nestedNavigationDisplay, width, customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }: MainNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseMainNavigation({ className, featureShortcut, navigationItems, navLandmarkLabel, enableCollapsible, nestedNavigationDisplay, 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, nestedNavigationDisplay = 'accordion', width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
+export function BaseMainNavigation({ className, featureShortcut, navigationItems, navLandmarkLabel, enableCollapsible = false, nestedNavigationDisplay = 'accordion', width = 'normal', customLinkComponent, disableResponsive, isCollapsed: controlledIsCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }) {
     const [localIsCollapsed, setLocalIsCollapsed] = useState(controlledIsCollapsed ?? false);
     const [openPopoverIndex, setOpenPopoverIndex] = useState(null);
     const isControlled = controlledIsCollapsed !== undefined;
@@ -31,7 +31,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
     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) => {
+    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, "aria-label": navLandmarkLabel, 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;
                             if (isGroupLabel || isGroupMenu) {
@@ -70,7 +70,7 @@ function NestedNavigationItemRenderer({ navigation, originalIndex, navId, classe
     const hasCurrentChildren = navigation.children.some((child) => child.isCurrent);
     return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": popoverPortalTargetId, children: isCollapsed || nestedNavigationDisplay === 'popover' ? (_jsx(PopoverNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, isCollapsed: isCollapsed, hasCurrentChildren: hasCurrentChildren, popoverPortalTargetId: popoverPortalTargetId, isOpen: openPopoverIndex === originalIndex, onOpenChange: (isOpen) => {
                 setOpenPopoverIndex(isOpen ? originalIndex : null);
-            } })) : (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) || hasCurrentChildren, className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) }));
+            } })) : (_jsxs("details", { open: !!('isOpenByDefault' in navigation && navigation.isOpenByDefault) || hasCurrentChildren, className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) }));
 }
 /**
  * The component for displaying nested navigation with a popover.

package/dist/src/MainNavigation/MainNavigation.js

@@ -12,11 +12,12 @@ import { NarrowViewportMainNavigation } from './NarrowViewportMainNavigation';
  * `MainNavigation` is intended to be paired with `GlobalHeader`. If you need a self-contained
  * layout that already includes both header and navigation features, use `Sidebar` instead.
  */
-export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
+export const MainNavigation = forwardRef(({ className, featureShortcut, navigationItems, navLandmarkLabel = 'メイン', disableResponsive = false, width = 'normal', customLinkComponent, enableCollapsible, nestedNavigationDisplay, isCollapsed, onCollapsedChange, collapseButtonProps, expandButtonProps, }, ref) => {
     const commonProps = {
         className,
         featureShortcut,
         navigationItems,
+        navLandmarkLabel,
         width,
         customLinkComponent,
     };

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

@@ -186,6 +186,15 @@ export type MainNavigationProps = {
      * The navigation items.
      */
     navigationItems: NavigationItem[];
+    /**
+     * The accessible name for the navigation landmark, applied as `aria-label` to both the sidebar `<nav>`
+     * and the narrow viewport drawer `<nav>`.
+     *
+     * Avoid including the role name (e.g. 'ナビゲーション'); assistive technology already announces it.
+     *
+     * @default 'メイン'
+     */
+    navLandmarkLabel?: string;
     /**
      * Whether the navigation is collapsible.
      *

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -13,7 +13,7 @@ import { Portal } from '../Portal';
  * The component for the main navigation on the narrow viewport.
  * This component must only be used in MainNavigation.tsx, do not export it.
  */
-export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, width = 'normal', customLinkComponent }, ref) => {
+export const NarrowViewportMainNavigation = forwardRef(({ className, featureShortcut, navigationItems, navLandmarkLabel, width = 'normal', customLinkComponent }, ref) => {
     const classes = narrowViewportMainNavigationSlotRecipe({ width });
     const InternalLinkTag = customLinkComponent ?? 'a';
     const navId = useId();
@@ -48,12 +48,12 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { "aria-label": navLandmarkLabel, className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => {
                                         const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
                                         if (isGroupLabel) {
                                             return null;
                                         }
-                                        return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
+                                        return (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: !!('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
                                                     hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { "aria-hidden": "true", className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), role: "img", "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index));
                                     }) }), navigationItems.map((navigation, index) => {
                                     const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -339,29 +339,38 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                 `${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 resolvedNotFoundMessage = typeof notFoundMessage === 'function' ? notFoundMessage(searchText.trim()) : notFoundMessage;
+    // Early returns rather than a four-level ternary: the branches are mutually exclusive
+    // and each returns a different shape (skeletons, virtualized rows, options, or the
+    // empty message).
+    const renderListContent = () => {
+        if (loading) {
+            return Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)));
+        }
+        if (isVirtualized && virtualItems.length > 0) {
+            return renderVirtualizedItems();
+        }
+        if (filteredOptions.length > 0) {
+            return [
+                ...renderNonVirtualizedItems(),
+                !isVirtualized && renderInfiniteScrollLoading(),
+                !isVirtualized && renderInfiniteScrollError(),
+            ].filter(Boolean);
+        }
+        return [
+            _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && resolvedNotFoundMessage
+                        ? resolvedNotFoundMessage
+                        : options.length > 0
+                            ? resolvedNotFoundMessage
+                            : emptyMessage }) }, "empty"),
+            !isVirtualized && renderInfiniteScrollError(),
+        ].filter(Boolean);
+    };
     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 && resolvedNotFoundMessage
-                                            ? resolvedNotFoundMessage
-                                            : options.length > 0
-                                                ? resolvedNotFoundMessage
-                                                : emptyMessage }) }, "empty"),
-                                !isVirtualized && renderInfiniteScrollError(),
-                            ].filter(Boolean) }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
+                    : undefined, children: renderListContent() }), isVirtualized ? renderInfiniteScrollLoading() : null, isVirtualized ? renderInfiniteScrollError('div') : null, _jsx(OptionGroupLabelDescriptions, { groups: rendersHiddenGroupLabels ? optionGroupLabels : [] })] }));
     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/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -48,6 +48,6 @@ placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disable
         .map((option) => option.value)
         .filter((v) => v != null)
         .map(String);
-    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": isOptionPanelOpen ? listBoxId : undefined, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required || undefined, "data-mfui-caution": caution && !invalid ? true : undefined, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: mergeRefs(ref, triggerRef), type: "button", role: "combobox", "aria-controls": isOptionPanelOpen ? listBoxId : undefined, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required ? true : undefined, "data-mfui-caution": caution && !invalid ? true : undefined, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { "aria-hidden": "true", className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
 }
 export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/src/MultipleSelectBox/hooks/useCreateOption.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Custom hook to manage the "Create New Option" feature for MultipleSelectBox.
@@ -20,10 +20,14 @@ export const useCreateOption = ({ enableCreateOption, enableSearchOptions, searc
         const exactMatchExists = filteredOptions.some((option) => isSelectableOption(option) && option.label === trimmedSearchText);
         return !exactMatchExists;
     }, [enableCreateOption, enableSearchOptions, trimmedSearchText, filteredOptions]);
-    // Clear error state when search text changes
-    useEffect(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to a changed
+    // prop) rather than in an effect. Clears the error banner as soon as the search text
+    // changes, matching the comment above the effect this replaces.
+    const [prevSearchText, setPrevSearchText] = useState(searchText);
+    if (searchText !== prevSearchText) {
+        setPrevSearchText(searchText);
         setCreateError(false);
-    }, [searchText]);
+    }
     const doCreate = useCallback(async () => {
         try {
             await onCreateOption?.(trimmedSearchText);

package/dist/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.js

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { getDeepActiveElement } from '../utils/getDeepActiveElement';
+import { getDeepActiveElement } from '../../utilities/dom/getDeepActiveElement';
 import { isSelectableOption } from '../utils/isSelectableOption';
 /**
  * Control the focus when the option panel is opened.

package/dist/src/MultipleSelectBox/hooks/useOptionKeyboardNavigation.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback } from 'react';
 import { findSiblingElements } from '../../utilities/dom/findSiblingElements';
 import { isSelectableOption, isOptionDisabled } from '../utils/isSelectableOption';
 /**
@@ -27,10 +27,15 @@ export function useOptionKeyboardNavigation({ filteredOptions, selectedValues, o
     }, [filteredOptions, selectedValues]);
     // State to track which option should be tabbable
     const [tabbableOptionIndex, setTabbableOptionIndex] = useState(getDefaultTabbableIndex());
-    // Update tabbable index when filtered options or selected values change
-    useEffect(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to changed
+    // props) rather than in an effect, so the UI never flashes the stale index for one frame.
+    const [prevFilteredOptions, setPrevFilteredOptions] = useState(filteredOptions);
+    const [prevSelectedValues, setPrevSelectedValues] = useState(selectedValues);
+    if (filteredOptions !== prevFilteredOptions || selectedValues !== prevSelectedValues) {
+        setPrevFilteredOptions(filteredOptions);
+        setPrevSelectedValues(selectedValues);
         setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
+    }
     // Update tabbable index when selected values change
     const resetTabbableIndex = useCallback(() => {
         setTabbableOptionIndex(getDefaultTabbableIndex());

package/dist/src/MultipleSelectBox/hooks/useSelectedValues.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 /**
  * Helper function to convert defaultValue/value to options array and values set
  *
@@ -34,66 +34,32 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
     // Store selected options with their full data (including labels)
     const [selectedOptionsMap, setSelectedOptionsMap] = useState(() => {
         // For initialization, use value if provided, otherwise use defaultValue
-        const initialValue = value !== undefined ? value : defaultValue;
+        const initialValue = value ?? defaultValue;
         const { optionsMap } = initializeSelectedOptions(initialValue);
         return optionsMap;
     });
     // Store selected values as a Set for fast lookup
     const [localSelectedValuesSet, setLocalSelectedValuesSet] = useState(() => {
         // For initialization, use value if provided, otherwise use defaultValue
-        const initialValue = value !== undefined ? value : defaultValue;
+        const initialValue = value ?? defaultValue;
         const { valuesSet } = initializeSelectedOptions(initialValue);
         return valuesSet;
     });
     // Derive local selected options array from the map
     const localSelectedOptions = useMemo(() => [...selectedOptionsMap.values()], [selectedOptionsMap]);
-    // Update local state when controlled value changes
-    useEffect(() => {
-        if (!isControlled) {
-            return;
-        }
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value);
-        // Preserve existing options from the map if they're not in the new options array
-        setSelectedOptionsMap((previousMap) => {
-            const newOptionsMap = new Map(optionsMap);
-            for (const selectedValue of valuesSet) {
-                if (!newOptionsMap.has(selectedValue) && previousMap.has(selectedValue)) {
-                    // Preserve the option from the existing map
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    newOptionsMap.set(selectedValue, previousMap.get(selectedValue));
-                }
-            }
-            return newOptionsMap;
-        });
-        setLocalSelectedValuesSet(valuesSet);
-    }, [value, options, isControlled]);
-    // Sync state for display-only mode (value provided but no onChange)
-    // This handles scenarios like disabled/display-only components where
-    // the parent provides values but doesn't expect interaction
-    useEffect(() => {
-        // Skip if this is controlled (already handled above) or uncontrolled (no value)
-        if (isControlled || value === undefined) {
-            return;
+    // Adjusted during render (React's documented pattern for resyncing state to a changed
+    // prop) rather than in an effect, so the UI never flashes the stale value for one
+    // frame. Covers both controlled (value + onChange) and display-only (value, no
+    // onChange) modes; uncontrolled mode (value === undefined) is left untouched.
+    const [prevValue, setPrevValue] = useState(value);
+    if (value !== prevValue) {
+        setPrevValue(value);
+        if (value !== undefined) {
+            const { optionsMap, valuesSet } = initializeSelectedOptions(value);
+            setSelectedOptionsMap(optionsMap);
+            setLocalSelectedValuesSet(valuesSet);
         }
-        // This is display-only mode: value is provided but no onChange
-        // Treat it like controlled for state sync purposes
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value);
-        // Preserve existing options from the map if they're not in the new options array
-        setSelectedOptionsMap((previousMap) => {
-            const newOptionsMap = new Map(optionsMap);
-            for (const selectedValue of valuesSet) {
-                if (!newOptionsMap.has(selectedValue) && previousMap.has(selectedValue)) {
-                    // Preserve the option from the existing map
-                    const existingOption = previousMap.get(selectedValue);
-                    if (existingOption) {
-                        newOptionsMap.set(selectedValue, existingOption);
-                    }
-                }
-            }
-            return newOptionsMap;
-        });
-        setLocalSelectedValuesSet(valuesSet);
-    }, [value, options, isControlled]);
+    }
     // Helper function to update the selected values
     const updateSelectedValues = (newValues) => {
         const newValuesSet = new Set(newValues);
@@ -115,7 +81,7 @@ export function useSelectedValues({ options, defaultValue, value, onChange }) {
         }
         // Controlled component: Don't update local state directly
         // Let the parent component control the state via value prop
-        // The useEffect will sync local state when value prop changes
+        // The render-time adjustment above will sync local state when value prop changes
         if (isControlled) {
             const selectedOptions = [...newOptionsMap.values()];
             onChange(selectedOptions);

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.d.ts

@@ -6,5 +6,8 @@ import { type NavigationListItemProps } from './NavigationListItem.types';
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export declare const NavigationListItem: import("react").ForwardRefExoticComponent<NavigationListItemProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.js

@@ -16,6 +16,9 @@ const ARIA_DISABLED_PROPS = { 'aria-disabled': true, 'data-mfui-disabled': '' };
  * If the href prop is provided, the item will be rendered as an anchor element.
  * If the onClick prop is provided (without href), it will be rendered as a button element.
  * Otherwise, it will be rendered as a div element and not interactive.
+ *
+ * The trailing navigation indicator is displayed whenever the item can be activated,
+ * that is when either the href or the onClick prop is provided.
  */
 export const NavigationListItem = forwardRef(({ title, icon, description, leadingContent, href, target, customLinkComponent, onClick, disabled, className, ...rest }, ref) => {
     const classes = navigationListItemSlotRecipe();
@@ -26,7 +29,8 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return 'button';
         return 'div';
     }, [href, customLinkComponent, onClick]);
-    const isInteractive = (href !== undefined || onClick !== undefined) && !disabled;
+    const isActivatable = href !== undefined || onClick !== undefined;
+    const isInteractive = isActivatable && !disabled;
     const resolvedHref = disabled ? undefined : href;
     const disabledProps = useMemo(() => {
         if (!disabled)
@@ -35,6 +39,6 @@ export const NavigationListItem = forwardRef(({ title, icon, description, leadin
             return BUTTON_DISABLED_PROPS;
         return ARIA_DISABLED_PROPS;
     }, [disabled, onClick, href]);
-    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), href !== undefined ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
+    const innerElement = (_jsx(FocusIndicator, { hideWhiteBorder: true, position: "inside", children: _jsxs(Tag, { ...rest, href: resolvedHref, target: target, type: href === undefined && onClick !== undefined ? 'button' : undefined, "data-mfui-focusable": isInteractive, className: cx(classes.root, 'mfui-NavigationListItem__root', className), onClick: disabled ? undefined : onClick, ...disabledProps, children: [leadingContent != null ? (_jsx("span", { className: cx(classes.leading, 'mfui-NavigationListItem__leading'), children: leadingContent })) : null, _jsxs("span", { className: cx(classes.content, 'mfui-NavigationListItem__content'), children: [_jsxs("span", { className: cx(classes.title, 'mfui-NavigationListItem__title'), children: [icon != null ? (_jsx("span", { className: cx(classes.titleIcon, 'mfui-NavigationListItem__titleIcon'), children: icon })) : null, _jsx(Typography, { variant: "contentHeading", children: title })] }), description != null ? _jsx(Typography, { variant: "body", children: description }) : null] }), isActivatable ? (_jsx("span", { className: cx(classes.trailing, 'mfui-NavigationListItem__trailing'), children: _jsx(NavigationToDetail, { "aria-hidden": true }) })) : null] }) }));
     return _jsx("li", { ref: ref, children: innerElement });
 });

package/dist/src/NavigationList/NavigationListItem/NavigationListItem.types.d.ts

@@ -25,7 +25,8 @@ type ButtonProps = {
     customLinkComponent?: undefined;
     /**
      * The click handler for the navigation item.
-     * When provided without href, the item is rendered as a button element.
+     * When provided without href, the item is rendered as a button element
+     * and displays the same trailing navigation indicator as an anchor item.
      */
     onClick: ComponentPropsWithoutRef<'button'>['onClick'];
     /**

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

@@ -5,8 +5,13 @@ import React from 'react';
  * and ignores invalid characters.
  *
  * The `onChange` callback receives the raw numeric string without commas.
+ *
+ * `maxIntegerDigits` and `decimalPlaces` cap how much the user can enter. Edits that would
+ * exceed either limit are silently rejected, so state the limit in an adjacent `HelpMessage`.
  */
 export declare const NumberBox: React.ForwardRefExoticComponent<Omit<import("..").TextBoxProps, "onChange" | "prefixSlot" | "suffixSlot"> & {
     onChange?: (value: string) => void;
     textAlign?: 'left' | 'right';
+    maxIntegerDigits?: number;
+    decimalPlaces?: number;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/src/NumberBox/NumberBox.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
+import { forwardRef, useCallback, useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { cx } from '../../styled-system/css';
 import { mergeRefs } from '../utilities/dom/mergeRefs';
 import { TextBox } from '../TextBox';
@@ -102,25 +102,64 @@ const mapRawCursorToDisplay = (formatted, rawCursor) => {
     }
     return formatted.length;
 };
+/**
+ * Count the digit characters in a raw numeric string.
+ * The minus sign and the decimal point are not digits, so they are not counted.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countDigits = (raw) => (raw.match(/\d/g) ?? []).length;
+/**
+ * Count the digit characters in the integer part of a raw numeric string, i.e. before the
+ * decimal point. `maxIntegerDigits` caps this count independently of `decimalPlaces`, so the
+ * two limits stack: `maxIntegerDigits={5}` with `decimalPlaces={2}` allows up to 7 digits total.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countIntegerDigits = (raw) => {
+    const dotIndex = raw.indexOf('.');
+    return countDigits(dotIndex === -1 ? raw : raw.slice(0, dotIndex));
+};
+/**
+ * Count the decimal places a raw numeric string occupies.
+ * A trailing dot counts as one place because it commits the value to a decimal part:
+ * that is what lets `decimalPlaces={0}` reject the dot itself while `decimalPlaces={2}`
+ * still allows the in-progress `123.`.
+ *
+ * @param raw - The raw numeric string.
+ */
+const countDecimalPlaces = (raw) => {
+    const dotIndex = raw.indexOf('.');
+    if (dotIndex === -1)
+        return 0;
+    return Math.max(raw.length - dotIndex - 1, 1);
+};
 /**
  * NumberBox is a numeric input component that wraps TextBox.
  * It provides real-time comma formatting, full-width digit conversion,
  * and ignores invalid characters.
  *
  * The `onChange` callback receives the raw numeric string without commas.
+ *
+ * `maxIntegerDigits` and `decimalPlaces` cap how much the user can enter. Edits that would
+ * exceed either limit are silently rejected, so state the limit in an adjacent `HelpMessage`.
  */
-export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, ...rest }, ref) => {
+export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign = 'right', style, enableClearButton, maxIntegerDigits, decimalPlaces, ...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(() => {
+    // Adjusted during render (React's documented pattern for resyncing state to a
+    // changed prop) rather than in an effect, so the UI never flashes the stale value
+    // for one frame. Only fires when value prop is explicitly provided (controlled mode).
+    const [prevValue, setPrevValue] = useState(value);
+    if (value !== prevValue) {
+        setPrevValue(value);
         if (value !== undefined) {
             const sanitized = sanitizeInput(String(value));
             setDisplayValue(formatWithCommas(sanitized));
         }
-    }, [value]);
+    }
     // Restore cursor position after display value update
     useLayoutEffect(() => {
         if (pendingCursorRef.current !== null && inputRef.current) {
@@ -165,6 +204,22 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
                 rawCursor = rawPos - 1;
             }
         }
+        // Reject an edit that breaks a limit, but only when it makes that measure worse.
+        // A value that arrives over the limit from the outside must stay editable back into range.
+        const exceedsDigitLimit = maxIntegerDigits !== undefined &&
+            countIntegerDigits(sanitized) > maxIntegerDigits &&
+            countIntegerDigits(sanitized) > countIntegerDigits(prevSanitized);
+        const exceedsDecimalLimit = decimalPlaces !== undefined &&
+            countDecimalPlaces(sanitized) > decimalPlaces &&
+            countDecimalPlaces(sanitized) > countDecimalPlaces(prevSanitized);
+        if (exceedsDigitLimit || exceedsDecimalLimit) {
+            // The display value does not change, so the cursor belongs before the rejected input.
+            const rawGained = Math.max(sanitized.length - prevSanitized.length, 0);
+            pendingCursorRef.current = mapRawCursorToDisplay(displayValue, Math.max(rawCursor - rawGained, 0));
+            // State is unchanged, so bump the token to make the layout effect restore the input.
+            requestCursorRestore();
+            return;
+        }
         const formatted = formatWithCommas(sanitized);
         let newCursor = mapRawCursorToDisplay(formatted, rawCursor);
         // Rejected characters keep the cursor before the ignored input.
@@ -179,7 +234,7 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
             requestCursorRestore();
         }
         onChange?.(sanitized);
-    }, [displayValue, onChange]);
+    }, [displayValue, onChange, maxIntegerDigits, decimalPlaces]);
     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 }));
 });
 NumberBox.displayName = 'NumberBox';