@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,365 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRangePickerProvider = BaseRangePickerProvider;
+exports.useBaseRangePickerContext = useBaseRangePickerContext;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const dayjs_1 = require("../../../../utilities/date/dayjs");
+const useUpdateEffect_1 = require("../../../../utilities/effect/useUpdateEffect");
+const useTransformedState_1 = require("../../../../utilities/state/useTransformedState");
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
+// Normalizes a date to the first of the month
+function normalizeToFirstOfMonth(date) {
+    return (0, dayjs_1.dayjs)(date).startOf('month').toDate();
+}
+/**
+ * Checks if a date is outside the specified constraints
+ *
+ * @param date - The date to check
+ *
+ * @param minDate - The minimum allowed date
+ *
+ * @param maxDate - The maximum allowed date
+ *
+ * @param format - The date format to determine validation level
+ *
+ * @returns true if the date is outside constraints, false otherwise
+ */
+function isDateOutsideConstraints(date, minDate, maxDate, format) {
+    // Use month-level validation for YYYY-MM format, day-level for others
+    const validationLevel = format === 'YYYY-MM' ? 'month' : 'day';
+    if (minDate && (0, dayjs_1.dayjs)(date).isBefore((0, dayjs_1.dayjs)(minDate), validationLevel)) {
+        return true;
+    }
+    if (maxDate && (0, dayjs_1.dayjs)(date).isAfter((0, dayjs_1.dayjs)(maxDate), validationLevel)) {
+        return true;
+    }
+    return false;
+}
+// Normalizes an array of dates to the start of the day
+function normalizeToStartOfDay(dates) {
+    return dates.map((date) => (date ? (0, dayjs_1.dayjs)(date).startOf('day').toDate() : undefined));
+}
+/**
+ * Implements auto-completion behavior as per design guidelines
+ * When only one date is provided, auto-fills the other with the same date
+ *
+ * @param dates - The partial date range to auto-complete
+ *
+ * @returns Auto-completed date range or original if both dates present/absent
+ */
+function autoCompletePartialRange(dates) {
+    const [startDate, endDate] = dates;
+    // If both dates are present or both are missing, no auto-completion needed
+    if ((startDate && endDate) || (!startDate && !endDate)) {
+        return dates;
+    }
+    // Auto-complete: if only start date, set end date to same value
+    if (startDate && !endDate) {
+        return [startDate, startDate];
+    }
+    // Auto-complete: if only end date, set start date to same value
+    if (!startDate && endDate) {
+        return [endDate, endDate];
+    }
+    return dates;
+}
+const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false, onChange, format = 'YYYY/MM/DD', isOpen = false, open = noop, close = noop, disableAutoOpen, minDate, maxDate, }) => {
+    const [dates, setDates] = (0, useTransformedState_1.useTransformedState)(defaultValue ?? [undefined, undefined], normalizeToStartOfDay);
+    const [dateStrings, setDateStrings] = (0, react_1.useState)(() => {
+        const [startDate, endDate] = value ?? defaultValue ?? [undefined, undefined];
+        return [startDate ? (0, dayjs_1.dayjs)(startDate).format(format) : '', endDate ? (0, dayjs_1.dayjs)(endDate).format(format) : ''];
+    });
+    const [startDate, endDate] = value ?? dates;
+    const [startDateString, endDateString] = dateStrings;
+    // Add viewingMonth state
+    const today = (0, react_1.useMemo)(() => new Date(), []);
+    const [viewingMonth, setViewingMonth] = (0, useTransformedState_1.useTransformedState)(value?.[0] ?? defaultValue?.[0] ?? new Date(today.getFullYear(), today.getMonth(), 1), normalizeToFirstOfMonth);
+    // --- Selection/Preview State and Logic ---
+    const [selecting, setSelecting] = (0, react_1.useState)('start');
+    const [temporaryStart, setTemporaryStart] = (0, react_1.useState)(startDate);
+    const [temporaryEnd, setTemporaryEnd] = (0, react_1.useState)(endDate);
+    const [previewDate, setPreviewDate] = (0, react_1.useState)();
+    // --- Focus Management ---
+    const [pendingFocusDate, setPendingFocusDate] = (0, react_1.useState)(null);
+    (0, useUpdateEffect_1.useUpdateEffect)(() => {
+        if (startDate) {
+            setViewingMonth(startDate);
+        }
+    }, [startDate]);
+    (0, useUpdateEffect_1.useUpdateEffect)(() => {
+        if (endDate) {
+            setViewingMonth(endDate);
+        }
+    }, [endDate]);
+    (0, useUpdateEffect_1.useUpdateEffect)(() => {
+        if (value) {
+            setDates(value);
+            setDateStrings([value[0] ? (0, dayjs_1.dayjs)(value[0]).format(format) : '', value[1] ? (0, dayjs_1.dayjs)(value[1]).format(format) : '']);
+        }
+    }, [value, format, setDates]);
+    const handleChange = (0, react_1.useCallback)((newDates) => {
+        let [newStartDate, newEndDate] = normalizeToStartOfDay(newDates);
+        // Swap dates if start date is after end date
+        if (newStartDate && newEndDate && (0, dayjs_1.dayjs)(newStartDate).isAfter(newEndDate)) {
+            [newStartDate, newEndDate] = [newEndDate, newStartDate];
+        }
+        setDates([newStartDate, newEndDate]);
+        // In uncontrolled mode, update dateStrings for input display
+        setDateStrings([
+            newStartDate ? (0, dayjs_1.dayjs)(newStartDate).format(format) : '',
+            newEndDate ? (0, dayjs_1.dayjs)(newEndDate).format(format) : '',
+        ]);
+        onChange?.([newStartDate, newEndDate]);
+    }, [onChange, format, setDates]);
+    const handleStartDateChange = (0, react_1.useCallback)((date, nextEndDate) => {
+        const proposedEndDate = nextEndDate !== undefined ? nextEndDate : endDate;
+        // Apply auto-completion behavior when start date is set and end date is missing
+        // This follows design guidelines: if only one date is provided, both should be set to same value
+        if (date && !proposedEndDate) {
+            handleChange([date, date]);
+        }
+        else {
+            handleChange([date, proposedEndDate]);
+        }
+    }, [endDate, handleChange]);
+    const handleEndDateChange = (0, react_1.useCallback)((date, nextStartDate) => {
+        const proposedStartDate = nextStartDate !== undefined ? nextStartDate : startDate;
+        // Apply auto-completion behavior when end date is set and start date is missing
+        // This follows design guidelines: if only one date is provided, both should be set to same value
+        if (date && !proposedStartDate) {
+            handleChange([date, date]);
+        }
+        else {
+            handleChange([proposedStartDate, date]);
+        }
+    }, [startDate, handleChange]);
+    const handleStartDateStringChange = (0, react_1.useCallback)((value) => {
+        setDateStrings([value, endDateString]);
+        // Parse and update both viewing month and temporary selection for immediate visual feedback
+        const parsedDate = (0, dayjs_1.dayjs)(value, format, true);
+        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate, format)) {
+            const newDate = parsedDate.toDate();
+            setViewingMonth(newDate);
+            // Update temporary selection for immediate calendar visual feedback
+            setTemporaryStart(newDate);
+            // Set pending focus date so when calendar opens, it focuses on this date
+            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+        }
+        else if (value === '') {
+            // Clear temporary selection if input is empty
+            setTemporaryStart(undefined);
+            setPendingFocusDate(null);
+        }
+    }, [endDateString, format, minDate, maxDate, setViewingMonth, setTemporaryStart, setPendingFocusDate]);
+    const handleEndDateStringChange = (0, react_1.useCallback)((value) => {
+        setDateStrings([startDateString, value]);
+        // Parse and update both viewing month and temporary selection for immediate visual feedback
+        const parsedDate = (0, dayjs_1.dayjs)(value, format, true);
+        if (parsedDate.isValid() && !isDateOutsideConstraints(parsedDate.toDate(), minDate, maxDate, format)) {
+            const newDate = parsedDate.toDate();
+            setViewingMonth(newDate);
+            // Update temporary selection for immediate calendar visual feedback
+            setTemporaryEnd(newDate);
+            // Set pending focus date so when calendar opens, it focuses on this date
+            setPendingFocusDate(parsedDate.format('YYYY-MM-DD'));
+        }
+        else if (value === '') {
+            // Clear temporary selection if input is empty
+            setTemporaryEnd(undefined);
+            setPendingFocusDate(null);
+        }
+    }, [startDateString, format, minDate, maxDate, setViewingMonth, setTemporaryEnd, setPendingFocusDate]);
+    const handleClear = (0, react_1.useCallback)(() => {
+        // handleChange already calls setDates and setDateStrings, so we don't need to call them again
+        handleChange([undefined, undefined]);
+        setTemporaryStart(undefined);
+        setTemporaryEnd(undefined);
+        close();
+    }, [handleChange, close]);
+    (0, react_1.useEffect)(() => {
+        setTemporaryStart(startDate);
+        setTemporaryEnd(endDate);
+        setSelecting(!startDate || endDate ? 'start' : 'end');
+        setPreviewDate(undefined);
+    }, [startDate, endDate]);
+    const handleDateClick = (0, react_1.useCallback)((date) => {
+        // Prevent selection of disabled dates
+        if (isDateOutsideConstraints(date, minDate, maxDate, format)) {
+            return;
+        }
+        if (selecting === 'start') {
+            setTemporaryStart(date);
+            setTemporaryEnd(undefined);
+            setSelecting('end');
+            setPreviewDate(undefined);
+            return;
+        }
+        if (temporaryStart && date < temporaryStart) {
+            setTemporaryStart(date);
+            setTemporaryEnd(temporaryStart);
+            setSelecting('start');
+            setPreviewDate(undefined);
+            return;
+        }
+        setTemporaryEnd(date);
+        setSelecting('start');
+        setPreviewDate(undefined);
+    }, [selecting, temporaryStart, minDate, maxDate, format]);
+    const handlePreview = (0, react_1.useCallback)((date) => {
+        // Don't preview disabled dates
+        if (isDateOutsideConstraints(date, minDate, maxDate, format)) {
+            return;
+        }
+        if (selecting === 'end')
+            setPreviewDate(date);
+    }, [selecting, minDate, maxDate, format]);
+    const clearPreview = (0, react_1.useCallback)(() => {
+        if (selecting === 'end')
+            setPreviewDate(undefined);
+    }, [selecting]);
+    const isInRange = (0, react_1.useCallback)((date) => {
+        if (selecting === 'end' && temporaryStart && previewDate) {
+            const [min, max] = previewDate > temporaryStart ? [temporaryStart, previewDate] : [previewDate, temporaryStart];
+            return (date > min && date < max) || date.getTime() === previewDate.getTime();
+        }
+        if (temporaryStart && temporaryEnd) {
+            return date > temporaryStart && date < temporaryEnd;
+        }
+        return false;
+    }, [selecting, temporaryStart, temporaryEnd, previewDate]);
+    const isRangeStart = (0, react_1.useCallback)((date) => !!temporaryStart && date.getTime() === temporaryStart.getTime(), [temporaryStart]);
+    const isRangeEnd = (0, react_1.useCallback)((date) => !!temporaryEnd && date.getTime() === temporaryEnd.getTime(), [temporaryEnd]);
+    // Add onApply handler for Apply button with auto-completion behavior
+    const handleApply = (0, react_1.useCallback)(() => {
+        // Always swap if start > end
+        let [newStart, newEnd] = [temporaryStart, temporaryEnd];
+        if (newStart && newEnd && (0, dayjs_1.dayjs)(newStart).isAfter(newEnd)) {
+            [newStart, newEnd] = [newEnd, newStart];
+        }
+        // Validate dates against constraints before applying
+        if (newStart && isDateOutsideConstraints(newStart, minDate, maxDate, format)) {
+            newStart = undefined;
+        }
+        if (newEnd && isDateOutsideConstraints(newEnd, minDate, maxDate, format)) {
+            newEnd = undefined;
+        }
+        // Apply auto-completion behavior as per design guidelines:
+        // If only one date is selected, both start and end should be set to the same value
+        const autoCompletedRange = autoCompletePartialRange([newStart, newEnd]);
+        // handleChange already calls setDates and setDateStrings, so we don't need to call them again
+        handleChange(autoCompletedRange);
+        // Do not setTemporaryStart/setTemporaryEnd here; let the effect sync them from startDate/endDate
+        close();
+    }, [handleChange, close, temporaryStart, temporaryEnd, minDate, maxDate, format]);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        // Use flushSync to ensure all state updates happen synchronously
+        (0, react_dom_1.flushSync)(() => {
+            setTemporaryStart(startDate);
+            setTemporaryEnd(endDate);
+            setSelecting(!startDate || endDate ? 'start' : 'end');
+        });
+        close();
+    }, [startDate, endDate, close]);
+    const isDateDisabled = (0, react_1.useCallback)((date) => isDateOutsideConstraints(date, minDate, maxDate, format), [minDate, maxDate, format]);
+    return (0, react_1.useMemo)(() => ({
+        startDate,
+        endDate,
+        startDateString,
+        endDateString,
+        disabled,
+        isOpen,
+        open,
+        close,
+        toggle: isOpen ? close : open,
+        viewingMonth,
+        setViewingMonth,
+        onStartDateChange: handleStartDateChange,
+        onEndDateChange: handleEndDateChange,
+        onStartDateStringChange: handleStartDateStringChange,
+        onEndDateStringChange: handleEndDateStringChange,
+        handleClear,
+        handleApply,
+        handleCancel,
+        selecting,
+        temporaryStart,
+        temporaryEnd,
+        previewDate,
+        handleDateClick,
+        handlePreview,
+        clearPreview,
+        isInRange,
+        isRangeStart,
+        isRangeEnd,
+        setTemporaryStart,
+        setTemporaryEnd,
+        setSelecting,
+        disableAutoOpen,
+        pendingFocusDate,
+        setPendingFocusDate,
+        minDate,
+        maxDate,
+        isDateDisabled,
+    }), [
+        startDate,
+        endDate,
+        startDateString,
+        endDateString,
+        disabled,
+        isOpen,
+        open,
+        close,
+        viewingMonth,
+        setViewingMonth,
+        handleStartDateChange,
+        handleEndDateChange,
+        handleStartDateStringChange,
+        handleEndDateStringChange,
+        handleClear,
+        handleApply,
+        handleCancel,
+        selecting,
+        temporaryStart,
+        temporaryEnd,
+        previewDate,
+        handleDateClick,
+        handlePreview,
+        clearPreview,
+        isInRange,
+        isRangeStart,
+        isRangeEnd,
+        setTemporaryStart,
+        setTemporaryEnd,
+        setSelecting,
+        disableAutoOpen,
+        pendingFocusDate,
+        setPendingFocusDate,
+        minDate,
+        maxDate,
+        isDateDisabled,
+    ]);
+};
+const BaseRangePickerContext = (0, react_1.createContext)(undefined);
+/**
+ * Provider component for BaseRangePicker
+ * Manages shared state between BaseRangePicker components
+ */
+function BaseRangePickerProvider({ children, ...props }) {
+    const contextValue = useBaseRangePickerContextValue(props);
+    return (0, jsx_runtime_1.jsx)(BaseRangePickerContext.Provider, { value: contextValue, children: children });
+}
+/**
+ * Hook to access BaseRangePicker context
+ *
+ * @throws {Error} when used outside of BaseRangePickerProvider
+ */
+function useBaseRangePickerContext() {
+    const context = (0, react_1.useContext)(BaseRangePickerContext);
+    if (context === undefined) {
+        throw new Error('useBaseRangePickerContext must be used within BaseRangePickerProvider');
+    }
+    return context;
+}

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

