@moneyforward/mfui-components 2.48.2 → 3.0.0

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

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePickerContent = MonthRangePickerContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../../../styled-system/css");
-const recipes_1 = require("../../../../styled-system/recipes");
-const MonthRangePickerMonthGrid_1 = require("../MonthRangePickerMonthGrid");
-/**
- * MonthRangePickerContent component for dual-panel month grid layout.
- *
- * Renders two side-by-side month grids for the current and next year,
- * matching the DateRangePickerPopover's dual-panel calendar layout.
- *
- * @param props - MonthRangePickerContent props
- */
-function MonthRangePickerContent({ viewingValue, value, minMonth, maxMonth, handleKeyboardNavigation, }) {
-    const currentYear = viewingValue.getFullYear();
-    const nextYear = currentYear + 1;
-    // Create dates for the two year panels
-    const currentYearDate = (0, react_1.useMemo)(() => new Date(currentYear, 0, 1), [currentYear]);
-    const nextYearDate = (0, react_1.useMemo)(() => new Date(nextYear, 0, 1), [nextYear]);
-    const classNames = (0, recipes_1.monthRangePickerContentSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-MonthRangePickerContent__root'), children: [(0, jsx_runtime_1.jsx)(MonthRangePickerMonthGrid_1.MonthRangePickerMonthGrid, { viewingValue: currentYearDate, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), (0, jsx_runtime_1.jsx)(MonthRangePickerMonthGrid_1.MonthRangePickerMonthGrid, { viewingValue: nextYearDate, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation })] }));
-}

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

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

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

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

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

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePickerMonthCell = MonthRangePickerMonthCell;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const MonthCell_1 = require("../../shared/MonthCell");
-const dayjs_1 = require("../../../utilities/date/dayjs");
-const constants_1 = require("./constants");
-/**
- * MonthRangePickerMonthCell component that wraps MonthCell with range selection visual states.
- *
- * This component provides visual feedback for:
- * - Range start and end months
- * - Months in between the selected range
- * - Hover preview during range selection
- *
- * The actual range selection logic is handled by the parent components through
- * the BaseRangePickerProvider context.
- *
- * @param props - MonthRangePickerMonthCell props
- */
-function MonthRangePickerMonthCell({ isInRange, isRangeStart, isRangeEnd, onMouseEnter, onMouseLeave, handleKeyboardNavigation, ...monthCellProps }) {
-    // Calculate if this month is selected (either start or end of range)
-    const selected = isRangeStart || isRangeEnd || monthCellProps.selected || false;
-    // Create accessible label for range selection
-    const accessibleLabel = (0, react_1.useMemo)(() => {
-        const monthText = (0, dayjs_1.dayjs)(monthCellProps.date).format('MMMM YYYY');
-        const statusParts = [];
-        if (monthCellProps.disabled) {
-            statusParts.push(constants_1.MONTH_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
-        }
-        else if (selected) {
-            if (isRangeStart) {
-                statusParts.push(constants_1.MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_START);
-            }
-            else if (isRangeEnd) {
-                statusParts.push(constants_1.MONTH_RANGE_PICKER_A11Y_LABELS.RANGE_END);
-            }
-            else {
-                statusParts.push(constants_1.MONTH_RANGE_PICKER_A11Y_LABELS.SELECTED);
-            }
-        }
-        else if (isInRange) {
-            statusParts.push(constants_1.MONTH_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
-        }
-        return statusParts.length > 0 ? `${monthText}, ${statusParts.join(', ')}` : monthText;
-    }, [monthCellProps.date, monthCellProps.disabled, selected, isInRange, isRangeStart, isRangeEnd]);
-    return ((0, jsx_runtime_1.jsx)("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: (0, jsx_runtime_1.jsx)(MonthCell_1.MonthCell, { ...monthCellProps, selected: selected, inRange: isInRange, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false', onKeyDown: handleKeyboardNavigation }) }));
-}

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

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

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MONTH_RANGE_PICKER_A11Y_LABELS = void 0;
-/**
- * Default Japanese accessibility labels for MonthRangePicker
- * These constants provide consistent Japanese text for screen readers.
- * Matches the DateRangePicker labels for consistency.
- */
-exports.MONTH_RANGE_PICKER_A11Y_LABELS = {
-    /** Label for selected months */
-    SELECTED: '選択済み',
-    /** Label for months in the selected range */
-    IN_RANGE: '選択範囲内',
-    /** Label for unavailable/disabled months */
-    UNAVAILABLE: '無効',
-    /** Label for range start months */
-    RANGE_START: '範囲開始',
-    /** Label for range end months */
-    RANGE_END: '範囲終了',
-};

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

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

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

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePickerMonthGrid = MonthRangePickerMonthGrid;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const MonthGrid_1 = require("../../shared/MonthGrid");
-const MonthRangePickerMonthCell_1 = require("../MonthRangePickerMonthCell");
-const BaseRangePickerProvider_1 = require("../../shared/BaseRangePicker/BaseRangePickerProvider");
-/**
- * MonthRangePickerMonthGrid component that integrates MonthGrid with range selection logic.
- *
- * This component:
- * - Uses the shared MonthGrid for layout and basic month logic
- * - Integrates with BaseRangePickerProvider for range selection state
- * - Provides custom MonthRangePickerMonthCell with range visual states
- * - Handles month click and hover events for range selection
- *
- * @param props - MonthRangePickerMonthGrid props
- */
-function MonthRangePickerMonthGrid({ viewingValue, minMonth, maxMonth, handleKeyboardNavigation, }) {
-    // Access range selection context
-    const { handleDateClick, handlePreview, clearPreview, isInRange, isRangeStart, isRangeEnd, pendingFocusDate, setPendingFocusDate, } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    // Render custom month cell with range selection logic
-    const renderMonthCell = (props) => ((0, jsx_runtime_1.jsx)(MonthRangePickerMonthCell_1.MonthRangePickerMonthCell, { ...props, handleKeyboardNavigation: handleKeyboardNavigation, 
-        // Range selection states
-        isInRange: isInRange(props.date), isRangeStart: isRangeStart(props.date), isRangeEnd: isRangeEnd(props.date), 
-        // Range selection handlers
-        onMouseEnter: () => {
-            handlePreview(props.date);
-        }, onMouseLeave: clearPreview, onClick: (event) => {
-            // Call range selection handler
-            handleDateClick(props.date);
-            // Also call the original onClick if it exists
-            props.onClick?.(event);
-        } }));
-    return ((0, jsx_runtime_1.jsx)(MonthGrid_1.MonthGrid, { year: viewingValue.getFullYear(), selectedMonth: undefined, minMonth: minMonth, maxMonth: maxMonth, renderMonthCell: renderMonthCell, pendingFocusMonth: pendingFocusDate ?? undefined, onMonthSelect: undefined, onPendingFocusMonthChange: setPendingFocusDate }));
-}

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

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

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

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

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

@@ -1,72 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePickerNavigation = MonthRangePickerNavigation;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const css_1 = require("../../../../styled-system/css");
-const recipes_1 = require("../../../../styled-system/recipes");
-const IconButton_1 = require("../../../IconButton");
-const Typography_1 = require("../../../Typography");
-// Constants for year navigation limits
-const MINIMUM_VIEWABLE_YEAR = 1900;
-const MAXIMUM_VIEWABLE_YEAR = 2100;
-const LABEL_PREV_YEAR = '前年';
-const LABEL_NEXT_YEAR = '翌年';
-/**
- * Year navigation component for MonthRangePicker.
- *
- * Provides dual-column navigation layout matching DateRangePickerPopover:
- * - Left column: Previous year button + Current year + Placeholder
- * - Right column: Placeholder + Next year + Next year button
- * Navigation is disabled based on min/max month constraints.
- *
- * @param props - MonthRangePickerNavigation props
- */
-function MonthRangePickerNavigation({ viewingValue, setViewingValue, minMonth, maxMonth, }) {
-    const currentYear = viewingValue.getFullYear();
-    const nextYear = currentYear + 1;
-    // Calculate if year navigation should be disabled based on min/max constraints
-    const { isPreviousYearDisabled, isNextYearDisabled } = (0, react_1.useMemo)(() => {
-        const baseMinYearDisabled = currentYear <= MINIMUM_VIEWABLE_YEAR;
-        const baseMaxYearDisabled = nextYear >= MAXIMUM_VIEWABLE_YEAR;
-        // Check if previous year would have any valid months
-        let minConstraintPreviousDisabled = false;
-        if (minMonth) {
-            const minYear = minMonth.getFullYear();
-            const previousYear = currentYear - 1;
-            // Previous year is disabled if it's before the minMonth year
-            minConstraintPreviousDisabled = previousYear < minYear;
-        }
-        // Check if next year would have any valid months
-        let maxConstraintNextDisabled = false;
-        if (maxMonth) {
-            const maxYear = maxMonth.getFullYear();
-            // 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,
-        };
-    }, [currentYear, nextYear, minMonth, maxMonth]);
-    // Handle previous year navigation
-    const handlePreviousYear = (0, react_1.useCallback)(() => {
-        if (!isPreviousYearDisabled) {
-            const newDate = new Date(viewingValue);
-            newDate.setFullYear(currentYear - 1);
-            setViewingValue(newDate);
-        }
-    }, [isPreviousYearDisabled, viewingValue, currentYear, setViewingValue]);
-    // Handle next year navigation
-    const handleNextYear = (0, react_1.useCallback)(() => {
-        if (!isNextYearDisabled) {
-            const newDate = new Date(viewingValue);
-            newDate.setFullYear(nextYear + 1);
-            setViewingValue(newDate);
-        }
-    }, [isNextYearDisabled, viewingValue, nextYear, setViewingValue]);
-    const classNames = (0, recipes_1.monthRangePickerNavigationSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-MonthRangePickerNavigation__root'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [(0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": LABEL_PREV_YEAR, disabled: isPreviousYearDisabled, onClick: handlePreviousYear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerBefore, {}) }), (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "contentHeading", children: [currentYear, "\u5E74"] }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') })] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.column, 'mfui-MonthRangePickerNavigation__column'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.blankIconButton, 'mfui-MonthRangePickerNavigation__blankIconButton') }), (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "contentHeading", children: [nextYear, "\u5E74"] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": LABEL_NEXT_YEAR, disabled: isNextYearDisabled, onClick: handleNextYear, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PickerAfter, {}) })] })] }));
-}

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

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

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

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

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

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MonthRangePickerPanel = MonthRangePickerPanel;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dayjs_1 = require("../../../utilities/date/dayjs");
-const css_1 = require("../../../../styled-system/css");
-const recipes_1 = require("../../../../styled-system/recipes");
-const BaseRangePickerFooter_1 = require("../../shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerFooter");
-const MonthRangePickerNavigation_1 = require("../MonthRangePickerNavigation");
-const MonthRangePickerContent_1 = require("../MonthRangePickerContent");
-const BaseRangePickerProvider_1 = require("../../shared/BaseRangePicker/BaseRangePickerProvider");
-/**
- * MonthRangePickerPanel component for selecting month ranges.
- *
- * This component provides a complete interface for month range selection including:
- * - Dual-column year navigation controls
- * - Dual-panel month grids for range selection
- * - Apply/Cancel footer controls
- *
- * All range selection logic is managed through BaseRangePickerProvider context.
- *
- * @param props - MonthRangePickerPanel props
- *
- * @example
- * ```tsx
- * <MonthRangePickerPanel
- *   viewingValue={new Date(2024, 0, 1)}
- *   setViewingValue={setViewingValue}
- *   value={[startMonth, endMonth]}
- *   minMonth={new Date(2020, 0, 1)}
- *   maxMonth={new Date(2030, 11, 1)}
- * />
- * ```
- */
-function MonthRangePickerPanel({ viewingValue, setViewingValue, value, minMonth, maxMonth, }) {
-    const { setPendingFocusDate, handlePreview } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
-    // Cross-Panel Keyboard Navigation for MonthRangePicker
-    const handleKeyboardNavigation = (0, react_1.useCallback)((event) => {
-        const { key, currentTarget } = event;
-        const allowedKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
-        if (!allowedKeys.includes(key)) {
-            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 targetMonth = currentDayjs;
-        switch (key) {
-            case 'ArrowLeft':
-                targetMonth = currentDayjs.subtract(1, 'month');
-                break;
-            case 'ArrowRight':
-                targetMonth = currentDayjs.add(1, 'month');
-                break;
-            case 'ArrowUp':
-                targetMonth = currentDayjs.subtract(3, 'month');
-                break;
-            case 'ArrowDown':
-                targetMonth = currentDayjs.add(3, 'month');
-                break;
-        }
-        // Note: checkDisabledMonth feature has been removed from MonthRangePicker
-        // Only minMonth/maxMonth constraints are supported
-        // Calculate left and right panel years
-        const leftPanelYear = viewingValue.getFullYear();
-        const rightPanelYear = leftPanelYear + 1;
-        const targetYear = targetMonth.format('YYYY');
-        // Set temporary date for highlighting in-range months during keyboard navigation
-        // This matches the behavior of DateRangePicker
-        handlePreview(targetMonth.toDate());
-        // Check if target month is in one of the visible panels
-        if (targetYear === leftPanelYear.toString() || targetYear === rightPanelYear.toString()) {
-            // Target month is in a visible panel, focus it directly
-            const targetCell = document.querySelector(`[data-mfui-month="${targetMonth.format('YYYY-MM')}"]`);
-            if (targetCell && !targetCell.disabled) {
-                targetCell.focus();
-            }
-        }
-        else {
-            // Target month is not in visible panels, update viewing year and set pending focus
-            setViewingValue(targetMonth.toDate());
-            setPendingFocusDate(targetMonth.format('YYYY-MM'));
-        }
-    }, [viewingValue, setViewingValue, setPendingFocusDate, handlePreview]);
-    const classNames = (0, recipes_1.monthRangePickerPanelSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-MonthRangePickerPanel__root'), children: [(0, jsx_runtime_1.jsx)(MonthRangePickerNavigation_1.MonthRangePickerNavigation, { viewingValue: viewingValue, setViewingValue: setViewingValue, minMonth: minMonth, maxMonth: maxMonth }), (0, jsx_runtime_1.jsx)(MonthRangePickerContent_1.MonthRangePickerContent, { viewingValue: viewingValue, value: value, minMonth: minMonth, maxMonth: maxMonth, handleKeyboardNavigation: handleKeyboardNavigation }), (0, jsx_runtime_1.jsx)(BaseRangePickerFooter_1.BaseRangePickerFooter, {})] }));
-}

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

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

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

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

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

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

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

@@ -1,20 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DatePicker"), exports);
-__exportStar(require("./MonthPicker"), exports);
-__exportStar(require("./DateRangePicker"), exports);
-__exportStar(require("./MonthRangePicker"), exports);

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

@@ -1,144 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasePicker = BasePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const Popover_1 = require("../../../Popover");
-const TextBox_1 = require("../../../TextBox");
-const IconButton_1 = require("../../../IconButton/IconButton");
-const mergeRefs_1 = require("../../../utilities/dom/mergeRefs");
-const useFocusTrap_1 = require("../../../utilities/dom/useFocusTrap");
-const getFocusableNodes_1 = require("../../../utilities/dom/getFocusableNodes");
-const dayjs_1 = require("../../../utilities/date/dayjs");
-const useBasePickerDisplayController_1 = require("./basePickerUtilities/useBasePickerDisplayController");
-const useBasePickerValueController_1 = require("./basePickerUtilities/useBasePickerValueController");
-const BasePickerProvider_1 = require("./BasePickerProvider");
-const constants_1 = require("./constants");
-/**
- * The BasePicker component.
- * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
- * This component extends the props of TextBox component.
- */
-function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, 
-// We keep deprecated until we release the next major version
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-onOpenChange, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale = 'ja', disabled, ...textBoxProps }) {
-    const textBoxRef = (0, react_1.useRef)(null);
-    const basePickerPopoverWrapperRef = (0, react_1.useRef)(null);
-    const triggerRef = (0, react_1.useRef)(null);
-    const { isBasePickerOpen, onPickerPopoverChange, onPickerPopoverWrapperKeyDown, toggleBasePicker } = (0, useBasePickerDisplayController_1.useBasePickerDisplayController)({
-        open,
-        onOpenStateChanged: onOpenStateChanged ?? onOpenChange,
-        textBoxRef,
-    });
-    const { inputProps: inputValueProps, pickerPopoverProps } = (0, useBasePickerValueController_1.useBasePickerValueController)({
-        value,
-        defaultValue,
-        format,
-        customFormatValue,
-        onChange,
-        onPickerPopoverChange,
-        onBlur,
-        isPopoverOpen: isBasePickerOpen,
-        triggerRef,
-    });
-    const { handleOnKeyDown } = (0, useFocusTrap_1.useFocusTrap)({
-        onKeyDown: onPickerPopoverWrapperKeyDown,
-        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 calendarIconLabel = isBasePickerOpen
-        ? (0, constants_1.getBasePickerLabel)('CLOSE_CALENDAR', calendarLocale)
-        : (0, constants_1.getBasePickerLabel)('OPEN_CALENDAR', calendarLocale);
-    // If the BasePicker is open, we need to make the calendar icon active by adding the `data-active` attribute.
-    // We must cast it to `undefined` because the `data-active="false"` means !!data-active is true.
-    const shouldCalendarIconActive = isBasePickerOpen ? true : undefined;
-    const handleWrapperClick = (0, react_1.useCallback)((openPopover) => (event) => {
-        // Check if the click is on the calendar icon button (suffix slot)
-        // We need to prevent opening when clicking on the calendar icon
-        const target = event.target;
-        const isClickOnCalendarIcon = target.closest('[data-mfui-content="calendar-icon-button"]');
-        // Check if the click is on the clear button
-        // We need to prevent opening when clicking on the clear button
-        const isClickOnClearButton = target.closest('.mfui-TextBox__clearButton');
-        if (isClickOnCalendarIcon || isClickOnClearButton) {
-            return; // Calendar icon and clear button handle their own clicks
-        }
-        // Call the original wrapper onClick if it exists
-        textBoxProps.wrapperProps?.onClick?.(event);
-        // Focus the input and open the popover
-        if (textBoxRef.current) {
-            textBoxRef.current.focus();
-        }
-        openPopover(event);
-    }, [textBoxProps.wrapperProps, textBoxRef]);
-    return ((0, jsx_runtime_1.jsx)(BasePickerProvider_1.BasePickerProvider, { initialViewingValue: value ?? defaultValue, value: value, internalValue: inputValueProps.value, format: format, baseFormat: baseFormat, children: (0, jsx_runtime_1.jsx)(InternalPopover, { renderTrigger: ({ setTriggerRef, togglePopover, openPopover, handleTriggerKeyDown, handleTriggerBlur }) => ((0, jsx_runtime_1.jsx)(TextBox_1.TextBox, { ref: textBoxRef, ...inputValueProps, touchDeviceReadOnly: true, suffixSlot: (0, jsx_runtime_1.jsx)(IconButton_1.InternalIconButton, { size: textBoxProps.textBoxSize === 'small' ? 'small' : 'default', "aria-label": calendarIconButtonProps?.['aria-label'] ?? calendarIconLabel, "data-active": shouldCalendarIconActive, "data-mfui-content": "calendar-icon-button", disabled: disabled, onClick: togglePopover, onBlur: handleTriggerBlur, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Calendar, {}) }), disabled: disabled, ...textBoxProps, wrapperProps: {
-                    ...textBoxProps.wrapperProps,
-                    ref: (0, mergeRefs_1.mergeRefs)(setTriggerRef, triggerRef, textBoxProps.wrapperProps?.ref),
-                    onKeyDown: (event) => {
-                        textBoxProps.wrapperProps?.onKeyDown?.(event);
-                        handleTriggerKeyDown(event);
-                    },
-                    onClick: !disableAutoOpen ? handleWrapperClick(openPopover) : undefined,
-                    style: {
-                        ...textBoxProps.wrapperProps?.style,
-                        cursor: 'text',
-                    },
-                }, onBlur: (event) => {
-                    // First call the original input onBlur handler (contains onChange logic)
-                    inputValueProps.onBlur(event);
-                    // Then call the Popover's smart blur detection
-                    handleTriggerBlur(event);
-                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
-}
-/**
- * Internal Popover component that needs access to BasePickerContext.
- * This component is defined inside BasePicker to use the useBasePickerContext hook,
- * which requires being within a BasePickerProvider. Creating it as an internal
- * component ensures proper context access while keeping the logic encapsulated.
- */
-function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, ...popoverProps }) {
-    // Always call the hook at the top level to ensure consistent hook order
-    const { viewingValue, setViewingValue, setPendingFocusDate } = (0, BasePickerProvider_1.useBasePickerContext)();
-    const handlePopoverOpen = (0, react_1.useCallback)((event) => {
-        // If you click on the TextBox or its wrapper, we will not change the focus
-        // However, calendar icon clicks should still allow focus to move to the calendar
-        const isClickOnTextBox = event?.target === textBoxRef.current && event.type === 'click';
-        const target = event?.target;
-        const isClickOnCalendarIcon = event?.type === 'click' && target?.closest('[data-mfui-content="calendar-icon-button"]') !== null;
-        // Check if the click is on the clear button
-        const isClickOnClearButton = event?.type === 'click' && target?.closest('.mfui-TextBox__clearButton') !== null;
-        const isClickOnWrapper = event?.type === 'click' &&
-            triggerRef.current &&
-            (triggerRef.current === event.target || triggerRef.current.contains(event.target)) &&
-            !isClickOnCalendarIcon &&
-            !isClickOnClearButton;
-        if (isClickOnTextBox || isClickOnWrapper)
-            return;
-        // Get the date to focus on (selected date or today)
-        const dateToFocus = (0, dayjs_1.dayjs)(value ?? defaultValue ?? new Date())
-            .startOf('day')
-            .toDate();
-        const formattedDate = (0, dayjs_1.dayjs)(dateToFocus).format(baseFormat);
-        // Set the viewing month to the target date's month (using startOf('month') only for the viewing month)
-        setViewingValue((0, dayjs_1.dayjs)(dateToFocus).startOf('month').startOf('day').toDate());
-        // Set the pending focus date to ensure proper focus after month change
-        setPendingFocusDate(formattedDate);
-    }, [textBoxRef, triggerRef, value, defaultValue, baseFormat, setViewingValue, setPendingFocusDate]);
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => ((0, jsx_runtime_1.jsx)("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
-                viewingValue,
-                setViewingValue,
-                value: pickerPopoverProps.value,
-                onChange: pickerPopoverProps.onChange,
-            }) })), allowedPlacements: allowedPlacements, onOpen: handlePopoverOpen, onOpenStateChanged: onOpenStateChanged }));
-}

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

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

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

@@ -1,67 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BasePickerProvider = BasePickerProvider;
-exports.useBasePickerContext = useBasePickerContext;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dayjs_1 = require("../../../../utilities/date/dayjs");
-const useLatest_1 = require("../../../../utilities/state/useLatest");
-const dateParsing_1 = require("../../utilities/dateParsing");
-const BasePickerContext = (0, react_1.createContext)(undefined);
-/**
- * Provider component for BasePicker context
- * This provider manages the viewingValue state and provides functions to manipulate it
- */
-function BasePickerProvider({ initialViewingValue = new Date(), value, internalValue, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', children, }) {
-    const [viewingValue, setViewingValue] = useViewingValue(initialViewingValue);
-    const latestViewingValue = (0, useLatest_1.useLatest)(viewingValue);
-    // Stores the date that should receive focus after a value change.
-    // This is needed to maintain keyboard navigation when moving between values,
-    // since the date cells are unmounted and remounted during transitions.
-    const [pendingFocusDate, setPendingFocusDate] = (0, react_1.useState)(null);
-    // Sync viewing value with value changes and internal value changes
-    (0, react_1.useEffect)(() => {
-        const getNewViewingValue = () => {
-            // Only sync with the internal value if it's a valid date
-            // Use parseInputDate to handle both Western and Japanese calendar formats
-            if (internalValue) {
-                const parseResult = (0, dateParsing_1.parseInputDate)(internalValue, format);
-                if (parseResult.isValid && parseResult.result) {
-                    return (0, dayjs_1.dayjs)(parseResult.result).startOf('month').toDate();
-                }
-            }
-            if (value)
-                return (0, dayjs_1.dayjs)(value).startOf('month').toDate();
-            return latestViewingValue.current;
-        };
-        setViewingValue(getNewViewingValue());
-    }, [value, internalValue, format, setViewingValue, latestViewingValue]);
-    const contextValue = (0, react_1.useMemo)(() => ({
-        viewingValue,
-        setViewingValue,
-        pendingFocusDate,
-        setPendingFocusDate,
-        baseFormat,
-    }), [viewingValue, setViewingValue, pendingFocusDate, baseFormat]);
-    return (0, jsx_runtime_1.jsx)(BasePickerContext.Provider, { value: contextValue, children: children });
-}
-function useViewingValue(initialViewingValue) {
-    const [internalViewingValue, setInternalViewingValue] = (0, react_1.useState)(() => (0, dayjs_1.dayjs)(initialViewingValue).startOf('month').startOf('day').toDate());
-    const setViewingValue = (0, react_1.useCallback)((date) => {
-        setInternalViewingValue((0, dayjs_1.dayjs)(date).startOf('month').toDate());
-    }, []);
-    return [internalViewingValue, setViewingValue];
-}
-/**
- * Hook to access BasePicker context
- *
- * @throws {Error} If used outside of BasePickerProvider
- */
-function useBasePickerContext() {
-    const context = (0, react_1.useContext)(BasePickerContext);
-    if (!context) {
-        throw new Error('useBasePickerContext must be used within a BasePickerProvider');
-    }
-    return context;
-}

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

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