@moneyforward/mfui-components 4.5.0 → 4.7.0

package/dist/src/DateTimeSelection/MonthPicker/constants.js

@@ -1,5 +1,5 @@
-export const LABEL_PREV_YEAR = '前の年'; // Previous year
-export const LABEL_NEXT_YEAR = '次の年'; // Next year
+export const LABEL_PREV_YEAR = '前の年を表示'; // Show previous year
+export const LABEL_NEXT_YEAR = '次の年を表示'; // Show next year
 export const LABEL_OPEN_CALENDAR = 'カレンダーを開く'; // Open calendar
 export const LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる'; // Close calendar
 /**
@@ -7,12 +7,12 @@ export const LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる'; // Close cale
  */
 export const MONTH_PICKER_LABELS = {
     ja: {
-        prevYear: '前の年',
-        nextYear: '次の年',
+        prevYear: '前の年を表示',
+        nextYear: '次の年を表示',
     },
     en: {
-        prevYear: 'Previous year',
-        nextYear: 'Next year',
+        prevYear: 'Show previous year',
+        nextYear: 'Show next year',
     },
 };
 /**

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerMonthCell/MonthRangePickerMonthCell.js

@@ -23,7 +23,7 @@ import 'dayjs/locale/ja';
 export function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }) {
     const calendarLocale = useCalendarLocale();
     // Calculate if this month is selected (either start or end of range)
-    const selected = isRangeStart || isRangeEnd || monthCellProps.selected || false;
+    const selected = !!isRangeStart || !!isRangeEnd || !!monthCellProps.selected;
     const monthFormat = useMemo(() => getMonthCellMonthFormat(calendarLocale, monthCellProps.date), [calendarLocale, monthCellProps.date]);
     // Create accessible label for range selection
     const accessibleLabel = useMemo(() => {

package/dist/src/DateTimeSelection/MonthRangePicker/MonthRangePickerNavigation/MonthRangePickerNavigation.js

@@ -11,8 +11,8 @@ import { yearToEraLabel } from '../../shared/utilities/japaneseCalendar';
 // Constants for year navigation limits
 const MINIMUM_VIEWABLE_YEAR = 1900;
 const MAXIMUM_VIEWABLE_YEAR = 2100;
-const LABEL_PREV_YEAR = { ja: '前年', en: 'Previous year' };
-const LABEL_NEXT_YEAR = { ja: '翌年', en: 'Next year' };
+const LABEL_PREV_YEAR = { ja: '前の年を表示', en: 'Show previous year' };
+const LABEL_NEXT_YEAR = { ja: '次の年を表示', en: 'Show next year' };
 /**
  * Year navigation component for MonthRangePicker.
  *

package/dist/src/DateTimeSelection/TimePicker/TimePicker.js

@@ -41,7 +41,7 @@ export const TimePicker = forwardRef(({ value, defaultValue, onChange, format =
     // Track the live value internally so the clear button can read it whether
     // the consumer is using `value` (controlled) or `defaultValue` (uncontrolled).
     const [internalValue, setInternalValue] = useState(value ?? defaultValue ?? '');
-    const effectiveValue = value === undefined ? internalValue : value;
+    const effectiveValue = value ?? internalValue;
     const hasValue = effectiveValue !== '';
     // The error state takes precedence over the caution state
     const classes = timePickerSlotRecipe({ size, disabled, invalid, caution: caution && !invalid });

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

@@ -2,8 +2,8 @@ import { type BasePickerProps } from './BasePicker.types';
 /**
  * Default labels for the DatePicker components with Japanese text
  */
-export declare const LABEL_GO_TO_PREV_MONTH = "\u524D\u306E\u6708";
-export declare const LABEL_GO_TO_NEXT_MONTH = "\u6B21\u306E\u6708";
+export declare const LABEL_GO_TO_PREV_MONTH = "\u524D\u306E\u6708\u3092\u8868\u793A";
+export declare const LABEL_GO_TO_NEXT_MONTH = "\u6B21\u306E\u6708\u3092\u8868\u793A";
 export declare const LABEL_SELECT_MONTH = "\u6708\u3092\u9078\u629E";
 export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
 export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";

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

