feat(Pickers): add popup style/positioning props

Author: ValeraS

src/components/DatePicker/DatePicker.tsx

@@ -16,6 +16,7 @@ import type {
     FocusableProps,
     InputDOMProps,
     KeyboardEvents,
+    PopupStyleProps,
     StyleProps,
     TextInputProps,
 } from '../types';
@@ -37,7 +38,8 @@ export interface DatePickerProps<T = DateTime>
         DomProps,
         InputDOMProps,
         StyleProps,
-        AccessibilityProps {
+        AccessibilityProps,
+        PopupStyleProps {
     children?: (props: CalendarProps<T>) => React.ReactNode;
     disablePortal?: boolean;
     disableFocusTrap?: boolean;

src/components/DatePicker/hooks/useDatePickerProps.ts

@@ -151,6 +151,10 @@ export function useDatePickerProps<T extends DateTime | RangeValue<DateTime>>(
             },
             modal: !props.disableFocusTrap,
             disablePortal: props.disablePortal,
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+            className: props.popupClassName,
+            style: props.popupStyle,
         },
         calendarProps: {
             ref: calendarRef,

src/components/RelativeDateField/RelativeDateField.tsx

@@ -14,6 +14,7 @@ import type {
     FocusableProps,
     InputDOMProps,
     KeyboardEvents,
+    PopupStyleProps,
     StyleProps,
     TextInputExtendProps,
     TextInputProps,
@@ -36,7 +37,8 @@ export interface RelativeDateFieldProps
         StyleProps,
         AccessibilityProps,
         FocusableProps,
-        KeyboardEvents {
+        KeyboardEvents,
+        PopupStyleProps {
     /**
      * Show time field in popup
      * @default false
@@ -103,6 +105,10 @@ export function RelativeDateField(props: RelativeDateFieldProps) {
                             setOpen(false);
                         }
                     }}
+                    placement={props.popupPlacement}
+                    offset={props.popupOffset}
+                    className={props.popupClassName}
+                    style={props.popupStyle}
                 >
                     <div className={b('popup-content')}>
                         <Calendar {...calendarProps} />

src/components/RelativeDatePicker/RelativeDatePicker.tsx

@@ -22,6 +22,7 @@ import type {
     FocusableProps,
     InputDOMProps,
     KeyboardEvents,
+    PopupStyleProps,
     StyleProps,
     TextInputProps,
 } from '../types';
@@ -42,7 +43,8 @@ export interface RelativeDatePickerProps
         DomProps,
         InputDOMProps,
         StyleProps,
-        AccessibilityProps {
+        AccessibilityProps,
+        PopupStyleProps {
     children?: (props: CalendarProps) => React.ReactNode;
     /** Handler that is called when the popup's open state changes. */
     onOpenChange?: (open: boolean) => void;

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -213,6 +213,10 @@ export function useRelativeDatePickerProps(
                         : datePickerState.dateFieldState.displayValue,
                 );
             },
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+            className: props.popupClassName,
+            style: props.popupStyle,
         },
         calendarProps: {
             ref: calendarRef,

src/components/types/datePicker.ts

@@ -1,4 +1,5 @@
 import type {DateTime} from '@gravity-ui/date-utils';
+import type {CSSProperties, PopupOffset, PopupPlacement} from '@gravity-ui/uikit';
 
 import type {InputBase, Validation, ValueBase} from './inputs';
 
@@ -28,3 +29,14 @@ export interface PopupTriggerProps<Args extends unknown[] = []> {
     /** Handler that is called when the popup's open state changes. */
     onOpenChange?: (open: boolean, ...args: Args) => void;
 }
+
+export interface PopupStyleProps {
+    /** Sets the CSS className for the popup element. */
+    popupClassName?: string;
+    /** Sets the CSS style attribute for the popup element. */
+    popupStyle?: CSSProperties;
+    /** Popup placement */
+    popupPlacement?: PopupPlacement;
+    /** Popup offset relative to anchor */
+    popupOffset?: PopupOffset;
+}