@gravity-ui/date-components 3.4.2 → 4.0.0

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

@@ -2,59 +2,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelativeDateField = RelativeDateField;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn.js");
 const Calendar_1 = require("../Calendar/index.js");
 const DateField_1 = require("../DateField/index.js");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput.js");
-const filterDOMProps_1 = require("../utils/filterDOMProps.js");
 const useRelativeDateFieldProps_1 = require("./hooks/useRelativeDateFieldProps.js");
 const useRelativeDateFieldState_1 = require("./hooks/useRelativeDateFieldState.js");
 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 { groupProps, inputProps, popupProps, calendarProps, timeInputProps } = (0, useRelativeDateFieldProps_1.useRelativeDateFieldProps)(state, props);
     const isMobile = (0, uikit_1.useMobile)();
-    const [anchor, setAnchor] = react_1.default.useState(null);
-    const [isOpen, setOpen] = react_1.default.useState(false);
-    const dialogClosing = react_1.default.useRef(false);
-    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        onFocusWithinChange: (isFocusWithin) => {
-            if (!dialogClosing.current) {
-                setOpen(isFocusWithin);
-            }
-        },
-        isDisabled: isMobile,
-    });
-    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
-    delete DOMProps.id;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, DOMProps, { 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: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
-                    var _a;
-                    (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-                    if (!e.defaultPrevented &&
-                        e.altKey &&
-                        (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        setOpen(true);
-                    }
-                }, controlProps: Object.assign(Object.assign({}, inputProps.controlProps), { onClick: () => {
-                        setOpen(true);
-                    } }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, onReset: (value) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, role: "group", className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { ...inputProps, className: b('field') }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, onReset: (value) => {
                     state.setValue(value);
-                }, disabled: state.disabled, form: props.form }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchor, open: isOpen, onOpenChange: (open) => {
-                    if (!open) {
-                        setOpen(false);
-                    }
-                    dialogClosing.current = !open;
-                }, onTransitionOutComplete: () => {
-                    setTimeout(() => {
-                        dialogClosing.current = false;
-                    });
-                }, placement: props.popupPlacement, offset: props.popupOffset, className: props.popupClassName, style: props.popupStyle, 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] }) }))] })));
+                }, disabled: state.disabled, form: props.form }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { ...popupProps, className: props.popupClassName, style: props.popupStyle, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps }), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { className: b('time-field'), ...timeInputProps }) })) : null] }) }))] }));
 }
 //# sourceMappingURL=RelativeDateField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {Popup, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    PopupStyleProps,\n    StyleProps,\n    TextInputExtendProps,\n    TextInputProps,\n} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';\nimport {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';\nimport type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';\n\nimport './RelativeDateField.scss';\n\nconst b = block('relative-date-field');\n\nexport interface RelativeDateFieldProps\n    extends\n        RelativeDateFieldOptions,\n        TextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        FocusableProps,\n        KeyboardEvents,\n        PopupStyleProps {\n    /**\n     * Show time field in popup\n     * @default false\n     */\n    hasTime?: boolean;\n}\nexport function RelativeDateField(props: RelativeDateFieldProps) {\n    const state = useRelativeDateFieldState(props);\n    const {inputProps, calendarProps, timeInputProps} = useRelativeDateFieldProps(state, props);\n\n    const isMobile = useMobile();\n\n    const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\n\n    const [isOpen, setOpen] = React.useState(false);\n    const dialogClosing = React.useRef(false);\n\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocusWithin) => {\n            if (!dialogClosing.current) {\n                setOpen(isFocusWithin);\n            }\n        },\n        isDisabled: isMobile,\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return (\n        <div\n            {...DOMProps}\n            role=\"group\"\n            className={b(null, props.className)}\n            style={props.style}\n            {...focusWithinProps}\n        >\n            <TextInput\n                {...inputProps}\n                className={b('field')}\n                ref={setAnchor}\n                onBlur={props.onBlur}\n                onKeyDown={(e) => {\n                    inputProps.onKeyDown?.(e);\n                    if (\n                        !e.defaultPrevented &&\n                        e.altKey &&\n                        (e.key === 'ArrowDown' || e.key === 'ArrowUp')\n                    ) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        setOpen(true);\n                    }\n                }}\n                controlProps={{\n                    ...inputProps.controlProps,\n                    onClick: () => {\n                        setOpen(true);\n                    },\n                }}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && (\n                <Popup\n                    anchorElement={anchor}\n                    open={isOpen}\n                    onOpenChange={(open) => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                        dialogClosing.current = !open;\n                    }}\n                    onTransitionOutComplete={() => {\n                        setTimeout(() => {\n                            dialogClosing.current = false;\n                        });\n                    }}\n                    placement={props.popupPlacement}\n                    offset={props.popupOffset}\n                    className={props.popupClassName}\n                    style={props.popupStyle}\n                >\n                    <div className={b('popup-content')}>\n                        <Calendar {...calendarProps} />\n                        {props.hasTime ? (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField className={b('time-field')} {...timeInputProps} />\n                            </div>\n                        ) : null}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AA8Cb,8CAiCC;;AA7ED,6CAA8D;AAE9D,0CAAqC;AACrC,mDAAqC;AACrC,qDAAuC;AACvC,+DAAuD;AAavD,oFAA4E;AAC5E,oFAA4E;AAG5E,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,qBAAqB,CAAC,CAAC;AAoBvC,SAAgB,iBAAiB,CAAC,KAA6B;IAC3D,MAAM,KAAK,GAAG,IAAA,qDAAyB,EAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,EAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GACrE,IAAA,qDAAyB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE5C,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,OAAO,CACH,oCAAS,UAAU,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACrF,uBAAC,iBAAS,OAAK,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,GAAI,EACpD,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC1B,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,EACD,CAAC,QAAQ,IAAI,CACV,uBAAC,aAAK,OAAK,UAAU,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,UAAU,YAC3E,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,mBAAQ,OAAK,aAAa,GAAI,EAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,uBAAC,qBAAS,IAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,KAAM,cAAc,GAAI,GAC3D,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACF,CACX,IACC,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, TextInput, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    PopupStyleProps,\n    StyleProps,\n    TextInputExtendProps,\n    TextInputProps,\n} from '../types';\n\nimport {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';\nimport {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';\nimport type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';\n\nimport './RelativeDateField.scss';\n\nconst b = block('relative-date-field');\n\nexport interface RelativeDateFieldProps\n    extends\n        RelativeDateFieldOptions,\n        TextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        FocusableProps,\n        KeyboardEvents,\n        PopupStyleProps {\n    /**\n     * Show time field in popup\n     * @default false\n     */\n    hasTime?: boolean;\n}\nexport function RelativeDateField(props: RelativeDateFieldProps) {\n    const state = useRelativeDateFieldState(props);\n    const {groupProps, inputProps, popupProps, calendarProps, timeInputProps} =\n        useRelativeDateFieldProps(state, props);\n\n    const isMobile = useMobile();\n\n    return (\n        <div {...groupProps} role=\"group\" className={b(null, props.className)} style={props.style}>\n            <TextInput {...inputProps} className={b('field')} />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && (\n                <Popup {...popupProps} className={props.popupClassName} style={props.popupStyle}>\n                    <div className={b('popup-content')}>\n                        <Calendar {...calendarProps} />\n                        {props.hasTime ? (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField className={b('time-field')} {...timeInputProps} />\n                            </div>\n                        ) : null}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n"]}

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