@@ -1,18 +1,18 @@
 /**
  * Default labels for the DatePicker components with Japanese text
  */
-export const LABEL_GO_TO_PREV_MONTH = '前の月';
-export const LABEL_GO_TO_NEXT_MONTH = '次の月';
+export const LABEL_GO_TO_PREV_MONTH = '前の月を表示';
+export const LABEL_GO_TO_NEXT_MONTH = '次の月を表示';
 export const LABEL_SELECT_MONTH = '月を選択';
 export const LABEL_OPEN_CALENDAR = 'カレンダーを開く';
 export const LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる';
 export const LABEL_TODAY = '今日';
 export const BASE_PICKER_LABELS = {
     ja: {
-        GO_TO_PREV_MONTH: '前の月',
-        GO_TO_NEXT_MONTH: '次の月',
-        GO_TO_PREV_YEAR: '前の年',
-        GO_TO_NEXT_YEAR: '次の年',
+        GO_TO_PREV_MONTH: '前の月を表示',
+        GO_TO_NEXT_MONTH: '次の月を表示',
+        GO_TO_PREV_YEAR: '前の年を表示',
+        GO_TO_NEXT_YEAR: '次の年を表示',
         SELECT_MONTH: '月を選択',
         SELECT_YEAR: '年を選択',
         OPEN_CALENDAR: 'カレンダーを開く',
@@ -21,10 +21,10 @@ export const BASE_PICKER_LABELS = {
         CLEAR_VALUE: '値をクリアする',
     },
     en: {
-        GO_TO_PREV_MONTH: 'Previous month',
-        GO_TO_NEXT_MONTH: 'Next month',
-        GO_TO_PREV_YEAR: 'Previous year',
-        GO_TO_NEXT_YEAR: 'Next year',
+        GO_TO_PREV_MONTH: 'Show previous month',
+        GO_TO_NEXT_MONTH: 'Show next month',
+        GO_TO_PREV_YEAR: 'Show previous year',
+        GO_TO_NEXT_YEAR: 'Show next year',
         SELECT_MONTH: 'Select month',
         SELECT_YEAR: 'Select year',
         OPEN_CALENDAR: 'Open calendar',

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerCalendar.js

@@ -39,5 +39,5 @@ export function BaseRangePickerCalendar({ viewingMonth, handleKeyboardNavigation
         };
         return (_jsx(BaseRangePickerDateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, isRangeStart: isStart, isRangeEnd: isEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: handleFocus, onMouseLeave: clearPreview, onBlur: clearPreview }, date.toISOString()));
     }, [isDateDisabled, isRangeStart, isRangeEnd, isInRange, handleDateClick, handlePreview, clearPreview]);
-    return (_jsx("div", { className: cx(classNames.root, 'mfui-BaseRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart || temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
+    return (_jsx("div", { className: cx(classNames.root, 'mfui-BaseRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart ?? temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/constants.js

@@ -1,13 +1,13 @@
 export const BASE_RANGE_PICKER_POPOVER_LABELS = {
     ja: {
-        GO_TO_PREV_MONTH: '前の月',
-        GO_TO_NEXT_MONTH: '次の月',
+        GO_TO_PREV_MONTH: '前の月を表示',
+        GO_TO_NEXT_MONTH: '次の月を表示',
         APPLY: '適用',
         CANCEL: 'キャンセル',
     },
     en: {
-        GO_TO_PREV_MONTH: 'Previous month',
-        GO_TO_NEXT_MONTH: 'Next month',
+        GO_TO_PREV_MONTH: 'Show previous month',
+        GO_TO_NEXT_MONTH: 'Show next month',
         APPLY: 'Apply',
         CANCEL: 'Cancel',
     },

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import { flushSync } from 'react-dom';
 import { dayjs } from '../../../../utilities/date/dayjs';
 import { useUpdateEffect } from '../../../../utilities/effect/useUpdateEffect';
@@ -117,7 +117,7 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         today,
     }), normalizeToFirstOfMonth);
     // --- Selection/Preview State and Logic ---
-    const [selecting, setSelecting] = useState('start');
+    const [selecting, setSelecting] = useState(() => (!startDate || endDate ? 'start' : 'end'));
     const [temporaryStart, setTemporaryStart] = useState(startDate);
     const [temporaryEnd, setTemporaryEnd] = useState(endDate);
     const [previewDate, setPreviewDate] = useState();
@@ -151,7 +151,7 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         onChange?.([newStartDate, newEndDate]);
     }, [onChange, formatDate, setDates]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
-        const proposedEndDate = nextEndDate !== undefined ? nextEndDate : endDate;
+        const proposedEndDate = nextEndDate ?? endDate;
         // Apply auto-completion behavior when start date is set and end date is missing
         // This follows design guidelines: if only one date is provided, both should be set to same value
         if (date && !proposedEndDate) {
@@ -162,7 +162,7 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
     }, [endDate, handleChange]);
     const handleEndDateChange = useCallback((date, nextStartDate) => {
-        const proposedStartDate = nextStartDate !== undefined ? nextStartDate : startDate;
+        const proposedStartDate = nextStartDate ?? startDate;
         // Apply auto-completion behavior when end date is set and start date is missing
         // This follows design guidelines: if only one date is provided, both should be set to same value
         if (date && !proposedStartDate) {
@@ -237,12 +237,18 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         setTemporaryEnd(undefined);
         close();
     }, [handleChange, close]);
-    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 value for one frame.
+    const [prevStartDate, setPrevStartDate] = useState(startDate);
+    const [prevEndDate, setPrevEndDate] = useState(endDate);
+    if (startDate !== prevStartDate || endDate !== prevEndDate) {
+        setPrevStartDate(startDate);
+        setPrevEndDate(endDate);
         setTemporaryStart(startDate);
         setTemporaryEnd(endDate);
         setSelecting(!startDate || endDate ? 'start' : 'end');
         setPreviewDate(undefined);
-    }, [startDate, endDate]);
+    }
     const handleDateClick = useCallback((date) => {
         // Prevent selection of disabled dates
         if (isDateOutsideConstraints(date, minDate, maxDate, format)) {
@@ -309,7 +315,7 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
         const autoCompletedRange = autoCompletePartialRange([newStart, newEnd]);
         // handleChange already calls setDates and setDateStrings, so we don't need to call them again
         handleChange(autoCompletedRange);
-        // Do not setTemporaryStart/setTemporaryEnd here; let the effect sync them from startDate/endDate
+        // Do not setTemporaryStart/setTemporaryEnd here; the render-time adjustment above syncs them from startDate/endDate
         close();
     }, [handleChange, close, temporaryStart, temporaryEnd, minDate, maxDate, format]);
     const handleCancel = useCallback(() => {

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/BaseRangePickerTrigger.js

@@ -39,7 +39,7 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     // Use input props placeholder, fallback to default
     const finalStartPlaceholder = startInputPlaceholder ?? getBaseRangePickerTriggerLabel('START_DATE_PLACEHOLDER', calendarLocale);
     const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
-    const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
+    const shouldShowClearButton = enableClearValue && ((enhancedStartInputProps.value ?? '') || (enhancedEndInputProps.value ?? ''));
     // The error state takes precedence over the caution state
     const classes = baseRangePickerTriggerSlotRecipe({ invalid, caution: caution && !invalid, disabled, size });
     // Popover open: mark calendar icon active. Use `undefined` when closed — `data-active="false"` is still truthy in CSS.
@@ -48,6 +48,6 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
         handleClear();
         onClickClearButton?.(event);
     }, [handleClear, onClickClearButton]);
-    return (_jsxs("div", { ...wrapperProps, ...props, ref: ref, className: cx(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [_jsx("div", { className: cx(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), _jsx("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: enhancedStartInputProps.value || finalStartPlaceholder }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: enhancedEndInputProps.value || finalEndPlaceholder })] })) : (_jsxs(_Fragment, { children: [_jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: startInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: endInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), "data-active": shouldCalendarIconActive, disabled: disabled, onClick: onCalendarClick ?? toggle, children: _jsx(Calendar, {}) })] }));
+    return (_jsxs("div", { ...wrapperProps, ...props, ref: ref, className: cx(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [_jsx("div", { className: cx(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), _jsx("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: (enhancedStartInputProps.value ?? '') || finalStartPlaceholder }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: (enhancedEndInputProps.value ?? '') || finalEndPlaceholder })] })) : (_jsxs(_Fragment, { children: [_jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: startInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: endInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), "data-active": shouldCalendarIconActive, disabled: disabled, onClick: onCalendarClick ?? toggle, children: _jsx(Calendar, {}) })] }));
 });
 BaseRangePickerTrigger.displayName = 'BaseRangePicker.Trigger';

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

@@ -32,7 +32,7 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
             if (!dateNumber)
                 return null;
             const date = new Date(viewingValue.getFullYear(), viewingValue.getMonth(), dateNumber);
-            const isDisabledByProps = (startOfMinDate && date < startOfMinDate) || (startOfMaxDate && date > startOfMaxDate);
+            const isDisabledByProps = !!(startOfMinDate && date < startOfMinDate) || !!(startOfMaxDate && date > startOfMaxDate);
             const isDisabledByCallback = checkDisabledDate?.(date);
             const disabled = isDisabledByProps || !!isDisabledByCallback;
             const isSelected = value ? checkIsSameDate(value, date) : false;

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

@@ -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/NarrowViewportMainNavigation.js

@@ -53,7 +53,7 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
                                         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

@@ -31,12 +31,15 @@ import { useVirtualizedMultipleSelectBoxOptions } from './hooks/useVirtualizedMu
 import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
 // How many skeleton items to render while the component is loading.
 const SKELETON_ITEM_COUNT = 4;
+// The default for an omitted `options` prop. A default written inline (`options = []`) is a new
+// array on every render, which invalidates every memoized value derived from the options.
+const EMPTY_OPTIONS = [];
 /**
  * The MultipleSelectBox component.
  * This component is separated from the SelectBox component because it has a different behavior.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  */
-export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, 
+export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = EMPTY_OPTIONS, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
 placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, enableCreateOption = false, onCreateOption, createOptionProps, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
@@ -187,7 +190,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
     // Create an array of focusable (selectable and not disabled) options from filteredOptions
     const focusableOptions = useMemo(() => filteredOptions.filter((option) => isSelectableOption(option) && option.value != null && !isOptionDisabled(option)), [filteredOptions]);
     // Manage the keyboard navigation of options
-    const { handleOptionFocus, createKeyDownHandler, tabbableOptionIndex } = useOptionKeyboardNavigation({
+    const { handleOptionFocus, createKeyDownHandler, tabbableOptionIndex, resetTabbableIndex } = useOptionKeyboardNavigation({
         filteredOptions: focusableOptions,
         selectedValues: enableApplyControls ? temporaryValues : localSelectedValuesSet,
         onSelectOption: handleSelectOption,
@@ -373,7 +376,13 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                     : 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;
+    const handleOpenStateChanged = (open) => {
+        // Every opening starts from the first selected option, not from the option focused last time.
+        if (open)
+            resetTabbableIndex();
+        toggleOptionPanel();
+    };
     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, 
             // eslint-disable-next-line @typescript-eslint/no-deprecated
-            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, required: required, caution: caution, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? (renderOptionList({ optionsNode, createOptionAreaNode })) : (_jsxs(_Fragment, { children: [optionsNode, createOptionAreaNode] })), enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
+            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, required: required, caution: caution, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsx(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: renderPopoverHeader ? (renderPopoverHeader({ searchNode, allOptionsControlsNode })) : (_jsxs(_Fragment, { children: [searchNode, allOptionsControlsNode] })) })) : null, renderOptionList ? (renderOptionList({ optionsNode, createOptionAreaNode })) : (_jsxs(_Fragment, { children: [optionsNode, createOptionAreaNode] })), enableApplyControls || showSelectedCount ? (_jsx(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: renderPopoverFooter ? (renderPopoverFooter({ selectedCountNode, applyControlsNode })) : (_jsxs(_Fragment, { children: [selectedCountNode, applyControlsNode] })) })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: handleOpenStateChanged, onBlur: onBlur }));
 }

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/useOptionKeyboardNavigation.d.ts

@@ -34,5 +34,6 @@ export declare function useOptionKeyboardNavigation<T extends AllowedValueTypes
     tabbableOptionIndex: number;
     handleOptionFocus: (optionIndex: number) => void;
     createKeyDownHandler: (option: MultipleSelectBoxOption<T, AdditionalProps>) => KeyboardEventHandler<HTMLLIElement>;
+    resetTabbableIndex: () => void;
 };
 export {};

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';
 /**
@@ -25,20 +25,31 @@ export function useOptionKeyboardNavigation({ filteredOptions, selectedValues, o
         // Fallback to 0 if no enabled option is found
         return Math.max(tabbableIndex, 0);
     }, [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(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
-    // Update tabbable index when selected values change
+    // The focused option is stored by its value, and the tabbable index is calculated during render.
+    // Storing the index and resetting it whenever `filteredOptions` is a different array would set
+    // state during render, which loops forever when `filteredOptions` is a new array on every render
+    // (e.g. `options` is omitted). The focused option stays tabbable while it is in `filteredOptions`,
+    // including after it is toggled, so the tabbable option is always the focused one. The caller
+    // forgets it with `resetTabbableIndex` whenever the option panel opens, so every opening starts
+    // from the first selected option, or the first option when nothing is selected.
+    const [focusedOption, setFocusedOption] = useState(null);
+    const focusedOptionIndex = focusedOption
+        ? filteredOptions.findIndex((option) => isSelectableOption(option) && option.value === focusedOption.value)
+        : -1;
+    const tabbableOptionIndex = focusedOptionIndex !== -1 ? focusedOptionIndex : getDefaultTabbableIndex();
     const resetTabbableIndex = useCallback(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
+        setFocusedOption(null);
+    }, []);
     // Handler for when an option receives focus
     const handleOptionFocus = useCallback((optionIndex) => {
-        setTabbableOptionIndex(optionIndex);
-    }, []);
+        const option = filteredOptions[optionIndex];
+        if (!option || !isSelectableOption(option)) {
+            setFocusedOption(null);
+            return;
+        }
+        // Keep the current object when the same option is focused again, so React can skip the re-render.
+        setFocusedOption((previous) => previous && previous.value === option.value ? previous : { value: option.value });
+    }, [filteredOptions]);
     // Create keyboard event handler for an option
     const createKeyDownHandler = useCallback((option) => (event) => {
         const siblingElements = findSiblingElements(event.currentTarget, '[role="option"]:not([aria-disabled="true"])');
@@ -76,5 +87,6 @@ export function useOptionKeyboardNavigation({ filteredOptions, selectedValues, o
         tabbableOptionIndex,
         handleOptionFocus,
         createKeyDownHandler,
+        resetTabbableIndex,
     };
 }

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/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';
@@ -149,13 +149,17 @@ export const NumberBox = forwardRef(({ onChange, value, defaultValue, textAlign
     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) {