@moneyforward/mfui-components 4.3.1 → 4.6.0

package/dist/src/DataTable/DataTableRow/DataTableRow.types.d.ts

@@ -1,5 +1,6 @@
-import { type ComponentPropsWithRef } from 'react';
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
+import { type DataTableSelectionCheckboxWrapper } from '../DataTable.types';
 /**
  * The props for the `DataTableRow` component.
  *
@@ -10,7 +11,7 @@ import { type CheckboxProps } from '../../Checkbox';
 export type DataTableRowProps = {
     /**
      * Whether the row is disabled.
-     * When true, interaction when the row is clicked and the checkbox for selectable feature will be disabled.
+     * When true, interaction when the row is clicked, the row action button and the checkbox for selectable feature will be disabled.
      * The row content remains visible with appropriate styling for readability.
      * Interactive elements passed as a children for DataTable.Cell won't be disabled automatically.
      *
@@ -18,8 +19,13 @@ export type DataTableRowProps = {
      */
     disabled?: boolean;
     /**
-     * The state of the row whether it is highlighted without a selected.
-     * This prop displays a highlighted background color regardless of the `enableRowSelection` prop of the DataTable component.
+     * Whether the row displays the highlighted background color.
+     * This prop works regardless of the `enableRowSelection` prop of the `DataTable` component: on a selectable table
+     * the row is highlighted when this prop is `true` OR when `checkboxProps.checked` is `true`, so a row can be
+     * highlighted while it is not selected.
+     *
+     * Note that the highlighted background is the same color as the selected one, so on a selectable table the
+     * selection checkbox, not the background, is what tells a selected row from a merely highlighted one.
      *
      * @default false
      */
