@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar } from '@moneyforward/mfui-icons-react';
+import { forwardRef, useCallback } from 'react';
+import { cx } from '../../../../../styled-system/css';
+import { ClearButton } from '../../../../shared/ClearButton';
+import { FocusIndicator } from '../../../../FocusIndicator';
+import { InternalIconButton as IconButton } from '../../../../IconButton/IconButton';
+import { Typography } from '../../../../Typography';
+import { useIsTouchDevice } from '../../../../utilities/dom/useIsTouchDevice';
+import { getBaseRangePickerTriggerLabel, SEPARATOR_CONTENT } from './constants';
+import { dateRangePickerTriggerSlotRecipe } from '../../../../../styled-system/recipes';
+import { useDateRangeTriggerValueController } from './hooks/useDateRangeTriggerValueController';
+import { useBaseRangePickerContext } from '../BaseRangePickerProvider';
+import { useDateRangeTriggerInputClick } from './hooks/useDateRangeTriggerInputClick';
+/**
+ * Trigger component for BaseRangePicker
+ * Handles the display and interaction of the date range input field
+ */
+export const BaseRangePickerTrigger = 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 = useIsTouchDevice();
+    const { toggle, disableAutoOpen } = useBaseRangePickerContext();
+    const { handleInputClick } = useDateRangeTriggerInputClick(disableAutoOpen ?? false, popoverOpenFunction);
+    const { onClick: onClickClearButton, 'aria-label': clearAriaLabel } = clearButtonProps;
+    const { onClick: onCalendarClick, 'aria-label': calendarAriaLabel } = calendarButtonProps;
+    const { startInputProps: enhancedStartInputProps, endInputProps: enhancedEndInputProps, handleClear, } = 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 ?? getBaseRangePickerTriggerLabel('START_DATE_PLACEHOLDER', calendarLocale);
+    const finalEndPlaceholder = endInputPlaceholder ?? getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale);
+    const shouldShowClearButton = enableClearValue && (enhancedStartInputProps.value || enhancedEndInputProps.value);
+    const classes = dateRangePickerTriggerSlotRecipe({ invalid, disabled, size });
+    const handleClickClearButton = useCallback((event) => {
+        handleClear();
+        onClickClearButton?.(event);
+    }, [handleClear, onClickClearButton]);
+    return (_jsxs("div", { ...wrapperProps, ...props, ref: ref, className: cx(classes.root, 'mfui-BaseRangePickerTrigger__root', wrapperProps.className), children: [_jsx("div", { className: cx(classes.inputGroup, 'mfui-BaseRangePickerTrigger__inputGroup'), children: isTouchDevice ? (
+                // Touch device: hidden inputs + display divs
+                _jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", value: enhancedStartInputProps.value, name: startInputProps.name }), _jsx("input", { type: "hidden", value: enhancedEndInputProps.value, name: endInputProps.name }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('start', startInputProps.onClick) : undefined, children: enhancedStartInputProps.value || finalStartPlaceholder }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx("div", { className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), onClick: !disableAutoOpen && !disabled ? handleInputClick('end', endInputProps.onClick) : undefined, children: enhancedEndInputProps.value || finalEndPlaceholder })] })) : (
+                // Desktop: Standard inputs with FocusIndicator
+                _jsxs(_Fragment, { children: [_jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: startInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedStartInputProps, placeholder: finalStartPlaceholder }) }), _jsx(Typography, { variant: "controlLabel", className: cx(classes.separator, 'mfui-BaseRangePickerTrigger__separator'), children: SEPARATOR_CONTENT }), _jsx(FocusIndicator, { position: "inside", children: _jsx("input", { ref: endInputRef, disabled: disabled, className: cx(classes.input, 'mfui-BaseRangePickerTrigger__input'), ...enhancedEndInputProps, placeholder: finalEndPlaceholder }) })] })) }), shouldShowClearButton ? (_jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearAriaLabel ?? getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: handleClickClearButton })) : null, _jsx(IconButton, { size: size === 'small' ? 'small' : 'default', "aria-label": calendarAriaLabel ?? getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale), className: cx(classes.actionIcon, 'mfui-BaseRangePickerTrigger__actionIcon'), disabled: disabled, onClick: onCalendarClick ?? toggle, children: _jsx(Calendar, {}) })] }));
+});
+BaseRangePickerTrigger.displayName = 'BaseRangePicker.Trigger';

