@gravity-ui/date-components 3.4.2 → 4.1.0

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

@@ -1,29 +1,27 @@
 'use client';
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Popup, Sheet } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
 import { PickerForm } from "./PickerForm.js";
 import "./PickerDialog.css";
 const b = block('relative-range-date-picker-dialog');
-export function PickerDialog(_a) {
-    var { open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal, returnFocus = false, onRemove } = _a, props = __rest(_a, ["open", "onClose", "isMobile", "anchor", "popupClassName", "popupStyle", "popupPlacement", "popupOffset", "modal", "returnFocus", "onRemove"]);
+export function PickerDialog({ open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal, returnFocus = false, onRemove, ...props }) {
     if (isMobile) {
         return (_jsx(Sheet, { visible: open, onClose: () => {
                 onClose('outside-press');
                 setTimeout(() => {
-                    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                    onRemove?.();
                 });
-            }, contentClassName: b('content', { mobile: true, size: 'xl' }, popupClassName), children: _jsx(PickerForm, Object.assign({}, props, { size: "xl", onApply: () => {
+            }, contentClassName: b('content', { mobile: true, size: 'xl' }, popupClassName), children: _jsx(PickerForm, { ...props, size: "xl", onApply: () => {
                     onClose('apply');
-                } })) }));
+                } }) }));
     }
     return (_jsx(Popup, { open: open, onOpenChange: (isOpen, _event, reason) => {
             if (!isOpen) {
                 onClose(reason);
             }
-        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, returnFocus: returnFocus, onTransitionOutComplete: onRemove, children: _jsx(PickerForm, Object.assign({}, props, { onApply: () => {
+        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, returnFocus: returnFocus, onTransitionOutComplete: onRemove, children: _jsx(PickerForm, { ...props, onApply: () => {
                 onClose('apply');
-            } })) }));
+            } }) }));
 }
 //# sourceMappingURL=PickerDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAGxC,4BAA6B;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,mCAAmC,CAAC,CAAC;AAmBrD,MAAM,UAAU,YAAY,CAAC,EAaT;QAbS,EACzB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,cAAc,EACd,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,QAAQ,OAEQ,EADb,KAAK,cAZiB,8IAa5B,CADW;IAER,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,KAAC,KAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,eAAe,CAAC,CAAC;gBACzB,UAAU,CAAC,GAAG,EAAE;oBACZ,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;gBACjB,CAAC,CAAC,CAAC;YACP,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,YAE1E,KAAC,UAAU,oBACH,KAAK,IACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC,IACH,GACE,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACL,CAAC,EACD,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,cAAc,CAAC,EAC3D,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,QAAQ,YAEjC,KAAC,UAAU,oBACH,KAAK,IACT,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC,IACH,GACE,CACX,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, Sheet} from '@gravity-ui/uikit';\nimport type {PopupProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport type {PopupStyleProps} from '../../../types';\n\nimport {PickerForm} from './PickerForm';\nimport type {PickerFormProps} from './PickerForm';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps extends PickerFormProps, PopupStyleProps {\n    /** Popup anchor */\n    anchor: HTMLElement | null;\n    /** Manages `Popup` visibility */\n    open: boolean;\n    /** Handles popup close event */\n    onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;\n    /** Handles popup remove from DOM event */\n    onRemove?: () => void;\n    /** If true `Popup` act like a modal dialog */\n    modal?: boolean;\n    /** Element which focus should be returned to */\n    returnFocus?: PopupProps['returnFocus'];\n    /** If true `Sheet` is used instead of `Popup`  */\n    isMobile?: boolean;\n}\n\nexport function PickerDialog({\n    open,\n    onClose,\n    isMobile,\n    anchor,\n    popupClassName,\n    popupStyle,\n    popupPlacement,\n    popupOffset,\n    modal,\n    returnFocus = false,\n    onRemove,\n    ...props\n}: PickerDialogProps) {\n    if (isMobile) {\n        return (\n            <Sheet\n                visible={open}\n                onClose={() => {\n                    onClose('outside-press');\n                    setTimeout(() => {\n                        onRemove?.();\n                    });\n                }}\n                contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}\n            >\n                <PickerForm\n                    {...props}\n                    size=\"xl\"\n                    onApply={() => {\n                        onClose('apply');\n                    }}\n                />\n            </Sheet>\n        );\n    }\n\n    return (\n        <Popup\n            open={open}\n            onOpenChange={(isOpen, _event, reason) => {\n                if (!isOpen) {\n                    onClose(reason);\n                }\n            }}\n            placement={popupPlacement}\n            offset={popupOffset}\n            role=\"dialog\"\n            anchorElement={anchor}\n            className={b('content', {size: props.size}, popupClassName)}\n            style={popupStyle}\n            modal={modal}\n            returnFocus={returnFocus}\n            onTransitionOutComplete={onRemove}\n        >\n            <PickerForm\n                {...props}\n                onApply={() => {\n                    onClose('apply');\n                }}\n            />\n        </Popup>\n    );\n}\n"]}
