@moneyforward/mfui-components 2.48.2 → 3.1.0

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LOCALE = exports.SEPARATOR_CONTENT = void 0;
-exports.SEPARATOR_CONTENT = '〜';
-exports.LOCALE = {
-    CLEAR_BUTTON_LABEL: '値をクリアする',
-    CALENDAR_BUTTON_LABEL: 'カレンダーを開く',
-    START_DATE_PLACEHOLDER: '開始日',
-    END_DATE_PLACEHOLDER: '終了日',
-};

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/hooks/useDateRangeTriggerInputClick.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDateRangeTriggerInputClick = useDateRangeTriggerInputClick;
-const react_1 = require("react");
-const DateRangePickerProvider_1 = require("../../DateRangePickerProvider");
-/**
- * Hook to handle input click actions for DateRangePickerTrigger.
- * Manages popover open/close based on which input is clicked and tracks the last clicked input.
- *
- * @param disableAutoOpen - Whether the input will not open the popover.
- *
- * @param popoverOpenFunction - Function to open the popover with event parameter.
- *
- * @returns
- *   handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void
- */
-function useDateRangeTriggerInputClick(disableAutoOpen, popoverOpenFunction) {
-    const lastInputRef = (0, react_1.useRef)(null);
-    const { isOpen, open, close } = (0, DateRangePickerProvider_1.useDateRangePickerContext)();
-    /**
-     * Returns an onClick handler for the given input type.
-     *
-     * @param inputType - 'start' or 'end'
-     *
-     * @param userOnClick - Optional user-provided onClick handler
-     *
-     * @returns onClick handler for the input
-     */
-    const handleInputClick = (0, react_1.useCallback)((inputType, userOnClick) => (event) => {
-        if (disableAutoOpen) {
-            userOnClick?.(event);
-            return;
-        }
-        if (!isOpen) {
-            // Use popoverOpenFunction if available, otherwise fall back to context open
-            if (popoverOpenFunction) {
-                popoverOpenFunction(event);
-            }
-            else {
-                open();
-            }
-            lastInputRef.current = inputType;
-        }
-        else if (lastInputRef.current === inputType) {
-            close();
-            lastInputRef.current = null;
-        }
-        else {
-            lastInputRef.current = inputType;
-        }
-        userOnClick?.(event);
-    }, [isOpen, open, close, disableAutoOpen, popoverOpenFunction]);
-    return { handleInputClick };
-}

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDateRangeTriggerValueController = useDateRangeTriggerValueController;
-const react_1 = require("react");
-const dayjs_1 = require("../../../../utilities/date/dayjs");
-const DateRangePickerProvider_1 = require("../../DateRangePickerProvider");
-const createInputProps = (baseProps, value, format, onStringChange, onDateChange, otherDate, isDateDisabled) => ({
-    ...baseProps,
-    value,
-    onChange: (event) => {
-        if (event.defaultPrevented)
-            return;
-        const inputString = event.target.value;
-        baseProps.onChange?.(event);
-        onStringChange(inputString);
-    },
-    onBlur: (event) => {
-        if (event.defaultPrevented)
-            return;
-        baseProps.onBlur?.(event);
-        const dateValue = (0, dayjs_1.dayjs)(value, format, true);
-        if (!dateValue.isValid()) {
-            onDateChange(undefined, otherDate);
-            return;
-        }
-        const currentDate = dateValue.startOf('day').toDate();
-        // Check if the date is disabled due to constraints
-        if (isDateDisabled?.(currentDate)) {
-            // Clear the input if the date violates constraints
-            onDateChange(undefined, otherDate);
-            return;
-        }
-        onDateChange(currentDate, otherDate);
-    },
-});
-/**
- * Controller for the value of the DateRangePicker component.
- * Automatically ensures dates are in chronological order by swapping them if needed on blur.
- *
- * @param options - The options for the controller.
- *
- * @returns The props for the input elements.
- */
-function useDateRangeTriggerValueController({ startInputProps = {}, endInputProps = {}, format, }) {
-    const { startDate, endDate, startDateString, endDateString, onStartDateChange, onEndDateChange, onStartDateStringChange, onEndDateStringChange, handleClear, isDateDisabled, } = (0, DateRangePickerProvider_1.useDateRangePickerContext)();
-    const enhancedStartInputProps = (0, react_1.useMemo)(() => createInputProps(startInputProps, startDateString, format, onStartDateStringChange, onStartDateChange, endDate, isDateDisabled), [startInputProps, startDateString, format, onStartDateStringChange, onStartDateChange, endDate, isDateDisabled]);
-    const enhancedEndInputProps = (0, react_1.useMemo)(() => createInputProps(endInputProps, endDateString, format, onEndDateStringChange, onEndDateChange, startDate, isDateDisabled), [endInputProps, endDateString, format, onEndDateStringChange, onEndDateChange, startDate, isDateDisabled]);
-    return {
-        startInputProps: enhancedStartInputProps,
-        endInputProps: enhancedEndInputProps,
-        handleClear,
-        startDate,
-        endDate,
-    };
-}

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

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