package/dist/esm/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/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/BaseRangePickerTrigger.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/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/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/constants.js

@@ -0,0 +1,19 @@
+export const SEPARATOR_CONTENT = '〜';
+export const 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',
+    },
+};
+export function getBaseRangePickerTriggerLabel(key, locale = 'ja') {
+    const safeLocale = locale in BASE_RANGE_PICKER_TRIGGER_LABELS ? locale : 'ja';
+    return BASE_RANGE_PICKER_TRIGGER_LABELS[safeLocale][key];
+}

package/dist/esm/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;
+};

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerInputClick.js

@@ -0,0 +1,51 @@
+import { useRef, useCallback } from 'react';
+import { useBaseRangePickerContext } from '../../BaseRangePickerProvider';
+/**
+ * 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 function useDateRangeTriggerInputClick(disableAutoOpen, popoverOpenFunction) {
+    const lastInputRef = useRef(null);
+    const { isOpen, open, close } = useBaseRangePickerContext();
+    /**
+     * Returns an onClick handler for the given input type.
+     *
+     * @param inputType - 'start' or 'end'
+     *
+     * @param userOnClick - Optional user-provided onClick handler
+     *
+     * @returns onClick handler for the input
+     */
+    const handleInputClick = useCallback((inputType, userOnClick) => (event) => {
+        if (disableAutoOpen) {
+            userOnClick?.(event);
+            return;
+        }
+        if (!isOpen) {
+            // Use popoverOpenFunction if available, otherwise fall back to context open
+            if (popoverOpenFunction) {
+                popoverOpenFunction(event);
+            }
+            else {
+                open();
+            }
+            lastInputRef.current = inputType;
+        }
+        else if (lastInputRef.current === inputType) {
+            close();
+            lastInputRef.current = null;
+        }
+        else {
+            lastInputRef.current = inputType;
+        }
+        userOnClick?.(event);
+    }, [isOpen, open, close, disableAutoOpen, popoverOpenFunction]);
+    return { handleInputClick };
+}

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.d.ts

@@ -0,0 +1,32 @@
+import { type InputHTMLAttributes } from 'react';
+type DateInputProps = InputHTMLAttributes<HTMLInputElement>;
+type UseDateRangeTriggerValueControllerOptions = {
+    /**
+     * Props for the start date input
+     */
+    startInputProps?: DateInputProps;
+    /**
+     * Props for the end date input
+     */
+    endInputProps?: DateInputProps;
+    /**
+     * The format of the date picker component, in ISO 8601 format.
+     */
+    format: string;
+};
+/**
+ * Controller for the value of the BaseRangePicker component.
+ * Automatically ensures dates are in chronological order by swapping them if needed on blur.
+ *
+ * @param options - The options for the controller.
+ *
+ * @returns The props for the input elements.
+ */
+export declare function useDateRangeTriggerValueController({ startInputProps, endInputProps, format, }: UseDateRangeTriggerValueControllerOptions): {
+    startInputProps: Omit<import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">;
+    endInputProps: Omit<import("react").DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">;
+    handleClear: () => void;
+    startDate: Date | undefined;
+    endDate: Date | undefined;
+};
+export {};

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js

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

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/index.d.ts

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

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/index.js

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

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/utilities/createBaseRangePickerTriggerTestUtility.d.ts

@@ -0,0 +1,19 @@
+import { type UserEvent } from '@testing-library/user-event';
+import { type BaseRangePickerProps } from '../../BaseRangePicker.types';
+export type BaseRangePickerTriggerTestUtilityConfig = {
+    user: UserEvent;
+    calendarLocale: BaseRangePickerProps['calendarLocale'];
+};
+export declare function createBaseRangePickerTriggerTestUtility({ user, calendarLocale, }: BaseRangePickerTriggerTestUtilityConfig): {
+    getStartInput: () => HTMLInputElement;
+    getEndInput: () => HTMLInputElement;
+    getClearButton: () => HTMLElement | null;
+    getCalendarButton: () => HTMLElement;
+    getStartValue: () => string | null;
+    getEndValue: () => string | null;
+    isClearButtonVisible: () => boolean;
+    setStartDate: (date: string) => Promise<void>;
+    setEndDate: (date: string) => Promise<void>;
+    clearValues: () => Promise<void>;
+    openCalendar: () => Promise<void>;
+};

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/utilities/createBaseRangePickerTriggerTestUtility.js