+{"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAGxC,4BAA6B;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,mCAAmC,CAAC,CAAC;AAmBrD,MAAM,UAAU,YAAY,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,cAAc,EACd,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,EACL,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,KAAC,KAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,eAAe,CAAC,CAAC;gBACzB,UAAU,CAAC,GAAG,EAAE;oBACZ,QAAQ,EAAE,EAAE,CAAC;gBACjB,CAAC,CAAC,CAAC;YACP,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,YAE1E,KAAC,UAAU,OACH,KAAK,EACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC,GACH,GACE,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACL,CAAC,EACD,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,cAAc,CAAC,EAC3D,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,uBAAuB,EAAE,QAAQ,YAEjC,KAAC,UAAU,OACH,KAAK,EACT,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC,GACH,GACE,CACX,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, Sheet} from '@gravity-ui/uikit';\nimport type {PopupProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport type {PopupStyleProps} from '../../../types';\n\nimport {PickerForm} from './PickerForm';\nimport type {PickerFormProps} from './PickerForm';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps extends PickerFormProps, PopupStyleProps {\n    /** Popup anchor */\n    anchor: HTMLElement | null;\n    /** Manages `Popup` visibility */\n    open: boolean;\n    /** Handles popup close event */\n    onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;\n    /** Handles popup remove from DOM event */\n    onRemove?: () => void;\n    /** If true `Popup` act like a modal dialog */\n    modal?: boolean;\n    /** Element which focus should be returned to */\n    returnFocus?: PopupProps['returnFocus'];\n    /** If true `Sheet` is used instead of `Popup`  */\n    isMobile?: boolean;\n}\n\nexport function PickerDialog({\n    open,\n    onClose,\n    isMobile,\n    anchor,\n    popupClassName,\n    popupStyle,\n    popupPlacement,\n    popupOffset,\n    modal,\n    returnFocus = false,\n    onRemove,\n    ...props\n}: PickerDialogProps) {\n    if (isMobile) {\n        return (\n            <Sheet\n                visible={open}\n                onClose={() => {\n                    onClose('outside-press');\n                    setTimeout(() => {\n                        onRemove?.();\n                    });\n                }}\n                contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}\n            >\n                <PickerForm\n                    {...props}\n                    size=\"xl\"\n                    onApply={() => {\n                        onClose('apply');\n                    }}\n                />\n            </Sheet>\n        );\n    }\n\n    return (\n        <Popup\n            open={open}\n            onOpenChange={(isOpen, _event, reason) => {\n                if (!isOpen) {\n                    onClose(reason);\n                }\n            }}\n            placement={popupPlacement}\n            offset={popupOffset}\n            role=\"dialog\"\n            anchorElement={anchor}\n            className={b('content', {size: props.size}, popupClassName)}\n            style={popupStyle}\n            modal={modal}\n            returnFocus={returnFocus}\n            onTransitionOutComplete={onRemove}\n        >\n            <PickerForm\n                {...props}\n                onApply={() => {\n                    onClose('apply');\n                }}\n            />\n        </Popup>\n    );\n}\n"]}

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

@@ -1,11 +1,13 @@
+import React from 'react';
 import type { Preset } from "../Presets/defaultPresets.js";
 import "./PickerDoc.css";
 interface PresetsDocProps {
     className?: string;
     size?: 's' | 'm' | 'l' | 'xl';
     docs?: Preset[];
-    onStartUpdate: (start: string) => void;
-    onEndUpdate: (end: string) => void;
+    onStartUpdate: (start: string | null) => void;
+    onEndUpdate: (end: string | null) => void;
+    onRangeUpdate: (start: string | null, end: string | null) => void;
 }
-export declare function PickerDoc({ docs, ...props }: PresetsDocProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PickerDoc({ docs, ...props }: PresetsDocProps): React.JSX.Element | null;
 export {};

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

@@ -1,5 +1,4 @@
 'use client';
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { CircleQuestion } from '@gravity-ui/icons';
@@ -36,8 +35,7 @@ const data = [
         to: 'now - 1M/M',
     },
 ];
-function DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
-    const isMobile = useMobile();
+function DocContent({ size, docs, onStartUpdate, onEndUpdate, onRangeUpdate }) {
     const { t } = i18n.useTranslation();
     const columns = React.useMemo(() => [
         {
@@ -46,7 +44,9 @@ function DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
                 return t('Range');
             },
             template: (item) => {
-                return t(item.title);
+                return (_jsx(Button, { view: "flat", size: getButtonSizeForInput(size), onClick: () => {
+                        onRangeUpdate(item.from, item.to);
+                    }, children: t(item.title) }));
             },
         },
         {
@@ -54,38 +54,39 @@ function DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
             name: () => {
                 return t('From');
             },
-            template: (item) => (_jsx(Button, { size: isMobile ? 'l' : getButtonSizeForInput(size), onClick: () => onStartUpdate(item.from), children: item.from })),
+            template: (item) => (_jsx(Button, { view: "flat", size: getButtonSizeForInput(size), onClick: () => {
+                    onStartUpdate(item.from);
+                }, children: item.from })),
         },
         {
             id: 'to',
             name: () => {
                 return t('To');
             },
-            template: (item) => (_jsx(Button, { size: isMobile ? 'l' : getButtonSizeForInput(size), onClick: () => onEndUpdate(item.to), children: item.to })),
+            template: (item) => (_jsx(Button, { view: "flat", size: getButtonSizeForInput(size), onClick: () => {
+                    onEndUpdate(item.to);
+                }, children: item.to })),
         },
-    ], [isMobile, onEndUpdate, onStartUpdate, size, t]);
+    ], [onEndUpdate, onRangeUpdate, onStartUpdate, size, t]);
     return _jsx(Table, { columns: columns, data: docs, className: b('table', { size }), wordWrap: true });
 }
