@gravity-ui/date-components 2.7.1 → 2.8.0

package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js

@@ -50,7 +50,7 @@ function useDatePickerProps(state, _a) {
     function focusInput() {
         setTimeout(() => {
             var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         });
     }
     const onlyTime = state.hasTime && !state.hasDate;

package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.d.ts

@@ -5,5 +5,7 @@ import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePick
 import './RelativeDatePicker.css';
 export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
 }
 export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.js

@@ -22,9 +22,10 @@ function RelativeDatePicker(props) {
     const state = (0, useRelativeDatePickerState_1.useRelativeDatePickerState)(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = (0, useRelativeDatePickerProps_1.useRelativeDatePickerProps)(state, props);
     const anchorRef = react_1.default.useRef(null);
+    const handleRef = (0, uikit_1.useForkRef)(anchorRef, groupProps.ref);
     const isMobile = (0, uikit_1.useMobile)();
     const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { state: state.datePickerState, props: {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, groupProps, { ref: handleRef, className: b(null, props.className), children: [isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,

package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.d.ts

@@ -5,7 +5,9 @@ import type { DateFieldProps } from '../../DateField';
 import type { RelativeDatePickerProps } from '../RelativeDatePicker';
 import type { RelativeDatePickerState } from './useRelativeDatePickerState';
 interface InnerRelativeDatePickerProps {
-    groupProps: React.HTMLAttributes<unknown>;
+    groupProps: React.HTMLAttributes<unknown> & {
+        ref: React.Ref<HTMLElement>;
+    };
     fieldProps: TextInputProps;
     modeSwitcherProps: ButtonProps;
     calendarButtonProps: ButtonProps;

package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js

@@ -34,7 +34,7 @@ function useRelativeDatePickerProps(state, _a) {
             }
         },
     });
-    const [isOpen, setOpen] = react_1.default.useState(false);
+    const [isOpen, setOpen] = (0, uikit_1.useControlledState)(undefined, false, props.onOpenChange);
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
@@ -80,11 +80,12 @@ function useRelativeDatePickerProps(state, _a) {
     function focusInput() {
         setTimeout(() => {
             var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         });
     }
+    const groupRef = react_1.default.useRef(null);
     return {
-        groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+        groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
                 if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -144,6 +145,12 @@ function useRelativeDatePickerProps(state, _a) {
                 setOpen(false);
                 focusInput();
             },
+            onOutsideClick: (e) => {
+                var _a;
+                if (e.target && !((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    setOpen(false);
+                }
+            },
             onTransitionExited: () => {
                 setFocusedDate(mode === 'relative'
                     ? relativeDateState.lastCorrectDate

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.d.ts

@@ -26,5 +26,7 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     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

@@ -22,7 +22,7 @@ function RelativeRangeDatePicker(props) {
     const anchorRef = react_1.default.useRef(null);
     const inputRef = react_1.default.useRef(null);
     const [isActive, setIsActive] = react_1.default.useState(false);
-    const [open, setOpen] = react_1.default.useState(false);
+    const [open, setOpen] = (0, uikit_1.useControlledState)(undefined, false, props.onOpenChange);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         isDisabled: props.disabled,
         onFocusWithin: (e) => {
@@ -100,6 +100,11 @@ function RelativeRangeDatePicker(props) {
                     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);
+                }, focusInput: () => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                    });
                 }, anchorRef: anchorRef, isMobile: isMobile, className: props.popupClassName })] })));
 }
 exports.RelativeRangeDatePicker = RelativeRangeDatePicker;

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.d.ts

@@ -10,5 +10,6 @@ export interface PickerDialogProps {
     isMobile?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onClose: () => void;
+    focusInput: () => void;
 }
-export declare function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js

@@ -13,11 +13,14 @@ const i18n_1 = require("./i18n");
 const useRelativeRangeDatePickerDialogState_1 = require("./useRelativeRangeDatePickerDialogState");
 require("./PickerDialog.css");
 const b = (0, cn_1.block)('relative-range-date-picker-dialog');
