@moneyforward/mfui-components 2.48.1

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

@@ -0,0 +1,265 @@
+import { type InputHTMLAttributes } from 'react';
+import { type PopoverProps } from '../../../Popover';
+import { type BasePickerProps } from '../BasePicker';
+/**
+ * Date range input type during user interaction, allowing undefined values
+ * This represents the input state during the selection process where either date may be missing
+ *
+ * @remarks
+ * According to MFUI design guidelines, completed selections should always have both dates present
+ * through auto-completion behavior. This type is used for backward compatibility and intermediate states.
+ *
+ * @example
+ * ```typescript
+ * const selecting: DateRangeInput = [new Date(), undefined]; // Start date selected
+ * const completed: DateRangeInput = [new Date(), new Date()]; // Both dates present
+ * ```
+ */
+export type DateRangeInput = [Date | undefined, Date | undefined];
+/**
+ * The props for the BaseRangePicker component
+ */
+export type BaseRangePickerProps = {
+    /**
+     * The current value of the date range picker
+     * [startDate, endDate]
+     *
+     * @remarks
+     * According to design guidelines, DateRangePicker expects both start and end dates
+     * with auto-completion behavior. When a complete range is set, both dates should be present.
+     * For backward compatibility, undefined values are still accepted but will be auto-completed.
+     */
+    value?: DateRangeInput;
+    /**
+     * The default value of the date range picker
+     * [startDate, endDate]
+     *
+     * @default [undefined, undefined]
+     *
+     * @remarks
+     * When only one date is provided, auto-completion behavior will ensure both dates are set.
+     */
+    defaultValue?: DateRangeInput;
+    /**
+     * Callback fired when the dates change
+     *
+     * @remarks
+     * According to design guidelines, this callback should provide completed date ranges
+     * with auto-completion behavior. When only one date is selected, both start and end
+     * will be set to the same value following the design specification.
+     *
+     * For backward compatibility, partial ranges may still be provided during intermediate states,
+     * but the final completed selection will always include both dates.
+     */
+    onChange?: (dates: DateRangeInput) => void;
+    /**
+     * Whether the component is disabled
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the inputs are in an invalid state.
+     * This will change the border color to signal-red.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * The DOM node to attach the popover to
+     */
+    targetDOMNode?: HTMLElement;
+    /**
+     * The format of the date picker component, in ISO 8601 format.
+     *
+     * @default 'YYYY/MM/DD'
+     */
+    format?: string;
+    /**
+     * Callback fired when the open state of the BaseRangePicker changes.
+     *
+     * @param open - The new open state of the BaseRangePicker.
+     */
+    onOpenStateChanged?: (open: boolean) => 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;
+    /**
+     * Callback fired when the user blurs away from the trigger element or popover content.
+     * This implements smart blur detection - only fires when focus leaves both the trigger and popover.
+     * This will only fire when the user truly leaves the component (not when the popover opens).
+     *
+     * @param event - The blur event from the trigger element
+     *
+     * @example
+     * ```tsx
+     * <BaseRangePicker
+     *   onBlur={(event) => {
+     *     console.log('BaseRangePicker lost focus');
+     *     // Perform validation or other actions
+     *   }}
+     * />
+     * ```
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Enable auto unmounting of the popover content when it's not displayed.
+     * When true, the popover content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+    /**
+     * Allowed placements for the popover relative to the trigger element.
+     * When provided, the popover will try each placement in order until it finds one that fits within the viewport.
+     *
+     * @default ['bottom-start', 'bottom-end', 'top-start', 'top-end']
+     *
+     * @example
+     * ```tsx
+     * // Try bottom-start first, fallback to top-start
+     * <BaseRangePicker allowedPlacements={['bottom-start', 'top-start']}>
+     *   ...
+     * </BaseRangePicker>
+     * ```
+     */
+    allowedPlacements?: PopoverProps['allowedPlacements'];
+    /**
+     * Whether to enable the clear button functionality.
+     * When enabled, a clear button will appear when there are values in the date inputs.
+     * Clicking the clear button will clear both date inputs.
+     *
+     * @default false
+     */
+    enableClearButton?: boolean;
+    /**
+     * The properties for the clear button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     */
+    clearButtonProps?: Pick<React.ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+    /**
+     * The minimum selectable date.
+     * Dates before this date will be disabled and cannot be selected.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <BaseRangePicker minDate={new Date('2024-01-01')} />
+     * ```
+     */
+    minDate?: Date;
+    /**
+     * The maximum selectable date.
+     * Dates after this date will be disabled and cannot be selected.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <BaseRangePicker maxDate={new Date('2024-12-31')} />
+     * ```
+     */
+    maxDate?: Date;
+    /**
+     * Custom render function for the popover content. This makes BaseRangePicker truly generic.
+     * When not provided, defaults to BaseRangePickerPopover for backward compatibility.
+     *
+     * @param options - The options object containing viewingValue, setViewingValue, value, and onChange
+     *
+     * @returns React.ReactNode to render as the popover content
+     *
+     * @example
+     * ```tsx
+     * <BaseRangePicker
+     *   renderPopoverContent={({ viewingValue, setViewingValue, value, onChange }) => (
+     *     <MonthRangePickerPanel
+     *       viewingValue={viewingValue}
+     *       setViewingValue={setViewingValue}
+     *       value={value}
+     *       onChange={onChange}
+     *     />
+     *   )}
+     * />
+     * ```
+     */
+    renderPopoverContent?: (options: {
+        viewingValue: Date;
+        setViewingValue: (date: Date) => void;
+        value?: DateRangeInput;
+    }) => React.ReactNode;
+    /**
+     * The minimum width of the popover. Default is the width of the trigger element.
+     * This is useful for components like MonthRangePicker that need a fixed width
+     * regardless of the trigger width.
+     *
+     * @default undefined - Uses the trigger element width
+     *
+     * @example
+     * ```tsx
+     * <BaseRangePicker minWidth="min-content" />
+     * <BaseRangePicker minWidth="400px" />
+     * ```
+     */
+    minWidth?: PopoverProps['minWidth'];
+    /**
+     * Props for the start date input element.
+     * Use this to set HTML attributes like `id`, `name`, `aria-describedby`, `placeholder`, etc.
+     * for the start date input.
+     *
+     * @example
+     * ```tsx
+     * // Label association
+     * <label htmlFor="start-date">Start Date</label>
+     * <DateRangePicker startInputProps={{ id: 'start-date' }} />
+     *
+     * // With placeholder
+     * <DateRangePicker startInputProps={{ placeholder: 'Start date' }} />
+     *
+     * // With react-hook-form
+     * <DateRangePicker
+     *   startInputProps={{
+     *     ...register("startDate"),
+     *     id: "start-date"
+     *   }}
+     * />
+     * ```
+     */
+    startInputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'disabled' | 'className'>;
+    /**
+     * Props for the end date input element.
+     * Use this to set HTML attributes like `id`, `name`, `aria-describedby`, `placeholder`, etc.
+     * for the end date input.
+     *
+     * @example
+     * ```tsx
+     * // Label association
+     * <label htmlFor="end-date">End Date</label>
+     * <DateRangePicker endInputProps={{ id: 'end-date' }} />
+     *
+     * // With placeholder
+     * <DateRangePicker endInputProps={{ placeholder: 'End date' }} />
+     *
+     * // Accessibility
+     * <DateRangePicker
+     *   endInputProps={{
+     *     id: 'end-date',
+     *     'aria-describedby': 'end-date-help'
+     *   }}
+     * />
+     * ```
+     */
+    endInputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'disabled' | 'className'>;
+    /**
+     * The locale of the calendar.
+     *
+     * @default 'ja'
+     */
+    calendarLocale?: BasePickerProps['calendarLocale'];
+};

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * Internal component: BaseRangePickerCalendar
+ * Combines header (month label only) and CalendarGrid for a single month
+ */
+export declare function BaseRangePickerCalendar({ viewingMonth, handleKeyboardNavigation, }: {
+    viewingMonth: Date;
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRangePickerCalendar = BaseRangePickerCalendar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../../../../styled-system/recipes");
+const BaseRangePickerDateCell_1 = require("./BaseRangePickerDateCell");
+const BaseRangePickerProvider_1 = require("../../BaseRangePickerProvider");
+const css_1 = require("../../../../../../styled-system/css");
+const CalendarGrid_1 = require("../../../CalendarGrid");
+/**
+ * Internal component: BaseRangePickerCalendar
+ * Combines header (month label only) and CalendarGrid for a single month
+ */
+function BaseRangePickerCalendar({ viewingMonth, handleKeyboardNavigation, }) {
+    const classNames = (0, recipes_1.dateRangePickerPopoverSlotRecipe)();
+    const { handleDateClick, handlePreview, clearPreview, isInRange, isRangeStart, isRangeEnd, pendingFocusDate, setPendingFocusDate, temporaryStart, temporaryEnd, isDateDisabled, } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
+    // Internal renderDateCell logic - optimized with useCallback and memoized calculations
+    const renderDateCell = (0, react_1.useCallback)((dateItem) => {
+        const { date, ...rest } = dateItem;
+        const disabled = isDateDisabled(date);
+        // Memoize range calculations to avoid duplicate calls
+        const isStart = isRangeStart(date);
+        const isEnd = isRangeEnd(date);
+        const selected = isStart || isEnd;
+        const inRange = isInRange(date);
+        // Memoize event handlers
+        const handleClick = () => {
+            if (!disabled) {
+                handleDateClick(date);
+            }
+        };
+        const handleMouseEnter = () => {
+            if (!disabled) {
+                handlePreview(date);
+            }
+        };
+        const handleFocus = () => {
+            if (!disabled) {
+                handlePreview(date);
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(BaseRangePickerDateCell_1.BaseRangePickerDateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, isRangeStart: isStart, isRangeEnd: isEnd, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: handleFocus, onMouseLeave: clearPreview, onBlur: clearPreview }, date.toISOString()));
+    }, [isDateDisabled, isRangeStart, isRangeEnd, isInRange, handleDateClick, handlePreview, clearPreview]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.root, 'mfui-BaseRangePickerCalendar__root'), children: (0, jsx_runtime_1.jsx)(CalendarGrid_1.CalendarGrid, { viewingValue: viewingMonth, renderDateCell: renderDateCell, pendingFocusDate: pendingFocusDate ?? undefined, value: temporaryStart || temporaryEnd, onDateClick: undefined, onPendingFocusDateChange: setPendingFocusDate, onKeyboardNavigation: handleKeyboardNavigation }) }));
+}

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