-function DesktopDoc(_a) {
-    var { className, size } = _a, props = __rest(_a, ["className", "size"]);
-    return (_jsx(Popover, { className: b(null), hasArrow: false, placement: ['right-start', 'left-start'], content: _jsx(DocContent, Object.assign({ size: size }, props)), children: _jsx(Button, { className: b('button', className), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
+function DesktopDoc({ className, size, ...props }) {
+    return (_jsx(Popover, { className: b(), hasArrow: false, placement: ['right-start', 'left-start'], content: _jsx(DocContent, { size: size, ...props }), children: _jsx(Button, { className: b('button', className), view: "flat-secondary", size: getButtonSizeForInput(size), children: _jsx(Icon, { data: CircleQuestion }) }) }));
 }
-function MobileDoc(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
+function MobileDoc({ className, ...props }) {
     const [open, setOpen] = React.useState(false);
     return (_jsxs("div", { className: b(null, className), children: [_jsx(Button, { className: b('button'), view: "flat-secondary", size: "l", onClick: () => {
                     setOpen(true);
-                }, children: _jsx(Icon, { data: CircleQuestion }) }), _jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: _jsx(DocContent, Object.assign({}, props)) })] }));
+                }, children: _jsx(Icon, { data: CircleQuestion }) }), _jsx(Sheet, { visible: open, onClose: () => setOpen(false), children: _jsx(DocContent, { ...props }) })] }));
 }