@@ -0,0 +1,80 @@
+import { type DateRangeInput } from '../BaseRangePicker.types';
+export type BaseRangePickerProviderProps = {
+    /**
+     * The current value of the date range picker
+     * [startDate, endDate]
+     *
+     * @remarks
+     * Uses DateRangeInput for backward compatibility during transitions
+     */
+    value?: DateRangeInput;
+    /**
+     * The default value of the date range picker
+     * [startDate, endDate]
+     *
+     * @default [undefined, undefined]
+     *
+     * @remarks
+     * Uses DateRangeInput for backward compatibility during transitions
+     */
+    defaultValue?: DateRangeInput;
+    /**
+     * Whether the date range picker is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the dates change
+     *
+     * @remarks
+     * Uses DateRangeInput for backward compatibility, but will implement
+     * auto-completion behavior as per design guidelines
+     */
+    onChange?: (dates: DateRangeInput) => void;
+    /**
+     * The format of the date picker component, in ISO 8601 format.
+     *
+     * @default 'YYYY/MM/DD'
+     */
+    format?: string;
+    /**
+     * Whether the popover is open (controlled mode)
+     *
+     * @default false
+     */
+    isOpen?: boolean;
+    /**
+     * Open the popover (controlled mode)
+     *
+     * @default () => {}
+     */
+    open?: () => void;
+    /**
+     * Close the popover (controlled mode)
+     *
+     * @default () => {}
+     */
+    close?: () => void;
+    /**
+     * Whether to disable automatically opening the BaseRangePickerPopover when the input is focused.
+     * If true, the BaseRangePickerPopover will not automatically open when the input is focused.
+     *
+     * @default false - Automatically open the Popover when we click on the TextBox.
+     */
+    disableAutoOpen?: boolean;
+    /**
+     * The minimum selectable date.
+     * Dates before this date will be disabled and cannot be selected.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * The maximum selectable date.
+     * Dates after this date will be disabled and cannot be selected.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+};

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

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

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

@@ -0,0 +1,2 @@
+export { BaseRangePickerProvider, useBaseRangePickerContext } from './BaseRangePickerProvider';
+export type { BaseRangePickerProviderProps } from './BaseRangePickerProvider.types';

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type BaseRangePickerTriggerProps } from './BaseRangePickerTrigger.types';
+/**
+ * Trigger component for BaseRangePicker
+ * Handles the display and interaction of the date range input field
+ */
+export declare const BaseRangePickerTrigger: React.ForwardRefExoticComponent<Omit<BaseRangePickerTriggerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRangePickerTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const react_1 = require("react");
+const css_1 = require("../../../../../styled-system/css");
+const ClearButton_1 = require("../../../../shared/ClearButton");
+const FocusIndicator_1 = require("../../../../FocusIndicator");
+const IconButton_1 = require("../../../../IconButton/IconButton");
+const Typography_1 = require("../../../../Typography");
+const useIsTouchDevice_1 = require("../../../../utilities/dom/useIsTouchDevice");
+const constants_1 = require("./constants");
+const recipes_1 = require("../../../../../styled-system/recipes");
+const useDateRangeTriggerValueController_1 = require("./hooks/useDateRangeTriggerValueController");
+const BaseRangePickerProvider_1 = require("../BaseRangePickerProvider");
+const useDateRangeTriggerInputClick_1 = require("./hooks/useDateRangeTriggerInputClick");
+/**
+ * Trigger component for BaseRangePicker
+ * Handles the display and interaction of the date range input field
+ */
+exports.BaseRangePickerTrigger = (0, react_1.forwardRef)(({ enableClearValue = false, invalid = false, size = 'medium', disabled = false, wrapperProps = {}, clearButtonProps = {}, startInputProps = {}, endInputProps = {}, calendarButtonProps = {}, startInputRef, endInputRef, popoverOpenFunction, format = 'YYYY-MM-DD', calendarLocale = 'ja', ...props }, ref) => {
+    const isTouchDevice = (0, useIsTouchDevice_1.useIsTouchDevice)();
+    const { toggle, disableAutoOpen } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
+    const { handleInputClick } = (0, useDateRangeTriggerInputClick_1.useDateRangeTriggerInputClick)(disableAutoOpen ?? false, popoverOpenFunction);
+    const { onClick: onClickClearButton, 'aria-label': clearAriaLabel } = clearButtonProps;
+    const { onClick: onCalendarClick, 'aria-label': calendarAriaLabel } = calendarButtonProps;
+    const { startInputProps: enhancedStartInputProps, endInputProps: enhancedEndInputProps, handleClear, } = (0, useDateRangeTriggerValueController_1.useDateRangeTriggerValueController)({
+        startInputProps: {
+            ...startInputProps,
+            onClick: handleInputClick('start', startInputProps.onClick),
+        },
+        endInputProps: {
+            ...endInputProps,
+            onClick: handleInputClick('end', endInputProps.onClick),
+        },
+        format,
+    });
+    const { placeholder: startInputPlaceholder } = startInputProps;
+    const { placeholder: endInputPlaceholder } = endInputProps;
+    // Use input props placeholder, fallback to default
+    const finalStartPlaceholder = startInputPlaceholder ?? (0, constants_1.getBaseRangePickerTriggerLabel)('START_DATE_PLACEHOLDER', calendarLocale);
+    const finalEndPlaceholder = endInputPlaceholder ?? (0, constants_1.getBaseRangePickerTriggerLabel)('END_DATE_PLACEHOLDER', calendarLocale);
+    const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
+    const classes = (0, recipes_1.dateRangePickerTriggerSlotRecipe)({ invalid, disabled, size });
+    const handleClickClearButton = (0, react_1.useCallback)((event) => {
+        handleClear();
+        onClickClearButton?.(event);
+    }, [handleClear, onClickClearButton]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, ...props, ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (
+                // Touch device: hidden inputs + display divs
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: enhancedStartInputProps.value || finalStartPlaceholder }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", className: (0, css_1.cx)(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: constants_1.SEPARATOR_CONTENT }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: enhancedEndInputProps.value || finalEndPlaceholder })] })) : (
+                // Desktop: Standard inputs with FocusIndicator
+                (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("input", { ref: startInputRef, disabled: disabled, className: (0, css_1.cx)(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", className: (0, css_1.cx)(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: constants_1.SEPARATOR_CONTENT }), (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("input", { ref: endInputRef, disabled: disabled, className: (0, css_1.cx)(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? ((0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? (0, constants_1.getBaseRangePickerTriggerLabel)('CLEAR_BUTTON_LABEL', calendarLocale), className: (0, css_1.cx)(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, (0, jsx_runtime_1.jsx)(IconButton_1.InternalIconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? (0, constants_1.getBaseRangePickerTriggerLabel)('CALENDAR_BUTTON_LABEL', calendarLocale), className: (0, css_1.cx)(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: onCalendarClick ?? toggle, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Calendar, {}) })] }));
+});
+exports.BaseRangePickerTrigger.displayName = 'BaseRangePicker.Trigger';

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

@@ -0,0 +1,85 @@
+import { type ComponentPropsWithRef, type InputHTMLAttributes, type RefObject, type SyntheticEvent } from 'react';
+import { type IconButtonProps } from '../../../../IconButton';
+import { type TextBoxSlotRecipeVariant } from '../../../../../styled-system/recipes';
+import { type BasePickerProps } from '../../BasePicker';
+/**
+ * The props for the BaseRangePickerTrigger component.
+ */
+export type BaseRangePickerTriggerProps = {
+    /**
+     * Whether the inputs are in an invalid state
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Whether to enable the clear functionality
+     *
+     * @default false
+     */
+    enableClearValue?: boolean;
+    /**
+     * The size of the inputs
+     *
+     * @default 'medium'
+     */
+    size?: TextBoxSlotRecipeVariant['size'];
+    /**
+     * Whether the component is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The format of the date picker component, in ISO 8601 format.
+     *
+     * @default 'YYYY-MM-DD'
+     */
+    format?: string;
+    /**
+     * Props for the wrapper div element
+     */
+    wrapperProps?: ComponentPropsWithRef<'div'>;
+    /**
+     * Props for the clear button
+     *
+     * @property aria-label - The alternative text for the clear button
+     *
+     * @property onClick - Callback when clear button is clicked
+     */
+    clearButtonProps?: Pick<IconButtonProps, 'aria-label' | 'onClick'>;
+    /**
+     * Props for the start date input
+     */
+    startInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Props for the end date input
+     */
+    endInputProps?: InputHTMLAttributes<HTMLInputElement>;
+    /**
+     * Props for the calendar button
+     *
+     * @property aria-label - The alternative text for the calendar button
+     *
+     * @property onClick - Callback when calendar button is clicked
+     */
+    calendarButtonProps?: Pick<IconButtonProps, 'aria-label' | 'onClick'>;
+    /**
+     * Ref for the start date input element
+     */
+    startInputRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * Ref for the end date input element
+     */
+    endInputRef?: RefObject<HTMLInputElement | null>;
+    /**
+     * Function to open the popover, provided by the Popover component
+     */
+    popoverOpenFunction?: (event?: SyntheticEvent) => void;
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+} & ComponentPropsWithRef<'div'>;

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

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

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

@@ -0,0 +1,6 @@
+import { type BasePickerProps } from '../../BasePicker/BasePicker.types';
+export declare const SEPARATOR_CONTENT = "\u301C";
+type LocaleKey = 'CLEAR_BUTTON_LABEL' | 'CALENDAR_BUTTON_LABEL' | 'START_DATE_PLACEHOLDER' | 'END_DATE_PLACEHOLDER';
+export declare const BASE_RANGE_PICKER_TRIGGER_LABELS: Record<NonNullable<BasePickerProps['calendarLocale']>, Record<LocaleKey, string>>;
+export declare function getBaseRangePickerTriggerLabel(key: LocaleKey, locale?: NonNullable<BasePickerProps['calendarLocale']>): string;
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_RANGE_PICKER_TRIGGER_LABELS = exports.SEPARATOR_CONTENT = void 0;
+exports.getBaseRangePickerTriggerLabel = getBaseRangePickerTriggerLabel;
+exports.SEPARATOR_CONTENT = '〜';
+exports.BASE_RANGE_PICKER_TRIGGER_LABELS = {
+    ja: {
+        CLEAR_BUTTON_LABEL: '値をクリアする',
+        CALENDAR_BUTTON_LABEL: 'カレンダーを開く',
+        START_DATE_PLACEHOLDER: '開始日',
+        END_DATE_PLACEHOLDER: '終了日',
+    },
+    en: {
+        CLEAR_BUTTON_LABEL: 'Clear value',
+        CALENDAR_BUTTON_LABEL: 'Open calendar',
+        START_DATE_PLACEHOLDER: 'Start date',
+        END_DATE_PLACEHOLDER: 'End date',
+    },
+};
+function getBaseRangePickerTriggerLabel(key, locale = 'ja') {
+    const safeLocale = locale in exports.BASE_RANGE_PICKER_TRIGGER_LABELS ? locale : 'ja';
+    return exports.BASE_RANGE_PICKER_TRIGGER_LABELS[safeLocale][key];
+}

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerInputClick.d.ts

@@ -0,0 +1,15 @@
+import { type SyntheticEvent } from 'react';
+/**
+ * Hook to handle input click actions for BaseRangePickerTrigger.
+ * Manages popover open/close based on which input is clicked and tracks the last clicked input.
+ *
+ * @param disableAutoOpen - Whether the input will not open the popover.
+ *
+ * @param popoverOpenFunction - Function to open the popover with event parameter.
+ *
+ * @returns
+ *   handleInputClick: (inputType: 'start' | 'end', userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void
+ */
+export declare function useDateRangeTriggerInputClick(disableAutoOpen: boolean, popoverOpenFunction?: (event?: SyntheticEvent) => void): {
+    handleInputClick: (inputType: "start" | "end", userOnClick?: React.MouseEventHandler<HTMLInputElement>) => (event: React.MouseEvent<HTMLInputElement>) => void;
+};