@@ -1,10 +1,15 @@
-import type { TextInputProps } from '@gravity-ui/uikit';
+import React from 'react';
+import type { PopupProps, TextInputProps } from '@gravity-ui/uikit';
 import type { CalendarProps } from "../../Calendar/index.js";
 import type { DateFieldProps } from "../../DateField/index.js";
 import type { RelativeDateFieldProps } from "../RelativeDateField.js";
 import type { RelativeDateFieldState } from "./useRelativeDateFieldState.js";
 interface RelativeDateProps {
-    inputProps: TextInputProps;
+    groupProps: React.HTMLAttributes<unknown>;
+    inputProps: TextInputProps & {
+        ref: React.Ref<HTMLElement>;
+    };
+    popupProps: PopupProps;
     calendarProps: CalendarProps;
     timeInputProps: DateFieldProps;
 }

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

@@ -3,15 +3,50 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRelativeDateFieldProps = useRelativeDateFieldProps;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const filterDOMProps_js_1 = require("../../utils/filterDOMProps.js");
 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);
+    const lastCorrectDate = state.lastCorrectDate ? state.lastCorrectDate.startOf('day') : null;
+    const [prevCorrectDate, setPrevCorrectDate] = react_1.default.useState(lastCorrectDate);
+    const [focusedDate, setFocusedDate] = react_1.default.useState(lastCorrectDate);
+    if (lastCorrectDate && (!prevCorrectDate || !lastCorrectDate.isSame(prevCorrectDate, 'day'))) {
+        setPrevCorrectDate(lastCorrectDate);
+        setFocusedDate(lastCorrectDate);
     }