package/dist/cjs/src/DateTimeSelection/DateRangePicker/DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility.js

@@ -1,75 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDateRangePickerTriggerTestUtility = createDateRangePickerTriggerTestUtility;
-const react_1 = require("@testing-library/react");
-const constants_1 = require("../constants");
-function createDateRangePickerTriggerTestUtility({ user }) {
-    // Element Queries
-    function getStartInput() {
-        return react_1.screen.getByPlaceholderText(constants_1.LOCALE.START_DATE_PLACEHOLDER);
-    }
-    function getEndInput() {
-        return react_1.screen.getByPlaceholderText(constants_1.LOCALE.END_DATE_PLACEHOLDER);
-    }
-    function getClearButton() {
-        return react_1.screen.queryByRole('button', { name: constants_1.LOCALE.CLEAR_BUTTON_LABEL });
-    }
-    function getCalendarButton() {
-        return react_1.screen.getByRole('button', { name: constants_1.LOCALE.CALENDAR_BUTTON_LABEL });
-    }
-    // Value Queries
-    function getStartValue() {
-        try {
-            return getStartInput().getAttribute('value');
-        }
-        catch {
-            return null;
-        }
-    }
-    function getEndValue() {
-        try {
-            return getEndInput().getAttribute('value');
-        }
-        catch {
-            return null;
-        }
-    }
-    function isClearButtonVisible() {
-        return getClearButton() !== null;
-    }
-    // Actions
-    async function setStartDate(date) {
-        const input = getStartInput();
-        await user.clear(input);
-        await user.type(input, date);
-        await user.tab(); // Trigger blur
-    }
-    async function setEndDate(date) {
-        const input = getEndInput();
-        await user.clear(input);
-        await user.type(input, date);
-        await user.tab(); // Trigger blur
-    }
-    async function clearValues() {
-        const clearButton = getClearButton();
-        if (clearButton) {
-            await user.click(clearButton);
-        }
-    }
-    async function openCalendar() {
-        await user.click(getCalendarButton());
-    }
-    return {
-        getStartInput,
-        getEndInput,
-        getClearButton,
-        getCalendarButton,
-        getStartValue,
-        getEndValue,
-        isClearButtonVisible,
-        setStartDate,
-        setEndDate,
-        clearValues,
-        openCalendar,
-    };
-}

package/dist/cjs/src/DateTimeSelection/DateRangePicker/index.js

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