@@ -0,0 +1,74 @@
+import { screen } from '@testing-library/react';
+import { getBaseRangePickerTriggerLabel } from '../constants';
+export function createBaseRangePickerTriggerTestUtility({ user, calendarLocale, }) {
+    // Element Queries
+    function getStartInput() {
+        return screen.getByPlaceholderText(getBaseRangePickerTriggerLabel('START_DATE_PLACEHOLDER', calendarLocale));
+    }
+    function getEndInput() {
+        return screen.getByPlaceholderText(getBaseRangePickerTriggerLabel('END_DATE_PLACEHOLDER', calendarLocale));
+    }
+    function getClearButton() {
+        return screen.queryByRole('button', { name: getBaseRangePickerTriggerLabel('CLEAR_BUTTON_LABEL', calendarLocale) });
+    }
+    function getCalendarButton() {
+        return screen.getByRole('button', {
+            name: getBaseRangePickerTriggerLabel('CALENDAR_BUTTON_LABEL', calendarLocale),
+        });
+    }
+    // Value Queries
+    function getStartValue() {
+        try {
+            return getStartInput().getAttribute('value');
+        }
+        catch {
+            return null;
+        }
+    }
+    function getEndValue() {
+        try {
+            return getEndInput().getAttribute('value');
+        }
+        catch {
+            return null;
+        }
+    }
+    function isClearButtonVisible() {
+        return getClearButton() !== null;
+    }
+    // Actions
+    async function setStartDate(date) {
+        const input = getStartInput();
+        await user.clear(input);
+        await user.type(input, date);
+        await user.tab(); // Trigger blur
+    }
+    async function setEndDate(date) {
+        const input = getEndInput();
+        await user.clear(input);
+        await user.type(input, date);
+        await user.tab(); // Trigger blur
+    }
+    async function clearValues() {
+        const clearButton = getClearButton();
+        if (clearButton) {
+            await user.click(clearButton);
+        }
+    }
+    async function openCalendar() {
+        await user.click(getCalendarButton());
+    }
+    return {
+        getStartInput,
+        getEndInput,
+        getClearButton,
+        getCalendarButton,
+        getStartValue,
+        getEndValue,
+        isClearButtonVisible,
+        setStartDate,
+        setEndDate,
+        clearValues,
+        openCalendar,
+    };
+}

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/index.d.ts

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

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/index.js

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

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/utilities/createBaseRangePickerTestUtility.d.ts

@@ -0,0 +1,32 @@
+import { type UserEvent } from '@testing-library/user-event';
+import { type BaseRangePickerProps } from '../BaseRangePicker.types';
+export type BaseRangePickerTestUtilityConfig = {
+    user: UserEvent;
+    calendarLocale: BaseRangePickerProps['calendarLocale'];
+};
+export declare function createBaseRangePickerTestUtility({ user, calendarLocale }: BaseRangePickerTestUtilityConfig): {
+    getPopover: () => Element | null;
+    getPreviousMonthButton: () => HTMLElement;
+    getNextMonthButton: () => HTMLElement;
+    getApplyButton: () => HTMLElement;
+    getCancelButton: () => HTMLElement;
+    getDateCellByText: (text: string) => HTMLElement | undefined;
+    getSelectedDateCells: () => HTMLElement[];
+    getInRangeDateCells: () => HTMLElement[];
+    getLeftMonthLabel: () => string | undefined;
+    clickPreviousMonth: () => Promise<void>;
+    clickNextMonth: () => Promise<void>;
+    clickApply: () => Promise<void>;
+    selectDate: (dateText: string) => Promise<void>;
+    getStartInput: () => HTMLInputElement;
+    getEndInput: () => HTMLInputElement;
+    getClearButton: () => HTMLElement | null;
+    getCalendarButton: () => HTMLElement;
+    getStartValue: () => string | null;
+    getEndValue: () => string | null;
+    isClearButtonVisible: () => boolean;
+    setStartDate: (date: string) => Promise<void>;
+    setEndDate: (date: string) => Promise<void>;
+    clearValues: () => Promise<void>;
+    openCalendar: () => Promise<void>;
+};

