@gravity-ui/date-components 2.1.0 → 2.2.0

package/dist/cjs/components/RangeDatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeDatePicker';
+export * from './hooks/useRangeDatePickerState';

package/dist/cjs/components/RangeDatePicker/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RangeDatePicker"), exports);
+tslib_1.__exportStar(require("./hooks/useRangeDatePickerState"), exports);

package/dist/esm/components/DateField/hooks/useBaseDateFieldState.d.ts

@@ -28,7 +28,7 @@ export type BaseDateFieldStateOptions<T = DateTime> = {
     createPlaceholder: () => T;
     setValueFromString: (str: string) => boolean;
 };
-export type BaseDateFieldState<T = DateTime> = {
+export type DateFieldState<T = DateTime> = {
     /** The current field value. */
     value: T | null;
     /** Is no part of value is filled. */
@@ -94,4 +94,4 @@ export type BaseDateFieldState<T = DateTime> = {
     onInput: (key: string) => void;
     setValueFromString: (str: string) => boolean;
 };
-export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): BaseDateFieldState<T>;
+export declare function useBaseDateFieldState<T = DateTime>(props: BaseDateFieldStateOptions<T>): DateFieldState<T>;

package/dist/esm/components/DateField/hooks/useDateFieldProps.d.ts

@@ -1,9 +1,9 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { TextInputProps } from '@gravity-ui/uikit';
 import type { AccessibilityProps, DateFieldBase, TextInputProps as DateFieldTextInputProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputExtendProps } from '../../types';
-import type { BaseDateFieldState } from './useBaseDateFieldState';
+import type { DateFieldState } from './useBaseDateFieldState';
 export interface DateFieldProps<T = DateTime> extends DateFieldBase<T>, DateFieldTextInputProps, TextInputExtendProps, DomProps, InputDOMProps, FocusableProps, KeyboardEvents, StyleProps, AccessibilityProps {
 }
-export declare function useDateFieldProps<T = DateTime>(state: BaseDateFieldState<T>, props: DateFieldProps<T>): {
+export declare function useDateFieldProps<T = DateTime>(state: DateFieldState<T>, props: DateFieldProps<T>): {
     inputProps: TextInputProps;
 };

package/dist/esm/components/DateField/hooks/useDateFieldState.d.ts

@@ -1,6 +1,5 @@
 import type { DateFieldBase } from '../../types/datePicker';
-import type { BaseDateFieldState } from './useBaseDateFieldState';
+import type { DateFieldState } from './useBaseDateFieldState';
 export interface DateFieldStateOptions extends DateFieldBase {
 }
-export type DateFieldState = BaseDateFieldState;
 export declare function useDateFieldState(props: DateFieldStateOptions): DateFieldState;

package/dist/esm/components/DateField/utils.js

@@ -64,6 +64,7 @@ const formatTokenMap = {
 function getDateSectionConfigFromFormatToken(formatToken) {
     const config = formatTokenMap[formatToken];
     if (!config) {
+        // eslint-disable-next-line no-console
         console.error([
             `The token "${formatToken}" is not supported by the Date field.`,
             'Please try using another token.',
@@ -185,7 +186,7 @@ export function addSegment(section, date, amount) {
     var _a;
     let val = (_a = section.value) !== null && _a !== void 0 ? _a : 0;
     if (section.type === 'dayPeriod') {
-        val = date.hour() + (date.hour() > 12 ? -12 : 12);
+        val = date.hour() + (date.hour() >= 12 ? -12 : 12);
     }
     else {
         val = val + amount;

package/dist/esm/components/DatePicker/DatePicker.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarProps } from '../Calendar';
 import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import './DatePicker.css';
-export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
-    children?: (props: CalendarProps) => React.ReactNode;
+export interface DatePickerProps<T = DateTime> extends DateFieldBase<T>, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+    children?: (props: CalendarProps<T>) => React.ReactNode;
 }
 export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/DatePicker/hooks/datePickerStateFactory.d.ts

@@ -0,0 +1,49 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types';
+export interface DatePickerState<T = DateTime> {
+    /** The currently selected date. */
+    value: T | null;
+    /** Sets the selected date. */
+    setValue: (value: T | null) => void;
+    /**
+     * The date portion of the value. This may be set prior to `value` if the user has
+     * selected a date but has not yet selected a time.
+     */
+    dateValue: T | null;
+    /** Sets the date portion of the value. */
+    setDateValue: (value: T) => void;
+    /**
+     * The time portion of the value. This may be set prior to `value` if the user has
+     * selected a time but has not yet selected a date.
+     */
+    timeValue: T | null;
+    /** Sets the time portion of the value. */
+    setTimeValue: (value: T | null) => void;
+    /** Whether the field is read only. */
+    readOnly?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Format of the date when rendered in the input. */
+    format: string;
+    /** Whether the date picker supports selecting a date. */
+    hasDate: boolean;
+    /** Whether the date picker supports selecting a time. */
+    hasTime: boolean;
+    /** Format of the time when rendered in the input. */
+    timeFormat?: string;
+    timeZone: string;
+    /** Whether the calendar popover is currently open. */
+    isOpen: boolean;
+    /** Sets whether the calendar popover is open. */
+    setOpen: (isOpen: boolean) => void;
+    dateFieldState: DateFieldState<T>;
+}
+export interface DatePickerStateFactoryOptions<T, O extends DateFieldBase<T>> {
+    getPlaceholderTime: (placeholderValue: DateTime | undefined, timeZone?: string) => T;
+    mergeDateTime: (date: T, time: T) => T;
+    setTimezone: (date: T, timeZone: string) => T;
+    getDateTime: (date: T | null | undefined) => DateTime | undefined;
+    useDateFieldState: (props: O) => DateFieldState<T>;
+}
+export declare function datePickerStateFactory<T, O extends DateFieldBase<T>>({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }: DatePickerStateFactoryOptions<T, O>): (props: O) => DatePickerState<T>;

package/dist/esm/components/DatePicker/hooks/datePickerStateFactory.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { useControlledState } from '@gravity-ui/uikit';
+import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
+export function datePickerStateFactory({ getPlaceholderTime, mergeDateTime, setTimezone, getDateTime, useDateFieldState, }) {
+    return function useDatePickerState(props) {
+        var _a;
+        const { disabled, readOnly } = props;
+        const [isOpen, setOpen] = React.useState(false);
+        const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
+        const [selectedDateInner, setSelectedDate] = React.useState(null);
+        const [selectedTimeInner, setSelectedTime] = React.useState(null);
+        const inputTimeZone = useDefaultTimeZone(getDateTime(props.value) || getDateTime(props.defaultValue) || props.placeholderValue);
+        const timeZone = props.timeZone || inputTimeZone;
+        let selectedDate = selectedDateInner;
+        let selectedTime = selectedTimeInner;
+        const format = props.format || 'L';
+        const commitValue = (date, time) => {
+            if (disabled || readOnly) {
+                return;
+            }
+            setValue(setTimezone(mergeDateTime(date, time), inputTimeZone));
+            setSelectedDate(null);
+            setSelectedTime(null);
+        };
+        const dateFieldState = useDateFieldState(Object.assign(Object.assign({}, props), { value,
+            onUpdate(date) {
+                if (date) {
+                    commitValue(date, date);
+                }
+                else {
+                    setValue(null);
+                }
+            },
+            disabled,
+            readOnly, validationState: props.validationState, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, format, placeholderValue: props.placeholderValue, timeZone }));
+        const timeFormat = React.useMemo(() => {
+            const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
+            return hasSeconds ? 'LTS' : 'LT';
+        }, [dateFieldState.sections]);
+        if (value) {
+            selectedDate = setTimezone(value, timeZone);
+            if (dateFieldState.hasTime) {
+                selectedTime = setTimezone(value, timeZone);
+            }
+        }
+        // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+        const selectDate = (newValue) => {
+            if (disabled || readOnly) {
+                return;
+            }
+            const shouldClose = !dateFieldState.hasTime;
+            if (dateFieldState.hasTime) {
+                if (selectedTime || shouldClose) {
+                    commitValue(newValue, selectedTime || newValue);
+                }
+                else {
+                    setSelectedDate(newValue);
+                }
+            }
+            else {
+                commitValue(newValue, newValue);
+            }
+            if (shouldClose) {
+                setOpen(false);
+            }
+        };
+        const selectTime = (newValue) => {
+            if (disabled || readOnly) {
+                return;
+            }
+            const newTime = newValue !== null && newValue !== void 0 ? newValue : getPlaceholderTime(props.placeholderValue, timeZone);
+            if (selectedDate) {
+                commitValue(selectedDate, newTime);
+            }
+            else {
+                setSelectedTime(newTime);
+            }
+        };
+        if (dateFieldState.hasTime && !selectedTime) {
+            selectedTime = dateFieldState.displayValue;
+        }
+        return {
+            value,
+            setValue(newDate) {
+                if (props.readOnly || props.disabled) {
+                    return;
+                }
+                if (newDate) {
+                    setValue(setTimezone(newDate, inputTimeZone));
+                }
+                else {
+                    setValue(null);
+                }
+            },
+            dateValue: selectedDate,
+            timeValue: selectedTime,
+            setDateValue: selectDate,
+            setTimeValue: selectTime,
+            disabled,
+            readOnly,
+            format,
+            hasDate: dateFieldState.hasDate,
+            hasTime: dateFieldState.hasTime,
+            timeFormat,
+            timeZone,
+            isOpen,
+            setOpen(newIsOpen) {
+                if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
+                    commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+                }
+                setOpen(newIsOpen);
+            },
+            dateFieldState,
+        };
+    };
+}

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
 import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
-import type { Calendar } from '../../Calendar';
+import type { CalendarInstance, CalendarProps } from '../../Calendar';
 import type { DateFieldProps } from '../../DateField';
+import type { RangeValue } from '../../types';
 import type { DatePickerProps } from '../DatePicker';
 import type { DatePickerState } from './useDatePickerState';
-interface InnerRelativeDatePickerProps {
+interface InnerDatePickerProps<T = DateTime> {
     groupProps: React.HTMLAttributes<unknown> & {
         ref: React.Ref<any>;
     };
@@ -13,8 +15,10 @@ interface InnerRelativeDatePickerProps {
         ref: React.Ref<HTMLButtonElement>;
     };
     popupProps: PopupProps;
-    calendarProps: React.ComponentProps<typeof Calendar>;
-    timeInputProps: DateFieldProps;
+    calendarProps: CalendarProps<T> & {
+        ref: React.Ref<CalendarInstance>;
+    };
+    timeInputProps: DateFieldProps<T>;
 }
-export declare function useDatePickerProps(state: DatePickerState, { onFocus, onBlur, ...props }: DatePickerProps): InnerRelativeDatePickerProps;
+export declare function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(state: DatePickerState<T>, { onFocus, onBlur, ...props }: DatePickerProps<T>): InnerDatePickerProps<T>;
 export {};

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js

@@ -5,6 +5,7 @@ import { useDateFieldProps } from '../../DateField';
 import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
 import { mergeProps } from '../../utils/mergeProps';
 import { i18n } from '../i18n';
+import { getDateTimeValue } from '../utils';
 export function useDatePickerProps(state, _a) {
     var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = React.useState(false);
@@ -94,7 +95,7 @@ export function useDatePickerProps(state, _a) {
         },
         timeInputProps: {
             value: state.timeValue,
-            placeholderValue: state.dateFieldState.displayValue,
+            placeholderValue: getDateTimeValue(state.dateFieldState.displayValue),
             onUpdate: state.setTimeValue,
             format: state.timeFormat,
             readOnly: state.readOnly,

package/dist/esm/components/DatePicker/hooks/useDatePickerState.d.ts

@@ -1,45 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { DateFieldState } from '../../DateField';
 import type { DateFieldBase } from '../../types';
-export type Granularity = 'day' | 'hour' | 'minute' | 'second';
-export interface DatePickerState {
-    /** The currently selected date. */
-    value: DateTime | null;
-    /** Sets the selected date. */
-    setValue: (value: DateTime | null) => void;
-    /**
-     * The date portion of the value. This may be set prior to `value` if the user has
-     * selected a date but has not yet selected a time.
-     */
-    dateValue: DateTime | null;
-    /** Sets the date portion of the value. */
-    setDateValue: (value: DateTime) => void;
-    /**
-     * The time portion of the value. This may be set prior to `value` if the user has
-     * selected a time but has not yet selected a date.
-     */
-    timeValue: DateTime | null;
-    /** Sets the time portion of the value. */
-    setTimeValue: (value: DateTime | null) => void;
-    /** Whether the field is read only. */
-    readOnly?: boolean;
-    /** Whether the field is disabled. */
-    disabled?: boolean;
-    /** Format of the date when rendered in the input. */
-    format: string;
-    /** Whether the date picker supports selecting a date. */
-    hasDate: boolean;
-    /** Whether the date picker supports selecting a time. */
-    hasTime: boolean;
-    /** Format of the time when rendered in the input. */
-    timeFormat?: string;
-    timeZone: string;
-    /** Whether the calendar popover is currently open. */
-    isOpen: boolean;
-    /** Sets whether the calendar popover is open. */
-    setOpen: (isOpen: boolean) => void;
-    dateFieldState: DateFieldState;
-}
+export type { DatePickerState } from './datePickerStateFactory';
 export interface DatePickerStateOptions extends DateFieldBase {
 }
-export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;
+export declare const useDatePickerState: (props: import("../../DateField").DateFieldStateOptions) => import("./datePickerStateFactory").DatePickerState<DateTime>;

package/dist/esm/components/DatePicker/hooks/useDatePickerState.js

@@ -1,132 +1,14 @@
-import React from 'react';
-import { useControlledState } from '@gravity-ui/uikit';
 import { useDateFieldState } from '../../DateField';
 import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
-import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
-export function useDatePickerState(props) {
-    var _a;
-    const { disabled, readOnly } = props;
-    const [isOpen, setOpen] = React.useState(false);
-    const [value, setValue] = useControlledState(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
-    const [selectedDateInner, setSelectedDate] = React.useState(null);
-    const [selectedTimeInner, setSelectedTime] = React.useState(null);
-    const inputTimeZone = useDefaultTimeZone(props.value || props.defaultValue || props.placeholderValue);
-    const timeZone = props.timeZone || inputTimeZone;
-    let selectedDate = selectedDateInner;
-    let selectedTime = selectedTimeInner;
-    const format = props.format || 'L';
-    const commitValue = (date, time) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        setValue(mergeDateTime(date, time).timeZone(inputTimeZone));
-        setSelectedDate(null);
-        setSelectedTime(null);
-    };
-    const dateFieldState = useDateFieldState({
-        value,
-        onUpdate(date) {
-            if (date) {
-                commitValue(date, date);
-            }
-            else {
-                setValue(null);
-            }
-        },
-        disabled,
-        readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format,
-        placeholderValue: props.placeholderValue,
-        timeZone,
-    });
-    const timeFormat = React.useMemo(() => {
-        const hasSeconds = dateFieldState.sections.some((s) => s.type === 'second');
-        return hasSeconds ? 'LTS' : 'LT';
-    }, [dateFieldState.sections]);
-    if (value) {
-        selectedDate = value.timeZone(timeZone);
-        if (dateFieldState.hasTime) {
-            selectedTime = value.timeZone(timeZone);
-        }
-    }
-    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
-    const selectDate = (newValue) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        const shouldClose = !dateFieldState.hasTime;
-        if (dateFieldState.hasTime) {
-            if (selectedTime || shouldClose) {
-                commitValue(newValue, selectedTime || newValue);
-            }
-            else {
-                setSelectedDate(newValue);
-            }
-        }
-        else {
-            commitValue(newValue, newValue);
-        }
-        if (shouldClose) {
-            setOpen(false);
-        }
-    };
-    const selectTime = (newValue) => {
-        if (disabled || readOnly) {
-            return;
-        }
-        const newTime = newValue !== null && newValue !== void 0 ? newValue : createPlaceholderValue({
-            placeholderValue: props.placeholderValue,
-            timeZone,
-        });
-        if (selectedDate) {
-            commitValue(selectedDate, newTime);
-        }
-        else {
-            setSelectedTime(newTime);
-        }
-    };
-    if (dateFieldState.hasTime && !selectedTime) {
-        selectedTime = dateFieldState.displayValue;
-    }
-    return {
-        value,
-        setValue(newDate) {
-            if (props.readOnly || props.disabled) {
-                return;
-            }
-            if (newDate) {
-                setValue(newDate.timeZone(inputTimeZone));
-            }
-            else {
-                setValue(null);
-            }
-        },
-        dateValue: selectedDate,
-        timeValue: selectedTime,
-        setDateValue: selectDate,
-        setTimeValue: selectTime,
-        disabled,
-        readOnly,
-        format,
-        hasDate: dateFieldState.hasDate,
-        hasTime: dateFieldState.hasTime,
-        timeFormat,
-        timeZone,
-        isOpen,
-        setOpen(newIsOpen) {
-            if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
-                commitValue(selectedDate, selectedTime ||
-                    createPlaceholderValue({
-                        placeholderValue: props.placeholderValue,
-                        timeZone: inputTimeZone,
-                    }));
-            }
-            setOpen(newIsOpen);
-        },
-        dateFieldState,
-    };
+import { getDateTimeValue } from '../utils';
+import { datePickerStateFactory } from './datePickerStateFactory';
+export const useDatePickerState = datePickerStateFactory({
+    getPlaceholderTime,
+    mergeDateTime,
+    setTimezone: (date, timeZone) => date.timeZone(timeZone),
+    getDateTime: getDateTimeValue,
+    useDateFieldState,
+});
+function getPlaceholderTime(placeholderValue, timeZone) {
+    return createPlaceholderValue({ placeholderValue, timeZone });
 }

package/dist/esm/components/DatePicker/utils/cn.js

@@ -0,0 +1,2 @@
+import { block } from '../../../utils/cn';
+export const b = block('date-picker');

package/dist/esm/components/DatePicker/utils/getDateTimeValue.d.ts

@@ -0,0 +1,3 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue } from '../../types';
+export declare function getDateTimeValue(value: DateTime | RangeValue<DateTime> | null | undefined): DateTime | undefined;

package/dist/esm/components/DatePicker/utils/getDateTimeValue.js

@@ -0,0 +1,6 @@
+export function getDateTimeValue(value) {
+    if (!value) {
+        return undefined;
+    }
+    return 'start' in value && 'end' in value ? value.start : value;
+}

package/dist/esm/components/DatePicker/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './getDateTimeValue';

package/dist/esm/components/DatePicker/utils/index.js

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './getDateTimeValue';

package/dist/esm/components/RangeCalendar/RangeCalendar.d.ts

@@ -1,13 +1,8 @@
 import React from 'react';
-import type { CalendarInstance, CalendarSize } from '../CalendarView/CalendarView';
-import type { RangeCalendarStateOptions } from '../CalendarView/hooks/useRangeCalendarState';
-import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { CalendarProps } from '../Calendar/Calendar';
+import type { CalendarInstance } from '../CalendarView/CalendarView';
+import type { RangeValue } from '../types';
 import '../CalendarView/Calendar.css';
-export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
-    /**
-     * The size of the element.
-     * @default m
-     */
-    size?: CalendarSize;
-}
+export type RangeCalendarProps = CalendarProps<RangeValue<DateTime>>;
 export declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<CalendarInstance>>;

package/dist/esm/components/RangeDateField/hooks/useRangeDateFieldState.d.ts

@@ -1,9 +1,9 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { BaseDateFieldState } from '../../DateField';
+import type { DateFieldState } from '../../DateField';
 import type { DateFieldBase } from '../../types/datePicker';
 import type { RangeValue } from '../../types/inputs';
 export interface RangeDateFieldStateOptions extends DateFieldBase<RangeValue<DateTime>> {
     delimiter?: string;
 }
-export type RangeDateFieldState = BaseDateFieldState<RangeValue<DateTime>>;
+export type RangeDateFieldState = DateFieldState<RangeValue<DateTime>>;
 export declare function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState;

package/dist/esm/components/RangeDatePicker/RangeDatePicker.css

@@ -0,0 +1,22 @@
+.g-date-range-date-picker {
+  position: relative;
+  display: inline-block;
+  outline: none;
+}
+.g-date-range-date-picker__field {
+  width: 100%;
+}
+.g-date-range-date-picker__popup-anchor {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+}
+.g-date-range-date-picker__popup-content {
+  outline: none;
+}
+.g-date-range-date-picker__time-field {
+  width: 100%;
+}
+.g-date-range-date-picker__time-field-wrapper {
+  padding: 10px;
+}

package/dist/esm/components/RangeDatePicker/RangeDatePicker.d.ts

@@ -0,0 +1,6 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DatePickerProps } from '../DatePicker';
+import type { RangeValue } from '../types';
+import './RangeDatePicker.css';
+export type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;
+export declare function RangeDatePicker({ className, ...props }: RangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RangeDatePicker/RangeDatePicker.js

@@ -0,0 +1,21 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Calendar as CalendarIcon, Clock as ClockIcon } from '@gravity-ui/icons';
+import { Button, Icon, Popup, TextInput } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { RangeCalendar } from '../Calendar';
+import { useDatePickerProps } from '../DatePicker';
+import { StubButton } from '../DatePicker/StubButton';
+import { RangeDateField } from '../RangeDateField';
+import { useRangeDatePickerState } from './hooks/useRangeDatePickerState';
+import './RangeDatePicker.css';
+const b = block('range-date-picker');
+export function RangeDatePicker(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const anchorRef = React.useRef(null);
+    const state = useRangeDatePickerState(props);
+    const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = useDatePickerProps(state, props);
+    const isOnlyTime = state.hasTime && !state.hasDate;
+    return (_jsxs("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && (_jsx("div", { ref: anchorRef, className: b('popup-anchor'), children: _jsx(Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : (_jsx(RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), _jsx(TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) }))] })));
+}

package/dist/esm/components/RangeDatePicker/hooks/useRangeDatePickerState.d.ts

@@ -0,0 +1,7 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DatePickerState } from '../../DatePicker';
+import type { RangeDateFieldStateOptions } from '../../RangeDateField';
+import type { RangeValue } from '../../types';
+export type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;
+export type RangeDatePickerStateOptions = RangeDateFieldStateOptions;
+export declare const useRangeDatePickerState: (props: RangeDateFieldStateOptions) => DatePickerState<RangeValue<DateTime>>;

package/dist/esm/components/RangeDatePicker/hooks/useRangeDatePickerState.js

@@ -0,0 +1,25 @@
+import { datePickerStateFactory } from '../../DatePicker/hooks/datePickerStateFactory';
+import { getDateTimeValue } from '../../DatePicker/utils';
+import { useRangeDateFieldState } from '../../RangeDateField';
+import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+export const useRangeDatePickerState = datePickerStateFactory({
+    getPlaceholderTime,
+    mergeDateTime: mergeRangeDateTime,
+    setTimezone,
+    getDateTime: getDateTimeValue,
+    useDateFieldState: useRangeDateFieldState,
+});
+function getPlaceholderTime(placeholderValue, timeZone) {
+    const date = createPlaceholderValue({ placeholderValue, timeZone });
+    return { start: date, end: date };
+}
+function mergeRangeDateTime(date, time) {
+    const start = mergeDateTime(date.start, time.start);
+    const end = mergeDateTime(date.end, time.end);
+    return { start, end };
+}
+function setTimezone(date, timeZone) {
+    const start = date.start.timeZone(timeZone);
+    const end = date.end.timeZone(timeZone);
+    return { start, end };
+}

package/dist/esm/components/RangeDatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeDatePicker';
+export * from './hooks/useRangeDatePickerState';

package/dist/esm/components/RangeDatePicker/index.js

@@ -0,0 +1,2 @@
+export * from './RangeDatePicker';
+export * from './hooks/useRangeDatePickerState';