package/dist/cjs/src/DateTimeSelection/DateRangePicker/utilities/createDateRangePickerTestUtility.js

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createDateRangePickerTestUtility = createDateRangePickerTestUtility;
-const createDateRangePickerPopoverTestUtility_1 = require("../DateRangePickerPopover/utilities/createDateRangePickerPopoverTestUtility");
-const createDateRangePickerTriggerTestUtility_1 = require("../DateRangePickerTrigger/utilities/createDateRangePickerTriggerTestUtility");
-function createDateRangePickerTestUtility({ user }) {
-    const triggerUtils = (0, createDateRangePickerTriggerTestUtility_1.createDateRangePickerTriggerTestUtility)({ user });
-    const popoverUtils = (0, createDateRangePickerPopoverTestUtility_1.createDateRangePickerPopoverTestUtility)({ user });
-    function getPopover() {
-        return document.querySelector('[data-mfui-content="popover-portal-content"]');
-    }
-    return {
-        // Trigger utilities
-        ...triggerUtils,
-        // Popover utilities
-        ...popoverUtils,
-        // Additional utilities
-        getPopover,
-    };
-}

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

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthPicker = MonthPicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * MonthPicker component
- *
- * This is a wrapper around BasePicker, setting default format to 'YYYY/MM' and using MonthGrid for month selection.
- * All logic and props are inherited from BasePicker, except for the popover content and format.
- * See BasePicker for implementation details.
- */
-const BasePicker_1 = require("../shared/BasePicker");
-const CalendarLocaleContext_1 = require("../shared/CalendarLocale/CalendarLocaleContext");
-const MonthPickerPanel_1 = require("./MonthPickerPanel/MonthPickerPanel");
-/**
- * MonthPicker component for selecting months.
- * Extends BasePicker with month-specific functionality.
- *
- * @param props - MonthPicker props including minMonth and maxMonth constraints
- */
-function MonthPicker({ format = 'YYYY/MM', minMonth, maxMonth, checkDisabledMonth, calendarLocale = 'ja', ...restProps }) {
-    return ((0, jsx_runtime_1.jsx)(BasePicker_1.BasePicker, { ...restProps, format: format, baseFormat: "YYYY-MM", calendarLocale: calendarLocale, renderPopoverContent: ({ viewingValue, setViewingValue, value, onChange }) => ((0, jsx_runtime_1.jsx)(CalendarLocaleContext_1.CalendarLocaleProvider, { value: calendarLocale, children: (0, jsx_runtime_1.jsx)(MonthPickerPanel_1.MonthPickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange }) })) }));
-}

package/dist/cjs/src/DateTimeSelection/MonthPicker/MonthPicker.types.js

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

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthPickerMonthCell = MonthPickerMonthCell;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const MonthCell_1 = require("../../../shared/MonthCell");
-const CalendarLocaleContext_1 = require("../../../shared/CalendarLocale/CalendarLocaleContext");
-const useMonthPickerKeyboardNavigation_1 = require("../../utilities/useMonthPickerKeyboardNavigation");
-// English month abbreviations wrapped in square brackets to escape them in dayjs format strings
-const ENGLISH_MONTH_ABBREVIATIONS = [
-    '[Jan]',
-    '[Feb]',
-    '[Mar]',
-    '[Apr]',
-    '[May]',
-    '[Jun]',
-    '[Jul]',
-    '[Aug]',
-    '[Sep]',
-    '[Oct]',
-    '[Nov]',
-    '[Dec]',
-];
-/**
- * MonthPickerMonthCell is a wrapper around the shared MonthCell component.
- * It handles month selection and integrates with the MonthPicker context.
- */
-function MonthPickerMonthCell({ onKeyDown, minMonth, maxMonth, checkDisabledMonth, date, ...rest }) {
-    const locale = (0, CalendarLocaleContext_1.useCalendarLocale)();
-    // Generate month format string based on locale
-    const monthFormat = (0, react_1.useMemo)(() => {
-        const monthIndex = date.getMonth();
-        if (locale === 'en') {
-            // Return English month abbreviation escaped for dayjs
-            return ENGLISH_MONTH_ABBREVIATIONS[monthIndex];
-        }
-        // Japanese format: "1月", "2月", etc. (using dayjs format)
-        return 'M月';
-    }, [locale, date]);
-    const handleKeyDown = (0, useMonthPickerKeyboardNavigation_1.useMonthPickerKeyboardNavigation)(onKeyDown, minMonth, maxMonth, checkDisabledMonth);
-    return (0, jsx_runtime_1.jsx)(MonthCell_1.MonthCell, { ...rest, date: date, monthFormat: monthFormat, onKeyDown: handleKeyDown });
-}