+    const [isOpen, setOpen] = react_1.default.useState(false);
+    const dialogClosing = react_1.default.useRef(false);
+    const [anchor, setAnchor] = react_1.default.useState(null);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        onFocusWithin: props.onFocus,
+        onBlurWithin: (e) => {
+            props.onBlur?.(e);
+            state.confirmValue();
+        },
+        onFocusWithinChange: (isFocusWithin) => {
+            if (!dialogClosing.current) {
+                setOpen(isFocusWithin);
+            }
+        },
+    });
+    const DOMProps = (0, filterDOMProps_js_1.filterDOMProps)(props);
+    delete DOMProps.id;
     return {
+        groupProps: {
+            ...DOMProps,
+            ...focusWithinProps,
+            role: 'group',
+            onKeyDown: (e) => {
+                if (isOpen &&
+                    e.key === 'Escape' &&
+                    e.currentTarget.contains(e.target)) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(false);
+                }
+            },
+        },
         inputProps: {
+            ref: setAnchor,
             size: props.size,
             autoFocus: props.autoFocus,
             value: state.text,
@@ -28,10 +63,17 @@ function useRelativeDateFieldProps(state, props) {
             pin: props.pin,
             view: props.view,
             placeholder: props.placeholder,
-            onKeyDown: props.onKeyDown,
+            onKeyDown: (e) => {
+                props.onKeyDown?.(e);
+                if (!e.defaultPrevented &&
+                    e.altKey &&
+                    (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setOpen(true);
+                }
+            },
             onKeyUp: props.onKeyUp,
-            onBlur: props.onBlur,
-            onFocus: props.onFocus,
             controlProps: {
                 'aria-label': props['aria-label'] || undefined,
                 'aria-labelledby': props['aria-labelledby'] || undefined,
@@ -39,12 +81,32 @@ function useRelativeDateFieldProps(state, props) {
                 'aria-details': props['aria-details'] || undefined,
                 'aria-disabled': state.disabled || undefined,
                 readOnly: state.readOnly,
+                onClick: () => {
+                    setOpen(true);
+                },
             },
         },
+        popupProps: {
+            anchorElement: anchor,
+            open: isOpen,
+            onOpenChange: (open) => {
+                if (!open) {
+                    setOpen(false);
+                }
+                dialogClosing.current = !open;
+            },
+            onTransitionOutComplete: () => {
+                setTimeout(() => {
+                    dialogClosing.current = false;
+                });
+            },
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+        },
         calendarProps: {
             size: props.size === 's' ? 'm' : props.size,
             readOnly: true,
-            value: state.parsedDate,
+            value: state.lastCorrectDate,
             focusedValue: focusedDate,
             onFocusUpdate: setFocusedDate,
         },

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

@@ -1 +1 @@
-{"version":3,"file":"useRelativeDateFieldProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDateField/hooks/useRelativeDateFieldProps.ts"],"names":[],"mappings":";;AAgBA,8DAyDC;;AAzED,0DAA0B;AAgB1B,SAAgB,yBAAyB,CACrC,KAA6B,EAC7B,KAA6B;IAE7B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IACpF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAE5E,IAAI,eAAe,KAAK,KAAK,CAAC,eAAe,EAAE,CAAC;QAC5C,kBAAkB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;QAC1C,cAAc,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC1C,CAAC;IAED,OAAO;QACH,UAAU,EAAE;YACR,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,KAAK,EAAE,KAAK,CAAC,IAAI;YACjB,QAAQ,EAAE,KAAK,CAAC,OAAO;YACvB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,eAAe,EAAE,KAAK,CAAC,eAAe;YACtC,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,cAAc,EAAE,KAAK,CAAC,cAAc;YACpC,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,EAAE,EAAE,KAAK,CAAC,EAAE;YACZ,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,UAAU,EAAE,KAAK,CAAC,UAAU;YAC5B,GAAG,EAAE,KAAK,CAAC,GAAG;YACd,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,MAAM,EAAE,KAAK,CAAC,MAAM;YACpB,OAAO,EAAE,KAAK,CAAC,OAAO;YACtB,YAAY,EAAE;gBACV,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,SAAS;gBAC9C,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC,IAAI,SAAS;gBACxD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS;gBAC1D,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,SAAS;gBAClD,eAAe,EAAE,KAAK,CAAC,QAAQ,IAAI,SAAS;gBAC5C,QAAQ,EAAE,KAAK,CAAC,QAAQ;aAC3B;SACJ;QACD,aAAa,EAAE;YACX,IAAI,EAAE,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI;YAC3C,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,KAAK,CAAC,UAAU;YACvB,YAAY,EAAE,WAAW;YACzB,aAAa,EAAE,cAAc;SAChC;QACD,cAAc,EAAE;YACZ,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,KAAK,CAAC,eAAe;YAC5B,MAAM,EAAE,KAAK;SAChB;KACJ,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport type {TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar';\nimport type {DateFieldProps} from '../../DateField';\nimport type {RelativeDateFieldProps} from '../RelativeDateField';\n\nimport type {RelativeDateFieldState} from './useRelativeDateFieldState';\n\ninterface RelativeDateProps {\n    inputProps: TextInputProps;\n    calendarProps: CalendarProps;\n    timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDateFieldProps(\n    state: RelativeDateFieldState,\n    props: RelativeDateFieldProps,\n): RelativeDateProps {\n    const [prevCorrectDate, setPrevCorrectDate] = React.useState(state.lastCorrectDate);\n    const [focusedDate, setFocusedDate] = React.useState(state.lastCorrectDate);\n\n    if (prevCorrectDate !== state.lastCorrectDate) {\n        setPrevCorrectDate(state.lastCorrectDate);\n        setFocusedDate(state.lastCorrectDate);\n    }\n\n    return {\n        inputProps: {\n            size: props.size,\n            autoFocus: props.autoFocus,\n            value: state.text,\n            onUpdate: state.setText,\n            disabled: state.disabled,\n            hasClear: props.hasClear,\n            validationState: state.validationState,\n            errorMessage: props.errorMessage,\n            errorPlacement: props.errorPlacement,\n            label: props.label,\n            id: props.id,\n            startContent: props.startContent,\n            endContent: props.endContent,\n            pin: props.pin,\n            view: props.view,\n            placeholder: props.placeholder,\n            onKeyDown: props.onKeyDown,\n            onKeyUp: props.onKeyUp,\n            onBlur: props.onBlur,\n            onFocus: props.onFocus,\n            controlProps: {\n                'aria-label': props['aria-label'] || undefined,\n                'aria-labelledby': props['aria-labelledby'] || undefined,\n                'aria-describedby': props['aria-describedby'] || undefined,\n                'aria-details': props['aria-details'] || undefined,\n                'aria-disabled': state.disabled || undefined,\n                readOnly: state.readOnly,\n            },\n        },\n        calendarProps: {\n            size: props.size === 's' ? 'm' : props.size,\n            readOnly: true,\n            value: state.parsedDate,\n            focusedValue: focusedDate,\n            onFocusUpdate: setFocusedDate,\n        },\n        timeInputProps: {\n            size: props.size,\n            readOnly: true,\n            value: state.lastCorrectDate,\n            format: 'LTS',\n        },\n    };\n}\n"]}
+{"version":3,"file":"useRelativeDateFieldProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDateField/hooks/useRelativeDateFieldProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useFocusWithin} from '@gravity-ui/uikit';\nimport type {PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarProps} from '../../Calendar';\nimport type {DateFieldProps} from '../../DateField';\nimport {filterDOMProps} from '../../utils/filterDOMProps.js';\nimport type {RelativeDateFieldProps} from '../RelativeDateField';\n\nimport type {RelativeDateFieldState} from './useRelativeDateFieldState';\n\ninterface RelativeDateProps {\n    groupProps: React.HTMLAttributes<unknown>;\n    inputProps: TextInputProps & {ref: React.Ref<HTMLElement>};\n    popupProps: PopupProps;\n    calendarProps: CalendarProps;\n    timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDateFieldProps(\n    state: RelativeDateFieldState,\n    props: RelativeDateFieldProps,\n): RelativeDateProps {\n    const lastCorrectDate = state.lastCorrectDate ? state.lastCorrectDate.startOf('day') : null;\n    const [prevCorrectDate, setPrevCorrectDate] = React.useState(lastCorrectDate);\n    const [focusedDate, setFocusedDate] = React.useState(lastCorrectDate);\n\n    if (lastCorrectDate && (!prevCorrectDate || !lastCorrectDate.isSame(prevCorrectDate, 'day'))) {\n        setPrevCorrectDate(lastCorrectDate);\n        setFocusedDate(lastCorrectDate);\n    }\n\n    const [isOpen, setOpen] = React.useState(false);\n    const dialogClosing = React.useRef(false);\n\n    const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\n\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithin: props.onFocus,\n        onBlurWithin: (e) => {\n            props.onBlur?.(e);\n            state.confirmValue();\n        },\n        onFocusWithinChange: (isFocusWithin) => {\n            if (!dialogClosing.current) {\n                setOpen(isFocusWithin);\n            }\n        },\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return {\n        groupProps: {\n            ...DOMProps,\n            ...focusWithinProps,\n            role: 'group',\n            onKeyDown: (e) => {\n                if (\n                    isOpen &&\n                    e.key === 'Escape' &&\n                    (e.currentTarget as HTMLElement).contains(e.target as Node)\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setOpen(false);\n                }\n            },\n        },\n        inputProps: {\n            ref: setAnchor,\n            size: props.size,\n            autoFocus: props.autoFocus,\n            value: state.text,\n            onUpdate: state.setText,\n            disabled: state.disabled,\n            hasClear: props.hasClear,\n            validationState: state.validationState,\n            errorMessage: props.errorMessage,\n            errorPlacement: props.errorPlacement,\n            label: props.label,\n            id: props.id,\n            startContent: props.startContent,\n            endContent: props.endContent,\n            pin: props.pin,\n            view: props.view,\n            placeholder: props.placeholder,\n            onKeyDown: (e) => {\n                props.onKeyDown?.(e);\n                if (\n                    !e.defaultPrevented &&\n                    e.altKey &&\n                    (e.key === 'ArrowDown' || e.key === 'ArrowUp')\n                ) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setOpen(true);\n                }\n            },\n            onKeyUp: props.onKeyUp,\n            controlProps: {\n                'aria-label': props['aria-label'] || undefined,\n                'aria-labelledby': props['aria-labelledby'] || undefined,\n                'aria-describedby': props['aria-describedby'] || undefined,\n                'aria-details': props['aria-details'] || undefined,\n                'aria-disabled': state.disabled || undefined,\n                readOnly: state.readOnly,\n                onClick: () => {\n                    setOpen(true);\n                },\n            },\n        },\n        popupProps: {\n            anchorElement: anchor,\n            open: isOpen,\n            onOpenChange: (open) => {\n                if (!open) {\n                    setOpen(false);\n                }\n                dialogClosing.current = !open;\n            },\n            onTransitionOutComplete: () => {\n                setTimeout(() => {\n                    dialogClosing.current = false;\n                });\n            },\n            placement: props.popupPlacement,\n            offset: props.popupOffset,\n        },\n        calendarProps: {\n            size: props.size === 's' ? 'm' : props.size,\n            readOnly: true,\n            value: state.lastCorrectDate,\n            focusedValue: focusedDate,\n            onFocusUpdate: setFocusedDate,\n        },\n        timeInputProps: {\n            size: props.size,\n            readOnly: true,\n            value: state.lastCorrectDate,\n            format: 'LTS',\n        },\n    };\n}\n"]}

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