@@ -38,29 +44,74 @@ export type DataTableRowProps = {
      * @property onClick - The handler called when the checkbox is clicked (for event propagation control).
      *
      * @property disabled - Whether the checkbox is disabled.
+     *
+     * @property wrapper - The function that wraps the checkbox, for example with the `Tooltip` component.
+     * It receives the checkbox element and must render it as it is, because the row owns the checkbox itself.
+     * Keep the `Tooltip` component with its default `trigger` (`['hover', 'focus']`) so that keyboard users can also
+     * read the content; a tooltip opened by a click would duplicate the action of the checkbox.
+     * When the content restates the accessible name of the checkbox, pass `hideFromScreenReader` to the `Tooltip`
+     * component to avoid announcing the same information twice.
+     *
+     * ```tsx
+     * <DataTable.Row
+     *   checkboxProps={{
+     *     wrapper: (checkbox) => <Tooltip content="この行を選択">{checkbox}</Tooltip>,
+     *   }}
+     * >
+     * ```
      */
-    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'onChange' | 'disabled' | 'onClick'>;
+    checkboxProps?: Pick<CheckboxProps, 'aria-label' | 'checked' | 'onChange' | 'disabled' | 'onClick'> & {
+        wrapper?: DataTableSelectionCheckboxWrapper;
+    };
     /**
      * The callback function that is called when the row is clicked.
-     * If provided, the row can be focused and the focus indicator is displayed.
      *
-     * This prop will be passed to the `onClick` and `onKeyDown` of the `tr` element.
-     * When the element is clicked, the event is passed to the `onClickRow` prop, but event isn't passed when the Enter or Space key is pressed.
+     * If provided, a visually hidden button is rendered inside the row so that keyboard and
+     * screen reader users can perform the row action without making the `tr` element itself
+     * interactive. The `tr` element keeps the `row` role and is not focusable, so the controls
+     * inside the cells stay reachable. Activating the button (Enter or Space) triggers this
+     * callback via the bubbled click event, and the focus indicator is displayed on the row
+     * while the button is focused. The accessible name of the button can be customized with
+     * the `rowActionButtonProps` prop.
+     *
+     * The button is hosted by the first `DataTableCell` of the row that is not a row header (the
+     * selection checkbox cell when the row is selectable), wherever the cell is rendered in the
+     * React tree: intermediate components, wrapper components and Fragments are all fine. If the
+     * row renders no `DataTableCell` at all, the button is not rendered, the row becomes unusable
+     * with a keyboard or screen reader, and a warning is logged.
      *
      * Note that this callback is NOT called when the click originates from an interactive
      * descendant inside the row — e.g. a button, link, input (including `Checkbox`), select,
      * label, or an element with an interactive ARIA role such as `checkbox` or `menuitem`.
      * Handle those interactions on the descendant itself (e.g. the `Checkbox`'s `onChange`).
-     * Likewise, Enter or Space triggers this callback only while the row itself is focused,
-     * not while a focusable descendant is focused.
      *
      * When the `enableRowClickSelection` prop of the `DataTable` component is `true`, the selection checkbox stops
-     * responding to clicks on its own, so this callback is called for the clicks on the checkbox cell as well.
+     * responding to pointer clicks on its own, so this callback is called for the clicks on the checkbox cell as well.
      * Do not toggle the row selection here in that case, otherwise the selection is toggled twice.
+     * Toggling the checkbox with the keyboard does not call this callback.
      *
      * @default undefined
      */
-    onClickRow?: (event: React.MouseEvent<HTMLTableRowElement> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+    onClickRow?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+    /**
+     * The properties for the visually hidden button that makes the clickable row accessible
+     * to keyboard and screen reader users.
+     * This prop is available when the `onClickRow` prop is provided.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the button. default is '行の操作', or '行を開閉' when the
+     * row toggles a disclosure (a cell has `disclosureIconProps` without `onClickCell`).
+     *
+     * @property aria-labelledby - The id of the element that names the button, e.g. the row header cell.
+     * It takes precedence over `aria-label`.
+     *
+     * @property aria-describedby - The id of the element that describes the button.
+     *
+     * @property aria-controls - The id of the element that the row action expands or collapses.
+     *
+     * @property id - The id of the button, e.g. to move the focus back to the row action after closing a dialog.
+     */
+    rowActionButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'id'>;
     /**
      * Whether the table rows are selectable.
      * If `true`, the checkbox cell will be added to the first column of header and each row.

package/dist/src/DataTable/DataTableRowActionContext.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The attributes of the visually hidden row action button, resolved by `DataTableRow`.
+ */
+export type RowActionButtonProps = Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-controls' | 'aria-expanded' | 'id' | 'disabled'>;
+/**
+ * A cell that registered itself as a candidate host of the row action button.
+ */
+export type RowActionCellEntry = {
+    /** The rendered cell element, used to order the candidates by their position in the row. */
+    element: HTMLTableCellElement;
+    /** Row header cells host the button only when the row has no other cell. */
+    isRowHeader: boolean;
+    /** Called by the row when the cell becomes, or stops being, the host. */
+    setIsHost: (isHost: boolean) => void;
+};
+export type DataTableRowActionContextValue = {
+    /** The attributes of the row action button, or `undefined` when the row has no row action. */
+    buttonProps: RowActionButtonProps | undefined;
+    /**
+     * Registers a cell as a candidate host of the row action button, or `undefined` when the row has
+     * no row action so that the cells skip the registration.
+     *
+     * @returns The function that unregisters the cell.
+     */
+    registerCell: ((entry: RowActionCellEntry) => () => void) | undefined;
+};
+/**
+ * Lets any `DataTableCell` rendered inside a `DataTableRow` take part in hosting the row action
+ * button, regardless of how the consumer composes the cells (intermediate components, wrappers,
+ * Fragments). The row decides which registered cell hosts the button.
+ */
+export declare const DataTableRowActionContext: import("react").Context<DataTableRowActionContextValue | null>;
+export declare const useDataTableRowActionContext: () => DataTableRowActionContextValue | null;

package/dist/src/DataTable/DataTableRowActionContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+/**
+ * Lets any `DataTableCell` rendered inside a `DataTableRow` take part in hosting the row action
+ * button, regardless of how the consumer composes the cells (intermediate components, wrappers,
+ * Fragments). The row decides which registered cell hosts the button.
+ */
+export const DataTableRowActionContext = createContext(null);
+export const useDataTableRowActionContext = () => useContext(DataTableRowActionContext);

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

@@ -22,9 +22,13 @@ export function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDis
     const { viewingValue, setViewingValue, pendingFocusDate, setPendingFocusDate } = useBasePickerContext();
     const [internalValue, setInternalValue] = useState(value);
     const calendarLocale = useCalendarLocale();
-    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.
+    const [prevValueProp, setPrevValueProp] = useState(value);
+    if (value !== prevValueProp) {
+        setPrevValueProp(value);
         setInternalValue(value);
-    }, [value]);
+    }
     const setValue = useCallback((date, event) => {
         setInternalValue(date);
         onChange?.(date, event);
@@ -81,7 +85,7 @@ export function DatePickerCalendar({ value, onChange, minDate, maxDate, checkDis
         newDate.setFullYear(year);
         setViewingValue(newDate);
     }, [setViewingValue, viewingValue]);
-    const shouldFilterYears = !!(minDate || maxDate);
+    const shouldFilterYears = !!(minDate ?? maxDate);
     const filterYear = useCallback((y) => {
         const normalizedMinDate = minDate ? new Date(minDate) : undefined;
         const normalizedMaxDate = maxDate ? new Date(maxDate) : undefined;

package/dist/src/DateTimeSelection/DatePicker/DatePickerDateCell/index.d.ts

@@ -1,2 +1,2 @@
 export * from './DatePickerDateCell';
-export * from './DatePickerDateCell.types';
+export type * from './DatePickerDateCell.types';

package/dist/src/DateTimeSelection/DatePicker/DatePickerDateCell/index.js

@@ -1,2 +1 @@
 export * from './DatePickerDateCell';
-export * from './DatePickerDateCell.types';

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/DateRangePickerCalendar/DateRangePickerCalendar.js

@@ -39,5 +39,5 @@ export function DateRangePickerCalendar({ viewingMonth, handleKeyboardNavigation
         };
         return (_jsx(DateRangePickerDateCell, { ...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-DateRangePickerCalendar__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-DateRangePickerCalendar__root'), children: _jsx(CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart ?? temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
 }

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility.js

@@ -5,7 +5,7 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         // Look for the previous month button by finding buttons that might contain previous month indicators
         const allButtons = screen.getAllByRole('button');
         // The previous month button is typically the first IconButton in the navigation
-        return (allButtons.find((button) => button.getAttribute('aria-label')?.includes('月') || button.getAttribute('aria-label')?.includes('month')) ??
+        return (allButtons.find((button) => !!button.getAttribute('aria-label')?.includes('月') || !!button.getAttribute('aria-label')?.includes('month')) ??
             allButtons.find((button) => button.querySelector('svg')) ??
             allButtons[0]);
     }
@@ -15,7 +15,7 @@ export function createDateRangePickerPopoverTestUtility({ user }) {
         // Find the button with next month aria-label
         const nextButton = allButtons.find((button) => {
             const label = button.getAttribute('aria-label');
-            return label?.includes('次の') || label?.includes('Next');
+            return !!label?.includes('次の') || !!label?.includes('Next');
         });
         return nextButton ?? allButtons[1]; // fallback to second button
     }

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;
@@ -57,7 +57,7 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
         let tabbableDateIndex = -1;
         // First, try to find the selected date if it exists and is not disabled
         if (value) {
-            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem && dateItem.selected && !dateItem.disabled);
+            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem?.selected && !dateItem.disabled);
         }
         // If no selected date or selected date is disabled, try today's date
         if (tabbableDateIndex === -1) {
@@ -101,8 +101,6 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
                 .map((_, index) => ((weekStart + index) % 7))
                 .map((weekday) => (_jsx(DayCell, { day: weekday }, weekday))), computedPropsForDates.map((dateItem, index) => {
                 // All props are generated internally and guaranteed to have required fields
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 if (!dateItem) {
                     return (_jsx("div", { className: cx(classes.emptyDateCell, 'mfui-CalendarGrid__emptyDateCell') }, `empty-date-${String(index)}`));
                 }