@gravity-ui/date-components 2.9.0 → 2.10.0

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,38 +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,
-                    readOnly: props.readOnly,
-                    className: b('input', { mobile: isMobile }),
-                    onClick: () => {
-                        if (props.disabled) {
-                            return;
-                        }
-                        if (!open) {
-                            setIsActive(true);
-                            setOpen(true);
-                        }
-                    },
                 }, onKeyDown: (e) => {
                     if (props.disabled) {
                         return;
@@ -82,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`);

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/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/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,38 +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,
-                    readOnly: props.readOnly,
-                    className: b('input', { mobile: isMobile }),
-                    onClick: () => {
-                        if (props.disabled) {
-                            return;
-                        }
-                        if (!open) {
-                            setIsActive(true);
-                            setOpen(true);
-                        }
-                    },
                 }, onKeyDown: (e) => {
                     if (props.disabled) {
                         return;
@@ -76,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);

package/dist/esm/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/esm/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/esm/components/RelativeRangeDatePicker/components/Control/Control.js

@@ -0,0 +1,58 @@
+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 } from '@gravity-ui/uikit';
+import { block } from '../../../../utils/cn';
+import { getButtonSizeForInput } from '../../../utils/getButtonSizeForInput';
+import { getDefaultTitle } from '../../utils';
+import { i18n } from './i18n';
+import './Control.css';
+const b = block('relative-range-date-picker-control');
+export const Control = React.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.useMemo(() => typeof getRangeTitle === 'function'
+        ? getRangeTitle(state.value, state.timeZone)
+        : 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,
+    })) : (_jsxs(React.Fragment, { children: [_jsx(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: _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: onClickCalendar, 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: onClick })) : null] }));
+});
+Control.displayName = 'Control';

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

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

package/dist/esm/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/esm/components/RelativeRangeDatePicker/components/Control/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}relative-range-date-picker-control`);

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

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

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/RelativeRangeDatePicker/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",