@moneyforward/mfui-components 3.18.0 → 3.20.0

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

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { BaseRangePickerProvider } from '../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useDisclosure } from '../../utilities/state/useDisclosure';
+import { dayjs } from '../../utilities/date/dayjs';
+import { filterMonthRangePickerSlotRecipe } from '../../../styled-system/recipes';
+import { SEPARATOR_CONTENT } from '../shared/BaseRangePicker/BaseRangePickerTrigger/constants';
+import { InternalMonthRangePickerPopover } from './MonthRangePickerPopover/MonthRangePickerPopover';
+const DEFAULT_FORMAT = 'YYYY/MM';
+/**
+ * FilterMonthRangePicker component.
+ *
+ * A filter trigger component that allows selecting a month range via the same panel as
+ * {@link MonthRangePicker}. Displays the label alone when no range is selected, and
+ * `label：start〜end` after both bounds are selected. Conforms to the FilterSelectBox / FilterDateBox
+ * visual style.
+ *
+ * Note: The trigger markup intentionally does not reuse FilterTrigger because
+ * FilterTrigger hardcodes the DropdownIcon and adds a hidden `<input>` element,
+ * neither of which are appropriate here. FilterMonthRangePicker uses CalendarIcon and
+ * has no form-field semantics.
+ */
+export function FilterMonthRangePicker({ label, value, defaultValue, onChange, open, onOpenStateChanged, format = DEFAULT_FORMAT, initialDisplayedMonths = 'currentAndNext', clearButtonProps, disabled = false, className, targetDOMNode, minMonth, maxMonth, }) {
+    const classes = filterMonthRangePickerSlotRecipe();
+    const triggerRef = useRef(null);
+    const dialogId = useId();
+    const [internalValue, setInternalValue] = useState(() => defaultValue ?? [undefined, undefined]);
+    const currentValue = value !== undefined ? value : internalValue;
+    const previousValueRef = useRef(value);
+    useEffect(() => {
+        const previousValue = previousValueRef.current;
+        previousValueRef.current = value;
+        if (previousValue !== undefined && value === undefined) {
+            setInternalValue(defaultValue ?? [undefined, undefined]);
+        }
+    }, [value, defaultValue]);
+    const { isOpen: isPickerOpen, toggle: togglePicker, close: closePicker, open: openPicker, } = useDisclosure({
+        value: disabled ? false : open,
+        onToggle: (nextOpen) => {
+            if (!nextOpen) {
+                triggerRef.current?.focus();
+            }
+            onOpenStateChanged?.(nextOpen);
+        },
+        onClose: () => {
+            triggerRef.current?.focus();
+        },
+    });
+    const closePickerAndNotify = useCallback(() => {
+        closePicker();
+        onOpenStateChanged?.(false);
+    }, [closePicker, onOpenStateChanged]);
+    const handleRangeChange = useCallback((dates) => {
+        if (value === undefined) {
+            setInternalValue(dates);
+        }
+        onChange?.(dates);
+    }, [value, onChange]);
+    const handleClear = useCallback((event) => {
+        event.stopPropagation();
+        if (value === undefined) {
+            setInternalValue([undefined, undefined]);
+        }
+        onChange?.([undefined, undefined]);
+        triggerRef.current?.focus();
+    }, [value, onChange]);
+    const [startMonth, endMonth] = currentValue;
+    const formattedValue = startMonth && endMonth
+        ? `${dayjs(startMonth).format(format)}${SEPARATOR_CONTENT}${dayjs(endMonth).format(format)}`
+        : undefined;
+    const hasValue = !!formattedValue;
+    const initialViewingDate = (() => {
+        if (initialDisplayedMonths !== 'previousAndCurrent') {
+            return;
+        }
+        const startDate = value?.[0] ?? defaultValue?.[0];
+        if (!startDate) {
+            const today = new Date();
+            return new Date(today.getFullYear() - 1, 0, 1);
+        }
+        const endDate = value?.[1] ?? defaultValue?.[1];
+        if (endDate && startDate.getFullYear() !== endDate.getFullYear()) {
+            return;
+        }
+        return new Date(startDate.getFullYear() - 1, 0, 1);
+    })();
+    return (_jsx(BaseRangePickerProvider, { value: currentValue, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isPickerOpen, open: openPicker, close: closePickerAndNotify, minDate: minMonth, maxDate: maxMonth, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: handleRangeChange, children: _jsx(InternalMonthRangePickerPopover, { isPickerOpen: isPickerOpen, togglePicker: togglePicker, handleClear: handleClear, disabled: disabled, className: className, classes: classes, formattedValue: formattedValue, hasValue: hasValue, label: label, clearButtonProps: clearButtonProps, minMonth: minMonth, maxMonth: maxMonth, triggerRef: triggerRef, targetDOMNode: targetDOMNode, dialogId: dialogId }) }));
+}

