@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,72 @@
+"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.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Props for MonthRangePickerNavigation component
+ */
+export type MonthRangePickerNavigationProps = {
+    /**
+     * Current viewing year (determines which year is displayed)
+     */
+    viewingValue: Date;
+    /**
+     * Function to change the viewing year
+     */
+    setViewingValue: (value: Date) => void;
+    /**
+     * The minimum selectable month.
+     * Used to determine if previous year navigation should be disabled.
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Used to determine if next year navigation should be disabled.
+     */
+    maxMonth?: Date;
+};

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

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

package/dist/cjs/src/DateTimeSelection/MonthRangePicker/MonthRangePickerNavigation/index.d.ts

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

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

@@ -0,0 +1,5 @@
+"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.d.ts

@@ -0,0 +1,25 @@
+import { type MonthRangePickerPanelProps } from './MonthRangePickerPanel.types';
+/**
+ * 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)}
+ * />
+ * ```
+ */
+export declare function MonthRangePickerPanel({ viewingValue, setViewingValue, value, minMonth, maxMonth, }: MonthRangePickerPanelProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,92 @@
+"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.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Props for MonthRangePickerPanel component
+ */
+export type MonthRangePickerPanelProps = {
+    /**
+     * Current viewing year/month (from renderPopoverContent options)
+     * Used to determine which year to display in the month grid
+     */
+    viewingValue: Date;
+    /**
+     * Function to change the viewing year (from renderPopoverContent options)
+     * Used by year navigation controls
+     */
+    setViewingValue: (value: Date) => void;
+    /**
+     * Current selected range [start, end] (from renderPopoverContent options)
+     * Used to show current selection state in the month grid
+     */
+    value?: [Date | undefined, Date | undefined];
+    /**
+     * The minimum selectable month.
+     * Months before this value will be disabled.
+     *
+     * @example
+     * ```tsx
+     * // Disable months before January 2020
+     * <MonthRangePickerPanel minMonth={new Date(2020, 0, 1)} />
+     * ```
+     */
+    minMonth?: Date;
+    /**
+     * The maximum selectable month.
+     * Months after this value will be disabled.
+     *
+     * @example
+     * ```tsx
+     * // Disable months after December 2030
+     * <MonthRangePickerPanel maxMonth={new Date(2030, 11, 1)} />
+     * ```
+     */
+    maxMonth?: Date;
+};

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

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

package/dist/cjs/src/DateTimeSelection/MonthRangePicker/MonthRangePickerPanel/index.d.ts

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

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

@@ -0,0 +1,5 @@
+"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.d.ts

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

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

@@ -0,0 +1,5 @@
+"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.d.ts

@@ -0,0 +1,4 @@
+export * from './DatePicker';
+export * from './MonthPicker';
+export * from './DateRangePicker';
+export * from './MonthRangePicker';

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

@@ -0,0 +1,20 @@
+"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.d.ts

@@ -0,0 +1,7 @@
+import { type BasePickerProps } from './BasePicker.types';
+/**
+ * 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.
+ */
+export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenChange, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,144 @@
+"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.d.ts

@@ -0,0 +1,131 @@
+import type React from 'react';
+import { type ChangeEvent } from 'react';
+import { type TextBoxProps } from '../../../TextBox';
+import { type IconButtonProps } from '../../../IconButton';
+import { type PopoverProps } from '../../../Popover';
+export type BasePickerProps = {
+    /**
+     * The value of the picker popover.
+     * If the value is undefined, when opening the picker popover, the picker popover will show the current date.
+     *
+     * @default undefined
+     */
+    value?: Date;
+    /**
+     * The default value of the picker popover, for uncontrolled components.
+     *
+     * @default undefined
+     */
+    defaultValue?: Date;
+    /**
+     * Whether the picker popover is open or not, to let you manually control the open state.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback when the picker popover is open or closed.
+     *
+     * @param open - Whether the picker popover is open or not.
+     *
+     * @default undefined
+     *
+     * @deprecated Please use `onOpenStateChanged` instead.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Callback when the picker popover is opened or closed.
+     *
+     * @param open - Whether the picker popover is opened or not.
+     *
+     * @default undefined
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * Whether to disable automatically opening the picker popover when the input is focused.
+     * If true, the picker popover will not automatically open when the input is focused.
+     *
+     * @default false - Automatically open the Popover when we click on the TextBox.
+     */
+    disableAutoOpen?: boolean;
+    /**
+     * Callback when the picker popover value is changed.
+     *
+     * @param value - The new value of the picker popover.
+     *
+     * @param event - The event object, only available when the picker popover value is changed by editing the input.
+     *
+     * @default undefined
+     */
+    onChange?: (value: Date | undefined, event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The format of the picker popover value.
+     * The format follows the ISO 8601 standard.
+     *
+     * @default 'YYYY/MM/DD'
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_8601
+     */
+    format?: string;
+    /**
+     * Custom function to format a Date object to a string for display.
+     * When provided, this function will be used instead of the default dayjs formatting.
+     *
+     * @param date - The date to format
+     *
+     * @returns The formatted date string
+     *
+     * @default undefined
+     */
+    customFormatValue?: (date: Date) => string;
+    /**
+     * The target DOM node to render the picker popover.
+     *
+     * If provided, the popover is rendered inside this node. Otherwise, a
+     * suitable DOM node is chosen automatically.
+     *
+     * @default null
+     */
+    targetDOMNode?: PopoverProps['targetDOMNode'];
+    /**
+     * Enable auto unmounting of the popover content when it's not displayed.
+     * When true, the popover content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+    /**
+     * Props for the calendar icon button.
+     *
+     * @property aria-label - The alternative text for the calendar icon button. Default is 'カレンダーを開く' or 'カレンダーを閉じる' switched by whether calendar is open or not.
+     */
+    calendarIconButtonProps?: Pick<IconButtonProps, 'aria-label'>;
+    /**
+     * Locale used for internal labels (e.g., calendar icon open/close labels).
+     * Defaults to Japanese to preserve backward compatibility.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: 'ja' | 'en';
+    /**
+     * Custom render function for the popover content. This is required to make BasePicker truly generic.
+     *
+     * @param options - The options object containing viewingValue, setViewingValue, value, and onChange
+     *
+     * @returns React.ReactNode to render as the popover content
+     */
+    renderPopoverContent: (options: {
+        viewingValue: Date;
+        setViewingValue: (date: Date) => void;
+        value?: Date;
+        onChange?: (value: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    }) => React.ReactNode;
+    /**
+     * The base format of the date, which is used for internal calculations.
+     *
+     * @default 'YYYY-MM-DD'
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_8601
+     */
+    baseFormat?: string;
+} & Omit<TextBoxProps, 'value' | 'defaultValue' | 'onChange'> & Pick<PopoverProps, 'allowedPlacements'>;

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

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