-export function PickerDoc(_a) {
-    var { docs = data } = _a, props = __rest(_a, ["docs"]);
+export function PickerDoc({ docs = data, ...props }) {
     const isMobile = useMobile();
     if (!Array.isArray(docs) || docs.length === 0) {
         return null;
     }
     if (isMobile) {
-        return _jsx(MobileDoc, Object.assign({}, props, { docs: docs }));
+        return _jsx(MobileDoc, { ...props, docs: docs });
     }
-    return _jsx(DesktopDoc, Object.assign({}, props, { docs: docs }));
+    return _jsx(DesktopDoc, { ...props, docs: docs });
 }
 //# sourceMappingURL=PickerDoc.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAGjF,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,qBAAqB,EAAC,gDAA6C;AAE3E,OAAO,EAAC,IAAI,EAAC,iCAAwB;AAErC,yBAA0B;AAE1B,MAAM,CAAC,GAAG,KAAK,CAAC,gCAAgC,CAAC,CAAC;AAElD,MAAM,IAAI,GAAoB;IAC1B;QACI,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,KAAK;KACZ;IACD;QACI,KAAK,EAAE,mBAAmB;QAC1B,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,OAAO;KACd;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,YAAY;QAClB,EAAE,EAAE,YAAY;KACnB;CACJ,CAAC;AAMF,SAAS,UAAU,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAkB;IACzE,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,MAAM,EAAC,CAAC,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAClC,MAAM,OAAO,GAAgC,KAAK,CAAC,OAAO,CACtD,GAAG,EAAE,CAAC;QACF;YACI,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;YACtB,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,OAAO,CAAC,CAAC,IAAI,CAAC,KAAY,CAAC,CAAC;YAChC,CAAC;SACJ;QACD;YACI,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;YACrB,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,KAAC,MAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAEtC,IAAI,CAAC,IAAI,GACL,CACZ;SACJ;QACD;YACI,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,KAAC,MAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,YAElC,IAAI,CAAC,EAAE,GACH,CACZ;SACJ;KACJ,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,CAAC,CAClD,CAAC;IAEF,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAC,CAAC,EAAE,QAAQ,SAAG,CAAC;AAC3F,CAAC;AAMD,SAAS,UAAU,CAAC,EAA4C;QAA5C,EAAC,SAAS,EAAE,IAAI,OAA4B,EAAvB,KAAK,cAA1B,qBAA2B,CAAD;IAC1C,OAAO,CACH,KAAC,OAAO,IACJ,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAClB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,EACxC,OAAO,EAAE,KAAC,UAAU,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,YAE9C,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EACjC,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAE,qBAAqB,CAAC,IAAI,CAAC,YAEjC,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,GAAI,GACzB,GACH,CACb,CAAC;AACN,CAAC;AAMD,SAAS,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,cAApB,aAAqB,CAAD;IACnC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,KAAC,MAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC,YAED,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,GAAI,GACzB,EACT,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAC/C,KAAC,UAAU,oBAAK,KAAK,EAAI,GACrB,IACN,CACT,CAAC;AACN,CAAC;AAUD,MAAM,UAAU,SAAS,CAAC,EAAwC;QAAxC,EAAC,IAAI,GAAG,IAAI,OAA4B,EAAvB,KAAK,cAAtB,QAAuB,CAAD;IAC5C,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,KAAC,SAAS,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;IAChD,CAAC;IAED,OAAO,KAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;AACjD,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {DefaultPreset, Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: DefaultPreset[] = [\n    {\n        title: 'Last 5 minutes',\n        from: 'now - 5m',\n        to: 'now',\n    },\n    {\n        title: 'From start of day',\n        from: 'now/d',\n        to: 'now',\n    },\n    {\n        title: 'This week',\n        from: 'now/w',\n        to: 'now/w',\n    },\n    {\n        title: 'From start of week',\n        from: 'now/w',\n        to: 'now',\n    },\n    {\n        title: 'Previous month',\n        from: 'now - 1M/M',\n        to: 'now - 1M/M',\n    },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' | 'className'> {\n    docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {\n    const isMobile = useMobile();\n\n    const {t} = i18n.useTranslation();\n    const columns: TableColumnConfig<Preset>[] = React.useMemo(\n        () => [\n            {\n                id: 'title',\n                name: () => {\n                    return t('Range');\n                },\n                template: (item) => {\n                    return t(item.title as any);\n                },\n            },\n            {\n                id: 'from',\n                name: () => {\n                    return t('From');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onStartUpdate(item.from)}\n                    >\n                        {item.from}\n                    </Button>\n                ),\n            },\n            {\n                id: 'to',\n                name: () => {\n                    return t('To');\n                },\n                template: (item) => (\n                    <Button\n                        size={isMobile ? 'l' : getButtonSizeForInput(size)}\n                        onClick={() => onEndUpdate(item.to)}\n                    >\n                        {item.to}\n                    </Button>\n                ),\n            },\n        ],\n        [isMobile, onEndUpdate, onStartUpdate, size, t],\n    );\n\n    return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b(null)}\n            hasArrow={false}\n            placement={['right-start', 'left-start']}\n            content={<DocContent size={size} {...props} />}\n        >\n            <Button\n                className={b('button', className)}\n                view=\"flat-secondary\"\n                size={getButtonSizeForInput(size)}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n        </Popover>\n    );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n    const [open, setOpen] = React.useState(false);\n    return (\n        <div className={b(null, className)}>\n            <Button\n                className={b('button')}\n                view=\"flat-secondary\"\n                size=\"l\"\n                onClick={() => {\n                    setOpen(true);\n                }}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n            <Sheet visible={open} onClose={() => setOpen(false)}>\n                <DocContent {...props} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n    onStartUpdate: (start: string) => void;\n    onEndUpdate: (end: string) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n    const isMobile = useMobile();\n\n    if (!Array.isArray(docs) || docs.length === 0) {\n        return null;\n    }\n\n    if (isMobile) {\n        return <MobileDoc {...props} docs={docs} />;\n    }\n\n    return <DesktopDoc {...props} docs={docs} />;\n}\n"]}
+{"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {DefaultPreset, Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: DefaultPreset[] = [\n    {\n        title: 'Last 5 minutes',\n        from: 'now - 5m',\n        to: 'now',\n    },\n    {\n        title: 'From start of day',\n        from: 'now/d',\n        to: 'now',\n    },\n    {\n        title: 'This week',\n        from: 'now/w',\n        to: 'now/w',\n    },\n    {\n        title: 'From start of week',\n        from: 'now/w',\n        to: 'now',\n    },\n    {\n        title: 'Previous month',\n        from: 'now - 1M/M',\n        to: 'now - 1M/M',\n    },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' | 'className'> {\n    docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate, onRangeUpdate}: DocContentProps) {\n    const {t} = i18n.useTranslation();\n    const columns: TableColumnConfig<Preset>[] = React.useMemo(\n        () => [\n            {\n                id: 'title',\n                name: () => {\n                    return t('Range');\n                },\n                template: (item) => {\n                    return (\n                        <Button\n                            view=\"flat\"\n                            size={getButtonSizeForInput(size)}\n                            onClick={() => {\n                                onRangeUpdate(item.from, item.to);\n                            }}\n                        >\n                            {t(item.title as any)}\n                        </Button>\n                    );\n                },\n            },\n            {\n                id: 'from',\n                name: () => {\n                    return t('From');\n                },\n                template: (item) => (\n                    <Button\n                        view=\"flat\"\n                        size={getButtonSizeForInput(size)}\n                        onClick={() => {\n                            onStartUpdate(item.from);\n                        }}\n                    >\n                        {item.from}\n                    </Button>\n                ),\n            },\n            {\n                id: 'to',\n                name: () => {\n                    return t('To');\n                },\n                template: (item) => (\n                    <Button\n                        view=\"flat\"\n                        size={getButtonSizeForInput(size)}\n                        onClick={() => {\n                            onEndUpdate(item.to);\n                        }}\n                    >\n                        {item.to}\n                    </Button>\n                ),\n            },\n        ],\n        [onEndUpdate, onRangeUpdate, onStartUpdate, size, t],\n    );\n\n    return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n    return (\n        <Popover\n            className={b()}\n            hasArrow={false}\n            placement={['right-start', 'left-start']}\n            content={<DocContent size={size} {...props} />}\n        >\n            <Button\n                className={b('button', className)}\n                view=\"flat-secondary\"\n                size={getButtonSizeForInput(size)}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n        </Popover>\n    );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n    docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n    const [open, setOpen] = React.useState(false);\n    return (\n        <div className={b(null, className)}>\n            <Button\n                className={b('button')}\n                view=\"flat-secondary\"\n                size=\"l\"\n                onClick={() => {\n                    setOpen(true);\n                }}\n            >\n                <Icon data={CircleQuestion} />\n            </Button>\n            <Sheet visible={open} onClose={() => setOpen(false)}>\n                <DocContent {...props} />\n            </Sheet>\n        </div>\n    );\n}\n\ninterface PresetsDocProps {\n    className?: string;\n    size?: 's' | 'm' | 'l' | 'xl';\n    docs?: Preset[];\n    onStartUpdate: (start: string | null) => void;\n    onEndUpdate: (end: string | null) => void;\n    onRangeUpdate: (start: string | null, end: string | null) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n    const isMobile = useMobile();\n\n    if (!Array.isArray(docs) || docs.length === 0) {\n        return null;\n    }\n\n    if (isMobile) {\n        return <MobileDoc {...props} docs={docs} />;\n    }\n\n    return <DesktopDoc {...props} docs={docs} />;\n}\n"]}

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