package/dist/cjs/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/MonthCell.types.js

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

package/dist/cjs/src/DateTimeSelection/MonthPicker/MonthPickerPanel/MonthCell/index.js

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

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthPickerMonthGrid = MonthPickerMonthGrid;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const MonthGrid_1 = require("../../shared/MonthGrid");
-const MonthCell_1 = require("./MonthCell");
-/**
- * MonthPickerMonthGrid integrates MonthGrid with MonthPicker props.
- * It renders a 4x3 grid of months for the current viewing year, using props-driven selection and limits.
- *
- * @param props - Props including viewingValue, value, onChange, minMonth, and maxMonth
- *
- * @example
- * <MonthPickerMonthGrid
- *   viewingValue={viewingValue}
- *   value={value}
- *   onChange={onChange}
- *   minMonth={minMonth}
- *   maxMonth={maxMonth}
- * />
- */
-function MonthPickerMonthGrid({ viewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, }) {
-    const renderMonthCellWithConstraints = (props) => ((0, jsx_runtime_1.jsx)(MonthCell_1.MonthPickerMonthCell, { ...props, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth }));
-    return ((0, jsx_runtime_1.jsx)(MonthGrid_1.MonthGrid, { year: viewingValue.getFullYear(), selectedMonth: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, renderMonthCell: renderMonthCellWithConstraints, onMonthSelect: onChange }));
-}

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