@@ -0,0 +1,15 @@
+import { type DateCellProps } from '../../../DateCell';
+export type BaseRangePickerCalendarHeaderProps = {
+    label?: string;
+    showLeftNav?: boolean;
+    showRightNav?: boolean;
+    leftNavAriaLabel?: string;
+    rightNavAriaLabel?: string;
+    className?: string;
+};
+export type BaseRangePickerCalendarProps = {
+    viewingMonth: Date;
+    renderDateCell: (dateItem: DateCellProps) => React.ReactNode;
+    className?: string;
+    handleKeyboardNavigation?: React.KeyboardEventHandler<HTMLButtonElement>;
+};

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerCalendar.types.js

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

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerDateCell.d.ts

@@ -0,0 +1,12 @@
+import { type DateCellProps } from '../../../DateCell';
+export type BaseRangePickerDateCellProps = DateCellProps & {
+    /** Whether this date is the start of a range */
+    isRangeStart?: boolean;
+    /** Whether this date is the end of a range */
+    isRangeEnd?: boolean;
+};
+/**
+ * BaseRangePicker-specific DateCell component with enhanced accessibility
+ * for Japanese users. Provides configurable labels and range-specific context.
+ */
+export declare function BaseRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }: BaseRangePickerDateCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/BaseRangePickerDateCell.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRangePickerDateCell = BaseRangePickerDateCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const dayjs_1 = __importDefault(require("dayjs"));
+const constants_1 = require("./constants");
+const DateCell_1 = require("../../../DateCell");
+/**
+ * BaseRangePicker-specific DateCell component with enhanced accessibility
+ * for Japanese users. Provides configurable labels and range-specific context.
+ */
+function BaseRangePickerDateCell({ date, selected, inRange, disabled, isRangeStart, isRangeEnd, ...rest }) {
+    const accessibleLabel = (0, react_1.useMemo)(() => {
+        const today = new Date();
+        const isToday = date.getFullYear() === today.getFullYear() &&
+            date.getMonth() === today.getMonth() &&
+            date.getDate() === today.getDate();
+        // Create a comprehensive accessible label
+        const dateText = (0, dayjs_1.default)(date).format('D MMMM YYYY');
+        const statusParts = [];
+        if (isToday) {
+            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.TODAY);
+        }
+        if (disabled) {
+            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.UNAVAILABLE);
+        }
+        else if (selected) {
+            if (isRangeStart) {
+                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.RANGE_START);
+            }
+            else if (isRangeEnd) {
+                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.RANGE_END);
+            }
+            else {
+                statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.SELECTED);
+            }
+        }
+        else if (inRange) {
+            statusParts.push(constants_1.DATE_RANGE_PICKER_A11Y_LABELS.IN_RANGE);
+        }
+        return statusParts.length > 0 ? `${dateText}, ${statusParts.join(', ')}` : dateText;
+    }, [date, selected, inRange, disabled, isRangeStart, isRangeEnd]);
+    return ((0, jsx_runtime_1.jsx)(DateCell_1.DateCell, { ...rest, date: date, selected: selected, inRange: inRange, disabled: disabled, "aria-label": accessibleLabel, "aria-pressed": selected ? 'true' : undefined, "aria-selected": selected ? 'true' : 'false' }));
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Default Japanese accessibility labels for BaseRangePicker
+ * These constants provide consistent Japanese text for screen readers.
+ */
+export declare const DATE_RANGE_PICKER_A11Y_LABELS: {
+    /** Label for today's date */
+    readonly TODAY: "今日";
+    /** Label for selected dates */
+    readonly SELECTED: "選択済み";
+    /** Label for dates in the selected range */
+    readonly IN_RANGE: "選択範囲内";
+    /** Label for unavailable/disabled dates */
+    readonly UNAVAILABLE: "選択不可";
+    /** Label for range start dates */
+    readonly RANGE_START: "開始日";
+    /** Label for range end dates */
+    readonly RANGE_END: "終了日";
+};

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/constants.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_RANGE_PICKER_A11Y_LABELS = void 0;
+/**
+ * Default Japanese accessibility labels for BaseRangePicker
+ * These constants provide consistent Japanese text for screen readers.
+ */
+exports.DATE_RANGE_PICKER_A11Y_LABELS = {
+    /** Label for today's date */
+    TODAY: '今日',
+    /** Label for selected dates */
+    SELECTED: '選択済み',
+    /** Label for dates in the selected range */
+    IN_RANGE: '選択範囲内',
+    /** Label for unavailable/disabled dates */
+    UNAVAILABLE: '選択不可',
+    /** Label for range start dates */
+    RANGE_START: '開始日',
+    /** Label for range end dates */
+    RANGE_END: '終了日',
+};

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