@@ -1,5 +1,7 @@
+import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { TextInputSize } from '@gravity-ui/uikit';
+import type { RelativeDatePickerProps } from "../../../RelativeDatePicker/index.js";
 import type { DomProps, StyleProps } from "../../../types/index.js";
 import type { RelativeRangeDatePickerStateOptions } from "../../hooks/useRelativeRangeDatePickerState.js";
 import type { Preset } from "../Presets/defaultPresets.js";
@@ -15,6 +17,8 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     readOnly?: boolean;
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
     /** Apply changes with button */
@@ -34,4 +38,4 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
 }
 export declare function PickerForm(props: PickerFormProps & {
     onApply: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

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

@@ -1,9 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Button, Text } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
 import { RelativeDatePicker } from "../../../RelativeDatePicker/index.js";
 import { Presets } from "../Presets/Presets.js";
+import { filterPresetList } from "../Presets/utils.js";
 import { Zones } from "../Zones/Zones.js";
 import { PickerDoc } from "./PickerDoc.js";
 import { i18n } from "./i18n/index.js";
@@ -11,8 +13,19 @@ import { useRelativeRangeDatePickerDialogState } from "./useRelativeRangeDatePic
 import "./PickerForm.css";
 const b = block('relative-range-date-picker-form');
 export function PickerForm(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
     const state = useRelativeRangeDatePickerDialogState(props);
+    const docs = React.useMemo(() => props.docs
+        ? filterPresetList(props.docs, {
+            minValue: props.minValue,
+            allowNullableValues: props.allowNullableValues,
+        })
+        : props.docs, [props.allowNullableValues, props.docs, props.minValue]);
+    const toRelativeValue = (value) => {
+        if (value === null && !props.allowNullableValues) {
+            return undefined;
+        }
+        return value === null ? null : { type: 'relative', value };
+    };
     const fieldProps = {
         timeZone: state.timeZone,
         format: props.format,
@@ -22,21 +35,34 @@ export function PickerForm(props) {
         readOnly: props.readOnly,
         size: props.size,
         errorPlacement: 'inside',
+        popupPlacement: props.calendarPopupPlacement,
     };
     const { isDateUnavailable, withHeader = false } = props;
     const { t } = i18n.useTranslation();
-    return (_jsxs("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && (_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: t('Select the interval') }), _jsx(PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
-                            state.setStart({ type: 'relative', value: start });
+    return (_jsxs("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && (_jsxs("div", { className: b('header'), children: [_jsx(Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: t('Select the interval') }), _jsx(PickerDoc, { size: props.size, docs: docs, onStartUpdate: (start) => {
+                            const nextStart = toRelativeValue(start);
+                            if (nextStart !== undefined) {
+                                state.setStart(nextStart);
+                            }
                         }, onEndUpdate: (end) => {
-                            state.setEnd({ type: 'relative', value: end });
-                        } })] })), _jsxs("div", { className: b('pickers'), children: [_jsx(RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: ((_a = state.startValidation) === null || _a === void 0 ? void 0 : _a.isInvalid) ? 'invalid' : undefined, errorMessage: ((_c = (_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.join('\n')) || t('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: t('From'), value: state.start, onUpdate: state.setStart })), _jsx(RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || t('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: t('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                            const nextEnd = toRelativeValue(end);
+                            if (nextEnd !== undefined) {
+                                state.setEnd(nextEnd);
+                            }
+                        }, onRangeUpdate: (start, end) => {
+                            const nextStart = toRelativeValue(start);
+                            const nextEnd = toRelativeValue(end);
+                            if (nextStart !== undefined && nextEnd !== undefined) {
+                                state.setRange(nextStart, nextEnd);
+                            }
+                        } })] })), _jsxs("div", { className: b('pickers'), children: [_jsx(RelativeDatePicker, { ...fieldProps, isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: state.startValidation?.isInvalid ? 'invalid' : undefined, errorMessage: state.startValidation?.errors?.join('\n') || t('Value is incorrect.'), placeholderValue: props.placeholderValue?.startOf('day'), label: t('From'), value: state.start, onUpdate: state.setStart }), _jsx(RelativeDatePicker, { ...fieldProps, isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, validationState: state.endValidation?.isInvalid ? 'invalid' : undefined, errorMessage: state.endValidation?.errors?.join('\n') || t('Value is incorrect.'), placeholderValue: props.placeholderValue?.endOf('day'), label: t('To'), value: state.end, onUpdate: state.setEnd, roundUp: true })] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
                     state.applyValue();
                     props.onApply();
                 }, className: b('apply'), width: "max", children: t('Apply') })) : null, props.withPresets && !props.readOnly ? (_jsx(Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
-                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end }, props.applyPresetsImmediately);
+                    state.setRange(start === null ? null : { type: 'relative', value: start }, end === null ? null : { type: 'relative', value: end }, props.applyPresetsImmediately);
                     if (!props.withApplyButton || props.applyPresetsImmediately) {
                         props.onApply();
                     }
