chore(RelativeDatrePicker): export component, small fixes

Author: ValeraS

src/components/RelativeDatePicker/RelativeDatePicker.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {Calendar as CalendarIcon, Function as FunctionIcon} from '@gravity-ui/icons';
-import {Button, Icon, Popup, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';
+import {Button, Icon, Popup, TextInput, useMobile} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import {Calendar} from '../Calendar';
@@ -33,7 +33,7 @@ export interface RelativeDatePickerProps
         StyleProps,
         AccessibilityProps {}
 
-export function RelativeDatePicker({onFocus, onBlur, ...props}: RelativeDatePickerProps) {
+export function RelativeDatePicker(props: RelativeDatePickerProps) {
     const state = useRelativeDatePickerState(props);
 
     const {
@@ -48,23 +48,10 @@ export function RelativeDatePicker({onFocus, onBlur, ...props}: RelativeDatePick
 
     const anchorRef = React.useRef<HTMLDivElement>(null);
 
-    const {focusWithinProps} = useFocusWithin({
-        onFocusWithin: onFocus,
-        onBlurWithin: onBlur,
-        onFocusWithinChange(isFocusWithin) {
-            state.setActive(isFocusWithin);
-        },
-    });
-
     const [isMobile] = useMobile();
 
     return (
-        <div
-            ref={anchorRef}
-            className={b(null, props.className)}
-            {...groupProps}
-            {...focusWithinProps}
-        >
+        <div ref={anchorRef} className={b(null, props.className)} {...groupProps}>
             {isMobile && state.mode === 'absolute' && (
                 <MobileCalendar
                     state={state.datePickerState}

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -1,14 +1,11 @@
 import React from 'react';
 
-import {
-    type ButtonProps,
-    type PopupProps,
-    type TextInputProps,
-    useForkRef,
-} from '@gravity-ui/uikit';
-
-import type {CalendarProps} from '../../Calendar';
-import {type DateFieldProps, useDateFieldProps} from '../../DateField';
+import {useFocusWithin, useForkRef} from '@gravity-ui/uikit';
+import type {ButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';
+
+import type {Calendar, CalendarInstance} from '../../Calendar';
+import {useDateFieldProps} from '../../DateField';
+import type {DateFieldProps} from '../../DateField';
 import {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';
 import {mergeProps} from '../../utils/mergeProps';
 import type {RelativeDatePickerProps} from '../RelativeDatePicker';
@@ -22,13 +19,13 @@ interface InnerRelativeDatePickerProps {
     modeSwitcherProps: ButtonProps;
     calendarButtonProps: ButtonProps;
     popupProps: PopupProps;
-    calendarProps: CalendarProps;
+    calendarProps: React.ComponentProps<typeof Calendar>;
     timeInputProps: DateFieldProps;
 }
 
 export function useRelativeDatePickerProps(
     state: RelativeDatePickerState,
-    props: RelativeDatePickerProps,
+    {onFocus, onBlur, ...props}: RelativeDatePickerProps,
 ): InnerRelativeDatePickerProps {
     const {mode, setMode, datePickerState, dateFieldState, relativeDateState} = state;
 
@@ -47,6 +44,15 @@ export function useRelativeDatePickerProps(
             setFocusedDate(datePickerState.dateValue);
         }
     }
+    const {focusWithinProps} = useFocusWithin({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            if (!isFocusWithin) {
+                state.setActive(isFocusWithin);
+            }
+        },
+    });
 
     const [isOpen, setOpen] = React.useState(false);
     if (!state.isActive && isOpen) {
@@ -61,7 +67,11 @@ export function useRelativeDatePickerProps(
         }
     }
 
-    const commonInputProps: TextInputProps = {};
+    const commonInputProps: TextInputProps = {
+        onFocus: () => {
+            state.setActive(true);
+        },
+    };
 
     const {inputProps} = useDateFieldProps(dateFieldState, {
         ...props,
@@ -98,9 +108,12 @@ export function useRelativeDatePickerProps(
         mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef,
     );
 
+    const calendarRef = React.useRef<CalendarInstance>(null);
+
     return {
         groupProps: {
             role: 'group',
+            ...focusWithinProps,
         },
         fieldProps: mergeProps(
             commonInputProps,
@@ -142,8 +155,14 @@ export function useRelativeDatePickerProps(
                 wasActiveBeforeClickRef.current = state.isActive;
             },
             onClick: () => {
+                state.setActive(true);
                 if (wasActiveBeforeClickRef.current) {
                     setOpen(!isOpen);
+                    if (!isOpen) {
+                        setTimeout(() => {
+                            calendarRef.current?.focus();
+                        });
+                    }
                 }
                 wasActiveBeforeClickRef.current = state.isActive;
             },
@@ -156,6 +175,7 @@ export function useRelativeDatePickerProps(
             restoreFocus: true,
         },
         calendarProps: {
+            ref: calendarRef,
             size: props.size === 's' ? 'm' : props.size,
             readOnly: props.readOnly,
             value: state.selectedDate,

src/components/RelativeDatePicker/index.ts

@@ -0,0 +1,4 @@
+export * from './RelativeDatePicker';
+
+export * from './hooks/useRelativeDatePickerState';
+export * from './hooks/useRelativeDatePickerProps';

src/components/index.ts

@@ -1,3 +1,5 @@
 export * from './Calendar';
 export * from './DateField';
 export * from './DatePicker';
+export * from './RelativeDateField';
+export * from './RelativeDatePicker';