@@ -5,6 +5,8 @@ export interface RelativeDateFieldState {
     value: string | null;
     /** Sets the field value */
     setValue: (v: string | null) => void;
+    /** Commits current text value on blur. */
+    confirmValue: () => void;
     /** Current user input */
     text: string;
     /** Sets text */

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

@@ -6,50 +6,64 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const date_utils_1 = require("@gravity-ui/date-utils");
 const uikit_1 = require("@gravity-ui/uikit");
 function useRelativeDateFieldState(props) {
-    var _a;
-    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
-    const [text, setText] = react_1.default.useState(value !== null && value !== void 0 ? value : '');
-    if (value && value !== text) {
-        setText(value);
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, props.defaultValue ?? '', props.onUpdate);
+    const [text, setText] = react_1.default.useState(value ?? '');
+    const [lastValue, setLastValue] = react_1.default.useState(value);
+    if (value !== lastValue) {
+        setLastValue(value);
+        setText(value ?? '');
     }
-    const handleTextChange = (t) => {
+    const parseRelativeDate = react_1.default.useCallback((relativeValue) => {
+        if (!(0, date_utils_1.isLikeRelative)(relativeValue)) {
+            return null;
+        }
+        const date = (0, date_utils_1.dateTimeParse)(relativeValue, {
+            timeZone: props.timeZone,
+            roundUp: props.roundUp,
+        });
+        return date?.isValid() ? date : null;
+    }, [props.roundUp, props.timeZone]);
+    const parsedDate = react_1.default.useMemo(() => parseRelativeDate(text), [parseRelativeDate, text]);
+    const [lastCorrectDate, setLastCorrectDate] = react_1.default.useState(parsedDate);
+    if (parsedDate && (!lastCorrectDate || !parsedDate.isSame(lastCorrectDate))) {
+        setLastCorrectDate(parsedDate);
+    }
+    const commitValue = react_1.default.useCallback((nextValue) => {
         if (props.disabled || props.readOnly) {
             return;
         }
-        setText(t);
-        if ((0, date_utils_1.isLikeRelative)(t)) {
-            const date = (0, date_utils_1.dateTimeParse)(t);
-            if (date && date.isValid()) {
-                setValue(t);
-            }
-            else {
-                setValue(null);
-            }
+        setValue(nextValue);
+    }, [props.disabled, props.readOnly, setValue]);
+    const confirmValue = react_1.default.useCallback(() => {
+        if (!text) {
+            return;
         }
-        else {
+        if (parsedDate) {
+            commitValue(text);
+            return;
+        }
+        const newValue = parseRelativeDate(value) ? value : null;
+        setText(newValue ?? '');
+        commitValue(newValue);
+    }, [commitValue, parseRelativeDate, parsedDate, text, value]);
+    const handleTextChange = react_1.default.useCallback((t) => {
+        if (props.disabled || props.readOnly) {
+            return;
+        }
+        setText(t);
+        if (!t) {
             setValue(null);
+            return;
         }
-    };
-    const parsedDate = react_1.default.useMemo(() => {
-        var _a;
-        if (!value) {
-            return null;
+        if (parseRelativeDate(t)) {
+            setValue(t);
         }
-        return (_a = (0, date_utils_1.dateTimeParse)(value, { timeZone: props.timeZone, roundUp: props.roundUp })) !== null && _a !== void 0 ? _a : null;
-    }, [value, props.timeZone, props.roundUp]);
-    const [lastCorrectDate, setLastCorrectDate] = react_1.default.useState(parsedDate);
-    if (parsedDate && parsedDate !== lastCorrectDate) {
-        setLastCorrectDate(parsedDate);
-    }
-    const validationState = props.validationState || (text && !parsedDate) ? 'invalid' : undefined;
+    }, [parseRelativeDate, props.disabled, props.readOnly, setValue]);
+    const validationState = props.validationState ?? (text && !parsedDate ? 'invalid' : undefined);
     return {
         value,
-        setValue(v) {
-            if (props.disabled || props.readOnly) {
-                return;
-            }
-            setValue(v);
-        },
+        setValue: commitValue,
+        confirmValue,
         text,
         setText: handleTextChange,
         parsedDate,

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

@@ -1 +1 @@
-{"version":3,"file":"useRelativeDateFieldState.js","sourceRoot":"../../../../../src","sources":["components/RelativeDateField/hooks/useRelativeDateFieldState.ts"],"names":[],"mappings":";;AAsCA,8DA4DC;;AAlGD,0DAA0B;AAE1B,uDAAqE;AAErE,6CAAqD;AAkCrD,SAAgB,yBAAyB,CAAC,KAA+B;;IACrE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,0BAAkB,EACxC,KAAK,CAAC,KAAK,EACX,MAAA,KAAK,CAAC,YAAY,mCAAI,IAAI,EAC1B,KAAK,CAAC,QAAQ,CACjB,CAAC;IAEF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAE,CAAC,CAAC;IACpD,IAAI,KAAK,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QAC1B,OAAO,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC;IAED,MAAM,gBAAgB,GAAG,CAAC,CAAS,EAAE,EAAE;QACnC,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;YACnC,OAAO;QACX,CAAC;QACD,OAAO,CAAC,CAAC,CAAC,CAAC;QACX,IAAI,IAAA,2BAAc,EAAC,CAAC,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,GAAG,IAAA,0BAAa,EAAC,CAAC,CAAC,CAAC;YAC9B,IAAI,IAAI,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;gBACzB,QAAQ,CAAC,CAAC,CAAC,CAAC;YAChB,CAAC;iBAAM,CAAC;gBACJ,QAAQ,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACL,CAAC;aAAM,CAAC;YACJ,QAAQ,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,eAAK,CAAC,OAAO,CAAC,GAAG,EAAE;;QAClC,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,OAAO,MAAA,IAAA,0BAAa,EAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAC,CAAC,mCAAI,IAAI,CAAC;IAC5F,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAE3C,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzE,IAAI,UAAU,IAAI,UAAU,KAAK,eAAe,EAAE,CAAC;QAC/C,kBAAkB,CAAC,UAAU,CAAC,CAAC;IACnC,CAAC;IAED,MAAM,eAAe,GAAG,KAAK,CAAC,eAAe,IAAI,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAE/F,OAAO;QACH,KAAK;QACL,QAAQ,CAAC,CAAgB;YACrB,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnC,OAAO;YACX,CAAC;YAED,QAAQ,CAAC,CAAC,CAAC,CAAC;QAChB,CAAC;QACD,IAAI;QACJ,OAAO,EAAE,gBAAgB;QACzB,UAAU;QACV,eAAe;QACf,eAAe;QACf,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KAC3B,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {dateTimeParse, isLikeRelative} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {InputBase, Validation, ValueBase} from '../../types';\n\nexport interface RelativeDateFieldState {\n    /** The current field value. */\n    value: string | null;\n    /** Sets the field value */\n    setValue: (v: string | null) => void;\n    /** Current user input */\n    text: string;\n    /** Sets text */\n    setText: (t: string) => void;\n    /** */\n    parsedDate: DateTime | null;\n    /** */\n    lastCorrectDate: DateTime | null;\n    /** */\n    validationState?: 'invalid';\n    /**\n     * Whether the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Whether the value is immutable.\n     */\n    readOnly?: boolean;\n}\n\nexport interface RelativeDateFieldOptions extends ValueBase<string | null>, InputBase, Validation {\n    timeZone?: string;\n    /** Round up parsed date to the nearest granularity. */\n    roundUp?: boolean;\n}\nexport function useRelativeDateFieldState(props: RelativeDateFieldOptions): RelativeDateFieldState {\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        props.onUpdate,\n    );\n\n    const [text, setText] = React.useState(value ?? '');\n    if (value && value !== text) {\n        setText(value);\n    }\n\n    const handleTextChange = (t: string) => {\n        if (props.disabled || props.readOnly) {\n            return;\n        }\n        setText(t);\n        if (isLikeRelative(t)) {\n            const date = dateTimeParse(t);\n            if (date && date.isValid()) {\n                setValue(t);\n            } else {\n                setValue(null);\n            }\n        } else {\n            setValue(null);\n        }\n    };\n\n    const parsedDate = React.useMemo(() => {\n        if (!value) {\n            return null;\n        }\n        return dateTimeParse(value, {timeZone: props.timeZone, roundUp: props.roundUp}) ?? null;\n    }, [value, props.timeZone, props.roundUp]);\n\n    const [lastCorrectDate, setLastCorrectDate] = React.useState(parsedDate);\n    if (parsedDate && parsedDate !== lastCorrectDate) {\n        setLastCorrectDate(parsedDate);\n    }\n\n    const validationState = props.validationState || (text && !parsedDate) ? 'invalid' : undefined;\n\n    return {\n        value,\n        setValue(v: string | null) {\n            if (props.disabled || props.readOnly) {\n                return;\n            }\n\n            setValue(v);\n        },\n        text,\n        setText: handleTextChange,\n        parsedDate,\n        lastCorrectDate,\n        validationState,\n        disabled: props.disabled,\n        readOnly: props.readOnly,\n    };\n}\n"]}
+{"version":3,"file":"useRelativeDateFieldState.js","sourceRoot":"../../../../../src","sources":["components/RelativeDateField/hooks/useRelativeDateFieldState.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {dateTimeParse, isLikeRelative} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {InputBase, Validation, ValueBase} from '../../types';\n\nexport interface RelativeDateFieldState {\n    /** The current field value. */\n    value: string | null;\n    /** Sets the field value */\n    setValue: (v: string | null) => void;\n    /** Commits current text value on blur. */\n    confirmValue: () => void;\n    /** Current user input */\n    text: string;\n    /** Sets text */\n    setText: (t: string) => void;\n    /** */\n    parsedDate: DateTime | null;\n    /** */\n    lastCorrectDate: DateTime | null;\n    /** */\n    validationState?: 'invalid';\n    /**\n     * Whether the field is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * Whether the value is immutable.\n     */\n    readOnly?: boolean;\n}\n\nexport interface RelativeDateFieldOptions extends ValueBase<string | null>, InputBase, Validation {\n    timeZone?: string;\n    /** Round up parsed date to the nearest granularity. */\n    roundUp?: boolean;\n}\nexport function useRelativeDateFieldState(props: RelativeDateFieldOptions): RelativeDateFieldState {\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? '',\n        props.onUpdate,\n    );\n\n    const [text, setText] = React.useState(value ?? '');\n    const [lastValue, setLastValue] = React.useState(value);\n    if (value !== lastValue) {\n        setLastValue(value);\n        setText(value ?? '');\n    }\n\n    const parseRelativeDate = React.useCallback(\n        (relativeValue: string | null) => {\n            if (!isLikeRelative(relativeValue)) {\n                return null;\n            }\n\n            const date = dateTimeParse(relativeValue, {\n                timeZone: props.timeZone,\n                roundUp: props.roundUp,\n            });\n\n            return date?.isValid() ? date : null;\n        },\n        [props.roundUp, props.timeZone],\n    );\n\n    const parsedDate = React.useMemo(() => parseRelativeDate(text), [parseRelativeDate, text]);\n\n    const [lastCorrectDate, setLastCorrectDate] = React.useState(parsedDate);\n    if (parsedDate && (!lastCorrectDate || !parsedDate.isSame(lastCorrectDate))) {\n        setLastCorrectDate(parsedDate);\n    }\n\n    const commitValue = React.useCallback(\n        (nextValue: string | null) => {\n            if (props.disabled || props.readOnly) {\n                return;\n            }\n\n            setValue(nextValue);\n        },\n        [props.disabled, props.readOnly, setValue],\n    );\n\n    const confirmValue = React.useCallback(() => {\n        if (!text) {\n            return;\n        }\n\n        if (parsedDate) {\n            commitValue(text);\n            return;\n        }\n\n        const newValue = parseRelativeDate(value) ? value : null;\n        setText(newValue ?? '');\n        commitValue(newValue);\n    }, [commitValue, parseRelativeDate, parsedDate, text, value]);\n\n    const handleTextChange = React.useCallback(\n        (t: string) => {\n            if (props.disabled || props.readOnly) {\n                return;\n            }\n\n            setText(t);\n\n            if (!t) {\n                setValue(null);\n                return;\n            }\n\n            if (parseRelativeDate(t)) {\n                setValue(t);\n            }\n        },\n        [parseRelativeDate, props.disabled, props.readOnly, setValue],\n    );\n\n    const validationState = props.validationState ?? (text && !parsedDate ? 'invalid' : undefined);\n\n    return {\n        value,\n        setValue: commitValue,\n        confirmValue,\n        text,\n        setText: handleTextChange,\n        parsedDate,\n        lastCorrectDate,\n        validationState,\n        disabled: props.disabled,\n        readOnly: props.readOnly,\n    };\n}\n"]}

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

@@ -8,4 +8,4 @@ export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions,
     /** 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;
+export declare function RelativeDatePicker(props: RelativeDatePickerProps): React.JSX.Element;

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

@@ -18,22 +18,25 @@ const useRelativeDatePickerState_1 = require("./hooks/useRelativeDatePickerState
 require("./RelativeDatePicker.css");
 const b = (0, cn_1.block)('relative-date-picker');
 function RelativeDatePicker(props) {
-    var _a;
     const state = (0, useRelativeDatePickerState_1.useRelativeDatePickerState)(props);
     const { groupProps, fieldProps, modeSwitcherProps, calendarButtonProps, popupProps, calendarProps, timeInputProps, } = (0, useRelativeDatePickerProps_1.useRelativeDatePickerProps)(state, props);
     const [anchor, setAnchor] = react_1.default.useState(null);
     const handleRef = (0, uikit_1.useForkRef)(groupProps.ref, setAnchor);
     const isMobile = (0, uikit_1.useMobile)();
     const isOnlyTime = state.datePickerState.formatInfo.hasTime && !state.datePickerState.formatInfo.hasDate;
-    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: {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...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,
                     placeholderValue: props.placeholderValue,
                     timeZone: props.timeZone,
-                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { controlProps: Object.assign(Object.assign({}, fieldProps.controlProps), { disabled: isMobile && state.mode === 'absolute', className: b('input', { mobile: isMobile && state.mode === 'absolute' }) }), hasClear: props.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, modeSwitcherProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) })), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((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 && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: (_a = state.value) === null || _a === void 0 ? void 0 : _a.type, disabled: state.disabled, form: props.form }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => getNativeValue(value), onReset: (value) => {
+                } })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { ...fieldProps, controlProps: {
+                    ...fieldProps.controlProps,
+                    disabled: isMobile && state.mode === 'absolute',
+                    className: b('input', { mobile: isMobile && state.mode === 'absolute' }),
+                }, hasClear: fieldProps.hasClear && !(isMobile && state.mode === 'absolute'), startContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { ...modeSwitcherProps, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Function }) }), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...calendarButtonProps, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) })), !isMobile && isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock })), isMobile && state.mode === 'absolute' && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: isOnlyTime ? icons_1.Clock : icons_1.Calendar }))] }) }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value?.type, disabled: state.disabled, form: props.form }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, toStringValue: (value) => getNativeValue(value), onReset: (value) => {
                     state.setValue(value);
-                }, disabled: state.disabled, form: props.form }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorElement: anchor, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps))), state.datePickerState.formatInfo.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({}, timeInputProps)) }))] }) })))] })));
+                }, disabled: state.disabled, form: props.form }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { ...popupProps, anchorElement: anchor, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(calendarProps)) : ((0, jsx_runtime_1.jsx)(Calendar_1.Calendar, { ...calendarProps })), state.datePickerState.formatInfo.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, { ...timeInputProps }) }))] }) }))] }));
 }
 function getNativeValue(value) {
     if (!value) {

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeDatePicker/RelativeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {\n    Calendar as CalendarIcon,\n    Clock as ClockIcon,\n    Function as FunctionIcon,\n} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput, useForkRef, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport type {CalendarProps} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {MobileCalendar} from '../DatePicker/MobileCalendar';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    PopupStyleProps,\n    StyleProps,\n    TextInputProps,\n} from '../types';\n\nimport {useRelativeDatePickerProps} from './hooks/useRelativeDatePickerProps';\nimport {useRelativeDatePickerState} from './hooks/useRelativeDatePickerState';\nimport type {RelativeDatePickerStateOptions, Value} from './hooks/useRelativeDatePickerState';\n\nimport './RelativeDatePicker.scss';\n\nconst b = block('relative-date-picker');\n\nexport interface RelativeDatePickerProps\n    extends\n        RelativeDatePickerStateOptions,\n        TextInputProps,\n        FocusableProps,\n        KeyboardEvents,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        PopupStyleProps {\n    children?: (props: CalendarProps) => React.ReactNode;\n    /** Handler that is called when the popup's open state changes. */\n    onOpenChange?: (open: boolean) => void;\n}\n\nexport function RelativeDatePicker(props: RelativeDatePickerProps) {\n    const state = useRelativeDatePickerState(props);\n\n    const {\n        groupProps,\n        fieldProps,\n        modeSwitcherProps,\n        calendarButtonProps,\n        popupProps,\n        calendarProps,\n        timeInputProps,\n    } = useRelativeDatePickerProps(state, props);\n\n    const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\n    const handleRef = useForkRef(groupProps.ref, setAnchor);\n\n    const isMobile = useMobile();\n    const isOnlyTime =\n        state.datePickerState.formatInfo.hasTime && !state.datePickerState.formatInfo.hasDate;\n\n    return (\n        <div {...groupProps} ref={handleRef} className={b(null, props.className)}>\n            {isMobile && state.mode === 'absolute' && (\n                <MobileCalendar\n                    state={state.datePickerState}\n                    props={{\n                        id: props.id,\n                        disabled: props.disabled,\n                        readOnly: props.readOnly,\n                        placeholderValue: props.placeholderValue,\n                        timeZone: props.timeZone,\n                    }}\n                />\n            )}\n            <TextInput\n                {...fieldProps}\n                controlProps={{\n                    ...fieldProps.controlProps,\n                    disabled: isMobile && state.mode === 'absolute',\n                    className: b('input', {mobile: isMobile && state.mode === 'absolute'}),\n                }}\n                hasClear={props.hasClear && !(isMobile && state.mode === 'absolute')}\n                startContent={\n                    <Button {...modeSwitcherProps}>\n                        <Icon data={FunctionIcon} />\n                    </Button>\n                }\n                endContent={\n                    <React.Fragment>\n                        {!isMobile && !isOnlyTime && (\n                            <Button {...calendarButtonProps}>\n                                <Icon data={CalendarIcon} />\n                            </Button>\n                        )}\n                        {!isMobile && isOnlyTime && (\n                            <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n                        )}\n                        {isMobile && state.mode === 'absolute' && (\n                            <StubButton\n                                size={calendarButtonProps.size}\n                                icon={isOnlyTime ? ClockIcon : CalendarIcon}\n                            />\n                        )}\n                    </React.Fragment>\n                }\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value?.type}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                toStringValue={(value) => getNativeValue(value)}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && !isOnlyTime && (\n                <Popup {...popupProps} anchorElement={anchor}>\n                    <div className={b('popup-content')}>\n                        {typeof props.children === 'function' ? (\n                            props.children(calendarProps)\n                        ) : (\n                            <Calendar {...calendarProps} />\n                        )}\n                        {state.datePickerState.formatInfo.hasTime && (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField {...timeInputProps} />\n                            </div>\n                        )}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n\nfunction getNativeValue(value: Value | null) {\n    if (!value) {\n        return '';\n    }\n    if (value.type === 'relative') {\n        return value.value;\n    }\n    return value.value.toISOString();\n}\n"]}
+{"version":3,"file":"RelativeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeDatePicker/RelativeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {\n    Calendar as CalendarIcon,\n    Clock as ClockIcon,\n    Function as FunctionIcon,\n} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput, useForkRef, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport type {CalendarProps} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {MobileCalendar} from '../DatePicker/MobileCalendar';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    PopupStyleProps,\n    StyleProps,\n    TextInputProps,\n} from '../types';\n\nimport {useRelativeDatePickerProps} from './hooks/useRelativeDatePickerProps';\nimport {useRelativeDatePickerState} from './hooks/useRelativeDatePickerState';\nimport type {RelativeDatePickerStateOptions, Value} from './hooks/useRelativeDatePickerState';\n\nimport './RelativeDatePicker.scss';\n\nconst b = block('relative-date-picker');\n\nexport interface RelativeDatePickerProps\n    extends\n        RelativeDatePickerStateOptions,\n        TextInputProps,\n        FocusableProps,\n        KeyboardEvents,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        PopupStyleProps {\n    children?: (props: CalendarProps) => React.ReactNode;\n    /** Handler that is called when the popup's open state changes. */\n    onOpenChange?: (open: boolean) => void;\n}\n\nexport function RelativeDatePicker(props: RelativeDatePickerProps) {\n    const state = useRelativeDatePickerState(props);\n\n    const {\n        groupProps,\n        fieldProps,\n        modeSwitcherProps,\n        calendarButtonProps,\n        popupProps,\n        calendarProps,\n        timeInputProps,\n    } = useRelativeDatePickerProps(state, props);\n\n    const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\n    const handleRef = useForkRef(groupProps.ref, setAnchor);\n\n    const isMobile = useMobile();\n    const isOnlyTime =\n        state.datePickerState.formatInfo.hasTime && !state.datePickerState.formatInfo.hasDate;\n\n    return (\n        <div {...groupProps} ref={handleRef} className={b(null, props.className)}>\n            {isMobile && state.mode === 'absolute' && (\n                <MobileCalendar\n                    state={state.datePickerState}\n                    props={{\n                        id: props.id,\n                        disabled: props.disabled,\n                        readOnly: props.readOnly,\n                        placeholderValue: props.placeholderValue,\n                        timeZone: props.timeZone,\n                    }}\n                />\n            )}\n            <TextInput\n                {...fieldProps}\n                controlProps={{\n                    ...fieldProps.controlProps,\n                    disabled: isMobile && state.mode === 'absolute',\n                    className: b('input', {mobile: isMobile && state.mode === 'absolute'}),\n                }}\n                hasClear={fieldProps.hasClear && !(isMobile && state.mode === 'absolute')}\n                startContent={\n                    <Button {...modeSwitcherProps}>\n                        <Icon data={FunctionIcon} />\n                    </Button>\n                }\n                endContent={\n                    <React.Fragment>\n                        {!isMobile && !isOnlyTime && (\n                            <Button {...calendarButtonProps}>\n                                <Icon data={CalendarIcon} />\n                            </Button>\n                        )}\n                        {!isMobile && isOnlyTime && (\n                            <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n                        )}\n                        {isMobile && state.mode === 'absolute' && (\n                            <StubButton\n                                size={calendarButtonProps.size}\n                                icon={isOnlyTime ? ClockIcon : CalendarIcon}\n                            />\n                        )}\n                    </React.Fragment>\n                }\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value?.type}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                toStringValue={(value) => getNativeValue(value)}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && !isOnlyTime && (\n                <Popup {...popupProps} anchorElement={anchor}>\n                    <div className={b('popup-content')}>\n                        {typeof props.children === 'function' ? (\n                            props.children(calendarProps)\n                        ) : (\n                            <Calendar {...calendarProps} />\n                        )}\n                        {state.datePickerState.formatInfo.hasTime && (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField {...timeInputProps} />\n                            </div>\n                        )}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n\nfunction getNativeValue(value: Value | null) {\n    if (!value) {\n        return '';\n    }\n    if (value.type === 'relative') {\n        return value.value;\n    }\n    return value.value.toISOString();\n}\n"]}

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

@@ -12,7 +12,7 @@ interface InnerRelativeDatePickerProps {
     modeSwitcherProps: ButtonButtonProps;
     calendarButtonProps: ButtonButtonProps;
     popupProps: PopupProps;
-    calendarProps: React.ComponentProps<typeof Calendar>;
+    calendarProps: React.ComponentProps<typeof Calendar<'single'>>;
     timeInputProps: DateFieldProps;
 }
 export declare function useRelativeDatePickerProps(state: RelativeDatePickerState, { onFocus, onBlur, ...props }: RelativeDatePickerProps): InnerRelativeDatePickerProps;