@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/BasePickerProvider/BasePickerProvider.d.ts

@@ -0,0 +1,65 @@
+type BasePickerContextValue = {
+    /**
+     * The value that user is currently viewing
+     */
+    viewingValue: Date;
+    /**
+     * Function to set the viewing value
+     */
+    setViewingValue: (date: Date) => void;
+    /**
+     * The date that should be focused after value change.
+     * This is needed to maintain keyboard navigation focus when navigating between values.
+     * When a user navigates to a date in a different value (e.g. using arrow keys),
+     * the DateCell components are unmounted and remounted during the value transition.
+     * We store the target date here so we can restore focus to the correct cell
+     * after the new value's cells are mounted.
+     */
+    pendingFocusDate: string | null;
+    /**
+     * Function to set the date that should be focused after viewing value change
+     */
+    setPendingFocusDate: (date: string | null) => void;
+    /**
+     * The base format of the date string
+     */
+    baseFormat: string;
+};
+type BasePickerProviderProps = {
+    /**
+     * The initial viewing value
+     */
+    initialViewingValue?: Date;
+    /**
+     * The currently selected date
+     */
+    value?: Date;
+    /**
+     * The internal value from input field
+     */
+    internalValue?: string;
+    /**
+     * The format of the date string
+     */
+    format?: string;
+    /**
+     * The base format of the date string
+     */
+    baseFormat?: string;
+    /**
+     * The children components
+     */
+    children: React.ReactNode;
+};
+/**
+ * Provider component for BasePicker context
+ * This provider manages the viewingValue state and provides functions to manipulate it
+ */
+export declare function BasePickerProvider({ initialViewingValue, value, internalValue, format, baseFormat, children, }: BasePickerProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access BasePicker context
+ *
+ * @throws {Error} If used outside of BasePickerProvider
+ */
+export declare function useBasePickerContext(): BasePickerContextValue;
+export {};

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

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

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

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

@@ -0,0 +1,6 @@
+"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; } });

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/YearSelector/YearSelector.d.ts

@@ -0,0 +1,18 @@
+import { type SelectBoxProps } from '../../../../SelectBox';
+/**
+ * Props for YearSelector component
+ */
+type YearSelectorProps = {
+    /**
+     * Internal value of the DatePicker
+     */
+    value?: Date;
+    /**
+     * This callback will be triggered whenever you click on a year.
+     *
+     * @param year - The year that user selected.
+     */
+    onChange: (year: number) => void;
+} & Pick<SelectBoxProps, 'targetDOMNode'>;
+export declare function YearSelector({ value, onChange, targetDOMNode }: YearSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/basePickerUtilities/useBasePickerDisplayController.d.ts

@@ -0,0 +1,37 @@
+import { type RefObject } from 'react';
+import { type TextBoxProps } from '../../../../TextBox';
+type Options = {
+    /**
+     * The open state of the BasePicker component.
+     */
+    open: boolean;
+    /**
+     * Callback when the open state of the BasePicker component is changed.
+     *
+     * @param open - The new open state.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The ref of the TextBox.
+     * This is used to focus the TextBox when the BasePicker is closed on some cases.
+     */
+    textBoxRef: RefObject<HTMLInputElement | null>;
+    /**
+     * Callback when the key is pressed on the TextBox.
+     */
+    onKeyDown?: TextBoxProps['onKeyDown'];
+};
+/**
+ * Controller for the display of the BasePicker component.
+ *
+ * @param options - The options for the controller.
+ *
+ * @returns The internal open state, and the function to toggle the open state.
+ */
+export declare function useBasePickerDisplayController({ open, onOpenStateChanged, textBoxRef }: Options): {
+    isBasePickerOpen: boolean;
+    toggleBasePicker: () => void;
+    onPickerPopoverChange: () => void;
+    onPickerPopoverWrapperKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+};
+export {};

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

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

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/basePickerUtilities/useBasePickerValueController.d.ts

@@ -0,0 +1,80 @@
+import type React from 'react';
+import { type ChangeEvent } from 'react';
+import { type TextBoxProps } from '../../../../TextBox';
+type UseBasePickerValueControllerOptions = {
+    /**
+     * The value of the BasePicker component.
+     */
+    value: Date | undefined;
+    /**
+     * The default value of the BasePicker component.
+     */
+    defaultValue: Date | undefined;
+    /**
+     * The format of the BasePicker component, in ISO 8601 format.
+     */
+    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.
+     */
+    customFormatValue?: (date: Date) => string;
+    /**
+     * Callback when the value of the BasePicker component is changed.
+     *
+     * @param value - The new value.
+     *
+     * @param event - The event that triggered the change, if triggered from TextBox
+     *
+     * @default undefined
+     */
+    onChange?: (value: Date | undefined, event: ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback when the value of the popover component is changed.
+     *
+     * @param value - The new value.
+     *
+     * @default undefined
+     */
+    onPickerPopoverChange?: (value: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * User's onBlur callback.
+     * Note: This is no longer used in useBasePickerValueController as onBlur is now handled
+     * by the Popover component to avoid duplicate calls.
+     *
+     * @param event - The blur event
+     *
+     * @default undefined
+     */
+    onBlur?: TextBoxProps['onBlur'];
+    /**
+     * Whether the popover is currently open.
+     * Note: This is no longer used in useBasePickerValueController.
+     */
+    isPopoverOpen: boolean;
+    /**
+     * Ref to the trigger element (wrapper containing both input and calendar icon).
+     * Note: This is no longer used in useBasePickerValueController.
+     */
+    triggerRef: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Controller for the value of the BasePicker component.
+ *
+ * @param options - The options for the controller.
+ *
+ * @returns The props for the input element and the picker popover.
+ */
+export declare function useBasePickerValueController({ value, defaultValue, format, customFormatValue, onChange, onPickerPopoverChange, }: UseBasePickerValueControllerOptions): {
+    inputProps: {
+        value: string;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onBlur: (event: React.FocusEvent<HTMLInputElement, Element>) => void;
+        onClear: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    };
+    pickerPopoverProps: {
+        value: Date | undefined;
+        onChange: (newValue: Date | undefined, event: React.MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+export {};

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

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

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/constants.d.ts

@@ -0,0 +1,31 @@
+import { type BasePickerProps } from './BasePicker.types';
+/**
+ * Default labels for the DatePicker components with Japanese text
+ */
+export declare const LABEL_GO_TO_PREV_MONTH = "\u524D\u306E\u6708";
+export declare const LABEL_GO_TO_NEXT_MONTH = "\u6B21\u306E\u6708";
+export declare const LABEL_OPEN_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u958B\u304F";
+export declare const LABEL_CLOSE_CALENDAR = "\u30AB\u30EC\u30F3\u30C0\u30FC\u3092\u9589\u3058\u308B";
+export declare const LABEL_TODAY = "\u4ECA\u65E5";
+type LabelKey = 'GO_TO_PREV_MONTH' | 'GO_TO_NEXT_MONTH' | 'OPEN_CALENDAR' | 'CLOSE_CALENDAR' | 'TODAY';
+export declare const BASE_PICKER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LabelKey, string>>;
+export declare const DAY_ABBREVIATIONS: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
+export declare const DAY_FULL_NAMES: Record<NonNullable<BasePickerProps['calendarLocale']>, string[]>;
+export declare function getBasePickerLabel(key: LabelKey, locale?: NonNullable<BasePickerProps['calendarLocale']>): string;
+/**
+ * The minimum year that can be selected in the DatePicker
+ */
+export declare const MINIMUM_VIEWABLE_YEAR = 1800;
+/**
+ * The maximum year that can be selected in the DatePicker
+ */
+export declare const MAXIMUM_VIEWABLE_YEAR = 2099;
+/**
+ * The minimum date that can be navigated to. The previous month button will be disabled when viewing January of this year.
+ */
+export declare const MINIMUM_NAVIGABLE_DATE: Date;
+/**
+ * The maximum date that can be navigated to. The next month button will be disabled when viewing December of this year.
+ */
+export declare const MAXIMUM_NAVIGABLE_DATE: Date;
+export {};

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

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

package/dist/cjs/src/DateTimeSelection/shared/BasePicker/index.d.ts

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

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

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

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

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

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

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