@moneyforward/mfui-components 2.48.2 → 3.0.0

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/YearSelector/YearSelector.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.YearSelector = YearSelector;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const SelectBox_1 = require("../../../../SelectBox");
-const recipes_1 = require("../../../../../styled-system/recipes");
-const constants_1 = require("../constants");
-const css_1 = require("../../../../../styled-system/css");
-function YearSelector({ value, onChange, targetDOMNode }) {
-    const internalValue = (0, react_1.useMemo)(() => (value ?? new Date()).getFullYear().toString(), [value]);
-    const options = (0, react_1.useMemo)(() => Array.from({ length: constants_1.MAXIMUM_VIEWABLE_YEAR - constants_1.MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => ({
-        value: String(constants_1.MINIMUM_VIEWABLE_YEAR + i),
-        // TODO: Localize
-        label: `${String(constants_1.MINIMUM_VIEWABLE_YEAR + i)}年`,
-    })), []);
-    const handleChange = (0, react_1.useCallback)((value) => {
-        onChange(Number(value));
-    }, [onChange]);
-    const classes = (0, recipes_1.yearSelectorSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)(SelectBox_1.SelectBox, { value: internalValue, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: (0, css_1.cx)(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, onChange: handleChange }));
-}

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/basePickerUtilities/useBasePickerDisplayController.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBasePickerDisplayController = useBasePickerDisplayController;
-const react_1 = require("react");
-const constants_1 = require("../constants");
-const useDisclosure_1 = require("../../../../utilities/state/useDisclosure");
-/**
- * Controller for the display of the BasePicker component.
- *
- * @param options - The options for the controller.
- *
- * @returns The internal open state, and the function to toggle the open state.
- */
-function useBasePickerDisplayController({ open, onOpenStateChanged, textBoxRef }) {
-    const { isOpen: isBasePickerOpen, toggle: toggleBasePicker, close: closeBasePicker, } = (0, useDisclosure_1.useDisclosure)({
-        value: open,
-        onOpen: () => onOpenStateChanged?.(true),
-        onClose: () => onOpenStateChanged?.(false),
-        onToggle: (nextValue) => onOpenStateChanged?.(nextValue),
-    });
-    const onPickerPopoverChange = (0, react_1.useCallback)(() => {
-        closeBasePicker();
-    }, [closeBasePicker]);
-    const onPickerPopoverWrapperKeyDown = (0, react_1.useCallback)((event) => {
-        // Close when pressing the Escape key or ArrowUp key on the month navigator buttons.
-        const isActiveElementPreviousMonthButton = document.activeElement?.getAttribute('aria-label') === constants_1.LABEL_GO_TO_PREV_MONTH;
-        const isActiveElementNextMonthButton = document.activeElement?.getAttribute('aria-label') === constants_1.LABEL_GO_TO_NEXT_MONTH;
-        const pressedArrowUpOnMonthNavigatorButtons = event.key === 'ArrowUp' && (isActiveElementNextMonthButton || isActiveElementPreviousMonthButton);
-        const pressedEscape = event.key === 'Escape';
-        if (pressedArrowUpOnMonthNavigatorButtons || pressedEscape) {
-            closeBasePicker();
-            textBoxRef.current?.focus();
-        }
-    }, [textBoxRef, closeBasePicker]);
-    return {
-        isBasePickerOpen,
-        toggleBasePicker,
-        onPickerPopoverChange,
-        onPickerPopoverWrapperKeyDown,
-    };
-}

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/basePickerUtilities/useBasePickerValueController.js

@@ -1,116 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBasePickerValueController = useBasePickerValueController;
-const react_1 = require("react");
-const useUpdateEffect_1 = require("../../../../utilities/effect/useUpdateEffect");
-const dayjs_1 = require("../../../../utilities/date/dayjs");
-const dateParsing_1 = require("../../utilities/dateParsing");
-// Helper to compare two dates or undefined, using dayjs.isSame with 'day' granularity
-function isSameDateOrBothUndefined(a, b) {
-    if (a === undefined && b === undefined)
-        return true;
-    if (a === undefined || b === undefined)
-        return false;
-    return (0, dayjs_1.dayjs)(a).isSame((0, dayjs_1.dayjs)(b), 'day');
-}
-/**
- * Controller for the value of the BasePicker component.
- *
- * @param options - The options for the controller.
- *
- * @returns The props for the input element and the picker popover.
- */
-function useBasePickerValueController({ value, defaultValue, format, customFormatValue, onChange, onPickerPopoverChange, }) {
-    // The internal value of the picker popover, in Date
-    const [internalValue, setInternalValue] = (0, react_1.useState)(value ?? defaultValue);
-    const parseDate = (0, react_1.useMemo)(() => (inputString) => (0, dateParsing_1.parseInputDate)(inputString, format), [format]);
-    // Helper function to use custom formatting or fallback to dayjs
-    const formatValue = (0, react_1.useMemo)(() => {
-        if (customFormatValue) {
-            return customFormatValue;
-        }
-        return (date) => (0, dayjs_1.dayjs)(date).format(format);
-    }, [customFormatValue, format]);
-    // The displayed value of the input element.
-    const [valueInString, setValueInString] = (0, react_1.useState)(() => (internalValue ? formatValue(internalValue) : ''));
-    // The props for the TextBox component.
-    const inputProps = (0, react_1.useMemo)(() => ({
-        value: valueInString,
-        onChange: (event) => {
-            if (event.defaultPrevented)
-                return;
-            const inputString = event.target.value;
-            // During typing, just store the input string without conversion
-            // This allows users to complete their input without premature conversion
-            setValueInString(inputString);
-            const parseResult = parseDate(inputString);
-            // When the input value is not a valid date, set the value to undefined.
-            if (!parseResult.isValid) {
-                setInternalValue(undefined);
-                return;
-            }
-            // When the input value is a valid date, update the internal value
-            // but don't format the display value yet - let the user continue typing
-            const newValueDate = parseResult.result;
-            if (!newValueDate)
-                return;
-            setInternalValue(newValueDate);
-        },
-        onBlur: (event) => {
-            if (event.defaultPrevented)
-                return;
-            const parseResult = parseDate(valueInString);
-            const previousValue = value;
-            let nextValue;
-            if (!parseResult.isValid) {
-                nextValue = undefined;
-                setInternalValue(undefined);
-                setValueInString('');
-            }
-            else {
-                nextValue = parseResult.result;
-                if (nextValue) {
-                    setInternalValue(nextValue);
-                    // Format and display the parsed date according to the custom format
-                    setValueInString(formatValue(nextValue));
-                }
-            }
-            // Only fire onChange if value actually changed
-            if (!isSameDateOrBothUndefined(previousValue, nextValue)) {
-                onChange?.(nextValue, event);
-            }
-            // Note: onBlur callback is now handled by Popover's smart blur detection
-            // to avoid duplicate calls. The Popover handles all blur scenarios comprehensively.
-        },
-        onClear: (event) => {
-            setInternalValue(undefined);
-            setValueInString('');
-            onChange?.(undefined, event);
-        },
-    }), [formatValue, onChange, valueInString, value, parseDate]);
-    // The props for the popover component.
-    const pickerPopoverProps = (0, react_1.useMemo)(() => ({
-        value: internalValue,
-        onChange: (newValue, event) => {
-            if (event.defaultPrevented)
-                return;
-            const previousValue = value;
-            // Only fire onChange if value actually changed
-            if (!isSameDateOrBothUndefined(previousValue, newValue)) {
-                setInternalValue(newValue);
-                setValueInString(newValue ? formatValue(newValue) : '');
-                onChange?.(newValue, event);
-            }
-            onPickerPopoverChange?.(newValue, event);
-        },
-    }), [internalValue, onChange, formatValue, onPickerPopoverChange, value]);
-    // Update the internal value and the displayed value when the value is changed.
-    (0, useUpdateEffect_1.useUpdateEffect)(() => {
-        setInternalValue(value);
-        setValueInString(value ? formatValue(value) : '');
-    }, [value, formatValue]);
-    return {
-        inputProps,
-        pickerPopoverProps,
-    };
-}

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

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAXIMUM_NAVIGABLE_DATE = exports.MINIMUM_NAVIGABLE_DATE = exports.MAXIMUM_VIEWABLE_YEAR = exports.MINIMUM_VIEWABLE_YEAR = exports.DAY_FULL_NAMES = exports.DAY_ABBREVIATIONS = exports.BASE_PICKER_LABELS = exports.LABEL_TODAY = exports.LABEL_CLOSE_CALENDAR = exports.LABEL_OPEN_CALENDAR = exports.LABEL_GO_TO_NEXT_MONTH = exports.LABEL_GO_TO_PREV_MONTH = void 0;
-exports.getBasePickerLabel = getBasePickerLabel;
-/**
- * Default labels for the DatePicker components with Japanese text
- */
-exports.LABEL_GO_TO_PREV_MONTH = '前の月';
-exports.LABEL_GO_TO_NEXT_MONTH = '次の月';
-exports.LABEL_OPEN_CALENDAR = 'カレンダーを開く';
-exports.LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる';
-exports.LABEL_TODAY = '今日';
-exports.BASE_PICKER_LABELS = {
-    ja: {
-        GO_TO_PREV_MONTH: '前の月',
-        GO_TO_NEXT_MONTH: '次の月',
-        OPEN_CALENDAR: 'カレンダーを開く',
-        CLOSE_CALENDAR: 'カレンダーを閉じる',
-        TODAY: '今日',
-    },
-    en: {
-        GO_TO_PREV_MONTH: 'Previous month',
-        GO_TO_NEXT_MONTH: 'Next month',
-        OPEN_CALENDAR: 'Open calendar',
-        CLOSE_CALENDAR: 'Close calendar',
-        TODAY: 'Today',
-    },
-};
-exports.DAY_ABBREVIATIONS = {
-    ja: ['月', '火', '水', '木', '金', '土', '日'],
-    en: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
-};
-exports.DAY_FULL_NAMES = {
-    ja: ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
-    en: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
-};
-function getBasePickerLabel(key, locale = 'ja') {
-    const safeLocale = locale in exports.BASE_PICKER_LABELS ? locale : 'ja';
-    return exports.BASE_PICKER_LABELS[safeLocale][key];
-}
-/**
- * The minimum year that can be selected in the DatePicker
- */
-exports.MINIMUM_VIEWABLE_YEAR = 1800;
-/**
- * The maximum year that can be selected in the DatePicker
- */
-exports.MAXIMUM_VIEWABLE_YEAR = 2099;
-/**
- * The minimum date that can be navigated to. The previous month button will be disabled when viewing January of this year.
- */
-exports.MINIMUM_NAVIGABLE_DATE = new Date(exports.MINIMUM_VIEWABLE_YEAR, 0, 1); // January 1st of minimum year
-/**
- * The maximum date that can be navigated to. The next month button will be disabled when viewing December of this year.
- */
-exports.MAXIMUM_NAVIGABLE_DATE = new Date(exports.MAXIMUM_VIEWABLE_YEAR, 11, 31); // December 31st of maximum year

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasePicker = void 0;
-var BasePicker_1 = require("./BasePicker");
-Object.defineProperty(exports, "BasePicker", { enumerable: true, get: function () { return BasePicker_1.BasePicker; } });

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

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePicker = BaseRangePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Popover_1 = require("../../../Popover");
-const BaseRangePickerProvider_1 = require("./BaseRangePickerProvider");
-const BaseRangePickerPopover_1 = require("./BaseRangePickerPopover");
-const BaseRangePickerTrigger_1 = require("./BaseRangePickerTrigger");
-const useDisclosure_1 = require("../../../utilities/state/useDisclosure");
-const dayjs_1 = require("../../../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, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
-    const { setPendingFocusDate, temporaryStart, temporaryEnd, viewingMonth, setViewingMonth } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    // Custom onOpen handler to prevent auto-focus when clicking on input elements
-    // and implement smart focus management for calendar dates
-    const handlePopoverOpen = (0, react_1.useCallback)((event) => {
-        // Check if user clicked on one of the inputs
-        const isClickOnStartInput = event?.target === startInputRef.current && event.type === 'click';
-        const isClickOnEndInput = event?.target === endInputRef.current && event.type === 'click';
-        // If user clicked on input, prevent default focus behavior and maintain focus on input
-        if (isClickOnStartInput || isClickOnEndInput) {
-            event.preventDefault();
-            open();
-            return;
-        }
-        // For all other cases (calendar button, keyboard navigation, etc.),
-        // implement smart focus management for the calendar
-        // Determine which date to focus on with priority:
-        // 1. Temporary start date (if exists - from typed input)
-        // 2. Temporary end date (if exists and no start date - from typed input)
-        // 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)
-        let dateToFocus;
-        if (temporaryStart) {
-            dateToFocus = temporaryStart;
-        }
-        else if (temporaryEnd) {
-            dateToFocus = temporaryEnd;
-        }
-        else {
-            // Default to today's date - CalendarGrid will handle finding first non-disabled date if today is disabled
-            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 = (0, dayjs_1.dayjs)(dateToFocus).format(format);
-        setPendingFocusDate(formattedDate);
-        open();
-    }, [startInputRef, endInputRef, temporaryStart, temporaryEnd, setPendingFocusDate, open, format]);
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => ((0, jsx_runtime_1.jsx)(BaseRangePickerTrigger_1.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,
-            value: [temporaryStart, temporaryEnd],
-        }), targetDOMNode: targetDOMNode, contentProps: {
-            className: 'mfui-BaseRangePicker__root',
-        }, enableAutoFocusOnPopover: false, enableAutoFocusOnTrigger: false, enableAutoUnmount: enableAutoUnmount, onBlur: onBlur, onOpen: handlePopoverOpen, onClose: close, onOpenStateChanged: onOpenStateChanged }));
-}
-/**
- * BaseRangePicker component
- * A generic component for selecting a range of dates with configurable format
- */
-function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', }) {
-    const { isOpen, open, close } = (0, useDisclosure_1.useDisclosure)({ value: false });
-    const startInputRef = (0, react_1.useRef)(null);
-    const endInputRef = (0, react_1.useRef)(null);
-    // Default renderPopoverContent implementation for backward compatibility
-    const defaultRenderPopoverContent = (0, react_1.useCallback)(() => (0, jsx_runtime_1.jsx)(BaseRangePickerPopover_1.BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
-    const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return ((0, jsx_runtime_1.jsx)(BaseRangePickerProvider_1.BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, onChange: onChange, children: (0, jsx_runtime_1.jsx)(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
-}

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,46 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePickerCalendar = BaseRangePickerCalendar;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const recipes_1 = require("../../../../../../styled-system/recipes");
-const BaseRangePickerDateCell_1 = require("./BaseRangePickerDateCell");
-const BaseRangePickerProvider_1 = require("../../BaseRangePickerProvider");
-const css_1 = require("../../../../../../styled-system/css");
-const CalendarGrid_1 = require("../../../CalendarGrid");
-/**
- * Internal component: BaseRangePickerCalendar
- * Combines header (month label only) and CalendarGrid for a single month
- */
-function BaseRangePickerCalendar({ viewingMonth, handleKeyboardNavigation, }) {
-    const classNames = (0, recipes_1.dateRangePickerPopoverSlotRecipe)();
-    const { handleDateClick, handlePreview, clearPreview, isInRange, isRangeStart, isRangeEnd, pendingFocusDate, setPendingFocusDate, temporaryStart, temporaryEnd, isDateDisabled, } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    // Internal renderDateCell logic - optimized with useCallback and memoized calculations
-    const renderDateCell = (0, react_1.useCallback)((dateItem) => {
-        const { date, ...rest } = dateItem;
-        const disabled = isDateDisabled(date);
-        // Memoize range calculations to avoid duplicate calls
-        const isStart = isRangeStart(date);
-        const isEnd = isRangeEnd(date);
-        const selected = isStart || isEnd;
-        const inRange = isInRange(date);
-        // Memoize event handlers
-        const handleClick = () => {
-            if (!disabled) {
-                handleDateClick(date);
-            }
-        };
-        const handleMouseEnter = () => {
-            if (!disabled) {
-                handlePreview(date);
-            }
-        };
-        const handleFocus = () => {
-            if (!disabled) {
-                handlePreview(date);
-            }
-        };
-        return ((0, jsx_runtime_1.jsx)(BaseRangePickerDateCell_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-BaseRangePickerCalendar__root'), children: (0, jsx_runtime_1.jsx)(CalendarGrid_1.CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart || temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
-}

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

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,48 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePickerDateCell = BaseRangePickerDateCell;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dayjs_1 = __importDefault(require("dayjs"));
-const constants_1 = require("./constants");
-const DateCell_1 = require("../../../DateCell");
-/**
- * BaseRangePicker-specific DateCell component with enhanced accessibility
- * for Japanese users. Provides configurable labels and range-specific context.
- */
-function BaseRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }) {
-    const accessibleLabel = (0, react_1.useMemo)(() => {
-        const today = new Date();
-        const isToday = date.getFullYear() === today.getFullYear() &&
-            date.getMonth() === today.getMonth() &&
-            date.getDate() === today.getDate();
-        // Create a comprehensive accessible label
-        const dateText = (0, dayjs_1.default)(date).format('D MMMM YYYY');
-        const statusParts = [];
-        if (isToday) {
-            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.TODAY);
-        }
-        if (disabled) {
-            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
-        }
-        else if (selected) {
-            if (isRangeStart) {
-                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.RANGE_START);
-            }
-            else if (isRangeEnd) {
-                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.RANGE_END);
-            }
-            else {
-                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.SELECTED);
-            }
-        }
-        else if (inRange) {
-            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
-        }
-        return statusParts.length > 0 ? `${dateText}, ${statusParts.join(', ')}` : dateText;
-    }, [date, selected, inRange, disabled, isRangeStart, isRangeEnd]);
-    return ((0, jsx_runtime_1.jsx)(DateCell_1.DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false' }));
-}

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

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATE_RANGE_PICKER_A11Y_LABELS = void 0;
-/**
- * Default Japanese accessibility labels for BaseRangePicker
- * These constants provide consistent Japanese text for screen readers.
- */
-exports.DATE_RANGE_PICKER_A11Y_LABELS = {
-    /** Label for today's date */
-    TODAY: '今日',
-    /** Label for selected dates */
-    SELECTED: '選択済み',
-    /** Label for dates in the selected range */
-    IN_RANGE: '選択範囲内',
-    /** Label for unavailable/disabled dates */
-    UNAVAILABLE: '選択不可',
-    /** Label for range start dates */
-    RANGE_START: '開始日',
-    /** Label for range end dates */
-    RANGE_END: '終了日',
-};

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

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATE_RANGE_PICKER_A11Y_LABELS = exports.BaseRangePickerDateCell = exports.BaseRangePickerCalendar = void 0;
-var BaseRangePickerCalendar_1 = require("./BaseRangePickerCalendar");
-Object.defineProperty(exports, "BaseRangePickerCalendar", { enumerable: true, get: function () { return BaseRangePickerCalendar_1.BaseRangePickerCalendar; } });
-var BaseRangePickerDateCell_1 = require("./BaseRangePickerDateCell");
-Object.defineProperty(exports, "BaseRangePickerDateCell", { enumerable: true, get: function () { return BaseRangePickerDateCell_1.BaseRangePickerDateCell; } });
-var constants_1 = require("./constants");
-Object.defineProperty(exports, "DATE_RANGE_PICKER_A11Y_LABELS", { enumerable: true, get: function () { return constants_1.DATE_RANGE_PICKER_A11Y_LABELS; } });

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerFooter/BaseRangePickerFooter.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePickerFooter = BaseRangePickerFooter;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button_1 = require("../../../../../Button");
-const BaseRangePickerProvider_1 = require("../../BaseRangePickerProvider");
-const recipes_1 = require("../../../../../../styled-system/recipes");
-const constants_1 = require("../constants");
-const css_1 = require("../../../../../../styled-system/css");
-function BaseRangePickerFooter({ calendarLocale = 'ja', }) {
-    const classNames = (0, recipes_1.dateRangePickerPopoverSlotRecipe)();
-    const { temporaryStart, temporaryEnd, handleApply, handleCancel } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.footer, 'mfui-BaseRangePickerFooter__footer'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.footerRight, 'mfui-BaseRangePickerFooter__footerRight'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onClick: handleCancel, children: (0, constants_1.getBaseRangePickerPopoverLabel)('CANCEL', calendarLocale) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { priority: "primary", size: "small", disabled: !temporaryStart || !temporaryEnd, onClick: handleApply, children: (0, constants_1.getBaseRangePickerPopoverLabel)('APPLY', calendarLocale) })] }) }));
-}

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerFooter/index.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePickerFooter = void 0;
-var BaseRangePickerFooter_1 = require("./BaseRangePickerFooter");
-Object.defineProperty(exports, "BaseRangePickerFooter", { enumerable: true, get: function () { return BaseRangePickerFooter_1.BaseRangePickerFooter; } });

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

