@gravity-ui/date-components 1.6.0 → 2.0.1

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

@@ -1,8 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = void 0;
+exports.useFormatSections = exports.isAllSegmentsValid = exports.parseDateFromString = exports.formatSections = exports.getCurrentEditableSectionIndex = exports.toEditableSection = exports.isEditableSection = exports.getEditableSections = exports.cleanString = exports.splitFormatIntoSections = exports.setSegment = exports.addSegment = exports.getDurationUnitFromSectionType = exports.getSectionValue = exports.getSectionLimits = exports.expandFormat = exports.EDITABLE_SEGMENTS = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
+const dates_1 = require("../utils/dates");
 const i18n_1 = require("./i18n");
+exports.EDITABLE_SEGMENTS = {
+    year: true,
+    month: true,
+    day: true,
+    hour: true,
+    minute: true,
+    second: true,
+    dayPeriod: true,
+    weekday: true,
+};
 function expandFormat(format) {
     const localeFormats = date_utils_1.settings.getLocaleData().formats;
     const getShortLocalizedFormatFromLongLocalizedFormat = (formatBis) => formatBis.replace(/(\[[^\]]+])|(MMMM|MM|DD|dddd)/g, (_, escapeSequence, localizedFormat) => escapeSequence || localizedFormat.slice(1));
@@ -320,7 +333,7 @@ function splitFormatIntoSections(format) {
     let isSeparator = false;
     let isInEscapeBoundary = false;
     for (let i = 0; i < expandedFormat.length; i++) {
-        const char = expandedFormat[i];
+        const char = expandedFormat[i] || '';
         if (isInEscapeBoundary) {
             if (char === escapedCharacters.end) {
                 isInEscapeBoundary = false;
@@ -419,3 +432,102 @@ function cleanString(dirtyString) {
     return dirtyString.replace(/[\u2066\u2067\u2068\u2069]/g, '');
 }
 exports.cleanString = cleanString;
+function getEditableSections(sections, value, validSegments) {
+    let position = 1;
+    const newSections = [];
+    let previousEditableSection = -1;
+    for (let i = 0; i < sections.length; i++) {
+        const section = sections[i];
+        if (!section) {
+            continue;
+        }
+        const newSection = toEditableSection(section, value, validSegments, position, previousEditableSection);
+        newSections.push(newSection);
+        if (isEditableSection(section)) {
+            for (let j = Math.max(0, previousEditableSection); j <= i; j++) {
+                const prevSection = newSections[j];
+                if (prevSection) {
+                    prevSection.nextEditableSection = i;
+                    if (prevSection.previousEditableSection === -1) {
+                        prevSection.previousEditableSection = i;
+                    }
+                }
+            }
+            previousEditableSection = i;
+        }
+        position += newSection.textValue.length;
+    }
+    return newSections;
+}
+exports.getEditableSections = getEditableSections;
+function isEditableSection(section) {
+    var _a;
+    return (_a = exports.EDITABLE_SEGMENTS[section.type]) !== null && _a !== void 0 ? _a : false;
+}
+exports.isEditableSection = isEditableSection;
+function toEditableSection(section, value, validSegments, position, previousEditableSection) {
+    const isEditable = isEditableSection(section);
+    let renderedValue = section.placeholder;
+    if ((isEditable && validSegments[section.type]) || section.type === 'timeZoneName') {
+        renderedValue = value.format(section.format);
+        if (section.contentType === 'digit' && renderedValue.length < section.placeholder.length) {
+            renderedValue = renderedValue.padStart(section.placeholder.length, '0');
+        }
+    }
+    // use bidirectional context to allow the browser autodetect text direction
+    renderedValue = '\u2068' + renderedValue + '\u2069';
+    const sectionLength = renderedValue.length;
+    const newSection = Object.assign(Object.assign(Object.assign({}, section), { value: getSectionValue(section, value), textValue: renderedValue, start: position, end: position + sectionLength, modified: false, previousEditableSection, nextEditableSection: previousEditableSection }), getSectionLimits(section, value));
+    return newSection;
+}
+exports.toEditableSection = toEditableSection;
+function getCurrentEditableSectionIndex(sections, selectedSections) {
+    const currentIndex = selectedSections === 'all' || selectedSections === -1 ? 0 : selectedSections;
+    const section = sections[currentIndex];
+    if (section && !exports.EDITABLE_SEGMENTS[section.type]) {
+        return section.nextEditableSection;
+    }
+    return section ? currentIndex : -1;
+}
+exports.getCurrentEditableSectionIndex = getCurrentEditableSectionIndex;
+function formatSections(sections) {
+    // use ltr direction context to get predictable navigation inside input
+    return '\u2066' + sections.map((s) => s.textValue).join('') + '\u2069';
+}
+exports.formatSections = formatSections;
+function parseDate(options) {
+    let date = (0, date_utils_1.dateTime)(options);
+    if (!(0, date_utils_1.isValid)(date)) {
+        date = (0, date_utils_1.dateTime)(Object.assign(Object.assign({}, options), { format: undefined }));
+    }
+    return date;
+}
+function isDateStringWithTimeZone(str) {
+    return /z$/i.test(str) || /[+-]\d\d:\d\d$/.test(str);
+}
+function parseDateFromString(str, format, timeZone) {
+    let date = parseDate({ input: str, format, timeZone });
+    if ((0, date_utils_1.isValid)(date)) {
+        if (timeZone && !isDateStringWithTimeZone(str)) {
+            const time = parseDate({ input: str, format });
+            date = (0, dates_1.mergeDateTime)(date, time);
+        }
+    }
+    return date;
+}
+exports.parseDateFromString = parseDateFromString;
+function isAllSegmentsValid(allSegments, validSegments) {
+    return Object.keys(allSegments).every((key) => validSegments[key]);
+}
+exports.isAllSegmentsValid = isAllSegmentsValid;
+function useFormatSections(format) {
+    const usedFormat = format;
+    const [sections, setSections] = react_1.default.useState(() => splitFormatIntoSections(usedFormat));
+    const [previousFormat, setFormat] = react_1.default.useState(usedFormat);
+    if (usedFormat !== previousFormat) {
+        setFormat(usedFormat);
+        setSections(splitFormatIntoSections(usedFormat));
+    }
+    return sections;
+}
+exports.useFormatSections = useFormatSections;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { type CalendarProps } from '../Calendar';
-import type { AccessibilityProps, DateFieldBase, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
+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, StyleProps, AccessibilityProps {
+export interface DatePickerProps extends DateFieldBase, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
 }
-export declare function DatePicker({ value, defaultValue, onUpdate, className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ className, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -14,13 +14,13 @@ const useDatePickerState_1 = require("./hooks/useDatePickerState");
 const utils_1 = require("./utils");
 require("./DatePicker.css");
 function DatePicker(_a) {
-    var { value, defaultValue, onUpdate, className } = _a, props = tslib_1.__rest(_a, ["value", "defaultValue", "onUpdate", "className"]);
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
     const anchorRef = react_1.default.useRef(null);
-    const state = (0, useDatePickerState_1.useDatePickerState)(Object.assign(Object.assign({}, props), { value,
-        defaultValue,
-        onUpdate }));
+    const state = (0, useDatePickerState_1.useDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, useDatePickerProps_1.useDatePickerProps)(state, props);
-    const [isMobile] = (0, uikit_1.useMobile)();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, rightContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))) }))] })));
+    const isMobile = (0, uikit_1.useMobile)();
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, utils_1.b)(null, className) }, groupProps, { children: [isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: (0, utils_1.b)('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorRef: anchorRef }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.b)('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: (0, utils_1.b)('field', { mobile: isMobile }), hasClear: !isMobile && fieldProps.hasClear, endContent: isMobile ? ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { props: props, state: state })) : ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))) })), (0, jsx_runtime_1.jsx)("input", { type: "text", hidden: true, name: props.name, value: state.value ? state.value.toISOString() : '', 
+                // Ignore React warning
+                onChange: () => { } })] })));
 }
 exports.DatePicker = DatePicker;

package/dist/cjs/components/DatePicker/MobileCalendar.css

