@gravity-ui/date-components 2.8.3 → 2.10.0

package/dist/cjs/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/cjs/components/CalendarView/CalendarView.js

@@ -10,6 +10,7 @@ const react_1 = __importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
+const dates_1 = require("../utils/dates");
 const useCalendarCellProps_1 = require("./hooks/useCalendarCellProps");
 const useCalendarGridProps_1 = require("./hooks/useCalendarGridProps");
 const useCalendarProps_1 = require("./hooks/useCalendarProps");
@@ -62,14 +63,14 @@ function Content({ className, state, animation, onAnimationEnd }) {
 function Weekdays({ state }) {
     const weekdays = (0, utils_1.getWeekDays)();
     return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-row'), role: "row", children: weekdays.map((date) => {
-            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": date.format('dddd'), children: date.format('dd') }, date.day()));
+            return ((0, jsx_runtime_1.jsx)("div", { className: b('weekday', { weekend: state.isWeekend(date) }), role: "columnheader", "aria-label": (0, dates_1.formatDateTime)(date, 'dddd', state.timeZone), children: (0, dates_1.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 = (0, utils_1.getDaysInPeriod)(state.startDate, state.endDate, state.mode);
-    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: days[rowIndex * columnsInRow].format('YYYY') })) : null, days
+    return ((0, jsx_runtime_1.jsx)("div", { className: b('grid-rowgroup', { mode: state.mode }), role: "rowgroup", children: [...new Array(rowsInPeriod).keys()].map((rowIndex) => ((0, jsx_runtime_1.jsxs)("div", { className: b('grid-row'), role: "row", children: [state.mode === 'quarters' ? ((0, jsx_runtime_1.jsx)("span", { role: "rowheader", className: b('grid-rowgroup-header'), children: (0, dates_1.formatDateTime)(days[rowIndex * columnsInRow], 'YYYY', state.timeZone) })) : null, days
                     .slice(rowIndex * columnsInRow, (rowIndex + 1) * columnsInRow)
                     .map((date) => {
                     return (0, jsx_runtime_1.jsx)(CalendarCell, { date: date, state: state }, date.unix());

package/dist/cjs/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/cjs/components/CalendarView/hooks/useCalendarCellProps.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarCellProps = useCalendarCellProps;
 const react_1 = __importDefault(require("react"));
+const dates_1 = require("../../utils/dates");
 function useCalendarCellProps(date, state) {
     const ref = react_1.default.useRef(null);
     const isFocused = state.isCellFocused(date);
@@ -26,7 +27,7 @@ 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,
@@ -58,15 +59,15 @@ function useCalendarCellProps(date, state) {
             }
         },
     };
-    let formattedDate = date.format('D');
+    let formattedDate = (0, dates_1.formatDateTime)(date, 'D', state.timeZone);
     if (state.mode === 'months') {
-        formattedDate = date.format('MMM');
+        formattedDate = (0, dates_1.formatDateTime)(date, 'MMM', state.timeZone);
     }
     else if (state.mode === 'quarters') {
-        formattedDate = date.format('[Q]Q');
+        formattedDate = (0, dates_1.formatDateTime)(date, '[Q]Q', state.timeZone);
     }
     else if (state.mode === 'years') {
-        formattedDate = date.format('YYYY');
+        formattedDate = (0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone);
     }
     return {
         cellProps,
@@ -83,19 +84,21 @@ 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 `${(0, dates_1.formatDateTime)(date, 'dddd', state.timeZone)}, ${(0, dates_1.formatDateTime)(date, 'LL', state.timeZone)}`;
+        }
+        case 'months': {
+            return `${(0, dates_1.formatDateTime)(date, 'MMMM YYYY', state.timeZone)}`;
+        }
+        case 'quarters': {
+            return `${(0, dates_1.formatDateTime)(date, '[Q]Q YYYY', state.timeZone)}`;
+        }
+        case 'years': {
+            return `${(0, dates_1.formatDateTime)(date, 'YYYY', state.timeZone)}`;
+        }
+        default:
+            return '';
     }
-    return label;
 }

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarGridProps = useCalendarGridProps;
 const uikit_1 = require("@gravity-ui/uikit");
+const dates_1 = require("../../utils/dates");
 function useCalendarGridProps(state) {
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithinChange: (isFocused) => {
@@ -10,7 +11,7 @@ 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) => {
+            : (0, dates_1.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/cjs/components/CalendarView/hooks/useCalendarProps.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCalendarProps = useCalendarProps;
 const react_1 = __importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const dates_1 = require("../../utils/dates");
 const i18n_1 = require("../i18n");
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 // eslint-disable-next-line complexity
 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');
+        : (0, dates_1.formatDateTime)(state.focusedDate, state.mode === 'days' ? 'MMMM YYYY' : 'YYYY', state.timeZone);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: props.onFocus,
         onBlurWithin: props.onBlur,

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

@@ -32,25 +32,25 @@ function useCalendarState(props) {
         if (!props.focusedValue) {
             return props.focusedValue;
         }
-        return (0, utils_1.constrainValue)(props.focusedValue.timeZone(timeZone), minValue, maxValue);
+        return (0, dates_1.constrainValue)(props.focusedValue.timeZone(timeZone), minValue, maxValue);
     }, [props.focusedValue, minValue, maxValue, timeZone]);
     const defaultFocusedValue = react_1.default.useMemo(() => {
         var _a;
         const defaultValue = ((_a = (props.defaultFocusedValue ? props.defaultFocusedValue : value)) === null || _a === void 0 ? void 0 : _a.timeZone(timeZone)) ||
             (0, dates_1.createPlaceholderValue)({ timeZone }).startOf(minMode);
-        return (0, utils_1.constrainValue)(defaultValue, minValue, maxValue);
+        return (0, dates_1.constrainValue)(defaultValue, minValue, maxValue);
     }, [maxValue, minValue, props.defaultFocusedValue, timeZone, value, minMode]);
     const [focusedDateInner, setFocusedDate] = (0, uikit_1.useControlledState)(focusedValue, defaultFocusedValue, (date) => {
         var _a;
         (_a = props.onFocusUpdate) === null || _a === void 0 ? void 0 : _a.call(props, date.timeZone(inputTimeZone));
     });
-    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : (0, utils_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }), minValue, maxValue);
+    const focusedDate = (_c = focusedDateInner === null || focusedDateInner === void 0 ? void 0 : focusedDateInner.timeZone(timeZone)) !== null && _c !== void 0 ? _c : (0, dates_1.constrainValue)((0, dates_1.createPlaceholderValue)({ timeZone }), minValue, maxValue);
     if (isInvalid(focusedDate, minValue, maxValue)) {
         // If the focused date was moved to an invalid value, it can't be focused, so constrain it.
-        setFocusedDate((0, utils_1.constrainValue)(focusedDate, minValue, maxValue));
+        setFocusedDate((0, dates_1.constrainValue)(focusedDate, minValue, maxValue));
     }
     function focusCell(date) {
-        setFocusedDate((0, utils_1.constrainValue)(date.startOf(currentMode), minValue, maxValue));
+        setFocusedDate((0, dates_1.constrainValue)(date.startOf(currentMode), minValue, maxValue));
     }
     const [isFocused, setFocused] = react_1.default.useState(props.autoFocus || false);
     const startDate = getStartDate(focusedDate, currentMode);
@@ -61,7 +61,7 @@ function useCalendarState(props) {
         value,
         setValue(date) {
             if (!disabled && !readOnly) {
-                let newValue = (0, utils_1.constrainValue)(date, minValue, maxValue);
+                let newValue = (0, dates_1.constrainValue)(date, minValue, maxValue);
                 if (this.isCellUnavailable(newValue)) {
                     return;
                 }
@@ -199,7 +199,13 @@ 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 (0, dates_1.isWeekend)(date);
         },
         isCurrent(date) {
             return (0, date_utils_1.dateTime)({ timeZone }).isSame(date, this.mode);
@@ -237,6 +243,6 @@ function getEndDate(date, mode) {
     return startDate.add({ [mode]: 11 });
 }
 function isInvalid(date, minValue, maxValue, mode = 'days') {
-    const constrainedDate = (0, utils_1.constrainValue)(date, minValue, maxValue);
+    const constrainedDate = (0, dates_1.constrainValue)(date, minValue, maxValue);
     return !constrainedDate.isSame(date, mode);
 }

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

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const dates_1 = require("../../utils/dates");
 const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
-const utils_1 = require("../utils");
 const useCalendarState_1 = require("./useCalendarState");
 function useRangeCalendarState(props) {
     var _a;
@@ -40,7 +39,7 @@ function useRangeCalendarState(props) {
         if (props.readOnly) {
             return;
         }
-        const newDate = (0, utils_1.constrainValue)(date, calendar.minValue, calendar.maxValue);
+        const newDate = (0, dates_1.constrainValue)(date, calendar.minValue, calendar.maxValue);
         if (calendar.isCellUnavailable(newDate)) {
             return;
         }

package/dist/cjs/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/cjs/components/CalendarView/utils.js

@@ -1,19 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.calendarLayouts = void 0;
-exports.constrainValue = constrainValue;
 exports.getDaysInPeriod = getDaysInPeriod;
 exports.getWeekDays = getWeekDays;
 const date_utils_1 = require("@gravity-ui/date-utils");
-function constrainValue(value, minValue, maxValue) {
-    if (minValue && value.isBefore(minValue)) {
-        return minValue;
-    }
-    if (maxValue && maxValue.isBefore(value)) {
-        return maxValue;
-    }
-    return value;
-}
 function getDaysInPeriod(startDate, _endDate, mode) {
     const days = [];
     if (mode === 'days') {

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

@@ -40,10 +40,6 @@ 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({});
     }
@@ -165,6 +161,7 @@ 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/cjs/components/RangeDatePicker/RangeDatePicker.js

@@ -22,7 +22,7 @@ function RangeDatePicker(_a) {
     const state = (0, useRangeDatePickerState_1.useRangeDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, DatePicker_1.useDatePickerProps)(state, props);
     const isOnlyTime = state.hasTime && !state.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: 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: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), hasClear: fieldProps.hasClear, endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: anchorRef, className: 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: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
 }

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

@@ -40,6 +40,7 @@ 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/cjs/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/cjs/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/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js

@@ -7,19 +7,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeRangeDatePicker = RelativeRangeDatePicker;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
-const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput");
-const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
+const Control_1 = require("./components/Control/Control");
 const PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
 const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState");
-const i18n_1 = require("./i18n");
-const utils_1 = require("./utils");
 require("./RelativeRangeDatePicker.css");
 const b = (0, cn_1.block)('relative-range-date-picker');
 function RelativeRangeDatePicker(props) {
-    var _a;
     const state = (0, useRelativeRangeDatePickerState_1.useRelativeRangeDatePickerState)(props);
     const isMobile = (0, uikit_1.useMobile)();
     const anchorRef = react_1.default.useRef(null);
@@ -42,37 +38,14 @@ function RelativeRangeDatePicker(props) {
             }
         },
     });
-    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
-    const format = props.format || 'L';
-    const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
-        ? getRangeTitle(state.value, state.timeZone)
-        : (0, utils_1.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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Control_1.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;
@@ -81,26 +54,19 @@ 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: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
-                        'aria-haspopup': 'dialog',
-                        'aria-expanded': open,
-                        'aria-label': (0, i18n_1.i18n)('Range date picker'),
-                    }, onClick: () => {
-                        setIsActive(true);
-                        setOpen(!open);
-                    }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.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, (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                }, onUpdate: (v) => {
+                    if (!props.readOnly && !v) {
+                        state.setValue(null, 'default');
+                    }
+                } }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(HiddenInput_1.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 }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
                     setOpen(false);

package/dist/cjs/components/RelativeRangeDatePicker/components/Control/Control.css

@@ -0,0 +1,34 @@
+.g-date-relative-range-date-picker-control__input {
+  caret-color: transparent;
+}
+.g-date-relative-range-date-picker-control__input_mobile {
+  pointer-events: none;
+}
+.g-date-relative-range-date-picker-control__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-control__mobile-trigger_size_s {
+  --_--g-date-mobile-trigger-button-width: 20px;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_size_l {
+  --_--g-date-mobile-trigger-button-width: 28px;
+}
+.g-date-relative-range-date-picker-control__mobile-trigger_size_xl {
+  --_--g-date-mobile-trigger-button-width: 36px;
+}
+.g-date-relative-range-date-picker-control__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-control__mobile-trigger_has-errors {
+  --_--g-date-mobile-trigger-errors-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import type { RelativeRangeDatePickerProps } from '../../types';
+import './Control.css';
+export type ControlProps = {
+    props: RelativeRangeDatePickerProps;
+    state: RelativeRangeDatePickerState;
+    open: boolean;
+    isMobile?: boolean;
+    onClick: (e: React.MouseEvent<HTMLElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+    onFocus: (e: React.FocusEvent<HTMLElement>) => void;
+    onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;
+    onUpdate: (value: string) => void;
+};
+export declare const Control: React.ForwardRefExoticComponent<ControlProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Control = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const getButtonSizeForInput_1 = require("../../../utils/getButtonSizeForInput");
+const utils_1 = require("../../utils");
+const i18n_1 = require("./i18n");
+require("./Control.css");
+const b = (0, cn_1.block)('relative-range-date-picker-control');
+exports.Control = react_1.default.forwardRef(({ props, state, open, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate }, ref) => {
+    var _a;
+    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
+    const format = props.format || 'L';
+    const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
+        ? getRangeTitle(state.value, state.timeZone)
+        : (0, utils_1.getDefaultTitle)({
+            value: state.value,
+            timeZone: state.timeZone,
+            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');
+    const triggerProps = {
+        id: props.id,
+        role: 'combobox',
+        'aria-haspopup': 'dialog',
+        'aria-expanded': open,
+        'aria-label': props['aria-label'],
+        'aria-labelledby': props['aria-labelledby'],
+        'aria-describedby': props['aria-describedby'],
+        'aria-details': props['aria-details'],
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+        onClick: onClickCalendar,
+        onKeyDown,
+    };
+    return props.renderControl ? (props.renderControl({
+        ref,
+        value: state.value,
+        title: text,
+        validationState,
+        errorMessage,
+        open,
+        triggerProps,
+    })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': open,
+                        'aria-label': (0, i18n_1.i18n)('Range date picker'),
+                    }, onClick: onClickCalendar, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
+                    'has-clear': Boolean(props.hasClear && state.value),
+                    'has-errors': state.isInvalid && props.errorPlacement === 'inside',
+                    size: props.size,
+                }), onClick: onClick })) : null] }));
+});
+exports.Control.displayName = 'Control';

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

@@ -0,0 +1,3 @@
+{
+  "Range date picker": "Range date picker"
+}

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

@@ -0,0 +1 @@
+export declare const i18n: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/RelativeRangeDatePicker/components/Control/i18n/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../../../utils/cn");
+const en_json_1 = __importDefault(require("./en.json"));
+const ru_json_1 = __importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}relative-range-date-picker-control`);