package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.types.d.ts

@@ -0,0 +1,75 @@
+import { type PopoverProps } from '../../Popover';
+import { type DateRangeInput } from '../shared/BaseRangePicker/BaseRangePicker.types';
+export type FilterMonthRangePickerProps = {
+    /**
+     * The label to display for the filter.
+     */
+    label: string;
+    /**
+     * The selected month range (controlled). Each entry is the first day of a month.
+     */
+    value?: DateRangeInput;
+    /**
+     * The default month range for uncontrolled usage.
+     */
+    defaultValue?: DateRangeInput;
+    /**
+     * Callback fired when the selected month range changes.
+     *
+     * @param value - The new range `[startMonth, endMonth]`, or partial/empty tuples while interacting.
+     */
+    onChange?: (value: DateRangeInput) => void;
+    /**
+     * Whether the month range picker popover is open (controlled).
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the open state of the picker changes.
+     *
+     * @param open - The new open state.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The display format for each bound of the range.
+     * Follows dayjs format tokens.
+     *
+     * @default 'YYYY/MM'
+     */
+    format?: string;
+    /**
+     * Props for the clear button, shown automatically when a complete range is selected.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     */
+    clearButtonProps?: {
+        'aria-label'?: string;
+    };
+    /**
+     * Whether the component is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class name applied to the trigger button.
+     */
+    className?: string;
+    /**
+     * The target DOM node to render the month range picker popover into.
+     */
+    targetDOMNode?: PopoverProps['targetDOMNode'];
+    /**
+     * The minimum selectable month.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     */
+    maxMonth?: Date;
+    /**
+     * Controls which years are initially displayed in the two-panel calendar when there is no value.
+     *
+     * @default 'currentAndNext'
+     */
+    initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.d.ts

@@ -0,0 +1,5 @@
+import { type InternalMonthRangePickerPopoverProps } from './MonthRangePickerPopover.types';
+/**
+ * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
+ */
+export declare function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }: InternalMonthRangePickerPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { Calendar as CalendarIcon } from '@moneyforward/mfui-icons-react';
+import { Popover } from '../../../Popover';
+import { FocusIndicator } from '../../../FocusIndicator';
+import { ClearButton } from '../../../shared';
+import { Typography } from '../../../Typography';
+import { cx } from '../../../../styled-system/css';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { MonthRangePickerPanel } from '../../MonthRangePicker/MonthRangePickerPanel';
+import { useBaseRangePickerContext } from '../../shared/BaseRangePicker/BaseRangePickerProvider';
+import { useFocusTrap } from '../../../utilities/dom/useFocusTrap';
+import { getFocusableNodes } from '../../../utilities/dom/getFocusableNodes';
+/**
+ * Internal popover UI for FilterMonthRangePicker. Must render inside BaseRangePickerProvider.
+ */
+export function InternalMonthRangePickerPopover({ isPickerOpen, togglePicker, handleClear, disabled, className, classes, formattedValue, hasValue, label, clearButtonProps, minMonth, maxMonth, triggerRef, targetDOMNode, dialogId, }) {
+    const { viewingMonth, setViewingMonth, temporaryStart, temporaryEnd, startDate, endDate, setPendingFocusDate } = useBaseRangePickerContext();
+    const { handleOnKeyDown } = useFocusTrap({
+        onPressingTabOnNotFocusableElement: (event) => {
+            const nodes = getFocusableNodes(event.currentTarget);
+            const focusableNodeAfterFocusingNode = nodes.find((element) => 
+            // eslint-disable-next-line no-bitwise
+            element.compareDocumentPosition(event.target) & Node.DOCUMENT_POSITION_PRECEDING);
+            const firstFocusableNode = nodes.at(0);
+            const nextFocusableNode = focusableNodeAfterFocusingNode ?? firstFocusableNode;
+            nextFocusableNode?.focus();
+            event.preventDefault();
+        },
+    });
+    const handlePopoverOpen = useCallback(() => {
+        let dateToFocus;
+        if (temporaryStart) {
+            dateToFocus = temporaryStart;
+        }
+        else if (temporaryEnd) {
+            dateToFocus = temporaryEnd;
+        }
+        else if (startDate) {
+            dateToFocus = startDate;
+        }
+        else if (endDate) {
+            dateToFocus = endDate;
+        }
+        else {
+            dateToFocus = new Date();
+        }
+        const monthToFocus = dayjs(dateToFocus).startOf('month').toDate();
+        setViewingMonth(monthToFocus);
+        setPendingFocusDate(dayjs(monthToFocus).format('YYYY-MM'));
+    }, [temporaryStart, temporaryEnd, startDate, endDate, setViewingMonth, setPendingFocusDate]);
+    return (_jsx(Popover, { open: isPickerOpen, targetDOMNode: targetDOMNode, renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, "data-selected": hasValue, className: cx(classes.wrapper, 'mfui-FilterMonthRangePicker__wrapper'), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, type: "button", disabled: disabled, className: cx(classes.trigger, 'mfui-FilterMonthRangePicker__trigger', className), "data-selected": hasValue, "data-mfui-has-clear-button": hasValue, "aria-controls": dialogId, "aria-expanded": isPickerOpen, "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur, children: [_jsx("span", { className: cx(classes.content, 'mfui-FilterMonthRangePicker__content'), "data-mfui-content": "filter-month-range-picker-display-value", children: hasValue ? (_jsxs(Typography, { variant: "strongBody", children: [_jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: `${label}：` }), _jsx("span", { "data-mfui-content": "filter-month-range-picker-value", children: formattedValue })] })) : (_jsx(Typography, { variant: "controlLabel", children: _jsx("span", { "data-mfui-content": "filter-month-range-picker-label", children: label }) })) }), _jsx("span", { className: cx(classes.calendarIcon, 'mfui-FilterMonthRangePicker__calendarIcon'), children: _jsx(CalendarIcon, { "aria-hidden": true }) })] }) }), hasValue ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-FilterMonthRangePicker__clearButtonWrapper'), children: _jsx(ClearButton, { "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "filter-month-range-picker-clear-button", disabled: disabled, onClick: handleClear }) })) : null] })), renderContent: () => (_jsx("div", { id: dialogId, role: "dialog", "aria-label": label, className: "mfui-FilterMonthRangePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: _jsx(MonthRangePickerPanel, { viewingValue: viewingMonth, setViewingValue: setViewingMonth, value: [temporaryStart, temporaryEnd], minMonth: minMonth, maxMonth: maxMonth }) })), minWidth: "min-content", allowedPlacements: ['bottom-start', 'top-start'], onOpenStateChanged: togglePicker, onOpen: handlePopoverOpen }));
+}

package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.types.d.ts

@@ -0,0 +1,19 @@
+import { type filterMonthRangePickerSlotRecipe } from '../../../../styled-system/recipes';
+import { type FilterMonthRangePickerProps } from '../FilterMonthRangePicker.types';
+export type InternalMonthRangePickerPopoverProps = {
+    isPickerOpen: boolean;
+    togglePicker: () => void;
+    handleClear: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled: boolean;
+    className: string | undefined;
+    classes: ReturnType<typeof filterMonthRangePickerSlotRecipe>;
+    formattedValue: string | undefined;
+    hasValue: boolean;
+    label: string;
+    clearButtonProps: FilterMonthRangePickerProps['clearButtonProps'];
+    minMonth: FilterMonthRangePickerProps['minMonth'];
+    maxMonth: FilterMonthRangePickerProps['maxMonth'];
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    targetDOMNode: FilterMonthRangePickerProps['targetDOMNode'];
+    dialogId: string;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/src/DateTimeSelection/FilterMonthRangePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { FilterMonthRangePicker } from './FilterMonthRangePicker';
+export type { FilterMonthRangePickerProps } from './FilterMonthRangePicker.types';

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

@@ -0,0 +1 @@
+export { FilterMonthRangePicker } from './FilterMonthRangePicker';

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

@@ -51,7 +51,7 @@ export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, start
         // Same-year value + previousAndCurrent: show previous year on the left
         return new Date(startDate.getFullYear() - 1, 0, 1);
     })();
-    return (_jsx(BaseRangePicker, { ...restProps, format: format, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
+    return (_jsx(BaseRangePicker, { ...restProps, format: format, pendingFocusDayjsFormat: "YYYY-MM", initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
             placeholder: '開始月',
             ...startInputProps,
         }, endInputProps: {

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

@@ -1,5 +1,8 @@
 export * from './DatePicker';
 export * from './FilterDatePicker';
+export * from './FilterDateRangePicker';
+export * from './FilterMonthPicker';
+export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';

package/dist/src/DateTimeSelection/index.js

@@ -1,5 +1,8 @@
 export * from './DatePicker';
 export * from './FilterDatePicker';
+export * from './FilterDateRangePicker';
+export * from './FilterMonthPicker';
+export * from './FilterMonthRangePicker';
 export * from './MonthPicker';
 export * from './DateRangePicker';
 export * from './MonthRangePicker';

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.d.ts

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, initialDisplayedMonths, initialViewingDate, pendingFocusDayjsFormat, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,8 +9,8 @@ import { dayjs } from '../../../utilities/date/dayjs';
 /**
  * Internal component that has access to BaseRangePickerContext
  */
-function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
-    const { setPendingFocusDate, temporaryStart, temporaryEnd, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
+function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
+    const { setPendingFocusDate, temporaryStart, temporaryEnd, startDate, endDate, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
     const handlePopoverOpen = useCallback((event) => {
@@ -31,7 +31,7 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         // 3. Selected start date (if exists)
         // 4. Selected end date (if exists and no start date)
         // 5. Current date (today)
-        // 6. First non-disabled date (handled by CalendarGrid automatically)
+        // 6. First non-disabled cell (handled by CalendarGrid / MonthGrid automatically)
         let dateToFocus;
         if (temporaryStart) {
             dateToFocus = temporaryStart;
@@ -39,16 +39,32 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         else if (temporaryEnd) {
             dateToFocus = temporaryEnd;
         }
+        else if (startDate) {
+            dateToFocus = startDate;
+        }
+        else if (endDate) {
+            dateToFocus = endDate;
+        }
         else {
-            // Default to today's date - CalendarGrid will handle finding first non-disabled date if today is disabled
+            // Default to today's date - the grid will focus the first non-disabled cell if needed
             dateToFocus = new Date();
         }
-        // Set the pending focus date so CalendarGrid can focus on it when it renders
-        // Use the format from the context to handle both date and month formats
-        const formattedDate = dayjs(dateToFocus).format(format);
+        // Set the pending focus key so the popover grid can focus the matching cell when it renders.
+        // Must match DateCell `data-mfui-date` (YYYY-MM-DD) or MonthCell `data-mfui-month` (YYYY-MM).
+        const formattedDate = dayjs(dateToFocus).format(pendingFocusDayjsFormat);
         setPendingFocusDate(formattedDate);
         open();
-    }, [startInputRef, endInputRef, temporaryStart, temporaryEnd, setPendingFocusDate, open, format]);
+    }, [
+        startInputRef,
+        endInputRef,
+        temporaryStart,
+        temporaryEnd,
+        startDate,
+        endDate,
+        setPendingFocusDate,
+        open,
+        pendingFocusDayjsFormat,
+    ]);
     return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
@@ -61,12 +77,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', initialDisplayedMonths, initialViewingDate, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, pendingFocusDayjsFormat: pendingFocusDayjsFormat, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.types.d.ts

@@ -307,4 +307,13 @@ export type BaseRangePickerProps = {
      * @internal
      */
     initialViewingDate?: Date;
+    /**
+     * dayjs format for pending grid focus strings (`pendingFocusDate` / `pendingFocusMonth`).
+     * Must match the grid: `YYYY-MM-DD` for day calendars, `YYYY-MM` for month grids.
+     *
+     * @internal
+     *
+     * @default 'YYYY-MM-DD'
+     */
+    pendingFocusDayjsFormat?: 'YYYY-MM-DD' | 'YYYY-MM';
 };

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

@@ -5,6 +5,7 @@ import { flushSync } from 'react-dom';
 import { dayjs } from '../../../../utilities/date/dayjs';
 import { useUpdateEffect } from '../../../../utilities/effect/useUpdateEffect';
 import { useTransformedState } from '../../../../utilities/state/useTransformedState';
+import { parseInputDateSimple } from '../../utilities/dateParsing';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
 // Normalizes a date to the first of the month
@@ -97,7 +98,7 @@ function autoCompletePartialRange(dates) {
     }
     return dates;
 }
-const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, }) => {
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, initialDisplayedMonths = 'currentAndNext', initialViewingDate, pendingFocusDayjsFormat = 'YYYY-MM-DD', }) => {
     const [dates, setDates] = useTransformedState(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
     const [dateStrings, setDateStrings] = useState(() => {
         const [startDate, endDate] = value ?? defaultValue ?? [undefined, undefined];
@@ -176,39 +177,55 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const handleStartDateStringChange = useCallback((value) => {
         setDateStrings([value, endDateString]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = dayjs(value, format, true);
-        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate, format)) {
-            const newDate = parsedDate.toDate();
-            setViewingMonth(newDate);
+        const parsedDate = parseInputDateSimple(value, format);
+        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate, format)) {
+            setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryStart(newDate);
+            setTemporaryStart(parsedDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(parsedDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
             setTemporaryStart(undefined);
             setPendingFocusDate(null);
         }
-    }, [endDateString, format, minDate, maxDate, setViewingMonth, setTemporaryStart, setPendingFocusDate]);
+    }, [
+        endDateString,
+        format,
+        minDate,
+        maxDate,
+        setViewingMonth,
+        setTemporaryStart,
+        setPendingFocusDate,
+        pendingFocusDayjsFormat,
+    ]);
     const handleEndDateStringChange = useCallback((value) => {
         setDateStrings([startDateString, value]);
         // Parse and update both viewing month and temporary selection for immediate visual feedback
-        const parsedDate = dayjs(value, format, true);
-        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate, format)) {
-            const newDate = parsedDate.toDate();
-            setViewingMonth(newDate);
+        const parsedDate = parseInputDateSimple(value, format);
+        if (parsedDate && !isDateOutsideConstraints(parsedDate, minDate, maxDate, format)) {
+            setViewingMonth(parsedDate);
             // Update temporary selection for immediate calendar visual feedback
-            setTemporaryEnd(newDate);
+            setTemporaryEnd(parsedDate);
             // Set pending focus date so when calendar opens, it focuses on this date
-            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+            setPendingFocusDate(dayjs(parsedDate).format(pendingFocusDayjsFormat));
         }
         else if (value === '') {
             // Clear temporary selection if input is empty
             setTemporaryEnd(undefined);
             setPendingFocusDate(null);
         }
-    }, [startDateString, format, minDate, maxDate, setViewingMonth, setTemporaryEnd, setPendingFocusDate]);
+    }, [
+        startDateString,
+        format,
+        minDate,
+        maxDate,
+        setViewingMonth,
+        setTemporaryEnd,
+        setPendingFocusDate,
+        pendingFocusDayjsFormat,
+    ]);
     const handleClear = useCallback(() => {
         // handleChange already calls setDates and setDateStrings, so we don't need to call them again
         handleChange([undefined, undefined]);

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.types.d.ts

@@ -97,4 +97,14 @@ export type BaseRangePickerProviderProps = {
      * @internal
      */
     initialViewingDate?: Date;
+    /**
+     * dayjs format string for `pendingFocusDate` so it matches the focused grid cell's `data-mfui-*` attribute.
+     *
+     * @internal
+     *
+     * @default 'YYYY-MM-DD' — matches {@link DateCell} `data-mfui-date`
+     *
+     * @example 'YYYY-MM' — matches {@link MonthCell} `data-mfui-month` (MonthRangePicker)
+     */
+    pendingFocusDayjsFormat?: 'YYYY-MM-DD' | 'YYYY-MM';
 };

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

@@ -19,7 +19,7 @@ import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputC
  */
 export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, invalid = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', calendarLocale = 'ja', ...props }, ref) => {
     const isTouchDevice = useIsTouchDevice();
-    const { toggle, disableAutoOpen } = useBaseRangePickerContext();
+    const { toggle, disableAutoOpen, isOpen } = useBaseRangePickerContext();
     const { handleInputClick } = useDateRangeTriggerInputClick(disableAutoOpen ?? false, popoverOpenFunction);
     const { onClick: onClickClearButton, 'aria-label': clearAriaLabel } = clearButtonProps;
     const { onClick: onCalendarClick, 'aria-label': calendarAriaLabel } = calendarButtonProps;
@@ -41,14 +41,12 @@ export const BaseRangePickerTrigger = forwardRef(({ enableClearValue = false, in
     const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
     const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
     const classes = baseRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    // Popover open: mark calendar icon active. Use `undefined` when closed — `data-active="false"` is still truthy in CSS.
+    const shouldCalendarIconActive = isOpen ? true : undefined;
     const handleClickClearButton = useCallback((event) => {
         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 ? (
-                // Touch device: hidden inputs + display divs
-                _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 })] })) : (
-                // Desktop: Standard inputs with FocusIndicator
-                _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'), 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/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { dayjs } from '../../../../../utilities/date/dayjs';
 import { useBaseRangePickerContext } from '../../BaseRangePickerProvider';
+import { parseInputDateSimple } from '../../../utilities/dateParsing';
 const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
     ...baseProps,
     value,
@@ -15,12 +16,12 @@ const createInputProps = (baseProps, value, format, onStringChange, onDateChange
         if (event.defaultPrevented)
             return;
         baseProps.onBlur?.(event);
-        const dateValue = dayjs(value, format, true);
-        if (!dateValue.isValid()) {
+        const parsedDate = parseInputDateSimple(value, format);
+        if (!parsedDate) {
             onDateChange(undefined, otherDate);
             return;
         }
-        const currentDate = dateValue.startOf('day').toDate();
+        const currentDate = dayjs(parsedDate).startOf('day').toDate();
         // Check if the date is disabled due to constraints
         if (isDateDisabled?.(currentDate)) {
             // Clear the input if the date violates constraints

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useEffect } from 'react';
+import React, { useLayoutEffect } from 'react';
 import { monthGridSlotRecipe } from '../../../../styled-system/recipes';
 import { cx } from '../../../../styled-system/css';
 /**
@@ -28,8 +28,8 @@ export function MonthGrid({ year, selectedMonth, minMonth, maxMonth, checkDisabl
         const firstTabbableIndex = monthStates.find(({ disabled }) => !disabled)?.month ?? -1;
         return { monthStates, firstTabbableIndex };
     }, [months, year, minMonth, maxMonth, checkDisabledMonth]);
-    // Handle pending focus
-    useEffect(() => {
+    // Handle pending focus before paint so the focused month cell matches keyboard / popover-open flows.
+    useLayoutEffect(() => {
         if (!pendingFocusMonth)
             return;
         const targetCell = document.querySelector(`[data-mfui-month="${pendingFocusMonth}"]`);

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

@@ -37,6 +37,17 @@ export function parseInputDate(inputString, format) {
     if (dayjsResult.isValid()) {
         return { isValid: true, result: dayjsResult.toDate() };
     }
+    // Fall back to single-digit month/day tokens when the format uses two-digit tokens (MM/DD).
+    // For example, "2026/6/6" fails with "YYYY/MM/DD" but succeeds with "YYYY/M/D".
+    // Strict mode is intentional here: it ensures YYYY matches exactly 4 digits, preventing
+    // format-mismatch inputs like "31/12/2023" from accidentally passing via native Date fallback.
+    const yyyymdFormat = format.replaceAll(/\bMM\b/g, 'M').replaceAll(/\bDD\b/g, 'D');
+    if (yyyymdFormat !== format) {
+        const yyyymdResult = dayjs(inputString, yyyymdFormat, true);
+        if (yyyymdResult.isValid()) {
+            return { isValid: true, result: yyyymdResult.toDate() };
+        }
+    }
     // Fall back to YYYYMMDD format (8-digit number without delimiters) if the specified format fails
     // This allows inputs like "20251215" to be parsed even when format is "YYYY-MM-DD"
     if (/^\d{8}$/.test(inputString)) {

package/dist/src/MultilineTextBox/index.d.ts

@@ -1,2 +1,10 @@
-export { MultilineTextBox } from './MultilineTextBox';
-export { MultilineTextBoxProps } from './MultilineTextBox.types';
+/**
+ * MultilineTextBox backward compatibility re-exports.
+ *
+ * MultilineTextBox has been renamed to Textarea.
+ * Please migrate to Textarea. MultilineTextBox will be removed in a future major version (v5.0.0).
+ *
+ * @see Textarea
+ */
+export { Textarea as MultilineTextBox } from '../Textarea';
+export type { TextareaProps as MultilineTextBoxProps } from '../Textarea';

package/dist/src/MultilineTextBox/index.js

@@ -1 +1,9 @@
-export { MultilineTextBox } from './MultilineTextBox';
+/**
+ * MultilineTextBox backward compatibility re-exports.
+ *
+ * MultilineTextBox has been renamed to Textarea.
+ * Please migrate to Textarea. MultilineTextBox will be removed in a future major version (v5.0.0).
+ *
+ * @see Textarea
+ */
+export { Textarea as MultilineTextBox } from '../Textarea';