-                }, minValue: props.minValue, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+                }, minValue: props.minValue, allowNullableValues: props.allowNullableValues, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
 }
 //# sourceMappingURL=PickerForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n    /** The size of the element */\n    size?: TextInputSize;\n    /**\n     * Whether the values is immutable.\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n    format?: string;\n    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n    placeholderValue?: DateTime;\n    /** Apply changes with button */\n    withApplyButton?: boolean;\n    /** Show time zone selector */\n    withZonesList?: boolean;\n    /** Show relative range presets */\n    withPresets?: boolean;\n    /** Apply presets immediately */\n    applyPresetsImmediately?: boolean;\n    /** Show header with docs tooltip */\n    withHeader?: boolean;\n    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for picker, if empty array docs will be hidden */\n    docs?: Preset[];\n}\n\nexport function PickerForm(\n    props: PickerFormProps & {\n        onApply: () => void;\n    },\n) {\n    const state = useRelativeRangeDatePickerDialogState(props);\n\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n    };\n    const {isDateUnavailable, withHeader = false} = props;\n    const {t} = i18n.useTranslation();\n    return (\n        <div className={b({size: props.size}, props.className)} style={props.style}>\n            {withHeader && (\n                <div className={b('header')}>\n                    <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n                        {t('Select the interval')}\n                    </Text>\n                    <PickerDoc\n                        size={props.size}\n                        docs={props.docs}\n                        onStartUpdate={(start) => {\n                            state.setStart({type: 'relative', value: start});\n                        }}\n                        onEndUpdate={(end) => {\n                            state.setEnd({type: 'relative', value: end});\n                        }}\n                    />\n                </div>\n            )}\n\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n                    }\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.startOf('day')}\n                    label={t('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n                    }\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.endOf('day')}\n                    label={t('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {t('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            {type: 'relative', value: start},\n                            {type: 'relative', value: end},\n                            props.applyPresetsImmediately,\n                        );\n                        if (!props.withApplyButton || props.applyPresetsImmediately) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {filterPresetList} from '../Presets/utils';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n    /** The size of the element */\n    size?: TextInputSize;\n    /**\n     * Whether the values is immutable.\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n    format?: string;\n    /** Placement of calendar popups inside the range picker dialog. */\n    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];\n    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */\n    placeholderValue?: DateTime;\n    /** Apply changes with button */\n    withApplyButton?: boolean;\n    /** Show time zone selector */\n    withZonesList?: boolean;\n    /** Show relative range presets */\n    withPresets?: boolean;\n    /** Apply presets immediately */\n    applyPresetsImmediately?: boolean;\n    /** Show header with docs tooltip */\n    withHeader?: boolean;\n    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for picker, if empty array docs will be hidden */\n    docs?: Preset[];\n}\n\nexport function PickerForm(\n    props: PickerFormProps & {\n        onApply: () => void;\n    },\n) {\n    const state = useRelativeRangeDatePickerDialogState(props);\n    const docs = React.useMemo(\n        () =>\n            props.docs\n                ? filterPresetList(props.docs, {\n                      minValue: props.minValue,\n                      allowNullableValues: props.allowNullableValues,\n                  })\n                : props.docs,\n        [props.allowNullableValues, props.docs, props.minValue],\n    );\n\n    const toRelativeValue = (value: string | null) => {\n        if (value === null && !props.allowNullableValues) {\n            return undefined;\n        }\n\n        return value === null ? null : {type: 'relative' as const, value};\n    };\n\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n        popupPlacement: props.calendarPopupPlacement,\n    };\n    const {isDateUnavailable, withHeader = false} = props;\n    const {t} = i18n.useTranslation();\n    return (\n        <div className={b({size: props.size}, props.className)} style={props.style}>\n            {withHeader && (\n                <div className={b('header')}>\n                    <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n                        {t('Select the interval')}\n                    </Text>\n                    <PickerDoc\n                        size={props.size}\n                        docs={docs}\n                        onStartUpdate={(start) => {\n                            const nextStart = toRelativeValue(start);\n                            if (nextStart !== undefined) {\n                                state.setStart(nextStart);\n                            }\n                        }}\n                        onEndUpdate={(end) => {\n                            const nextEnd = toRelativeValue(end);\n                            if (nextEnd !== undefined) {\n                                state.setEnd(nextEnd);\n                            }\n                        }}\n                        onRangeUpdate={(start, end) => {\n                            const nextStart = toRelativeValue(start);\n                            const nextEnd = toRelativeValue(end);\n                            if (nextStart !== undefined && nextEnd !== undefined) {\n                                state.setRange(nextStart, nextEnd);\n                            }\n                        }}\n                    />\n                </div>\n            )}\n\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n                    }\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.startOf('day')}\n                    label={t('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n                    }\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || t('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.endOf('day')}\n                    label={t('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {t('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            start === null ? null : {type: 'relative', value: start},\n                            end === null ? null : {type: 'relative', value: end},\n                            props.applyPresetsImmediately,\n                        );\n                        if (!props.withApplyButton || props.applyPresetsImmediately) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    allowNullableValues={props.allowNullableValues}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

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

