@gravity-ui/date-components 1.0.0 → 1.1.1

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

@@ -0,0 +1,127 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { useFocusWithin, useForkRef } from '@gravity-ui/uikit';
+import { useDateFieldProps } from '../../DateField';
+import { getButtonSizeForInput } from '../../utils/getButtonSizeForInput';
+import { mergeProps } from '../../utils/mergeProps';
+import { i18n } from '../i18n';
+export function useDatePickerProps(state, _a) {
+    var _b;
+    var { onFocus, onBlur } = _a, props = __rest(_a, ["onFocus", "onBlur"]);
+    const [isActive, setActive] = React.useState(false);
+    const { focusWithinProps } = useFocusWithin({
+        onFocusWithin: onFocus,
+        onBlurWithin: onBlur,
+        onFocusWithinChange(isFocusWithin) {
+            setActive(isFocusWithin);
+            if (!isFocusWithin) {
+                state.setOpen(false);
+            }
+        },
+    });
+    const { inputProps } = useDateFieldProps(state.dateFieldState, props);
+    let error;
+    let validationState = props.validationState;
+    if (validationState) {
+        error = validationState === 'invalid' ? props.errorMessage || true : undefined;
+    }
+    else {
+        validationState = state.dateFieldState.validationState;
+        error = validationState === 'invalid';
+    }
+    const inputRef = React.useRef(null);
+    const handleRef = useForkRef(inputRef, inputProps.controlRef);
+    const calendarRef = React.useRef(null);
+    const calendarButtonRef = React.useRef(null);
+    const groupRef = React.useRef(null);
+    function focusInput() {
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    return {
+        groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
+                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    state.setOpen(true);
+                }
+            } }),
+        fieldProps: mergeProps(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
+            ? { value: '' }
+            : undefined, { controlRef: handleRef, error }),
+        calendarButtonProps: {
+            ref: calendarButtonRef,
+            size: getButtonSizeForInput(props.size),
+            disabled: state.disabled,
+            extraProps: {
+                'aria-label': i18n('Calendar'),
+                'aria-haspopup': 'dialog',
+                'aria-expanded': state.isOpen,
+            },
+            view: 'flat-secondary',
+            onClick: () => {
+                setActive(true);
+                state.setOpen(!state.isOpen);
+            },
+        },
+        popupProps: {
+            open: state.isOpen,
+            onEscapeKeyDown: () => {
+                state.setOpen(false);
+                focusInput();
+            },
+            onOutsideClick: (e) => {
+                var _a;
+                if (e.target !== calendarButtonRef.current) {
+                    state.setOpen(false);
+                }
+                if (e.target && ((_a = groupRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                    focusInput();
+                }
+            },
+            // @ts-expect-error focusTrap in popup was introduced in a newer version of uikit
+            focusTrap: true,
+        },
+        calendarProps: {
+            ref: calendarRef,
+            autoFocus: true,
+            size: props.size === 's' ? 'm' : props.size,
+            disabled: props.disabled,
+            readOnly: props.readOnly,
+            onUpdate: (d) => {
+                state.setDateValue(d);
+                if (!state.hasTime) {
+                    focusInput();
+                }
+            },
+            defaultFocusedValue: (_b = state.dateValue) !== null && _b !== void 0 ? _b : undefined,
+            value: state.dateValue,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
+            isDateUnavailable: props.isDateUnavailable,
+            timeZone: props.timeZone,
+        },
+        timeInputProps: {
+            value: state.timeValue,
+            onUpdate: state.setTimeValue,
+            format: state.timeFormat,
+            readOnly: state.readOnly,
+            disabled: state.disabled,
+            timeZone: props.timeZone,
+            hasClear: props.hasClear,
+            size: props.size,
+        },
+    };
+}

package/dist/esm/components/DatePicker/hooks/useDatePickerState.d.ts