-function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }) {
+function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, }) {
     if (isMobile) {
         return ((0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
     }
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, focusTrap: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onEscapeKeyDown: () => {
+            onClose();
+            focusInput();
+        }, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, focusTrap: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
 }
 exports.PickerDialog = PickerDialog;
 function DialogContent(props) {

package/dist/esm/components/DatePicker/hooks/useDatePickerProps.js

@@ -47,7 +47,7 @@ export function useDatePickerProps(state, _a) {
     function focusInput() {
         setTimeout(() => {
             var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         });
     }
     const onlyTime = state.hasTime && !state.hasDate;

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.d.ts

@@ -5,5 +5,7 @@ import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePick
 import './RelativeDatePicker.css';
 export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
     children?: (props: CalendarProps) => React.ReactNode;
+    /** Handler that is called when the popup's open state changes. */
+    onOpenChange?: (open: boolean) => void;
 }
 export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Calendar as CalendarIcon, Clock as ClockIcon, Function as FunctionIcon, } from '@gravity-ui/icons';
-import { Button, Icon, Popup, TextInput, useMobile } from '@gravity-ui/uikit';
+import { Button, Icon, Popup, TextInput, useForkRef, useMobile } from '@gravity-ui/uikit';
 import { block } from '../../utils/cn';
 import { Calendar } from '../Calendar';
 import { DateField } from '../DateField';
@@ -18,9 +18,10 @@ export function RelativeDatePicker(props) {
     const state = useRelativeDatePickerState(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = useRelativeDatePickerProps(state, props);
     const anchorRef = React.useRef(null);
+    const handleRef = useForkRef(anchorRef, groupProps.ref);
     const isMobile = useMobile();
     const isOnlyTime = state.datePickerState.hasTime && !state.datePickerState.hasDate;
-    return (_jsxs("div", Object.assign({ ref: anchorRef, className: b(null, props.className) }, groupProps, { children: [isMobile && state.mode === 'absolute' && (_jsx(MobileCalendar, { state: state.datePickerState, props: {
+    return (_jsxs("div", Object.assign({}, groupProps, { ref: handleRef, className: b(null, props.className), children: [isMobile && state.mode === 'absolute' && (_jsx(MobileCalendar, { state: state.datePickerState, props: {
                     id: props.id,
                     disabled: props.disabled,
                     readOnly: props.readOnly,

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.d.ts

@@ -5,7 +5,9 @@ import type { DateFieldProps } from '../../DateField';
 import type { RelativeDatePickerProps } from '../RelativeDatePicker';
 import type { RelativeDatePickerState } from './useRelativeDatePickerState';
 interface InnerRelativeDatePickerProps {
-    groupProps: React.HTMLAttributes<unknown>;
+    groupProps: React.HTMLAttributes<unknown> & {
+        ref: React.Ref<HTMLElement>;
+    };
     fieldProps: TextInputProps;
     modeSwitcherProps: ButtonProps;
     calendarButtonProps: ButtonProps;

package/dist/esm/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
+import { useControlledState, useFocusWithin, useForkRef } from '@gravity-ui/uikit';
 import { useDateFieldProps } from '../../DateField';
 import { useRelativeDateFieldProps } from '../../RelativeDateField';
 import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
@@ -31,7 +31,7 @@ export function useRelativeDatePickerProps(state, _a) {
             }
         },
     });
-    const [isOpen, setOpen] = React.useState(false);
+    const [isOpen, setOpen] = useControlledState(undefined, false, props.onOpenChange);
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
@@ -77,11 +77,12 @@ export function useRelativeDatePickerProps(state, _a) {
     function focusInput() {
         setTimeout(() => {
             var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
         });
     }
+    const groupRef = React.useRef(null);
     return {
-        groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+        groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
                 if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -141,6 +142,12 @@ export function useRelativeDatePickerProps(state, _a) {
                 setOpen(false);
                 focusInput();
             },
+            onOutsideClick: (e) => {
+                var _a;
+                if (e.target && !((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    setOpen(false);
+                }
+            },
             onTransitionExited: () => {
                 setFocusedDate(mode === 'relative'
                     ? relativeDateState.lastCorrectDate

package/dist/esm/components/RelativeRangeDatePicker/RelativeRangeDatePicker.d.ts

@@ -26,5 +26,7 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     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

@@ -2,7 +2,7 @@
 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, 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';
 import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
@@ -18,7 +18,7 @@ export function RelativeRangeDatePicker(props) {
     const anchorRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const [isActive, setIsActive] = React.useState(false);
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = useControlledState(undefined, false, props.onOpenChange);
     const { focusWithinProps } = useFocusWithin({
         isDisabled: props.disabled,
         onFocusWithin: (e) => {
@@ -96,6 +96,11 @@ export function RelativeRangeDatePicker(props) {
                     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);
+                }, focusInput: () => {
+                    setTimeout(() => {
+                        var _a;
+                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                    });
                 }, anchorRef: anchorRef, isMobile: isMobile, className: props.popupClassName })] })));
 }
 function getNativeValue(value) {

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.d.ts

@@ -10,5 +10,6 @@ export interface PickerDialogProps {
     isMobile?: boolean;
     anchorRef?: React.RefObject<HTMLElement>;
     onClose: () => void;
+    focusInput: () => void;
 }
-export declare function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js

@@ -10,11 +10,14 @@ import { i18n } from './i18n';
 import { useRelativeRangeDatePickerDialogState } from './useRelativeRangeDatePickerDialogState';
 import './PickerDialog.css';
 const b = block('relative-range-date-picker-dialog');
-export function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }) {
+export function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, }) {
     if (isMobile) {
         return (_jsx(Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: _jsx(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
     }
-    return (_jsx(Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, focusTrap: true, restoreFocus: true, children: _jsx(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
+    return (_jsx(Popup, { open: open, onEscapeKeyDown: () => {
+            onClose();
+            focusInput();
+        }, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: true, focusTrap: true, children: _jsx(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
 }
 function DialogContent(props) {
     var _a, _b, _c, _d, _e, _f, _g;

package/package.json

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