feat(RelativePickers): add onOpenChange event handler (#118)

Author: ValeraS

src/components/RelativeDatePicker/RelativeDatePicker.tsx

@@ -44,6 +44,8 @@ export interface RelativeDatePickerProps
         StyleProps,
         AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
 }
 
 export function RelativeDatePicker(props: RelativeDatePickerProps) {

src/components/RelativeDatePicker/__stories__/RelativeDatePicker.stories.tsx

@@ -19,6 +19,7 @@ const meta: Meta<typeof RelativeDatePicker> = {
     args: {
         onFocus: action('onFocus'),
         onBlur: action('onBlur'),
+        onOpenChange: action('onOpenChange'),
     },
 };
 

src/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {useFocusWithin, useForkRef} from '@gravity-ui/uikit';
+import {useControlledState, useFocusWithin, useForkRef} from '@gravity-ui/uikit';
 import type {ButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';
 
 import type {Calendar, CalendarInstance} from '../../Calendar';
@@ -59,7 +59,7 @@ export function useRelativeDatePickerProps(
         },
     });
 
-    const [isOpen, setOpen] = React.useState(false);
+    const [isOpen, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);
     if (!state.isActive && isOpen) {
         setOpen(false);
     }

src/components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx

@@ -4,7 +4,14 @@ import React from 'react';
 
 import type {DateTime} from '@gravity-ui/date-utils';
 import {Calendar as CalendarIcon} from '@gravity-ui/icons';
-import {Button, Icon, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';
+import {
+    Button,
+    Icon,
+    TextInput,
+    useControlledState,
+    useFocusWithin,
+    useMobile,
+} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 import {HiddenInput} from '../HiddenInput/HiddenInput';
@@ -61,6 +68,8 @@ export interface RelativeRangeDatePickerProps
     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 function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
@@ -72,7 +81,7 @@ export function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {
     const inputRef = React.useRef<HTMLInputElement>(null);
 
     const [isActive, setIsActive] = React.useState(false);
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);
 
     const {focusWithinProps} = useFocusWithin({
         isDisabled: props.disabled,

src/components/RelativeRangeDatePicker/__stories__/RelativeRangeDatePiker.stories.tsx

@@ -14,6 +14,7 @@ const meta: Meta<typeof RelativeRangeDatePicker> = {
     args: {
         onFocus: action('onFocus'),
         onBlur: action('onBlur'),
+        onOpenChange: action('onOpenChange'),
     },
 };