@@ -1,5 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { InputBase, ValueBase } from '../../types';
+import type { DateFieldState } from '../../DateField';
+import type { DateFieldBase } from '../../types';
 export type Granularity = 'day' | 'hour' | 'minute' | 'second';
 export interface DatePickerState {
     /** The currently selected date. */
@@ -36,10 +37,8 @@ export interface DatePickerState {
     isOpen: boolean;
     /** Sets whether the calendar popover is open. */
     setOpen(isOpen: boolean): void;
+    dateFieldState: DateFieldState;
 }
-export interface DatePickerStateOptions extends ValueBase<DateTime>, InputBase {
-    placeholderValue?: DateTime;
-    timeZone?: string;
-    format?: string;
+export interface DatePickerStateOptions extends DateFieldBase {
 }
 export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { createPlaceholderValue, splitFormatIntoSections } from '../../DateField/utils';
+import { useDateFieldState } from '../../DateField';
+import { splitFormatIntoSections } from '../../DateField/utils';
 import { useControlledState } from '../../hooks/useControlledState';
+import { createPlaceholderValue, mergeDateTime } from '../../utils/dates';
 export function useDatePickerState(props) {
     const { disabled, readOnly } = props;
     const [isOpen, setOpen] = React.useState(false);
@@ -74,6 +76,19 @@ export function useDatePickerState(props) {
             setSelectedTime(newValue);
         }
     };
+    const dateFieldState = useDateFieldState({
+        value: value !== null && value !== void 0 ? value : null,
+        onUpdate: setValue,
+        disabled,
+        readOnly,
+        validationState: props.validationState,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        isDateUnavailable: props.isDateUnavailable,
+        format,
+        placeholderValue: props.placeholderValue,
+        timeZone: props.timeZone,
+    });
     return {
         value: value !== null && value !== void 0 ? value : null,
         setValue,
@@ -94,14 +109,9 @@ export function useDatePickerState(props) {
             }
             setOpen(newIsOpen);
         },
+        dateFieldState,
     };
 }
-function mergeDateTime(date, time) {
-    return date
-        .set('hours', time.hour())
-        .set('minutes', time.minute())
-        .set('seconds', time.second());
-}
 function getPlaceholderTime(placeholderValue, timeZone) {
     return createPlaceholderValue({ placeholderValue, timeZone });
 }

package/dist/esm/components/DatePicker/index.d.ts

@@ -1,2 +1,3 @@
 export * from './DatePicker';
 export * from './hooks/useDatePickerState';
+export * from './hooks/useDatePickerProps';

package/dist/esm/components/DatePicker/index.js

@@ -1,2 +1,3 @@
 export * from './DatePicker';
 export * from './hooks/useDatePickerState';
+export * from './hooks/useDatePickerProps';

package/dist/esm/components/RelativeDatePicker/RelativeDatePicker.css