@@ -1,101 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthPickerPanel = MonthPickerPanel;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const MonthGrid_1 = require("./MonthGrid");
-const shared_1 = require("../../shared");
-const IconButton_1 = require("../../../IconButton");
-const constants_1 = require("../constants");
-const recipes_1 = require("../../../../styled-system/recipes");
-const css_1 = require("../../../../styled-system/css");
-const BasePickerProvider_1 = require("../../shared/BasePicker/BasePickerProvider");
-const CalendarLocaleContext_1 = require("../../shared/CalendarLocale/CalendarLocaleContext");
-const dayjs_1 = require("../../../utilities/date/dayjs");
-/**
- * MonthPickerPanel displays year navigation and a month grid for month selection.
- * Uses props for all state and handlers. Layout is fixed per PRD.
- *
- * @param props - Props including viewingValue, setViewingValue, value, onChange, minMonth, and maxMonth
- *
- * @example
- * <MonthPickerPanel
- *   viewingValue={viewingValue}
- *   setViewingValue={setViewingValue}
- *   value={value}
- *   onChange={onChange}
- *   minMonth={minMonth}
- *   maxMonth={maxMonth}
- * />
- */
-function MonthPickerPanel({ viewingValue, setViewingValue, value, onChange, minMonth, maxMonth, checkDisabledMonth, className, ...props }) {
-    const { pendingFocusDate, setPendingFocusDate, baseFormat } = (0, BasePickerProvider_1.useBasePickerContext)();
-    const locale = (0, CalendarLocaleContext_1.useCalendarLocale)();
-    const year = viewingValue.getFullYear();
-    // Calculate if year navigation should be disabled based on min/max constraints
-    const { isPreviousYearDisabled, isNextYearDisabled } = (0, react_1.useMemo)(() => {
-        const baseMinYearDisabled = year <= constants_1.MINIMUM_VIEWABLE_YEAR;
-        const baseMaxYearDisabled = year >= constants_1.MAXIMUM_VIEWABLE_YEAR;
-        // Check if previous year would have any valid months
-        let minConstraintPreviousDisabled = false;
-        if (minMonth) {
-            const minYear = minMonth.getFullYear();
-            const previousYear = year - 1;
-            // Previous year is disabled if it's before the minMonth year
-            // (meaning ALL months in that year are before minMonth)
-            minConstraintPreviousDisabled = previousYear < minYear;
-        }
-        // Check if next year would have any valid months
-        let maxConstraintNextDisabled = false;
-        if (maxMonth) {
-            const maxYear = maxMonth.getFullYear();
-            const nextYear = year + 1;
-            // Next year is disabled if it's after the maxMonth year
-            // (meaning ALL months in that year are after maxMonth)
-            maxConstraintNextDisabled = nextYear > maxYear;
-        }
-        return {
-            isPreviousYearDisabled: baseMinYearDisabled || minConstraintPreviousDisabled,
-            isNextYearDisabled: baseMaxYearDisabled || maxConstraintNextDisabled,
-        };
-    }, [year, minMonth, maxMonth]);
-    const handlePreviousYear = (0, react_1.useCallback)(() => {
-        setViewingValue(new Date(year - 1, 0, 1));
-    }, [setViewingValue, year]);
-    const handleNextYear = (0, react_1.useCallback)(() => {
-        setViewingValue(new Date(year + 1, 0, 1));
-    }, [setViewingValue, year]);
-    const handleYearSelect = (0, react_1.useCallback)((newYear) => {
-        setViewingValue(new Date(newYear, 0, 1));
-    }, [setViewingValue]);
-    // Effect to handle focus when popup opens or when month changes
-    (0, react_1.useEffect)(() => {
-        if (!pendingFocusDate)
-            return;
-        // Convert YYYY-MM-DD to YYYY-MM if needed
-        const monthToFocus = (0, dayjs_1.dayjs)(pendingFocusDate).format(baseFormat);
-        // Use the same pattern as DatePicker, but handle tabindex issue
-        const targetCell = document.querySelector(`[data-mfui-month="${monthToFocus}"]`);
-        if (targetCell && !targetCell.disabled) {
-            // Temporarily remove tabindex=-1 to allow focus, then restore it
-            const originalTabIndex = targetCell.tabIndex;
-            if (originalTabIndex === -1) {
-                targetCell.tabIndex = 0;
-            }
-            targetCell.focus();
-            // Restore original tabindex after focus
-            if (originalTabIndex === -1) {
-                targetCell.tabIndex = -1;
-            }
-        }
-        // Clear pending focus after handling
-        setPendingFocusDate(null);
-    }, [viewingValue, pendingFocusDate, setPendingFocusDate, baseFormat]);
-    const classNames = (0, recipes_1.monthPickerPanelSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { ...props, className: (0, css_1.cx)(classNames.root, 'mfui-MonthPickerPanel__root', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.navigation, 'mfui-MonthPickerPanel__navigation'), children: [!isPreviousYearDisabled ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": (0, constants_1.getMonthPickerLabel)(locale ?? 'ja', 'prevYear'), onClick: handlePreviousYear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) })) : ((0, jsx_runtime_1.jsx)(YearNavigationPlaceholder, { className: (0, css_1.cx)(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') })), (0, jsx_runtime_1.jsx)(shared_1.YearSelector, { value: viewingValue, triggerWrapperProps: { className: (0, css_1.cx)(classNames.yearSelector, 'mfui-MonthPickerPanel__yearSelector') }, onChange: handleYearSelect }), !isNextYearDisabled ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": (0, constants_1.getMonthPickerLabel)(locale ?? 'ja', 'nextYear'), onClick: handleNextYear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) })) : ((0, jsx_runtime_1.jsx)(YearNavigationPlaceholder, { className: (0, css_1.cx)(classNames.yearNavigationPlaceholder, 'mfui-MonthPickerPanel__yearNavigationPlaceholder') }))] }), (0, jsx_runtime_1.jsx)(MonthGrid_1.MonthPickerMonthGrid, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, checkDisabledMonth: checkDisabledMonth, onChange: onChange })] }));
-}
-// Create a placeholder div that matches IconButton dimensions to prevent layout shift
-function YearNavigationPlaceholder({ className }) {
-    return (0, jsx_runtime_1.jsx)("div", { className: className, "aria-hidden": "true" });
-}

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MAXIMUM_VIEWABLE_YEAR = exports.MINIMUM_VIEWABLE_YEAR = exports.MONTH_PICKER_LABELS = exports.LABEL_CLOSE_CALENDAR = exports.LABEL_OPEN_CALENDAR = exports.LABEL_NEXT_YEAR = exports.LABEL_PREV_YEAR = void 0;
-exports.getMonthPickerLabel = getMonthPickerLabel;
-exports.LABEL_PREV_YEAR = '前の年'; // Previous year
-exports.LABEL_NEXT_YEAR = '次の年'; // Next year
-exports.LABEL_OPEN_CALENDAR = 'カレンダーを開く'; // Open calendar
-exports.LABEL_CLOSE_CALENDAR = 'カレンダーを閉じる'; // Close calendar
-/**
- * Localized labels for MonthPicker navigation buttons
- */
-exports.MONTH_PICKER_LABELS = {
-    ja: {
-        prevYear: '前の年',
-        nextYear: '次の年',
-    },
-    en: {
-        prevYear: 'Previous year',
-        nextYear: 'Next year',
-    },
-};
-/**
- * Get a localized label for MonthPicker
- *
- * @param locale - The locale to use ('ja' or 'en')
- *
- * @param key - The label key to retrieve
- *
- * @returns The localized label string
- */
-function getMonthPickerLabel(locale, key) {
-    const safeLocale = locale in exports.MONTH_PICKER_LABELS ? locale : 'ja';
-    return exports.MONTH_PICKER_LABELS[safeLocale][key];
-}
-/**
- * The minimum viewable year in the year selector
- */
-exports.MINIMUM_VIEWABLE_YEAR = 1800;
-/**
- * The maximum viewable year in the year selector
- */
-exports.MAXIMUM_VIEWABLE_YEAR = 2099;

