From 0aaf05e87a3b082e78799a9317fe239447511556 Mon Sep 17 00:00:00 2001
From: lentsd <lentsd@bk.ru>
Date: Wed, 26 Aug 2026 14:09:59 +0300
Subject: [PATCH] feat: add calendar popup placement to relative range picker

---
 .../RelativeRangeDatePicker/RelativeRangeDatePicker.tsx       | 1 +
 .../components/PickerDialog/PickerForm.tsx                    | 3 +++
 src/components/RelativeRangeDatePicker/types.ts               | 4 +++-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
index c6929978..63001253 100644
--- a/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
+++ b/src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx
@@ -157,6 +157,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
                 popupClassName={props.popupClassName}
                 popupStyle={props.popupStyle}
                 popupPlacement={props.popupPlacement}
+                calendarPopupPlacement={props.calendarPopupPlacement}
                 popupOffset={props.popupOffset}
                 isMobile={isMobile}
                 size={props.size}
diff --git a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
index 76945061..82b4dc68 100644
--- a/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
+++ b/src/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx
@@ -35,6 +35,8 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     readOnly?: boolean;
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** 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 */
@@ -87,6 +89,7 @@ export function PickerForm(
         readOnly: props.readOnly,
         size: props.size,
         errorPlacement: 'inside',
+        popupPlacement: props.calendarPopupPlacement,
     };
     const {isDateUnavailable, withHeader = false} = props;
     const {t} = i18n.useTranslation();
diff --git a/src/components/RelativeRangeDatePicker/types.ts b/src/components/RelativeRangeDatePicker/types.ts
index 6fd78f72..f774a1ec 100644
--- a/src/components/RelativeRangeDatePicker/types.ts
+++ b/src/components/RelativeRangeDatePicker/types.ts
@@ -1,6 +1,6 @@
 import type {DateTime} from '@gravity-ui/date-utils';
 
-import type {Value} from '../RelativeDatePicker';
+import type {RelativeDatePickerProps, Value} from '../RelativeDatePicker';
 import type {
     AccessibilityProps,
     DomProps,
@@ -63,6 +63,8 @@ export interface RelativeRangeDatePickerProps
         PopupStyleProps {
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** 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 */