@@ -1,138 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseRangePickerPopover = BaseRangePickerPopover;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const BaseRangePickerProvider_1 = require("../BaseRangePickerProvider");
-const css_1 = require("../../../../../styled-system/css");
-const recipes_1 = require("../../../../../styled-system/recipes");
-const BaseRangePickerFooter_1 = require("./BaseRangePickerFooter");
-const BaseRangePickerCalendar_1 = require("./BaseRangePickerCalendar");
-const dayjs_1 = require("../../../../utilities/date/dayjs");
-const IconButton_1 = require("../../../../IconButton");
-const Typography_1 = require("../../../../Typography");
-const useFocusTrap_1 = require("../../../../utilities/dom/useFocusTrap");
-const getFocusableNodes_1 = require("../../../../utilities/dom/getFocusableNodes");
-const constants_1 = require("./constants");
-// Utility function to add months to a date
-const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
-/**
- * Popover component for BaseRangePicker.
- *
- * Renders two consecutive months and a footer for date range selection.
- * All selection and preview state is managed via BaseRangePickerProvider context.
- *
- * @internal
- *
- * @param wrapperProps - Optional HTML div attributes to apply to the root element (e.g., className, data attributes).
- *
- * @remarks
- * - Accessibility is handled by subcomponents (calendars and footer).
- * - This component should not be used outside a BaseRangePickerProvider.
- *
- * @example
- * <BaseRangePickerProvider>
- *   <BaseRangePickerPopover wrapperProps={{ className: 'custom-class' }} />
- * </BaseRangePickerProvider>
- */
-function BaseRangePickerPopover({ wrapperProps, calendarLocale, }) {
-    const { viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled, minDate, maxDate } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    const rightViewingMonth = (0, react_1.useMemo)(() => addMonths(viewingMonth, 1), [viewingMonth]);
-    // Check if navigation buttons should be disabled based on constraints
-    const isPreviousMonthDisabled = (0, react_1.useCallback)(() => {
-        if (!minDate)
-            return false;
-        // After previous navigation, the new right panel would be the current left panel (viewingMonth)
-        // Disable if the new right panel has no selectable dates (ends before minDate)
-        const newRightPanel = viewingMonth;
-        const lastDayOfNewRightPanel = new Date(newRightPanel.getFullYear(), newRightPanel.getMonth() + 1, 0);
-        return (0, dayjs_1.dayjs)(lastDayOfNewRightPanel).isBefore((0, dayjs_1.dayjs)(minDate), 'day');
-    }, [minDate, viewingMonth]);
-    const isNextMonthDisabled = (0, react_1.useCallback)(() => {
-        if (!maxDate)
-            return false;
-        // After next navigation, the new left panel would be the current right panel (viewingMonth + 1)
-        // Only disable if the new left panel would have no selectable dates
-        const newLeftPanel = rightViewingMonth;
-        const firstDayOfNewLeftPanel = new Date(newLeftPanel.getFullYear(), newLeftPanel.getMonth(), 1);
-        // Check if the new left panel has any selectable dates (first day <= maxDate)
-        const hasSelectableDatesInNewLeftPanel = !(0, dayjs_1.dayjs)(firstDayOfNewLeftPanel).isAfter((0, dayjs_1.dayjs)(maxDate), 'day');
-        // Allow navigation if the new left panel contains any selectable dates
-        return !hasSelectableDatesInNewLeftPanel;
-    }, [maxDate, rightViewingMonth]);
-    // Cross-Panel Keyboard Navigation
-    const handleKeyboardNavigation = (0, react_1.useCallback)((event) => {
-        const { key, currentTarget } = event;
-        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-        if (!allowedKeys.includes(key)) {
-            return;
-        }
-        const currentDate = currentTarget.dataset['mfuiDate'];
-        if (!currentDate)
-            return;
-        const currentDayjs = (0, dayjs_1.dayjs)(currentDate);
-        // Prevent screen scrolling when changing focus
-        event.preventDefault();
-        // Handle date navigation
-        let targetDate = currentDayjs;
-        switch (key) {
-            case 'ArrowLeft':
-                targetDate = currentDayjs.subtract(1, 'day');
-                break;
-            case 'ArrowRight':
-                targetDate = currentDayjs.add(1, 'day');
-                break;
-            case 'ArrowUp':
-                targetDate = currentDayjs.subtract(7, 'day');
-                break;
-            case 'ArrowDown':
-                targetDate = currentDayjs.add(7, 'day');
-                break;
-        }
-        // Check if target date would be disabled due to constraints
-        if (isDateDisabled(targetDate.toDate())) {
-            return; // Don't navigate to disabled dates
-        }
-        // Calculate left and right panel months
-        const leftPanelMonth = (0, dayjs_1.dayjs)(viewingMonth).format('YYYY-MM');
-        const rightPanelMonth = (0, dayjs_1.dayjs)(viewingMonth).add(1, 'month').format('YYYY-MM');
-        const targetMonth = targetDate.format('YYYY-MM');
-        // Check if target date is in one of the visible panels
-        if (targetMonth === leftPanelMonth || targetMonth === rightPanelMonth) {
-            // Target date is in a visible panel, focus it directly
-            const targetCell = document.querySelector(`[data-mfui-date="${targetDate.format('YYYY-MM-DD')}"]`);
-            if (targetCell && !targetCell.disabled) {
-                targetCell.focus();
-            }
-        }
-        else {
-            // Target date is not in visible panels, update viewing month and set pending focus
-            setViewingMonth(targetDate.toDate());
-            setPendingFocusDate(targetDate.format('YYYY-MM-DD'));
-        }
-    }, [viewingMonth, setViewingMonth, setPendingFocusDate, isDateDisabled]);
-    // Focus trap for popover
-    const { handleOnKeyDown } = (0, useFocusTrap_1.useFocusTrap)({
-        onPressingTabOnNotFocusableElement: (event) => {
-            const nodes = (0, getFocusableNodes_1.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 classNames = (0, recipes_1.dateRangePickerPopoverSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, className: (0, css_1.cx)(classNames.root, 'mfui-BaseRangePickerPopover__root', wrapperProps?.className), onKeyDown: handleOnKeyDown, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.navigation, 'mfui-BaseRangePickerPopover__navigation'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.navigationColumn, 'mfui-BaseRangePickerPopover__navigationColumn'), children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": (0, constants_1.getBaseRangePickerPopoverLabel)('GO_TO_PREV_MONTH', calendarLocale), disabled: isPreviousMonthDisabled(), onClick: () => {
-                                    if (!isPreviousMonthDisabled()) {
-                                        setViewingMonth(addMonths(viewingMonth, -1));
-                                    }
-                                }, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "contentHeading", children: (0, dayjs_1.dayjs)(viewingMonth).format((0, constants_1.getCalendarMonthLabelFormat)(calendarLocale)) }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.blankIconButton, 'mfui-BaseRangePickerPopover__blankIconButton') })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.navigationColumn, 'mfui-BaseRangePickerPopover__navigationColumn'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.blankIconButton, 'mfui-BaseRangePickerPopover__blankIconButton') }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "contentHeading", children: (0, dayjs_1.dayjs)(rightViewingMonth).format((0, constants_1.getCalendarMonthLabelFormat)(calendarLocale)) }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": (0, constants_1.getBaseRangePickerPopoverLabel)('GO_TO_NEXT_MONTH', calendarLocale), disabled: isNextMonthDisabled(), onClick: () => {
-                                    if (!isNextMonthDisabled()) {
-                                        setViewingMonth(addMonths(viewingMonth, 1));
-                                    }
-                                }, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.calendars, 'mfui-BaseRangePickerPopover__calendars'), children: [(0, jsx_runtime_1.jsx)(BaseRangePickerCalendar_1.BaseRangePickerCalendar, { viewingMonth: viewingMonth, handleKeyboardNavigation: handleKeyboardNavigation }), (0, jsx_runtime_1.jsx)(BaseRangePickerCalendar_1.BaseRangePickerCalendar, { viewingMonth: rightViewingMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }), (0, jsx_runtime_1.jsx)(BaseRangePickerFooter_1.BaseRangePickerFooter, { calendarLocale: calendarLocale })] }));
-}

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerPopover.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/Popover.types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });