@gravity-ui/date-components 2.8.3 → 2.10.0

package/dist/cjs/components/RelativeRangeDatePicker/components/Control/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "Range date picker": "Выбор диапазона дат"
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.d.ts

@@ -1,5 +1,5 @@
-import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
 import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
 import './PickerDialog.css';
 export interface PickerDialogProps {
     className?: string;

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.d.ts

@@ -1,6 +1,6 @@
 import type { Value } from '../../../RelativeDatePicker';
-import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
 import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
 export declare function useRelativeRangeDatePickerDialogState(state: RelativeRangeDatePickerState, props: RelativeRangeDatePickerProps): {
     start: Value | null;
     end: Value | null;

package/dist/cjs/components/RelativeRangeDatePicker/components/Zones/Zones.js

@@ -43,14 +43,14 @@ const b = (0, cn_1.block)('relative-range-date-picker-zones');
 function Zones(props) {
     const timeZone = (0, utils_1.normalizeTimeZone)(props.value);
     const size = props.isMobile ? 'xl' : props.size;
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Select, { value: [timeZone], options: zones, size: size, onUpdate: (v) => {
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Select, { disabled: props.disabled, value: [timeZone], options: zones, size: size, onUpdate: (v) => {
             const tz = v[0];
             if (tz) {
                 props.onUpdate(tz);
             }
         }, width: "max", renderControl: (controlProps) => {
             const value = timeZone === 'system' || timeZone === 'default' ? (0, i18n_1.i18n)(timeZone) : timeZone;
-            return ((0, jsx_runtime_1.jsxs)(uikit_1.Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, extraProps: {
+            return ((0, jsx_runtime_1.jsxs)(uikit_1.Button, { onClick: controlProps.onClick, ref: controlProps.ref, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, extraProps: {
                     'aria-haspopup': 'listbox',
                     'aria-expanded': controlProps.open,
                     onKeyDown: controlProps.onKeyDown,

package/dist/cjs/components/RelativeRangeDatePicker/i18n/en.json

@@ -4,6 +4,5 @@
   "\"To\"": "\"To\"",
   "\"To\" is required.": "\"To\" is required.",
   "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
-  "to": "to",
-  "Range date picker": "Range date picker"
+  "to": "to"
 }

package/dist/cjs/components/RelativeRangeDatePicker/i18n/index.d.ts

@@ -1 +1 @@
-export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to" | "Range date picker", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/RelativeRangeDatePicker/i18n/ru.json

@@ -4,6 +4,5 @@
   "\"To\"": "«До»",
   "\"To\" is required.": "«До» обязательно.",
   "\"From\" can't be after \"To\".": "«От» не может быть позже чем «До».",
-  "to": "до",
-  "Range date picker": "Выбор диапазона дат"
+  "to": "до"
 }

package/dist/cjs/components/RelativeRangeDatePicker/types.d.ts

@@ -0,0 +1,42 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Value } from '../RelativeDatePicker';
+import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { Preset } from './components/Presets/defaultPresets';
+import type { PresetTab } from './components/Presets/utils';
+import type { RelativeRangeDatePickerStateOptions, RelativeRangeDatePickerValue } from './hooks/useRelativeRangeDatePickerState';
+export type RelativeRangeDatePickerTriggerProps = Pick<React.InputHTMLAttributes<HTMLElement>, 'id' | 'role' | 'aria-controls' | 'aria-haspopup' | 'aria-expanded' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details' | 'onClick' | 'onKeyDown' | 'disabled' | 'readOnly'>;
+export interface RelativeRangeDatePickerRenderControlProps {
+    ref: React.Ref<HTMLElement>;
+    value: RelativeRangeDatePickerValue | null;
+    title: string;
+    errorMessage?: React.ReactNode;
+    validationState?: 'invalid';
+    open: boolean;
+    triggerProps: RelativeRangeDatePickerTriggerProps;
+}
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
+    placeholderValue?: DateTime;
+    /** Apply changes with button */
+    withApplyButton?: boolean;
+    /** Show time zone selector */
+    withZonesList?: boolean;
+    /** Show relative range presets */
+    withPresets?: boolean;
+    /** Custom preset tabs */
+    presetTabs?: PresetTab[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
+    /** Show selected relative values as absolute dates */
+    alwaysShowAsAbsolute?: boolean;
+    /** */
+    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
+    /** Sets the CSS className for the popup element. */
+    popupClassName?: string;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Used to render control. */
+    renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;
+}

package/dist/cjs/components/RelativeRangeDatePicker/types.js

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

package/dist/cjs/components/utils/dates.d.ts

@@ -1,8 +1,11 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+export declare function isWeekend(date: DateTime): boolean;
 export interface PlaceholderValueOptions {
     placeholderValue?: DateTime;
     timeZone?: string;
 }
 export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
 export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
+export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export declare function formatDateTime(date: DateTime, format: string, timezone: string): string;

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

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isWeekend = isWeekend;
 exports.createPlaceholderValue = createPlaceholderValue;
 exports.isInvalid = isInvalid;
+exports.constrainValue = constrainValue;
 exports.mergeDateTime = mergeDateTime;
+exports.formatDateTime = formatDateTime;
 const date_utils_1 = require("@gravity-ui/date-utils");
+function isWeekend(date) {
+    return [0, 6].includes(date.day());
+}
 function createPlaceholderValue({ placeholderValue, timeZone }) {
     return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : (0, date_utils_1.dateTime)({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
 }
@@ -19,9 +25,21 @@ function isInvalid(value, minValue, maxValue) {
     }
     return false;
 }
+function constrainValue(value, minValue, maxValue) {
+    if (minValue && value.isBefore(minValue)) {
+        return minValue;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return maxValue;
+    }
+    return value;
+}
 function mergeDateTime(date, time) {
     return date
         .set('hours', time.hour())
         .set('minutes', time.minute())
         .set('seconds', time.second());
 }
+function formatDateTime(date, format, timezone) {
+    return (0, date_utils_1.dateTime)({ input: date, timeZone: timezone }).format(format);
+}

package/dist/esm/components/CalendarView/Calendar.css

@@ -215,7 +215,7 @@
   height: 4px;
   content: "";
   border-radius: 50%;
-  background-color: var(--g-color-text-primary);
+  background-color: currentColor;
   transform: translateY(8px);
 }
 .g-date-calendar__button_disabled {

package/dist/esm/components/CalendarView/CalendarView.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { ChevronLeft, ChevronRight } from '@gravity-ui/icons';
 import { ArrowToggle, Button } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
+import { formatDateTime } from '../utils/dates';
 import { useCalendarCellProps } from './hooks/useCalendarCellProps';
 import { useCalendarGridProps } from './hooks/useCalendarGridProps';
 import { useCalendarProps } from './hooks/useCalendarProps';
@@ -56,14 +57,14 @@ function Content({ className, state, animation, onAnimationEnd }) {
 function Weekdays({ state }) {
     const weekdays = getWeekDays();
     return (_jsx("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+            return (_jsx("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": formatDateTime(date, 'dddd', state.timeZone), children: formatDateTime(date, 'dd', state.timeZone) }, date.day()));
         }) }));
 }
 function CalendarGridCells({ state }) {
     const rowsInPeriod = state.mode === 'days' ? 6 : 4;
     const columnsInRow = state.mode === 'days' ? 7 : 3 + (state.mode === 'quarters' ? 1 : 0);
     const days = getDaysInPeriod(state.startDate, state.endDate, state.mode);
-    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: days[rowIndex * columnsInRow].format('YYYY') })) : null, days
+    return (_jsx("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => (_jsxs("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? (_jsx("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: formatDateTime(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return _jsx(CalendarCell, { date: date, state: state }, date.unix());

package/dist/esm/components/CalendarView/hooks/types.d.ts

@@ -8,6 +8,8 @@ export interface CalendarStateOptionsBase extends InputBase {
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
     isDateUnavailable?: (date: DateTime) => boolean;
+    /** Callback that is called for each date of the calendar. If it returns true, then the date is weekend. */
+    isWeekend?: (date: DateTime) => boolean;
     /**
      * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
      * @default The timezone of the `value` or `defaultValue` or `focusedValue` or `defaultFocusedValue`, 'default' otherwise.

package/dist/esm/components/CalendarView/hooks/useCalendarCellProps.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { formatDateTime } from '../../utils/dates';
 export function useCalendarCellProps(date, state) {
     const ref = React.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -20,7 +21,7 @@ export function useCalendarCellProps(date, state) {
     const isSelectable = !isDisabled && !isUnavailable;
     const isCurrent = state.isCurrent(date);
     const isWeekend = state.isWeekend(date);
-    const label = getDateLabel(date, state.mode);
+    const label = getDateLabel(date, state);
     const cellProps = {
         role: 'gridcell',
         'aria-selected': isSelected ? 'true' : undefined,
@@ -52,15 +53,15 @@ export function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = date.format('D');
+    let formattedDate = formatDateTime(date, 'D', state.timeZone);
     if (state.mode === 'months') {
-        formattedDate = date.format('MMM');
+        formattedDate = formatDateTime(date, 'MMM', state.timeZone);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = date.format('[Q]Q');
+        formattedDate = formatDateTime(date, '[Q]Q', state.timeZone);
     }
     else if (state.mode === 'years') {
-        formattedDate = date.format('YYYY');
+        formattedDate = formatDateTime(date, 'YYYY', state.timeZone);
     }
     return {
         cellProps,
@@ -77,19 +78,21 @@ export function useCalendarCellProps(date, state) {
         isWeekend,
     };
 }
-function getDateLabel(date, mode) {
-    let label = '';
-    if (mode === 'days') {
-        label = `${date.format('dddd')}, ${date.format('LL')}`;
-    }
-    else if (mode === 'months') {
-        label = `${date.format('MMMM YYYY')}`;
-    }
-    else if (mode === 'quarters') {
-        label = `${date.format('[Q]Q YYYY')}`;
-    }
-    else if (mode === 'years') {
-        label = `${date.format('YYYY')}`;
+function getDateLabel(date, state) {
+    switch (state.mode) {
+        case 'days': {
+            return `${formatDateTime(date, 'dddd', state.timeZone)}, ${formatDateTime(date, 'LL', state.timeZone)}`;
+        }
+        case 'months': {
+            return `${formatDateTime(date, 'MMMM YYYY', state.timeZone)}`;
+        }
+        case 'quarters': {
+            return `${formatDateTime(date, '[Q]Q YYYY', state.timeZone)}`;
+        }
+        case 'years': {
+            return `${formatDateTime(date, 'YYYY', state.timeZone)}`;
+        }
+        default:
+            return '';
     }
-    return label;
 }

package/dist/esm/components/CalendarView/hooks/useCalendarGridProps.js

@@ -1,4 +1,5 @@
 import { useFocusWithin } from '@gravity-ui/uikit';
+import { formatDateTime } from '../../utils/dates';
 export function useCalendarGridProps(state) {
     const { focusWithinProps } = useFocusWithin({
         onFocusWithinChange: (isFocused) => {
@@ -7,7 +8,7 @@ export function useCalendarGridProps(state) {
     });
     const gridProps = Object.assign(Object.assign({ role: 'grid', 'aria-label': state.mode === 'years' || state.mode === 'quarters'
             ? `${state.startDate.year()} — ${state.endDate.year()}`
-            : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY'), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
+            : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone), 'aria-disabled': state.disabled ? 'true' : undefined, 'aria-readonly': state.readOnly ? 'true' : undefined }, focusWithinProps), { onKeyDown: (e) => {
             if (e.key === 'ArrowRight') {
                 e.preventDefault();
                 state.focusNextCell();

package/dist/esm/components/CalendarView/hooks/useCalendarProps.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import { useFocusWithin } from '@gravity-ui/uikit';
+import { formatDateTime } from '../../utils/dates';
 import { i18n } from '../i18n';
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 export function useCalendarProps(props, state) {
     const title = state.mode === 'years' || state.mode === 'quarters'
         ? `${state.startDate.year()} — ${state.endDate.year()}`
-        : state.focusedDate.format(state.mode === 'days' ? 'MMMM YYYY' : 'YYYY');
+        : formatDateTime(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
     const { focusWithinProps } = useFocusWithin({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,

package/dist/esm/components/CalendarView/hooks/useCalendarState.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { dateTime } from '@gravity-ui/date-utils';
 import { useControlledState } from '@gravity-ui/uikit';
-import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
+import { constrainValue, createPlaceholderValue, isWeekend, mergeDateTime } from '../../utils/dates';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
-import { calendarLayouts, constrainValue } from '../utils';
+import { calendarLayouts } from '../utils';
 const defaultModes = {
     days: true,
     months: true,
@@ -193,7 +193,13 @@ export function useCalendarState(props) {
             return this.disabled || this.isInvalid(date);
         },
         isWeekend(date) {
-            return this.mode === 'days' && [0, 6].includes(date.day());
+            if (this.mode !== 'days') {
+                return false;
+            }
+            if (typeof props.isWeekend === 'function') {
+                return props.isWeekend(date);
+            }
+            return isWeekend(date);
         },
         isCurrent(date) {
             return dateTime({ timeZone }).isSame(date, this.mode);

package/dist/esm/components/CalendarView/hooks/useRangeCalendarState.js

@@ -1,9 +1,8 @@
 import { __rest } from "tslib";
 import React from 'react';
 import { useControlledState } from '@gravity-ui/uikit';
-import { mergeDateTime } from '../../utils/dates';
+import { constrainValue, mergeDateTime } from '../../utils/dates';
 import { useDefaultTimeZone } from '../../utils/useDefaultTimeZone';
-import { constrainValue } from '../utils';
 import { useCalendarState } from './useCalendarState';
 export function useRangeCalendarState(props) {
     var _a;

package/dist/esm/components/CalendarView/utils.d.ts

@@ -1,6 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { CalendarLayout } from './hooks/types';
-export declare function constrainValue(value: DateTime, minValue: DateTime | undefined, maxValue: DateTime | undefined): DateTime;
 export declare function getDaysInPeriod(startDate: DateTime, _endDate: DateTime, mode: CalendarLayout): DateTime[];
 export declare function getWeekDays(): DateTime[];
 export declare const calendarLayouts: CalendarLayout[];

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

@@ -1,13 +1,4 @@
 import { dateTime } from '@gravity-ui/date-utils';
-export function constrainValue(value, minValue, maxValue) {
-    if (minValue && value.isBefore(minValue)) {
-        return minValue;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return maxValue;
-    }
-    return value;
-}
 export function getDaysInPeriod(startDate, _endDate, mode) {
     const days = [];
     if (mode === 'days') {

package/dist/esm/components/DateField/hooks/useDateFieldProps.js

@@ -34,10 +34,6 @@ export function useDateFieldProps(state, props) {
     });
     function syncSelectionFromDOM() {
         var _a, _b;
-        if (state.readOnly) {
-            setSelectedSections(-1);
-            return;
-        }
         state.focusSectionInPosition((_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart) !== null && _b !== void 0 ? _b : 0);
         setInnerState({});
     }
@@ -159,6 +155,7 @@ export function useDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
                 inputMode,
                 onClick() {
                     syncSelectionFromDOM();

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

@@ -19,7 +19,7 @@ export function RangeDatePicker(_a) {
     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 }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    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'), endContent: _jsxs(React.Fragment, { children: [!isOnlyTime && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isOnlyTime && (_jsx(StubButton, { size: calendarButtonProps.size, icon: ClockIcon }))] }) })), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.dateFieldState.setDate(v);
                 }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

package/dist/esm/components/RelativeDateField/hooks/useRelativeDateFieldProps.js

@@ -34,6 +34,7 @@ export function useRelativeDateFieldProps(state, props) {
                 'aria-describedby': props['aria-describedby'] || undefined,
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
+                readOnly: state.readOnly,
             },
         },
         calendarProps: {

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.css

@@ -2,40 +2,6 @@
   position: relative;
   display: inline-flex;
 }
-.g-date-relative-range-date-picker__input {
-  caret-color: transparent;
-}
-.g-date-relative-range-date-picker__input_mobile {
-  pointer-events: none;
-}
-.g-date-relative-range-date-picker__mobile-trigger {
-  --_--g-date-mobile-trigger-clear-width: 0px;
-  --_--g-date-mobile-trigger-errors-width: 0px;
-  --_--g-date-mobile-trigger-button-width: 24px;
-  position: absolute;
-  inset: 0;
-  inset-inline-end: calc(var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) + var(--_--g-date-mobile-trigger-clear-width) + var(--_--g-date-mobile-trigger-errors-width));
-  opacity: 0;
-}
-.g-date-relative-range-date-picker__mobile-trigger_size_s {
-  --_--g-date-mobile-trigger-button-width: 20px;
-}
-.g-date-relative-range-date-picker__mobile-trigger_size_l {
-  --_--g-date-mobile-trigger-button-width: 28px;
-}
-.g-date-relative-range-date-picker__mobile-trigger_size_xl {
-  --_--g-date-mobile-trigger-button-width: 36px;
-}
-.g-date-relative-range-date-picker__mobile-trigger_has-clear {
-  --_--g-date-mobile-trigger-clear-width: calc(
-      var(--_--g-date-mobile-trigger-button-width) + 2px
-  );
-}
-.g-date-relative-range-date-picker__mobile-trigger_has-errors {
-  --_--g-date-mobile-trigger-errors-width: calc(
-      var(--_--g-date-mobile-trigger-button-width) + 2px
-  );
-}
 .g-date-relative-range-date-picker__value-label {
   display: flex;
   width: 100%;

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

@@ -1,32 +1,3 @@
-import type { DateTime } from '@gravity-ui/date-utils';
-import type { Value } from '../RelativeDatePicker';
-import type { DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
-import type { Preset } from './components/Presets/defaultPresets';
-import type { PresetTab } from './components/Presets/utils';
-import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from './types';
 import './RelativeRangeDatePicker.css';
-export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
-    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
-    format?: string;
-    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
-    placeholderValue?: DateTime;
-    /** Apply changes with button */
-    withApplyButton?: boolean;
-    /** Show time zone selector */
-    withZonesList?: boolean;
-    /** Show relative range presets */
-    withPresets?: boolean;
-    /** Custom preset tabs */
-    presetTabs?: PresetTab[];
-    /** Custom docs for presets, if empty array docs will be hidden */
-    docs?: Preset[];
-    /** Show selected relative values as absolute dates */
-    alwaysShowAsAbsolute?: boolean;
-    /** */
-    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
-    /** Sets the CSS className for the popup element. */
-    popupClassName?: string;
-    /** Handler that is called when the popup's open state changes. */
-    onOpenChange?: (open: boolean) => void;
-}
 export declare function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -1,19 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Calendar as CalendarIcon } from '@gravity-ui/icons';
-import { Button, Icon, TextInput, useControlledState, useFocusWithin, useMobile, } from '@gravity-ui/uikit';
+import { useControlledState, useFocusWithin, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { HiddenInput } from '../HiddenInput/HiddenInput';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
+import { Control } from './components/Control/Control';
 import { PickerDialog } from './components/PickerDialog/PickerDialog';
 import { useRelativeRangeDatePickerState } from './hooks/useRelativeRangeDatePickerState';
-import { i18n } from './i18n';
-import { getDefaultTitle } from './utils';
 import './RelativeRangeDatePicker.css';
 const b = block('relative-range-date-picker');
 export function RelativeRangeDatePicker(props) {
-    var _a;
     const state = useRelativeRangeDatePickerState(props);
     const isMobile = useMobile();
     const anchorRef = React.useRef(null);
@@ -36,37 +32,14 @@ export function RelativeRangeDatePicker(props) {
             }
         },
     });
-    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
-    const format = props.format || 'L';
-    const text = React.useMemo(() => typeof getRangeTitle === 'function'
-        ? getRangeTitle(state.value, state.timeZone)
-        : getDefaultTitle({
-            value: state.value,
-            timeZone: state.timeZone,
-            alwaysShowAsAbsolute: alwaysShowAsAbsolute,
-            format,
-            presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
-        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
-    const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
-    const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
-    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
-                    if (!props.readOnly && !v) {
-                        state.setValue(null, 'default');
+    return (_jsxs("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [_jsx(Control, { props: props, state: state, open: open, isMobile: isMobile, ref: inputRef, onClick: () => {
+                    if (props.disabled) {
+                        return;
+                    }
+                    if (!open) {
+                        setIsActive(true);
+                        setOpen(true);
                     }
-                }, controlProps: {
-                    role: 'combobox',
-                    'aria-expanded': open,
-                    disabled: isMobile,
-                    className: b('input', { mobile: isMobile }),
-                    onClick: () => {
-                        if (props.disabled) {
-                            return;
-                        }
-                        if (!open) {
-                            setIsActive(true);
-                            setOpen(true);
-                        }
-                    },
                 }, onKeyDown: (e) => {
                     if (props.disabled) {
                         return;
@@ -75,26 +48,19 @@ export function RelativeRangeDatePicker(props) {
                         e.preventDefault();
                         setOpen(true);
                     }
+                }, onClickCalendar: () => {
+                    setIsActive(true);
+                    setOpen(!open);
                 }, onFocus: () => {
                     if (!isActive) {
                         setIsActive(true);
                         setOpen(true);
                     }
-                }, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: _jsx(Button, { view: "flat-secondary", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
-                        'aria-haspopup': 'dialog',
-                        'aria-expanded': open,
-                        'aria-label': i18n('Range date picker'),
-                    }, onClick: () => {
-                        setIsActive(true);
-                        setOpen(!open);
-                    }, children: _jsx(Icon, { data: CalendarIcon }) }) }), isMobile ? (_jsx("button", { className: b('mobile-trigger', {
-                    'has-clear': Boolean(props.hasClear && state.value),
-                    'has-errors': state.isInvalid && props.errorPlacement === 'inside',
-                    size: props.size,
-                }), onClick: () => {
-                    setIsActive(true);
-                    setOpen(true);
-                } })) : null, _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                }, onUpdate: (v) => {
+                    if (!props.readOnly && !v) {
+                        state.setValue(null, 'default');
+                    }
+                } }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), _jsx(HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.setValue(v.value, v.timeZone);
                 }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), _jsx(PickerDialog, { state: state, props: props, open: open, onClose: () => {
                     setOpen(false);