@@ -26,10 +26,10 @@
 .g-date-mobile-calendar__input {
   position: absolute;
   z-index: 1;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   box-sizing: border-box;
-  width: 100%;
+  min-width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
@@ -39,9 +39,9 @@
 }
 .g-date-mobile-calendar__input::-webkit-calendar-picker-indicator {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  min-width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;

package/dist/cjs/components/DatePicker/MobileCalendar.js

@@ -11,6 +11,7 @@ const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
 require("./MobileCalendar.css");
 const b = (0, cn_1.block)('mobile-calendar');
 function MobileCalendar({ props, state }) {
+    var _a, _b;
     let type = 'date';
     if (state.hasTime && state.hasDate) {
         type = 'datetime-local';
@@ -18,31 +19,35 @@ function MobileCalendar({ props, state }) {
     else if (state.hasTime) {
         type = 'time';
     }
-    return ((0, jsx_runtime_1.jsx)("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.value || props.placeholderValue, type), id: props.id, min: formatNative(props.minValue, type), max: formatNative(props.maxValue, type), tabIndex: -1, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)("input", { className: b('input'), disabled: props.disabled, type: type, value: formatNative(state.dateFieldState.displayValue, type), id: props.id, min: formatNative((_a = props.minValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone), type), max: formatNative((_b = props.maxValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone), type), tabIndex: -1, onChange: (e) => {
+            var _a, _b;
             if (props.readOnly) {
                 return;
             }
             const newValue = e.target.value;
             if (newValue) {
-                const localDate = (0, date_utils_1.dateTime)({ input: newValue, format: getDateFormat(type) });
+                const localDate = (0, date_utils_1.dateTime)({
+                    input: newValue,
+                    format: getDateFormat(type),
+                    timeZone: 'system',
+                }).timeZone(state.timeZone, true);
                 let newDate = state.hasDate
-                    ? (0, date_utils_1.dateTime)({
-                        input: newValue,
-                        format: getDateFormat(type),
-                        timeZone: props.timeZone,
-                    })
+                    ? localDate
                     : (0, dates_1.createPlaceholderValue)({
-                        placeholderValue: props.placeholderValue,
-                        timeZone: props.timeZone,
+                        placeholderValue: (_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(state.timeZone),
+                        timeZone: state.timeZone,
                     });
                 if (state.hasTime) {
                     newDate = (0, dates_1.mergeDateTime)(newDate, localDate);
                 }
-                else if (state.dateValue) {
-                    newDate = (0, dates_1.mergeDateTime)(newDate, state.dateValue);
+                else if (state.value) {
+                    newDate = (0, dates_1.mergeDateTime)(newDate, state.value.timeZone(state.timeZone));
                 }
                 else {
-                    newDate = newDate.set('hours', 0).set('minutes', 0).set('seconds', 0);
+                    newDate = (0, dates_1.mergeDateTime)(newDate, (0, dates_1.createPlaceholderValue)({
+                        placeholderValue: (_b = props.placeholderValue) === null || _b === void 0 ? void 0 : _b.timeZone(state.timeZone),
+                        timeZone: state.timeZone,
+                    }));
                 }
                 state.setValue(newDate);
             }

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

@@ -9,7 +9,6 @@ const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput");
 const mergeProps_1 = require("../../utils/mergeProps");
 const i18n_1 = require("../i18n");
 function useDatePickerProps(state, _a) {
-    var _b;
     var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
     const [isActive, setActive] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
@@ -23,15 +22,6 @@ function useDatePickerProps(state, _a) {
         },
     });
     const { inputProps } = (0, DateField_1.useDateFieldProps)(state.dateFieldState, props);
-    let error;
-    let validationState = props.validationState;
-    if (validationState) {
-        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
-    }
-    else {
-        validationState = state.dateFieldState.validationState;
-        error = validationState === 'invalid';
-    }
     const inputRef = react_1.default.useRef(null);
     const handleRef = (0, uikit_1.useForkRef)(inputRef, inputProps.controlRef);
     const calendarRef = react_1.default.useRef(null);
@@ -53,7 +43,7 @@ function useDatePickerProps(state, _a) {
             } }),
         fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
             ? { value: '' }
-            : undefined, { controlRef: handleRef, error }),
+            : undefined, { controlRef: handleRef }),
         calendarButtonProps: {
             ref: calendarButtonRef,
             size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
@@ -84,7 +74,6 @@ function useDatePickerProps(state, _a) {
                     focusInput();
                 }
             },
-            // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
             focusTrap: true,
         },
         calendarProps: {
@@ -99,20 +88,20 @@ function useDatePickerProps(state, _a) {
                     focusInput();
                 }
             },
-            defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
-            value: state.dateValue,
+            value: state.dateFieldState.displayValue,
             minValue: props.minValue,
             maxValue: props.maxValue,
             isDateUnavailable: props.isDateUnavailable,
-            timeZone: props.timeZone,
+            timeZone: state.timeZone,
         },
         timeInputProps: {
             value: state.timeValue,
+            placeholderValue: state.dateFieldState.displayValue,
             onUpdate: state.setTimeValue,
             format: state.timeFormat,
             readOnly: state.readOnly,
             disabled: state.disabled,
-            timeZone: props.timeZone,
+            timeZone: state.timeZone,
             hasClear: props.hasClear,
             size: props.size,
         },

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

@@ -6,21 +6,21 @@ export interface DatePickerState {
     /** The currently selected date. */
     value: DateTime | null;
     /** Sets the selected date. */
-    setValue(value: DateTime | null): void;
+    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;
+    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;
+    setTimeValue: (value: DateTime | null) => void;
     /** Whether the field is read only. */
     readOnly?: boolean;
     /** Whether the field is disabled. */
@@ -33,10 +33,11 @@ export interface DatePickerState {
     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;
+    setOpen: (isOpen: boolean) => void;
     dateFieldState: DateFieldState;
 }
 export interface DatePickerStateOptions extends DateFieldBase {

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

@@ -3,67 +3,76 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDatePickerState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField");
-const utils_1 = require("../../DateField/utils");
-const useControlledState_1 = require("../../hooks/useControlledState");
 const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
 function useDatePickerState(props) {
+    var _a;
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = react_1.default.useState(false);
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
     const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
+    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(props.value || props.defaultValue || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
     let selectedDate = selectedDateInner;
     let selectedTime = selectedTimeInner;
     const format = props.format || 'L';
-    const { hasDate, hasTime, timeFormat } = react_1.default.useMemo(() => {
-        const sections = (0, utils_1.splitFormatIntoSections)(format);
-        let hasDate = false;
-        let hasHours = false;
-        let hasMinutes = false;
-        let hasSeconds = false;
-        for (const s of sections) {
-            hasHours || (hasHours = s.type === 'hour');
-            hasMinutes || (hasMinutes = s.type === 'minute');
-            hasSeconds || (hasSeconds = s.type === 'second');
-            hasDate || (hasDate = ['day', 'month', 'year'].includes(s.type));
-        }
-        return {
-            hasTime: hasHours || hasMinutes || hasSeconds,
-            timeFormat: hasSeconds ? 'LTS' : 'LT',
-            hasDate,
-        };
-    }, [format]);
-    if (value) {
-        selectedDate = value;
-        if (hasTime) {
-            selectedTime = value;
-        }
-    }
     const commitValue = (date, time) => {
         if (disabled || readOnly) {
             return;
         }
-        setValue((0, dates_1.mergeDateTime)(date, time));
+        setValue((0, dates_1.mergeDateTime)(date, time).timeZone(inputTimeZone));
         setSelectedDate(null);
         setSelectedTime(null);
     };
+    const dateFieldState = (0, DateField_1.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_1.default.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 = !hasTime;
-        if (hasTime) {
+        const shouldClose = !dateFieldState.hasTime;
+        if (dateFieldState.hasTime) {
             if (selectedTime || shouldClose) {
-                commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+                commitValue(newValue, selectedTime || newValue);
             }
             else {
                 setSelectedDate(newValue);
             }
         }
         else {
-            setValue(newValue);
+            commitValue(newValue, newValue);
         }
         if (shouldClose) {
             setOpen(false);
@@ -73,29 +82,33 @@ function useDatePickerState(props) {
         if (disabled || readOnly) {
             return;
         }
+        const newTime = newValue !== null && newValue !== void 0 ? newValue : (0, dates_1.createPlaceholderValue)({
+            placeholderValue: props.placeholderValue,
+            timeZone,
+        });
         if (selectedDate) {
-            commitValue(selectedDate, newValue);
+            commitValue(selectedDate, newTime);
         }
         else {
-            setSelectedTime(newValue);
+            setSelectedTime(newTime);
         }
     };
-    const dateFieldState = (0, DateField_1.useDateFieldState)({
-        value: value !== null && value !== void 0 ? value : null,
-        onUpdate: setValue,
-        disabled,
-        readOnly,
-        validationState: props.validationState,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        isDateUnavailable: props.isDateUnavailable,
-        format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-    });
+    if (dateFieldState.hasTime && !selectedTime) {
+        selectedTime = dateFieldState.displayValue;
+    }
     return {
-        value: value !== null && value !== void 0 ? value : null,
-        setValue,
+        value,
+        setValue(newDate) {
+            if (props.readOnly || props.disabled) {
+                return;
+            }
+            if (newDate) {
+                setValue(newDate.timeZone(inputTimeZone));
+            }
+            else {
+                setValue(null);
+            }
+        },
         dateValue: selectedDate,
         timeValue: selectedTime,
         setDateValue: selectDate,
@@ -103,13 +116,18 @@ function useDatePickerState(props) {
         disabled,
         readOnly,
         format,
-        hasDate,
-        hasTime,
+        hasDate: dateFieldState.hasDate,
+        hasTime: dateFieldState.hasTime,
         timeFormat,
+        timeZone,
         isOpen,
         setOpen(newIsOpen) {
-            if (!newIsOpen && !value && selectedDate && hasTime) {
-                commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            if (!newIsOpen && !value && selectedDate && dateFieldState.hasTime) {
+                commitValue(selectedDate, selectedTime ||
+                    (0, dates_1.createPlaceholderValue)({
+                        placeholderValue: props.placeholderValue,
+                        timeZone: inputTimeZone,
+                    }));
             }
             setOpen(newIsOpen);
         },
@@ -117,6 +135,3 @@ function useDatePickerState(props) {
     };
 }
 exports.useDatePickerState = useDatePickerState;
-function getPlaceholderTime(placeholderValue, timeZone) {
-    return (0, dates_1.createPlaceholderValue)({ placeholderValue, timeZone });
-}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import type { CalendarInstance, CalendarSize } from '../CalendarBase/CalendarBase';
-import type { RangeCalendarStateOptions } from '../CalendarBase/hooks/useRangeCalendarState';
+import type { CalendarInstance, CalendarSize } from '../CalendarView/CalendarView';
+import type { RangeCalendarStateOptions } from '../CalendarView/hooks/useRangeCalendarState';
 import type { AccessibilityProps, DomProps, FocusEvents, StyleProps } from '../types';
-import '../CalendarBase/Calendar.css';
+import '../CalendarView/Calendar.css';
 export interface RangeCalendarProps extends RangeCalendarStateOptions, DomProps, StyleProps, FocusEvents, AccessibilityProps {
     /**
      * The size of the element.

package/dist/cjs/components/RangeCalendar/RangeCalendar.js

@@ -4,9 +4,9 @@ exports.RangeCalendar = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const CalendarBase_1 = require("../CalendarBase/CalendarBase");
-const useRangeCalendarState_1 = require("../CalendarBase/hooks/useRangeCalendarState");
-require("../CalendarBase/Calendar.css");
+const CalendarView_1 = require("../CalendarView/CalendarView");
+const useRangeCalendarState_1 = require("../CalendarView/hooks/useRangeCalendarState");
+require("../CalendarView/Calendar.css");
 exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref) {
     const state = (0, useRangeCalendarState_1.useRangeCalendarState)(props);
     const handleBlur = (e) => {
@@ -16,5 +16,5 @@ exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref)
         }
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    return (0, jsx_runtime_1.jsx)(CalendarBase_1.CalendarBase, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+    return (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
 });

package/dist/cjs/components/RangeDateField/RangeDateField.css

@@ -0,0 +1,4 @@
+.g-date-range-date-field {
+  display: inline-block;
+  width: auto;
+}

package/dist/cjs/components/RangeDateField/RangeDateField.d.ts

@@ -0,0 +1,12 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { DateFieldProps } from '../DateField/hooks/useDateFieldProps';
+import type { RangeValue } from '../types';
+import './RangeDateField.css';
+export type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {
+    /**
+     * Delimiter separating the start and end parts of the range.
+     * @default ' — '
+     * */
+    delimiter?: string;
+};
+export declare function RangeDateField({ className, ...props }: RangeDateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RangeDateField/RangeDateField.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDateField = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const useDateFieldProps_1 = require("../DateField/hooks/useDateFieldProps");
+const useRangeDateFieldState_1 = require("./hooks/useRangeDateFieldState");
+require("./RangeDateField.css");
+const b = (0, cn_1.block)('range-date-field');
+function RangeDateField(_a) {
+    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+    const state = (0, useRangeDateFieldState_1.useRangeDateFieldState)(props);
+    const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
+    const [isActive, setActive] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+        },
+    });
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b(null, className), style: props.style }, focusWithinProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })) })));
+}
+exports.RangeDateField = RangeDateField;

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

@@ -0,0 +1,9 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { BaseDateFieldState } 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 declare function useRangeDateFieldState(props: RangeDateFieldStateOptions): RangeDateFieldState;