@gravity-ui/date-components 1.0.0

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

@@ -0,0 +1,45 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, ValueBase } from '../../types';
+export type Granularity = 'day' | 'hour' | 'minute' | 'second';
+export interface DatePickerState {
+    /** The currently selected date. */
+    value: DateTime | null;
+    /** Sets the selected date. */
+    setValue(value: DateTime | null): void;
+    /**
+     * The date portion of the value. This may be set prior to `value` if the user has
+     * selected a date but has not yet selected a time.
+     */
+    dateValue: DateTime | null;
+    /** Sets the date portion of the value. */
+    setDateValue(value: DateTime): void;
+    /**
+     * The time portion of the value. This may be set prior to `value` if the user has
+     * selected a time but has not yet selected a date.
+     */
+    timeValue: DateTime | null;
+    /** Sets the time portion of the value. */
+    setTimeValue(value: DateTime | null): void;
+    /** Whether the field is read only. */
+    readOnly?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Format of the date when rendered in the input. */
+    format: string;
+    /** Whether the date picker supports selecting a date. */
+    hasDate: boolean;
+    /** Whether the date picker supports selecting a time. */
+    hasTime: boolean;
+    /** Format of the time when rendered in the input. */
+    timeFormat?: string;
+    /** Whether the calendar popover is currently open. */
+    isOpen: boolean;
+    /** Sets whether the calendar popover is open. */
+    setOpen(isOpen: boolean): void;
+}
+export interface DatePickerStateOptions extends ValueBase<DateTime>, InputBase {
+    placeholderValue?: DateTime;
+    timeZone?: string;
+    format?: string;
+}
+export declare function useDatePickerState(props: DatePickerStateOptions): DatePickerState;

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

@@ -0,0 +1,114 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDatePickerState = void 0;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../DateField/utils");
+const useControlledState_1 = require("../../hooks/useControlledState");
+function useDatePickerState(props) {
+    const { disabled, readOnly } = props;
+    const [isOpen, setOpen] = react_1.default.useState(false);
+    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    const [selectedDateInner, setSelectedDate] = react_1.default.useState(null);
+    const [selectedTimeInner, setSelectedTime] = react_1.default.useState(null);
+    let selectedDate = selectedDateInner;
+    let selectedTime = selectedTimeInner;
+    const format = props.format || 'L';
+    const { hasDate, hasTime, timeFormat } = react_1.default.useMemo(() => {
+        const sections = (0, utils_1.splitFormatIntoSections)(format);
+        let hasDate = false;
+        let hasHours = false;
+        let hasMinutes = false;
+        let hasSeconds = false;
+        for (const s of sections) {
+            hasHours || (hasHours = s.type === 'hour');
+            hasMinutes || (hasMinutes = s.type === 'minute');
+            hasSeconds || (hasSeconds = s.type === 'second');
+            hasDate || (hasDate = ['day', 'month', 'year'].includes(s.type));
+        }
+        return {
+            hasTime: hasHours || hasMinutes || hasSeconds,
+            timeFormat: hasSeconds ? 'LTS' : 'LT',
+            hasDate,
+        };
+    }, [format]);
+    if (value) {
+        selectedDate = value;
+        if (hasTime) {
+            selectedTime = value;
+        }
+    }
+    const commitValue = (date, time) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        setValue(mergeDateTime(date, time));
+        setSelectedDate(null);
+        setSelectedTime(null);
+    };
+    // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
+    const selectDate = (newValue) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        const shouldClose = !hasTime;
+        if (hasTime) {
+            if (selectedTime || shouldClose) {
+                commitValue(newValue, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            }
+            else {
+                setSelectedDate(newValue);
+            }
+        }
+        else {
+            setValue(newValue);
+        }
+        if (shouldClose) {
+            setOpen(false);
+        }
+    };
+    const selectTime = (newValue) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        if (selectedDate) {
+            commitValue(selectedDate, newValue);
+        }
+        else {
+            setSelectedTime(newValue);
+        }
+    };
+    return {
+        value: value !== null && value !== void 0 ? value : null,
+        setValue,
+        dateValue: selectedDate,
+        timeValue: selectedTime,
+        setDateValue: selectDate,
+        setTimeValue: selectTime,
+        disabled,
+        readOnly,
+        format,
+        hasDate,
+        hasTime,
+        timeFormat,
+        isOpen,
+        setOpen(newIsOpen) {
+            if (!newIsOpen && !value && selectedDate && hasTime) {
+                commitValue(selectedDate, selectedTime || getPlaceholderTime(props.placeholderValue, props.timeZone));
+            }
+            setOpen(newIsOpen);
+        },
+    };
+}
+exports.useDatePickerState = useDatePickerState;
+function mergeDateTime(date, time) {
+    return date
+        .set('hours', time.hour())
+        .set('minutes', time.minute())
+        .set('seconds', time.second());
+}
+function getPlaceholderTime(placeholderValue, timeZone) {
+    return (0, utils_1.createPlaceholderValue)({ placeholderValue, timeZone });
+}