@@ -6,10 +6,10 @@ export declare function useRelativeRangeDatePickerDialogState(props: PickerFormP
     timeZone: string;
     setStart: (newValue: Value | null) => void;
     setEnd: (newValue: Value | null) => void;
-    setRange: (newStart: Value, newEnd: Value, force?: boolean) => void;
+    setRange: (newStart: Value | null, newEnd: Value | null, force?: boolean) => void;
     setTimeZone: (newTimeZone: string) => void;
     applyValue: () => void;
     isInvalid: boolean;
-    startValidation: import("../../../utils/validation/datePicker.js").ValidationResult | undefined;
-    endValidation: import("../../../utils/validation/datePicker.js").ValidationResult | undefined;
+    startValidation: import("../../../utils/validation/datePicker.js").ValidationResult;
+    endValidation: import("../../../utils/validation/datePicker.js").ValidationResult;
 };

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

@@ -3,18 +3,16 @@ import { useControlledState } from '@gravity-ui/uikit';
 import { i18n } from "../../../utils/validation/i18n/index.js";
 import { getRangeValidationResult } from "../../../utils/validation/relativeRangeDatePicker.js";
 export function useRelativeRangeDatePickerDialogState(props) {
-    var _a, _b, _c, _d;
-    const [userTimeZone, setUserTimeZone] = useControlledState(props.timeZone, (_a = props.defaultTimeZone) !== null && _a !== void 0 ? _a : 'default', props.onUpdateTimeZone);
-    const [value, setValue] = useControlledState(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, (v, tz) => {
-        var _a;
+    const [userTimeZone, setUserTimeZone] = useControlledState(props.timeZone, props.defaultTimeZone ?? 'default', props.onUpdateTimeZone);
+    const [value, setValue] = useControlledState(props.value, props.defaultValue ?? null, (v, tz) => {
         setUserTimeZone(tz);
         if (value !== v || (value && userTimeZone !== tz)) {
-            (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, v, tz);
+            props.onUpdate?.(v, tz);
         }
     });
     const { withApplyButton } = props;
-    const [start, setStart] = React.useState((_c = value === null || value === void 0 ? void 0 : value.start) !== null && _c !== void 0 ? _c : null);
-    const [end, setEnd] = React.useState((_d = value === null || value === void 0 ? void 0 : value.end) !== null && _d !== void 0 ? _d : null);
+    const [start, setStart] = React.useState(value?.start ?? null);
+    const [end, setEnd] = React.useState(value?.end ?? null);
     const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);
     const timeZone = withApplyButton ? innerTimeZone : userTimeZone;
     const allowNullableValues = props.allowNullableValues;
@@ -24,7 +22,7 @@ export function useRelativeRangeDatePickerDialogState(props) {
         }
         setStart(newValue);
         if (!withApplyButton) {
-            setValue(getRangeValue(newValue, end, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
+            setValue(getRangeValue(newValue, end, { ...props, timeZone, allowNullableValues }), timeZone);
         }
     }
     function setEndValue(newValue) {
@@ -33,7 +31,7 @@ export function useRelativeRangeDatePickerDialogState(props) {
         }
         setEnd(newValue);
         if (!withApplyButton) {
-            setValue(getRangeValue(start, newValue, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
+            setValue(getRangeValue(start, newValue, { ...props, timeZone, allowNullableValues }), timeZone);
         }
     }
     function setTimeZoneValue(newTimeZone) {
@@ -41,18 +39,22 @@ export function useRelativeRangeDatePickerDialogState(props) {
             return;
         }
         setTimeZone(newTimeZone);
-        const newStart = start ? Object.assign({}, start) : null;
-        if ((newStart === null || newStart === void 0 ? void 0 : newStart.type) === 'absolute') {
+        const newStart = start ? { ...start } : null;
+        if (newStart?.type === 'absolute') {
             newStart.value = newStart.value.timeZone(newTimeZone, true);
             setStart(newStart);
         }
-        const newEnd = end ? Object.assign({}, end) : null;
-        if ((newEnd === null || newEnd === void 0 ? void 0 : newEnd.type) === 'absolute') {
+        const newEnd = end ? { ...end } : null;
+        if (newEnd?.type === 'absolute') {
             newEnd.value = newEnd.value.timeZone(newTimeZone, true);
             setEnd(newEnd);
         }
         if (!withApplyButton) {
-            setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone: newTimeZone, allowNullableValues })), newTimeZone);
+            setValue(getRangeValue(newStart, newEnd, {
+                ...props,
+                timeZone: newTimeZone,
+                allowNullableValues,
+            }), newTimeZone);
         }
     }
     function setRange(newStart, newEnd, force) {
@@ -62,14 +64,14 @@ export function useRelativeRangeDatePickerDialogState(props) {
         setStart(newStart);
         setEnd(newEnd);
         if (!withApplyButton || force) {
-            setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
+            setValue(getRangeValue(newStart, newEnd, { ...props, timeZone, allowNullableValues }), timeZone);
         }
     }
     function applyValue() {
         if (props.readOnly) {
             return;
         }
-        setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
+        setValue(getRangeValue(start, end, { ...props, timeZone, allowNullableValues }), timeZone);
     }
     const { t } = i18n.useTranslation();
     const validation = React.useMemo(() => getRangeValidationResult(start || end ? { start, end } : null, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone, t), [
@@ -97,11 +99,10 @@ export function useRelativeRangeDatePickerDialogState(props) {
     };
 }
 function getRangeValue(start, end, options = {}) {
-    var _a;
     if (!start && !end) {
         return null;
     }
-    const { isInvalid } = getRangeValidationResult({ start, end }, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, (_a = options.timeZone) !== null && _a !== void 0 ? _a : 'default');
+    const { isInvalid } = getRangeValidationResult({ start, end }, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, options.timeZone ?? 'default');
     if (isInvalid) {
         return null;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {i18n} from '../../../utils/validation/i18n';\nimport {getRangeValidationResult} from '../../../utils/validation/relativeRangeDatePicker';\n\nimport type {PickerFormProps} from './PickerForm';\n\nexport function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {\n    const [userTimeZone, setUserTimeZone] = useControlledState(\n        props.timeZone,\n        props.defaultTimeZone ?? 'default',\n        props.onUpdateTimeZone,\n    );\n\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        (v, tz: string) => {\n            setUserTimeZone(tz);\n            if (value !== v || (value && userTimeZone !== tz)) {\n                props.onUpdate?.(v, tz);\n            }\n        },\n    );\n\n    const {withApplyButton} = props;\n\n    const [start, setStart] = React.useState<Value | null>(value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;\n    const allowNullableValues = props.allowNullableValues;\n\n    function setStartValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newValue, end, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setEnd(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(start, newValue, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        if (props.readOnly) {\n            return;\n        }\n        setTimeZone(newTimeZone);\n        const newStart = start ? {...start} : null;\n        if (newStart?.type === 'absolute') {\n            newStart.value = newStart.value.timeZone(newTimeZone, true);\n            setStart(newStart);\n        }\n        const newEnd = end ? {...end} : null;\n        if (newEnd?.type === 'absolute') {\n            newEnd.value = newEnd.value.timeZone(newTimeZone, true);\n            setEnd(newEnd);\n        }\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {\n                    ...props,\n                    timeZone: newTimeZone,\n                    allowNullableValues,\n                }),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value, newEnd: Value, force?: boolean) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton || force) {\n            setValue(\n                getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function applyValue() {\n        if (props.readOnly) {\n            return;\n        }\n        setValue(getRangeValue(start, end, {...props, timeZone, allowNullableValues}), timeZone);\n    }\n\n    const {t} = i18n.useTranslation();\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start || end ? {start, end} : null,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n                t,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n            t,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime, endPoint: 'start' | 'end') => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        {start, end},\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n"]}
+{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {i18n} from '../../../utils/validation/i18n';\nimport {getRangeValidationResult} from '../../../utils/validation/relativeRangeDatePicker';\n\nimport type {PickerFormProps} from './PickerForm';\n\nexport function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {\n    const [userTimeZone, setUserTimeZone] = useControlledState(\n        props.timeZone,\n        props.defaultTimeZone ?? 'default',\n        props.onUpdateTimeZone,\n    );\n\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        (v, tz: string) => {\n            setUserTimeZone(tz);\n            if (value !== v || (value && userTimeZone !== tz)) {\n                props.onUpdate?.(v, tz);\n            }\n        },\n    );\n\n    const {withApplyButton} = props;\n\n    const [start, setStart] = React.useState<Value | null>(value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;\n    const allowNullableValues = props.allowNullableValues;\n\n    function setStartValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newValue, end, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setEnd(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(start, newValue, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        if (props.readOnly) {\n            return;\n        }\n        setTimeZone(newTimeZone);\n        const newStart = start ? {...start} : null;\n        if (newStart?.type === 'absolute') {\n            newStart.value = newStart.value.timeZone(newTimeZone, true);\n            setStart(newStart);\n        }\n        const newEnd = end ? {...end} : null;\n        if (newEnd?.type === 'absolute') {\n            newEnd.value = newEnd.value.timeZone(newTimeZone, true);\n            setEnd(newEnd);\n        }\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {\n                    ...props,\n                    timeZone: newTimeZone,\n                    allowNullableValues,\n                }),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value | null, newEnd: Value | null, force?: boolean) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton || force) {\n            setValue(\n                getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function applyValue() {\n        if (props.readOnly) {\n            return;\n        }\n        setValue(getRangeValue(start, end, {...props, timeZone, allowNullableValues}), timeZone);\n    }\n\n    const {t} = i18n.useTranslation();\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start || end ? {start, end} : null,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n                t,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n            t,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime, endPoint: 'start' | 'end') => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        {start, end},\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n"]}

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

@@ -1,18 +1,15 @@
+import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { PresetTab } from "./utils.js";
 import "./Presets.css";
-export interface PresetProps {
+interface PresetProps {
     className?: string;
-    onChoosePreset: (start: string, end: string) => void;
+    onChoosePreset: (start: string | null, end: string | null) => void;
     withTime?: boolean;
     minValue?: DateTime;
     size?: 's' | 'm' | 'l' | 'xl';
     presetTabs?: PresetTab[];
+    allowNullableValues?: boolean;
 }
-export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
-export declare const SIZE_TO_ITEM_HEIGHT: {
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
+export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, allowNullableValues, }: PresetProps): React.JSX.Element | null;
+export {};