@moneyforward/mfui-components 4.5.0 → 4.6.0

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerProvider/DateRangePickerProvider.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';
@@ -48,7 +48,7 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const today = useMemo(() => new Date(), []);
     const [viewingMonth, setViewingMonth] = useTransformedState(value?.[0] ?? defaultValue?.[0] ?? new Date(today.getFullYear(), today.getMonth(), 1), 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();
@@ -85,10 +85,10 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
         onChange?.([newStartDate, newEndDate]);
     }, [onChange, format, setDates]);
     const handleStartDateChange = useCallback((date, nextEndDate) => {
-        handleChange([date, nextEndDate !== undefined ? nextEndDate : endDate]);
+        handleChange([date, nextEndDate ?? endDate]);
     }, [endDate, handleChange]);
     const handleEndDateChange = useCallback((date, nextStartDate) => {
-        handleChange([nextStartDate !== undefined ? nextStartDate : startDate, date]);
+        handleChange([nextStartDate ?? startDate, date]);
     }, [startDate, handleChange]);
     const handleStartDateStringChange = useCallback((value) => {
         setDateStrings([value, endDateString]);
@@ -131,12 +131,18 @@ const useDateRangePickerContextValue = ({ 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)) {
@@ -200,7 +206,7 @@ const useDateRangePickerContextValue = ({ value, defaultValue, disabled = false,
         }
         // handleChange already calls setDates and setDateStrings, so we don't need to call them again
         handleChange([newStart, newEnd]);
-        // 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]);
     const handleCancel = useCallback(() => {

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/DateRangePickerTrigger.js

@@ -34,7 +34,7 @@ export const DateRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     });
     const { placeholder: startPlaceholder = LOCALE.START_DATE_PLACEHOLDER } = startInputProps;
     const { placeholder: endPlaceholder = LOCALE.END_DATE_PLACEHOLDER } = endInputProps;
-    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 });
     const handleClickClearButton = useCallback((event) => {

package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.js

@@ -25,7 +25,7 @@ export function FilterDatePicker({ label, value, defaultValue, onChange, open, o
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     // When a controlled value transitions back to undefined, clear any stale internal value
     // so the component doesn't show a previously-selected uncontrolled date.
     const previousValueRef = useRef(value);

package/dist/src/DateTimeSelection/FilterMonthPicker/FilterMonthPicker.js

@@ -24,7 +24,7 @@ export function FilterMonthPicker({ label, value, defaultValue, onChange, open,
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(defaultValue);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     // When a controlled value transitions back to undefined, clear any stale internal value
     // so the component doesn't show a previously-selected uncontrolled month.
     const previousValueRef = useRef(value);

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js

@@ -26,7 +26,7 @@ export function FilterMonthRangePicker({ label, value, defaultValue, onChange, o
     const triggerRef = useRef(null);
     const dialogId = useId();
     const [internalValue, setInternalValue] = useState(() => defaultValue ?? [undefined, undefined]);
-    const currentValue = value !== undefined ? value : internalValue;
+    const currentValue = value ?? internalValue;
     const previousValueRef = useRef(value);
     useEffect(() => {
         const previousValue = previousValueRef.current;

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

@@ -88,7 +88,7 @@ export function MonthPickerPanel({ viewingValue, setViewingValue, value, onChang
     const handleYearSelect = useCallback((newYear) => {
         setViewingValue(new Date(newYear, 0, 1));
     }, [setViewingValue]);
-    const shouldFilterYears = !!(minMonth || maxMonth || checkDisabledMonth);
+    const shouldFilterYears = !!(minMonth ?? maxMonth ?? checkDisabledMonth);
     const filterYear = useCallback((y) => {
         const normalizedMinMonth = minMonth ? new Date(minMonth) : undefined;
         const normalizedMaxMonth = maxMonth ? new Date(maxMonth) : undefined;

package/dist/src/DateTimeSelection/MonthPicker/constants.d.ts

@@ -1,5 +1,5 @@
-export declare const LABEL_PREV_YEAR = "\u524D\u306E\u5E74";
-export declare const LABEL_NEXT_YEAR = "\u6B21\u306E\u5E74";
+export declare const LABEL_PREV_YEAR = "\u524D\u306E\u5E74\u3092\u8868\u793A";
+export declare const LABEL_NEXT_YEAR = "\u6B21\u306E\u5E74\u3092\u8868\u793A";
 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";
 type MonthPickerLabelKey = 'prevYear' | 'nextYear';

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/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.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);