package/dist/cjs/components/DatePicker/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "Calendar": "Calendar"
+}

package/dist/cjs/components/DatePicker/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "Calendar", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/DatePicker/i18n/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../utils/cn");
+const en_json_1 = __importDefault(require("./en.json"));
+const ru_json_1 = __importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}date-picker`);

package/dist/cjs/components/DatePicker/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "Calendar": "Календарь"
+}

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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DatePicker"), exports);
+__exportStar(require("./hooks/useDatePickerState"), exports);

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

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.b = void 0;
+const cn_1 = require("../../utils/cn");
+exports.b = (0, cn_1.block)('date-picker');

package/dist/cjs/components/RelativeDateField/RelativeDateField.css

@@ -0,0 +1,16 @@
+.g-date-relative-date-field {
+  position: relative;
+  display: inline-block;
+}
+.g-date-relative-date-field__field {
+  width: 100%;
+}
+.g-date-relative-date-field__popup-content {
+  outline: none;
+}
+.g-date-relative-date-field__time-field {
+  width: 100%;
+}
+.g-date-relative-date-field__time-field-wrapper {
+  padding: 10px;
+}

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

@@ -0,0 +1,11 @@
+import type { AccessibilityProps, DomProps, FocusableProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from '../types';
+import type { RelativeDateFieldOptions } from './hooks/useRelativeDateFieldState';
+import './RelativeDateField.css';
+export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
+    /**
+     * Show time field in popup
+     * @default false
+     */
+    hasTime?: boolean;
+}
+export declare function RelativeDateField(props: RelativeDateFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RelativeDateField/RelativeDateField.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelativeDateField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const Calendar_1 = require("../Calendar");
+const DateField_1 = require("../DateField");
+const useRelativeDateFieldProps_1 = require("./hooks/useRelativeDateFieldProps");
+const useRelativeDateFieldState_1 = require("./hooks/useRelativeDateFieldState");
+require("./RelativeDateField.css");
+const b = (0, cn_1.block)('relative-date-field');
+function RelativeDateField(props) {
+    const state = (0, useRelativeDateFieldState_1.useRelativeDateFieldState)(props);
+    const { inputProps, calendarProps, timeInputProps } = (0, useRelativeDateFieldProps_1.useRelativeDateFieldProps)(state, props);
+    const [isMobile] = (0, uikit_1.useMobile)();
+    const anchorRef = react_1.default.useRef(null);
+    const [isOpen, setOpen] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onBlurWithin: () => {
+            setOpen(false);
+        },
+        isDisabled: isMobile,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { className: b('field'), ref: anchorRef, onFocus: (e) => {
+                    var _a;
+                    if (!isMobile) {
+                        setOpen(true);
+                    }
+                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                }, onBlur: props.onBlur })), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+}
+exports.RelativeDateField = RelativeDateField;

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.d.ts

@@ -0,0 +1,12 @@
+import type { TextInputProps } from '@gravity-ui/uikit';
+import type { CalendarProps } from '../../Calendar';
+import type { DateFieldProps } from '../../DateField';
+import type { RelativeDateFieldProps } from '../RelativeDateField';
+import type { RelativeDateFieldState } from './useRelativeDateFieldState';
+interface RelativeDateProps {
+    inputProps: TextInputProps;
+    calendarProps: CalendarProps;
+    timeInputProps: DateFieldProps;
+}
+export declare function useRelativeDateFieldProps(state: RelativeDateFieldState, props: RelativeDateFieldProps): RelativeDateProps;
+export {};

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldProps.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelativeDateFieldProps = void 0;
+const react_1 = __importDefault(require("react"));
+function useRelativeDateFieldProps(state, props) {
+    const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(state.lastCorrectDate);
+    const [focusedDate, setFocusedDate] = react_1.default.useState(state.lastCorrectDate);
+    if (prevCorrectDate !== state.lastCorrectDate) {
+        setPrevCorrectDate(state.lastCorrectDate);
+        setFocusedDate(state.lastCorrectDate);
+    }
+    let error;
+    if (props.validationState === 'invalid') {
+        error = props.errorMessage || true;
+    }
+    else {
+        error = state.validationState === 'invalid';
+    }
+    return {
+        inputProps: {
+            size: props.size,
+            autoFocus: props.autoFocus,
+            value: state.text,
+            onUpdate: state.setText,
+            disabled: state.disabled,
+            hasClear: props.hasClear,
+            //@ts-expect-error TODO: use new TextInput API
+            error,
+            label: props.label,
+            id: props.id,
+            leftContent: props.leftContent,
+            rightContent: props.rightContent,
+            pin: props.pin,
+            view: props.view,
+            placeholder: props.placeholder,
+            onKeyDown: props.onKeyDown,
+            onKeyUp: props.onKeyUp,
+            onBlur: props.onBlur,
+            onFocus: props.onFocus,
+            controlProps: {
+                'aria-label': props['aria-label'] || undefined,
+                'aria-labelledby': props['aria-labelledby'] || undefined,
+                'aria-describedby': props['aria-describedby'] || undefined,
+                'aria-details': props['aria-details'] || undefined,
+                'aria-disabled': state.disabled || undefined,
+            },
+        },
+        calendarProps: {
+            size: props.size === 's' ? 'm' : props.size,
+            readOnly: true,
+            value: state.parsedDate,
+            focusedValue: focusedDate,
+            onFocusUpdate: setFocusedDate,
+        },
+        timeInputProps: {
+            size: props.size,
+            readOnly: true,
+            value: state.lastCorrectDate,
+            format: 'LTS',
+        },
+    };
+}
+exports.useRelativeDateFieldProps = useRelativeDateFieldProps;

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.d.ts

@@ -0,0 +1,30 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { InputBase, Validation, ValueBase } from '../../types';
+export interface RelativeDateFieldState {
+    /** The current field value. */
+    value: string | null;
+    /** Sets the field value */
+    setValue: (v: string | null) => void;
+    /** Current user input */
+    text: string;
+    /** Sets text */
+    setText: (t: string) => void;
+    /** */
+    parsedDate: DateTime | null;
+    /** */
+    lastCorrectDate: DateTime | null;
+    /** */
+    validationState?: 'invalid';
+    /**
+     * Whether the field is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the value is immutable.
+     */
+    readOnly?: boolean;
+}
+export interface RelativeDateFieldOptions extends ValueBase<string, string | null>, InputBase, Validation {
+    timeZone?: string;
+}
+export declare function useRelativeDateFieldState(props: RelativeDateFieldOptions): RelativeDateFieldState;

package/dist/cjs/components/RelativeDateField/hooks/useRelativeDateFieldState.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelativeDateFieldState = void 0;
+const react_1 = __importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const useControlledState_1 = require("../../hooks/useControlledState");
+function useRelativeDateFieldState(props) {
+    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    const [text, setText] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
+    if (value && value !== text) {
+        setText(value);
+    }
+    const handleTextChange = (t) => {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        setText(t);
+        if (isLikeRelativeDate(t)) {
+            const date = (0, date_utils_1.dateTimeParse)(t);
+            if (date && (0, date_utils_1.isValid)(date)) {
+                setValue(t);
+            }
+            else {
+                setValue(null);
+            }
+        }
+        else {
+            setValue(null);
+        }
+    };
+    const parsedDate = react_1.default.useMemo(() => {
+        var _a;
+        if (!value) {
+            return null;
+        }
+        return (_a = (0, date_utils_1.dateTimeParse)(value, { timeZone: props.timeZone })) !== null && _a !== void 0 ? _a : null;
+    }, [value, props.timeZone]);
+    const [lastCorrectDate, setLastCorrectDate] = react_1.default.useState(parsedDate);
+    if (parsedDate && parsedDate !== lastCorrectDate) {
+        setLastCorrectDate(parsedDate);
+    }
+    const validationState = props.validationState || (text && !parsedDate) ? 'invalid' : undefined;
+    return {
+        value: value !== null && value !== void 0 ? value : null,
+        setValue(v) {
+            if (props.disabled || props.readOnly) {
+                return;
+            }
+            setValue(v);
+        },
+        text,
+        setText: handleTextChange,
+        parsedDate,
+        lastCorrectDate,
+        validationState,
+        disabled: props.disabled,
+        readOnly: props.readOnly,
+    };
+}
+exports.useRelativeDateFieldState = useRelativeDateFieldState;
+function isLikeRelativeDate(text) {
+    return /^now/i.test(text);
+}

package/dist/cjs/components/RelativeDateField/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RelativeDateField';
+export * from './hooks/useRelativeDateFieldProps';
+export * from './hooks/useRelativeDateFieldState';

package/dist/cjs/components/RelativeDateField/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./RelativeDateField"), exports);
+__exportStar(require("./hooks/useRelativeDateFieldProps"), exports);
+__exportStar(require("./hooks/useRelativeDateFieldState"), exports);

package/dist/cjs/components/RelativeDatePicker/RelativeDatePicker.css

@@ -0,0 +1,16 @@
+.g-date-relative-date-picker {
+  position: relative;
+  display: inline-flex;
+}
+.g-date-relative-date-picker__field {
+  width: 100%;
+}
+.g-date-relative-date-picker__popup-content {
+  outline: none;
+}
+.g-date-relative-date-picker__time-field {
+  width: 100%;
+}
+.g-date-relative-date-picker__time-field-wrapper {
+  padding: 10px;
+}

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

@@ -0,0 +1,6 @@
+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 {
+}
+export declare function RelativeDatePicker(props: RelativeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelativeDatePicker = 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 cn_1 = require("../../utils/cn");
+const Calendar_1 = require("../Calendar");
+const DateField_1 = require("../DateField");
+const MobileCalendar_1 = require("../DatePicker/MobileCalendar");
+const useRelativeDatePickerProps_1 = require("./hooks/useRelativeDatePickerProps");
+const useRelativeDatePickerState_1 = require("./hooks/useRelativeDatePickerState");
+require("./RelativeDatePicker.css");
+const b = (0, cn_1.block)('relative-date-picker');
+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 [isMobile] = (0, uikit_1.useMobile)();
+    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: {
+                    id: props.id,
+                    disabled: props.disabled,
+                    readOnly: props.readOnly,
+                    placeholderValue: props.placeholderValue,
+                    timeZone: props.timeZone,
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { leftContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), rightContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(MobileCalendar_1.MobileCalendarIcon, { state: state.datePickerState, props: { size: props.size } }))] }) })), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), state.datePickerState.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+}
+exports.RelativeDatePicker = RelativeDatePicker;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
+import type { Calendar } from '../../Calendar';
+import type { DateFieldProps } from '../../DateField';
+import type { RelativeDatePickerProps } from '../RelativeDatePicker';
+import type { RelativeDatePickerState } from './useRelativeDatePickerState';
+interface InnerRelativeDatePickerProps {
+    groupProps: React.HTMLAttributes<unknown>;
+    fieldProps: TextInputProps;
+    modeSwitcherProps: ButtonProps;
+    calendarButtonProps: ButtonProps;
+    popupProps: PopupProps;
+    calendarProps: React.ComponentProps<typeof Calendar>;
+    timeInputProps: DateFieldProps;
+}
+export declare function useRelativeDatePickerProps(state: RelativeDatePickerState, { onFocus, onBlur, ...props }: RelativeDatePickerProps): InnerRelativeDatePickerProps;
+export {};