@@ -0,0 +1,4 @@
+export { BaseRangePickerCalendar } from './BaseRangePickerCalendar';
+export { BaseRangePickerDateCell } from './BaseRangePickerDateCell';
+export type { BaseRangePickerDateCellProps } from './BaseRangePickerDateCell';
+export { DATE_RANGE_PICKER_A11Y_LABELS } from './constants';

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerCalendar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATE_RANGE_PICKER_A11Y_LABELS = exports.BaseRangePickerDateCell = exports.BaseRangePickerCalendar = void 0;
+var BaseRangePickerCalendar_1 = require("./BaseRangePickerCalendar");
+Object.defineProperty(exports, "BaseRangePickerCalendar", { enumerable: true, get: function () { return BaseRangePickerCalendar_1.BaseRangePickerCalendar; } });
+var BaseRangePickerDateCell_1 = require("./BaseRangePickerDateCell");
+Object.defineProperty(exports, "BaseRangePickerDateCell", { enumerable: true, get: function () { return BaseRangePickerDateCell_1.BaseRangePickerDateCell; } });
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "DATE_RANGE_PICKER_A11Y_LABELS", { enumerable: true, get: function () { return constants_1.DATE_RANGE_PICKER_A11Y_LABELS; } });

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

@@ -0,0 +1,4 @@
+import { type BaseRangePickerProps } from '../../BaseRangePicker.types';
+export declare function BaseRangePickerFooter({ calendarLocale, }: {
+    calendarLocale?: BaseRangePickerProps['calendarLocale'];
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseRangePickerFooter = BaseRangePickerFooter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../../../../Button");
+const BaseRangePickerProvider_1 = require("../../BaseRangePickerProvider");
+const recipes_1 = require("../../../../../../styled-system/recipes");
+const constants_1 = require("../constants");
+const css_1 = require("../../../../../../styled-system/css");
+function BaseRangePickerFooter({ calendarLocale = 'ja', }) {
+    const classNames = (0, recipes_1.dateRangePickerPopoverSlotRecipe)();
+    const { temporaryStart, temporaryEnd, handleApply, handleCancel } = (0, BaseRangePickerProvider_1.useBaseRangePickerContext)();
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classNames.footer, 'mfui-BaseRangePickerFooter__footer'), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classNames.footerRight, 'mfui-BaseRangePickerFooter__footerRight'), children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { size: "small", onClick: handleCancel, children: (0, constants_1.getBaseRangePickerPopoverLabel)('CANCEL', calendarLocale) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { priority: "primary", size: "small", disabled: !temporaryStart || !temporaryEnd, onClick: handleApply, children: (0, constants_1.getBaseRangePickerPopoverLabel)('APPLY', calendarLocale) })] }) }));
+}

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

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

package/dist/cjs/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerPopover/BaseRangePickerFooter/index.js

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type BaseRangePickerProps } from '../BaseRangePicker.types';
+/**
+ * Popover component for BaseRangePicker.
+ *
+ * Renders two consecutive months and a footer for date range selection.
+ * All selection and preview state is managed via BaseRangePickerProvider context.
+ *
+ * @internal
+ *
+ * @param wrapperProps - Optional HTML div attributes to apply to the root element (e.g., className, data attributes).
+ *
+ * @remarks
+ * - Accessibility is handled by subcomponents (calendars and footer).
+ * - This component should not be used outside a BaseRangePickerProvider.
+ *
+ * @example
+ * <BaseRangePickerProvider>
+ *   <BaseRangePickerPopover wrapperProps={{ className: 'custom-class' }} />
+ * </BaseRangePickerProvider>
+ */
+export declare function BaseRangePickerPopover({ wrapperProps, calendarLocale, }: {
+    wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
+    calendarLocale: BaseRangePickerProps['calendarLocale'];
+}): import("react/jsx-runtime").JSX.Element;