package/dist/esm/src/DateTimeSelection/shared/BaseRangePicker/utilities/createBaseRangePickerTestUtility.js

@@ -0,0 +1,17 @@
+import { createBaseRangePickerPopoverTestUtility } from '../BaseRangePickerPopover/utilities/createBaseRangePickerPopoverTestUtility';
+import { createBaseRangePickerTriggerTestUtility } from '../BaseRangePickerTrigger/utilities/createBaseRangePickerTriggerTestUtility';
+export function createBaseRangePickerTestUtility({ user, calendarLocale }) {
+    const triggerUtils = createBaseRangePickerTriggerTestUtility({ user, calendarLocale });
+    const popoverUtils = createBaseRangePickerPopoverTestUtility({ user, calendarLocale });
+    function getPopover() {
+        return document.querySelector('[data-mfui-content="popover-portal-content"]');
+    }
+    return {
+        // Trigger utilities
+        ...triggerUtils,
+        // Popover utilities
+        ...popoverUtils,
+        // Additional utilities
+        getPopover,
+    };
+}

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/CalendarGrid.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type DateCellProps } from '../DateCell';
+/**
+ * CalendarGrid displays the days of the week and all date cells for a given month.
+ * It is a presentational component used by Calendar and other date pickers.
+ *
+ * @param onDateClick - Called when a date cell is clicked, receives the date and the click event.
+ */
+export type CalendarGridProps = {
+    viewingValue: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    checkDisabledDate?: (date: Date) => boolean;
+    onKeyboardNavigation?: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    pendingFocusDate?: string;
+    onPendingFocusDateChange?: (date: string | null) => void;
+    value?: Date;
+    renderDateCell?: (props: DateCellProps) => React.ReactNode;
+    className?: string;
+    onDateClick?: (date: Date, event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate, onKeyboardNavigation, pendingFocusDate, onPendingFocusDateChange, value, renderDateCell, className, onDateClick, }: CalendarGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/CalendarGrid.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { cx } from '../../../../styled-system/css';
+import { DayCell } from '../DayCell';
+import { DateCell } from '../DateCell';
+import { useDates } from './utilities/useDates';
+import { computeDataForStyling } from './utilities/computeDataForStyling';
+import { checkIsSameDate } from './utilities/dateUtilities';
+import { dayjs } from '../../../utilities/date/dayjs';
+import { calendarGridSlotRecipe } from '../../../../styled-system/recipes';
+export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate, onKeyboardNavigation, pendingFocusDate, onPendingFocusDateChange, value, renderDateCell, className, onDateClick, }) {
+    const dates = useDates(viewingValue);
+    const computedDataForStyles = useMemo(() => computeDataForStyling(viewingValue), [viewingValue]);
+    const computedPropsForDates = useMemo(() => {
+        const newDates = dates.map((dateNumber) => {
+            if (!dateNumber)
+                return null;
+            const date = new Date(viewingValue.getFullYear(), viewingValue.getMonth(), dateNumber);
+            const isDisabledByProps = (minDate && date < minDate) || (maxDate && date > maxDate);
+            const isDisabledByCallback = checkDisabledDate?.(date);
+            const disabled = isDisabledByProps || !!isDisabledByCallback;
+            const isSelected = value ? checkIsSameDate(value, date) : false;
+            return {
+                date,
+                selected: isSelected,
+                onClick: (event) => onDateClick?.(date, event),
+                disabled,
+                hasBorderTopLeftRadius: computedDataForStyles.datesHasBorderTopLeftRadius.has(dateNumber),
+                hasBorderTopRightRadius: computedDataForStyles.datesHasBorderTopRightRadius.has(dateNumber),
+                hasBorderBottomLeftRadius: computedDataForStyles.datesHasBorderBottomLeftRadius.has(dateNumber),
+                hasBorderBottomRightRadius: computedDataForStyles.datesHasBorderBottomRightRadius.has(dateNumber),
+                hasRightBorder: computedDataForStyles.datesHasBorderRight.has(dateNumber),
+                hasBottomBorder: computedDataForStyles.datesHasBorderBottom.has(dateNumber),
+                isLastWeekDate: computedDataForStyles.lastWeekDates.has(dateNumber),
+                shouldBeTabbable: false, // Will be set correctly below
+                onKeyDown: onKeyboardNavigation,
+            };
+        });
+        // Determine which date should be tabbable (only one date should be tabbable)
+        // Priority: selected date > today's date > first non-disabled date
+        let tabbableDateIndex = -1;
+        // First, try to find the selected date if it exists and is not disabled
+        if (value) {
+            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem && dateItem.selected && !dateItem.disabled);
+        }
+        // If no selected date or selected date is disabled, try today's date
+        if (tabbableDateIndex === -1) {
+            const todayFormatted = dayjs().format('YYYY-MM-DD');
+            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem && !dateItem.disabled && dayjs(dateItem.date).format('YYYY-MM-DD') === todayFormatted);
+        }
+        // If today's date is not available, use the first non-disabled date
+        if (tabbableDateIndex === -1) {
+            tabbableDateIndex = newDates.findIndex((dateItem) => dateItem && !dateItem.disabled);
+        }
+        // Set shouldBeTabbable for the determined date
+        if (tabbableDateIndex !== -1) {
+            const tabbableDate = newDates[tabbableDateIndex];
+            if (tabbableDate) {
+                tabbableDate.shouldBeTabbable = true;
+            }
+        }
+        return newDates;
+    }, [
+        dates,
+        viewingValue,
+        computedDataForStyles,
+        value,
+        checkDisabledDate,
+        maxDate,
+        minDate,
+        onKeyboardNavigation,
+        onDateClick,
+    ]);
+    useEffect(() => {
+        if (!pendingFocusDate)
+            return;
+        const targetCell = document.querySelector(`[data-mfui-date="${pendingFocusDate}"]`);
+        if (targetCell && !targetCell.disabled) {
+            targetCell.focus();
+        }
+        onPendingFocusDateChange?.(null);
+    }, [viewingValue, pendingFocusDate, onPendingFocusDateChange]);
+    const classes = calendarGridSlotRecipe();
+    return (_jsxs("div", { className: cx(classes.calendarGrid, 'mfui-CalendarGrid__calendarGrid', className), children: [Array(7)
+                .fill(null)
+                .map((_, index) => (_jsx(DayCell, { day: index }, index))), computedPropsForDates.map((dateItem, index) => {
+                // All props are generated internally and guaranteed to have required fields
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                if (!dateItem)
+                    return _jsx("div", {}, `empty-date-${String(index)}`);
+                return renderDateCell ? (renderDateCell(dateItem)) : (_jsx(DateCell, { ...dateItem }, `date-${dateItem.date.toISOString()}`));
+            })] }));
+}

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/index.d.ts

@@ -0,0 +1 @@
+export * from './CalendarGrid';

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/index.js

@@ -0,0 +1 @@
+export * from './CalendarGrid';

package/dist/esm/src/DateTimeSelection/shared/CalendarGrid/utilities/computeDataForStyling.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Compute data for styling the calendar view
+ *
+ * @param viewingValue - The value that is currently viewing
+ *
+ * @returns The data for styling the calendar view
+ */
+export declare function computeDataForStyling(viewingValue: Date): {
+    datesHasBorderTopLeftRadius: Set<number>;
+    datesHasBorderTopRightRadius: Set<number>;
+    datesHasBorderBottomLeftRadius: Set<number>;
+    datesHasBorderBottomRightRadius: Set<number>;
+    datesHasBorderRight: Set<number>;
+    datesHasBorderBottom: Set<number>;
+    lastWeekDates: Set<number>;
+};