@@ -1,6 +1,7 @@
 .g-date-relative-date-picker {
   position: relative;
   display: inline-flex;
+  outline: none;
 }
 .g-date-relative-date-picker__field {
   width: 100%;

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

@@ -1,6 +1,9 @@
+import React from 'react';
+import type { CalendarProps } from '../Calendar';
 import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputProps } from '../types';
 import type { RelativeDatePickerStateOptions } from './hooks/useRelativeDatePickerState';
 import './RelativeDatePicker.css';
 export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, StyleProps, AccessibilityProps {
+    children?: (props: CalendarProps) => React.ReactNode;
 }
 export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -21,5 +21,5 @@ export function RelativeDatePicker(props) {
                     readOnly: props.readOnly,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), _jsx(TextInput, Object.assign({}, fieldProps, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [_jsx(Calendar, Object.assign({}, calendarProps)), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                } })), _jsx(TextInput, Object.assign({}, fieldProps, { leftContent: _jsx(Button, Object.assign({}, modeSwitcherProps, { children: _jsx(Icon, { data: FunctionIcon }) })), rightContent: _jsxs(React.Fragment, { children: [!isMobile && (_jsx(Button, Object.assign({}, calendarButtonProps, { children: _jsx(Icon, { data: CalendarIcon }) }))), isMobile && state.mode === 'absolute' && (_jsx(MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && (_jsx(Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: _jsxs("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : (_jsx(Calendar, Object.assign({}, calendarProps))), state.datePickerState.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
 }

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

@@ -36,7 +36,7 @@ export function useRelativeDatePickerProps(state, _a) {
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
             if (!isFocusWithin) {
-                state.setActive(isFocusWithin);
+                state.setActive(false);
             }
         },
     });
@@ -44,16 +44,12 @@ export function useRelativeDatePickerProps(state, _a) {
     if (!state.isActive && isOpen) {
         setOpen(false);
     }
-    const [prevActive, setPrevActive] = React.useState(state.isActive);
-    if (prevActive !== state.isActive) {
-        setPrevActive(state.isActive);
-        if (state.isActive && !isOpen) {
-            setOpen(true);
-        }
-    }
     const commonInputProps = {
         onFocus: () => {
-            state.setActive(true);
+            if (!state.isActive) {
+                state.setActive(true);
+                setOpen(true);
+            }
         },
     };
     const { inputProps } = useDateFieldProps(dateFieldState, Object.assign(Object.assign({}, props), { value: undefined, defaultValue: undefined, onUpdate: undefined }));
@@ -62,6 +58,7 @@ export function useRelativeDatePickerProps(state, _a) {
         value: relativeDateState.text,
         onUpdate: relativeDateState.setText,
         hasClear: props.hasClear && !relativeDateState.readOnly,
+        placeholder: props.placeholder,
         size: props.size,
     };
     let error;
@@ -76,13 +73,33 @@ export function useRelativeDatePickerProps(state, _a) {
                 : dateFieldState.validationState;
         error = validationState === 'invalid';
     }
-    const wasActiveBeforeClickRef = React.useRef(state.isActive);
     const inputRef = React.useRef(null);
     const handleRef = useForkRef(inputRef, mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef);
     const calendarRef = React.useRef(null);
+    function focusCalendar() {
+        setTimeout(() => {
+            var _a;
+            (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
+    function focusInput() {
+        setTimeout(() => {
+            var _a;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        });
+    }
     return {
-        groupProps: Object.assign({ role: 'group' }, focusWithinProps),
-        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, { controlRef: handleRef, error }),
+        groupProps: Object.assign(Object.assign({ tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(true);
+                    focusCalendar();
+                }
+            } }),
+        fieldProps: mergeProps(commonInputProps, mode === 'relative' ? relativeDateProps : inputProps, mode === 'absolute' && dateFieldState.isEmpty && !state.isActive && props.placeholder
+            ? { value: '' }
+            : undefined, { controlRef: handleRef, error }),
         modeSwitcherProps: {
             size: getButtonSizeForInput(props.size),
             disabled: state.readOnly || state.disabled,
@@ -103,7 +120,7 @@ export function useRelativeDatePickerProps(state, _a) {
                 else if (relativeDateState.parsedDate) {
                     setFocusedDate(relativeDateState.parsedDate);
                 }
-                setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+                focusInput();
             },
         },
         calendarButtonProps: {
@@ -115,29 +132,20 @@ export function useRelativeDatePickerProps(state, _a) {
                 'aria-expanded': isOpen,
             },
             view: 'flat-secondary',
-            onFocus: () => {
-                wasActiveBeforeClickRef.current = state.isActive;
-            },
             onClick: () => {
                 state.setActive(true);
-                if (wasActiveBeforeClickRef.current) {
-                    setOpen(!isOpen);
-                    if (!isOpen) {
-                        setTimeout(() => {
-                            var _a;
-                            (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                        });
-                    }
+                setOpen(!isOpen);
+                if (!isOpen) {
+                    focusCalendar();
                 }
-                wasActiveBeforeClickRef.current = state.isActive;
             },
         },
         popupProps: {
             open: isOpen,
             onEscapeKeyDown: () => {
                 setOpen(false);
+                focusInput();
             },
-            restoreFocus: true,
         },
         calendarProps: {
             ref: calendarRef,
@@ -148,7 +156,7 @@ export function useRelativeDatePickerProps(state, _a) {
                 datePickerState.setDateValue(v);
                 if (!state.datePickerState.hasTime) {
                     setOpen(false);
-                    setTimeout(() => { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+                    focusInput();
                 }
             },
             focusedValue: focusedDate,

package/dist/esm/components/utils/dates.d.ts

@@ -0,0 +1,9 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+interface PlaceholderValueOptions {
+    placeholderValue?: DateTime;
+    timeZone?: string;
+}
+export declare function createPlaceholderValue({ placeholderValue, timeZone }: PlaceholderValueOptions): DateTime;
+export declare function isInvalid(value: DateTime | null | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined): boolean;
+export declare function mergeDateTime(date: DateTime, time: DateTime): DateTime;
+export {};

package/dist/esm/components/utils/dates.js

@@ -0,0 +1,22 @@
+import { dateTime } from '@gravity-ui/date-utils';
+export function createPlaceholderValue({ placeholderValue, timeZone }) {
+    return (placeholderValue !== null && placeholderValue !== void 0 ? placeholderValue : dateTime({ timeZone }).set('hour', 0).set('minute', 0).set('second', 0));
+}
+export function isInvalid(value, minValue, maxValue) {
+    if (!value) {
+        return false;
+    }
+    if (minValue && value.isBefore(minValue)) {
+        return true;
+    }
+    if (maxValue && maxValue.isBefore(value)) {
+        return true;
+    }
+    return false;
+}
+export function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "",
   "license": "MIT",
   "main": "dist/cjs/index.js",
@@ -60,12 +60,13 @@
     "@gravity-ui/stylelint-config": "^2.0.0",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^5.0.0",
-    "@storybook/addon-a11y": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/api": "^7.2.1",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addons": "^7.5.3",
+    "@storybook/api": "^7.5.3",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
@@ -91,7 +92,7 @@
     "react-dom": "^18.2.0",
     "sass": "^1.64.1",
     "sass-loader": "^13.3.2",
-    "storybook": "^7.2.1",
+    "storybook": "^7.5.3",
     "style-loader": "^3.3.3",
     "stylelint": "^15.10.2",
     "ts-jest": "^29.1.1",

package/dist/cjs/components/DatePicker/DesktopCalendar.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { DatePickerProps } from './DatePicker';
-import type { DatePickerState } from './hooks/useDatePickerState';
-interface DesktopCalendarProps {
-    anchorRef: React.RefObject<HTMLElement>;
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendar({ anchorRef, props, state }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
-interface DesktopCalendarButtonProps {
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/cjs/components/DatePicker/DesktopCalendar.js

@@ -1,56 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DesktopCalendarButton = exports.DesktopCalendar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const icons_1 = require("@gravity-ui/icons");
-const uikit_1 = require("@gravity-ui/uikit");
-const Calendar_1 = require("../Calendar");
-const DateField_1 = require("../DateField");
-const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
-const i18n_1 = require("./i18n");
-const utils_1 = require("./utils");
-function DesktopCalendar({ anchorRef, props, state }) {
-    var _a;
-    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        isDisabled: !state.isOpen,
-        onBlurWithin: () => {
-            state.setOpen(false);
-        },
-    });
-    if (!state.hasDate) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
-            state.setOpen(false);
-        }, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)("div", Object.assign({}, focusWithinProps, { className: (0, utils_1.b)('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                , { 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: true, size: props.size === 's' ? 'm' : props.size, disabled: props.disabled, readOnly: props.readOnly, onUpdate: (d) => {
-                        state.setDateValue(d);
-                    }, defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined, value: state.dateValue, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, timeZone: props.timeZone }), state.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.b)('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: (0, utils_1.b)('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
-}
-exports.DesktopCalendar = DesktopCalendar;
-function DesktopCalendarButton({ props, state }) {
-    const wasOpenBeforeClickRef = react_1.default.useRef(false);
-    if (!state.hasDate) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
-            'aria-label': (0, i18n_1.i18n)('Calendar'),
-            'aria-haspopup': 'dialog',
-            'aria-expanded': state.isOpen,
-        }, onFocus: () => {
-            wasOpenBeforeClickRef.current = state.isOpen;
-        }, onClick: () => {
-            if (!wasOpenBeforeClickRef.current) {
-                state.setOpen(true);
-            }
-            wasOpenBeforeClickRef.current = false;
-        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }));
-}
-exports.DesktopCalendarButton = DesktopCalendarButton;

package/dist/esm/components/DatePicker/DesktopCalendar.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import type { DatePickerProps } from './DatePicker';
-import type { DatePickerState } from './hooks/useDatePickerState';
-interface DesktopCalendarProps {
-    anchorRef: React.RefObject<HTMLElement>;
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendar({ anchorRef, props, state }: DesktopCalendarProps): import("react/jsx-runtime").JSX.Element | null;
-interface DesktopCalendarButtonProps {
-    props: DatePickerProps;
-    state: DatePickerState;
-}
-export declare function DesktopCalendarButton({ props, state }: DesktopCalendarButtonProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/esm/components/DatePicker/DesktopCalendar.js

@@ -1,48 +0,0 @@
-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, Popup, useFocusWithin } from '@gravity-ui/uikit';
-import { Calendar } from '../Calendar';
-import { DateField } from '../DateField';
-import { getButtonSizeForInput } from '../utils/getButtonSizeForInput';
-import { i18n } from './i18n';
-import { b } from './utils';
-export function DesktopCalendar({ anchorRef, props, state }) {
-    var _a;
-    const { focusWithinProps } = useFocusWithin({
-        isDisabled: !state.isOpen,
-        onBlurWithin: () => {
-            state.setOpen(false);
-        },
-    });
-    if (!state.hasDate) {
-        return null;
-    }
-    return (_jsx(Popup, { open: state.isOpen, anchorRef: anchorRef, onClose: () => {
-            state.setOpen(false);
-        }, restoreFocus: true, children: _jsxs("div", Object.assign({}, focusWithinProps, { className: b('popup-content'), children: [_jsx(Calendar
-                // eslint-disable-next-line jsx-a11y/no-autofocus
-                , { 
-                    // eslint-disable-next-line jsx-a11y/no-autofocus
-                    autoFocus: true, size: props.size === 's' ? 'm' : props.size, disabled: props.disabled, readOnly: props.readOnly, onUpdate: (d) => {
-                        state.setDateValue(d);
-                    }, defaultFocusedValue: (_a = state.dateValue) !== null && _a !== void 0 ? _a : undefined, value: state.dateValue, minValue: props.minValue, maxValue: props.maxValue, isDateUnavailable: props.isDateUnavailable, timeZone: props.timeZone }), state.hasTime && (_jsx("div", { className: b('time-field-wrapper'), children: _jsx(DateField, { className: b('time-field'), size: props.size, readOnly: props.readOnly, value: state.timeValue, onUpdate: state.setTimeValue, placeholderValue: props.placeholderValue, minValue: props.minValue, maxValue: props.maxValue, timeZone: props.timeZone, format: state.timeFormat }) }))] })) }));
-}
-export function DesktopCalendarButton({ props, state }) {
-    const wasOpenBeforeClickRef = React.useRef(false);
-    if (!state.hasDate) {
-        return null;
-    }
-    return (_jsx(Button, { view: "flat", size: getButtonSizeForInput(props.size), disabled: props.disabled, extraProps: {
-            'aria-label': i18n('Calendar'),
-            'aria-haspopup': 'dialog',
-            'aria-expanded': state.isOpen,
-        }, onFocus: () => {
-            wasOpenBeforeClickRef.current = state.isOpen;
-        }, onClick: () => {
-            if (!wasOpenBeforeClickRef.current) {
-                state.setOpen(true);
-            }
-            wasOpenBeforeClickRef.current = false;
-        }, children: _jsx(Icon, { data: CalendarIcon }) }));
-}