package/dist/cjs/src/DateTimeSelection/MonthPicker/index.js

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

package/dist/cjs/src/DateTimeSelection/MonthPicker/utilities/useMonthPickerKeyboardNavigation.js

@@ -1,103 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMonthPickerKeyboardNavigation = useMonthPickerKeyboardNavigation;
-const react_1 = require("react");
-const dayjs_1 = require("../../../utilities/date/dayjs");
-const BasePickerProvider_1 = require("../../shared/BasePicker/BasePickerProvider");
-const constants_1 = require("../constants");
-/**
- * Hook for handling keyboard navigation in MonthPickerMonthCell
- *
- * @param onKeyDown - Optional callback for additional key handling
- *
- * @param minMonth - The minimum selectable month
- *
- * @param maxMonth - The maximum selectable month
- *
- * @param checkDisabledMonth - Function to check if a month should be disabled
- *
- * @returns A keyboard event handler for month navigation
- */
-function useMonthPickerKeyboardNavigation(onKeyDown, minMonth, maxMonth, checkDisabledMonth) {
-    const { viewingValue, setViewingValue, setPendingFocusDate, baseFormat } = (0, BasePickerProvider_1.useBasePickerContext)();
-    const isMonthDisabled = (0, react_1.useCallback)((date) => {
-        // Check year boundaries
-        const year = date.year();
-        const isYearBelowMinimum = year < constants_1.MINIMUM_VIEWABLE_YEAR;
-        const isYearAboveMaximum = year > constants_1.MAXIMUM_VIEWABLE_YEAR;
-        if (isYearBelowMinimum || isYearAboveMaximum) {
-            return true;
-        }
-        // Check minMonth constraint
-        if (minMonth) {
-            const minMonthStart = (0, dayjs_1.dayjs)(minMonth).startOf('month');
-            if (date.startOf('month').isBefore(minMonthStart)) {
-                return true;
-            }
-        }
-        // Check maxMonth constraint
-        if (maxMonth) {
-            const maxMonthStart = (0, dayjs_1.dayjs)(maxMonth).startOf('month');
-            if (date.startOf('month').isAfter(maxMonthStart)) {
-                return true;
-            }
-        }
-        // Check custom disabled logic
-        if (checkDisabledMonth) {
-            const monthDate = date.startOf('month').toDate();
-            if (checkDisabledMonth(monthDate)) {
-                return true;
-            }
-        }
-        return false;
-    }, [minMonth, maxMonth, checkDisabledMonth]);
-    return (0, react_1.useCallback)((event) => {
-        const { key, currentTarget } = event;
-        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-        if (!allowedKeys.includes(key)) {
-            onKeyDown?.(event);
-            return;
-        }
-        const currentMonth = currentTarget.dataset['mfuiMonth'];
-        if (!currentMonth)
-            return;
-        const currentDayjs = (0, dayjs_1.dayjs)(currentMonth);
-        // Prevent screen scrolling when changing focus
-        event.preventDefault();
-        // Handle month navigation
-        let targetDate = currentDayjs;
-        switch (key) {
-            case 'ArrowLeft':
-                targetDate = currentDayjs.subtract(1, 'month');
-                break;
-            case 'ArrowRight':
-                targetDate = currentDayjs.add(1, 'month');
-                break;
-            case 'ArrowUp':
-                targetDate = currentDayjs.subtract(3, 'month');
-                break;
-            case 'ArrowDown':
-                targetDate = currentDayjs.add(3, 'month');
-                break;
-        }
-        // Check if target month is disabled by constraints
-        if (isMonthDisabled(targetDate)) {
-            return; // Don't navigate to disabled months
-        }
-        const targetYear = targetDate.format('YYYY');
-        const currentYear = (0, dayjs_1.dayjs)(viewingValue).format('YYYY');
-        if (targetYear !== currentYear) {
-            // If target date is in a different year, update viewingValue and set pending focus
-            setViewingValue(targetDate.toDate());
-            setPendingFocusDate(targetDate.format(baseFormat));
-        }
-        else {
-            // Focus the target month if it exists and is not disabled
-            const targetCell = document.querySelector(`[data-mfui-month="${targetDate.format(baseFormat)}"]`);
-            if (targetCell && !targetCell.disabled) {
-                targetCell.focus();
-            }
-        }
-        onKeyDown?.(event);
-    }, [viewingValue, setViewingValue, setPendingFocusDate, onKeyDown, baseFormat, isMonthDisabled]);
-}

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

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePicker = MonthRangePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * MonthRangePicker component
- *
- * A month range picker component that allows users to select a range of months.
- * Built on top of BaseRangePicker with month-specific functionality and constraints.
- *
- * Features:
- * - Month-specific range selection with visual feedback
- * - Year navigation controls
- * - Month constraints (min/max/disabled)
- * - Keyboard navigation support
- * - Apply/Cancel workflow
- */
-const BaseRangePicker_1 = require("../shared/BaseRangePicker");
-const MonthRangePickerPanel_1 = require("./MonthRangePickerPanel");
-/**
- * MonthRangePicker component for selecting month ranges.
- *
- * @param props - MonthRangePicker props including month-specific constraints
- *
- * @example
- * ```tsx
- * <MonthRangePicker
- *   value={[startMonth, endMonth]}
- *   onChange={([start, end]) => console.log('Selected range:', start, end)}
- *   minMonth={new Date(2020, 0, 1)}
- *   maxMonth={new Date(2030, 11, 1)}
- * />
- * ```
- */
-function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, ...restProps }) {
-    return ((0, jsx_runtime_1.jsx)(BaseRangePicker_1.BaseRangePicker, { ...restProps, format: format, startInputProps: {
-            placeholder: '開始月',
-            ...startInputProps,
-        }, endInputProps: {
-            placeholder: '終了月',
-            ...endInputProps,
-        }, minDate: minMonth, maxDate: maxMonth, minWidth: "min-content", renderPopoverContent: ({ viewingValue, setViewingValue, value }) => ((0, jsx_runtime_1.jsx)(MonthRangePickerPanel_1.MonthRangePickerPanel, { viewingValue: viewingValue, setViewingValue: setViewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth })) }));
-}

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

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