@gravity-ui/date-components 2.12.0 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.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 {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n    extends RangeDateSelectionOptions,\n        DomProps,\n        StyleProps,\n        AccessibilityProps {\n    /** Formats time ticks */\n    formatTime?: (time: DateTime) => string;\n    /** Displays now line */\n    displayNow?: boolean;\n    /** Enables dragging ruler */\n    draggableRuler?: boolean;\n    /** Displays buttons to scale selection */\n    hasScaleButtons?: boolean;\n    /** Position of scale buttons */\n    scaleButtonsPosition?: 'start' | 'end';\n    /** Renders additional svg content in the ruler */\n    renderAdditionalRulerContent?: (props: {\n        interval: ViewportInterval;\n        dimensions: ViewportDimensions;\n    }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n    const state = useRangeDateSelectionState(props);\n\n    const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n    const handleRulerMoveStart = () => {\n        state.setDraggingValue(state.value);\n        setDraggingRuler(true);\n    };\n    const handleRulerMove = (d: number) => {\n        const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n        const delta = -Math.floor((d * intervalWidth) / 100);\n        state.move(delta);\n    };\n    const handleRulerMoveEnd = () => {\n        setDraggingRuler(false);\n        state.endDragging();\n    };\n\n    let id = React.useId();\n    id = props.id ?? id;\n\n    return (\n        <div\n            {...filterDOMProps(props, {labelable: true})}\n            id={id}\n            className={b(null, props.className)}\n            style={props.style}\n            dir=\"ltr\" // TODO: RTL support\n        >\n            <DateTimeRuler\n                className={b('ruler', {dragging: isDraggingRuler})}\n                {...state.viewportInterval}\n                onMoveStart={handleRulerMoveStart}\n                onMove={props.draggableRuler ? handleRulerMove : undefined}\n                onMoveEnd={handleRulerMoveEnd}\n                dragDisabled={state.isDragging}\n                displayNow={props.displayNow}\n                minValue={props.minValue}\n                maxValue={props.maxValue}\n                formatTime={props.formatTime}\n                timeZone={state.timeZone}\n                renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n            >\n                <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n            </DateTimeRuler>\n            {props.hasScaleButtons ? (\n                <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(0.5);\n                            state.endDragging();\n                        }}\n                        extraProps={{'aria-label': i18n('Decrease range')}}\n                    >\n                        <Icon data={Minus} />\n                    </Button>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(1.5);\n                            state.endDragging();\n                        }}\n                        extraProps={{'aria-label': i18n('Increase range')}}\n                    >\n                        <Icon data={Plus} />\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AA6Cb,gDA4EC;;;AAvHD,0DAA0B;AAG1B,6CAA8C;AAC9C,6CAA+C;AAE/C,0CAAqC;AAErC,+DAAuD;AAEvD,uDAAuD;AAEvD,wFAAgF;AAChF,sFAA8E;AAE9E,0CAA4B;AAE5B,oCAAmC;AAEnC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,sBAAsB,CAAC,CAAC;AAwBxC,SAAgB,kBAAkB,CAAC,KAA8B;;IAC7D,MAAM,KAAK,GAAG,IAAA,uDAA0B,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAC9B,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,CAAC,CAAS,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACpF,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC;QACrD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,IAAI,EAAE,GAAG,eAAK,CAAC,KAAK,EAAE,CAAC;IACvB,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,EAAE,CAAC;IAEpB,OAAO,CACH,iDACQ,IAAA,+BAAc,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,IAC5C,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAC,KAAK,CAAC,oBAAoB;qBAE9B,uBAAC,qBAAa,kBACV,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAE,eAAe,EAAC,CAAC,IAC9C,KAAK,CAAC,gBAAgB,IAC1B,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,KAAK,CAAC,UAAU,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,4BAA4B,EAAE,KAAK,CAAC,4BAA4B,YAEhE,uBAAC,mCAAgB,IAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,qBAAmB,EAAE,GAAI,IACtE,EACf,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CACrB,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,MAAA,KAAK,CAAC,oBAAoB,mCAAI,OAAO,EAAC,CAAC,aAC3E,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;4BACV,KAAK,CAAC,aAAa,EAAE,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACjB,KAAK,CAAC,WAAW,EAAE,CAAC;wBACxB,CAAC,gBACW,IAAA,WAAI,EAAC,gBAAgB,CAAC,YAElC,uBAAC,YAAI,IAAC,IAAI,EAAE,aAAK,GAAI,GAChB,EACT,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;4BACV,KAAK,CAAC,aAAa,EAAE,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACjB,KAAK,CAAC,WAAW,EAAE,CAAC;wBACxB,CAAC,gBACW,IAAA,WAAI,EAAC,gBAAgB,CAAC,YAElC,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAI,GAAI,GACf,IACP,CACT,CAAC,CAAC,CAAC,IAAI,KACN,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n    extends RangeDateSelectionOptions,\n        DomProps,\n        StyleProps,\n        AccessibilityProps {\n    /** Formats time ticks */\n    formatTime?: (time: DateTime) => string;\n    /** Displays now line */\n    displayNow?: boolean;\n    /** Enables dragging ruler */\n    draggableRuler?: boolean;\n    /** Displays buttons to scale selection */\n    hasScaleButtons?: boolean;\n    /** Position of scale buttons */\n    scaleButtonsPosition?: 'start' | 'end';\n    /** Renders additional svg content in the ruler */\n    renderAdditionalRulerContent?: (props: {\n        interval: ViewportInterval;\n        dimensions: ViewportDimensions;\n    }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n    const state = useRangeDateSelectionState(props);\n\n    const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n    const handleRulerMoveStart = () => {\n        state.setDraggingValue(state.value);\n        setDraggingRuler(true);\n    };\n    const handleRulerMove = (d: number) => {\n        const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n        const delta = -Math.floor((d * intervalWidth) / 100);\n        state.move(delta);\n    };\n    const handleRulerMoveEnd = () => {\n        setDraggingRuler(false);\n        state.endDragging();\n    };\n\n    let id = React.useId();\n    id = props.id ?? id;\n\n    return (\n        <div\n            {...filterDOMProps(props, {labelable: true})}\n            id={id}\n            className={b(null, props.className)}\n            style={props.style}\n            dir=\"ltr\" // TODO: RTL support\n        >\n            <DateTimeRuler\n                className={b('ruler', {dragging: isDraggingRuler})}\n                {...state.viewportInterval}\n                onMoveStart={handleRulerMoveStart}\n                onMove={props.draggableRuler ? handleRulerMove : undefined}\n                onMoveEnd={handleRulerMoveEnd}\n                dragDisabled={state.isDragging}\n                displayNow={props.displayNow}\n                minValue={props.minValue}\n                maxValue={props.maxValue}\n                formatTime={props.formatTime}\n                timeZone={state.timeZone}\n                renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n            >\n                <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n            </DateTimeRuler>\n            {props.hasScaleButtons ? (\n                <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(0.5);\n                            state.endDragging();\n                        }}\n                        aria-label={i18n('Decrease range')}\n                    >\n                        <Icon data={Minus} />\n                    </Button>\n                    <Button\n                        view=\"flat-secondary\"\n                        size=\"xs\"\n                        onClick={() => {\n                            state.startDragging();\n                            state.scale(1.5);\n                            state.endDragging();\n                        }}\n                        aria-label={i18n('Increase range')}\n                    >\n                        <Icon data={Plus} />\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-range-date-selection": Record<"Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -1,7 +1,7 @@
-import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputExtendProps, TextInputProps } from "../types/index.js";
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, PopupStyleProps, StyleProps, TextInputExtendProps, TextInputProps } from "../types/index.js";
 import type { RelativeDateFieldOptions } from "./hooks/useRelativeDateFieldState.js";
 import "./RelativeDateField.css";
-export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, InputDOMProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents {
+export interface RelativeDateFieldProps extends RelativeDateFieldOptions, TextInputProps, TextInputExtendProps, DomProps, InputDOMProps, StyleProps, AccessibilityProps, FocusableProps, KeyboardEvents, PopupStyleProps {
     /**
      * Show time field in popup
      * @default false

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

@@ -18,22 +18,30 @@ function RelativeDateField(props) {
     const state = (0, useRelativeDateFieldState_1.useRelativeDateFieldState)(props);
     const { inputProps, calendarProps, timeInputProps } = (0, useRelativeDateFieldProps_1.useRelativeDateFieldProps)(state, props);
     const isMobile = (0, uikit_1.useMobile)();
-    const anchorRef = react_1.default.useRef(null);
+    const [anchor, setAnchor] = react_1.default.useState(null);
     const [isOpen, setOpen] = react_1.default.useState(false);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        onBlurWithin: () => {
-            setOpen(false);
+        onFocusWithinChange: (isFocusWithin) => {
+            setOpen(isFocusWithin);
         },
         isDisabled: isMobile,
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { className: b('field'), ref: anchorRef, onFocus: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { className: b('field'), ref: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
                     var _a;
-                    if (!isMobile) {
+                    (_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);
                     }
-                    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
-                }, onBlur: props.onBlur })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, value: state.value, onReset: (value) => {
+                } })), (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, { anchorRef: anchorRef, open: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [(0, jsx_runtime_1.jsx)(Calendar_1.Calendar, Object.assign({}, calendarProps)), props.hasTime ? ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(DateField_1.DateField, Object.assign({ className: b('time-field') }, timeInputProps)) })) : null] }) }))] })));
+                }, disabled: state.disabled, form: props.form }), !isMobile && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchor, open: isOpen, onOpenChange: (_open, _event, reason) => {
+                    if (reason === 'escape-key') {
+                        setOpen(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] }) }))] })));
 }
 //# 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":"AAAA,YAAY,CAAC;;;AA6Cb,8CA2DC;;;AAtGD,0DAA0B;AAE1B,6CAA8E;AAE9E,0CAAqC;AACrC,mDAAqC;AACrC,qDAAuC;AACvC,+DAAuD;AAYvD,oFAA4E;AAC5E,oFAA4E;AAG5E,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,qBAAqB,CAAC,CAAC;AAkBvC,SAAgB,iBAAiB,CAAC,KAA6B;IAC3D,MAAM,KAAK,GAAG,IAAA,qDAAyB,EAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,EAAC,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GAAG,IAAA,qDAAyB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAE5F,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,MAAM,SAAS,GAAG,eAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAC;IAElD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,sBAAc,EAAC;QACtC,YAAY,EAAE,GAAG,EAAE;YACf,OAAO,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;QACD,UAAU,EAAE,QAAQ;KACvB,CAAC,CAAC;IAEH,OAAO,CACH,+CACI,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,KAAK,IACd,gBAAgB,eAEpB,uBAAC,iBAAS,oBACF,UAAU,IACd,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;oBACX,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACZ,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;oBACD,MAAA,KAAK,CAAC,OAAO,sDAAG,CAAC,CAAC,CAAC;gBACvB,CAAC,EACD,MAAM,EAAE,KAAK,CAAC,MAAM,IACtB,EACF,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,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,YACrC,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC9B,uBAAC,mBAAQ,oBAAK,aAAa,EAAI,EAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CACb,gCAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,uBAAC,qBAAS,kBAAC,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,IAAM,cAAc,EAAI,GAC3D,CACT,CAAC,CAAC,CAAC,IAAI,IACN,GACF,CACX,KACC,CACT,CAAC;AACN,CAAC","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    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 RelativeDateFieldOptions,\n        TextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        FocusableProps,\n        KeyboardEvents {\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 anchorRef = React.useRef<HTMLElement>(null);\n\n    const [isOpen, setOpen] = React.useState(false);\n\n    const {focusWithinProps} = useFocusWithin({\n        onBlurWithin: () => {\n            setOpen(false);\n        },\n        isDisabled: isMobile,\n    });\n\n    return (\n        <div\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={anchorRef}\n                onFocus={(e) => {\n                    if (!isMobile) {\n                        setOpen(true);\n                    }\n                    props.onFocus?.(e);\n                }}\n                onBlur={props.onBlur}\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 anchorRef={anchorRef} open={isOpen}>\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":"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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';\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 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\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocusWithin) => {\n            setOpen(isFocusWithin);\n        },\n        isDisabled: isMobile,\n    });\n\n    return (\n        <div\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            />\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, _event, reason) => {\n                        if (reason === 'escape-key') {\n                            setOpen(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"]}

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { CalendarProps } from "../Calendar/index.js";
-import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, StyleProps, TextInputProps } from "../types/index.js";
+import type { AccessibilityProps, DomProps, FocusableProps, InputDOMProps, KeyboardEvents, PopupStyleProps, StyleProps, TextInputProps } from "../types/index.js";
 import type { RelativeDatePickerStateOptions } from "./hooks/useRelativeDatePickerState.js";
 import "./RelativeDatePicker.css";
-export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps {
+export interface RelativeDatePickerProps extends RelativeDatePickerStateOptions, TextInputProps, FocusableProps, KeyboardEvents, DomProps, InputDOMProps, StyleProps, AccessibilityProps, PopupStyleProps {
     children?: (props: CalendarProps) => React.ReactNode;
     /** Handler that is called when the popup's open state changes. */
     onOpenChange?: (open: boolean) => void;

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

@@ -21,8 +21,8 @@ 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 anchorRef = react_1.default.useRef(null);
-    const handleRef = (0, uikit_1.useForkRef)(anchorRef, groupProps.ref);
+    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: {
@@ -33,7 +33,7 @@ function RelativeDatePicker(props) {
                     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) => {
                     state.setValue(value);
-                }, disabled: state.disabled, form: props.form }), !isMobile && !isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({}, popupProps, { anchorRef: anchorRef, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [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, 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)) }))] }) })))] })));
 }
 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    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 RelativeDatePickerStateOptions,\n        TextInputProps,\n        FocusableProps,\n        KeyboardEvents,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps {\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 anchorRef = React.useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(anchorRef, groupProps.ref);\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} anchorRef={anchorRef}>\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 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"]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
+import type { ButtonButtonProps, PopupProps, TextInputProps } from '@gravity-ui/uikit';
 import type { Calendar } from "../../Calendar/index.js";
 import type { DateFieldProps } from "../../DateField/index.js";
 import type { RelativeDatePickerProps } from "../RelativeDatePicker.js";
@@ -9,8 +9,8 @@ interface InnerRelativeDatePickerProps {
         ref: React.Ref<HTMLElement>;
     };
     fieldProps: TextInputProps;
-    modeSwitcherProps: ButtonProps;
-    calendarButtonProps: ButtonProps;
+    modeSwitcherProps: ButtonButtonProps;
+    calendarButtonProps: ButtonButtonProps;
     popupProps: PopupProps;
     calendarProps: React.ComponentProps<typeof Calendar>;
     timeInputProps: DateFieldProps;

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

@@ -109,9 +109,7 @@ function useRelativeDatePickerProps(state, _a) {
             view: 'flat-secondary',
             style: { zIndex: 2, marginInlineEnd: 2 },
             selected: mode === 'relative',
-            extraProps: {
-                'aria-label': (0, i18n_1.i18n)('Formula input mode'),
-            },
+            'aria-label': (0, i18n_1.i18n)('Formula input mode'),
             onClick: () => {
                 setMode(mode === 'relative' ? 'absolute' : 'relative');
                 if (mode === 'relative') {
@@ -129,11 +127,9 @@ function useRelativeDatePickerProps(state, _a) {
         calendarButtonProps: {
             size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
             disabled: state.disabled,
-            extraProps: {
-                'aria-label': (0, i18n_1.i18n)('Calendar'),
-                'aria-haspopup': 'dialog',
-                'aria-expanded': isOpen,
-            },
+            'aria-label': (0, i18n_1.i18n)('Calendar'),
+            'aria-haspopup': 'dialog',
+            'aria-expanded': isOpen,
             view: 'flat-secondary',
             onClick: () => {
                 state.setActive(true);
@@ -155,11 +151,15 @@ function useRelativeDatePickerProps(state, _a) {
                     setOpen(false);
                 }
             },
-            onTransitionExited: () => {
+            onTransitionOutComplete: () => {
                 setFocusedDate(mode === 'relative'
                     ? relativeDateState.lastCorrectDate
                     : datePickerState.dateFieldState.displayValue);
             },
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+            className: props.popupClassName,
+            style: props.popupStyle,
         },
         calendarProps: {
             ref: calendarRef,

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

@@ -1 +1 @@
-{"version":3,"file":"useRelativeDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useControlledState, useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {Calendar, CalendarInstance} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport {getCalendarModes} from '../../DatePicker/utils';\nimport {useRelativeDateFieldProps} from '../../RelativeDateField';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {RelativeDatePickerProps} from '../RelativeDatePicker';\nimport {i18n} from '../i18n';\n\nimport type {RelativeDatePickerState} from './useRelativeDatePickerState';\n\ninterface InnerRelativeDatePickerProps {\n    groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLElement>};\n    fieldProps: TextInputProps;\n    modeSwitcherProps: ButtonProps;\n    calendarButtonProps: ButtonProps;\n    popupProps: PopupProps;\n    calendarProps: React.ComponentProps<typeof Calendar>;\n    timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDatePickerProps(\n    state: RelativeDatePickerState,\n    {onFocus, onBlur, ...props}: RelativeDatePickerProps,\n): InnerRelativeDatePickerProps {\n    const {mode, setMode, datePickerState, relativeDateState} = state;\n\n    const [focusedDate, setFocusedDate] = React.useState(\n        mode === 'relative'\n            ? relativeDateState.lastCorrectDate\n            : datePickerState.dateFieldState.displayValue,\n    );\n\n    const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);\n    if (prevCorrectDate !== relativeDateState.lastCorrectDate) {\n        setPrevCorrectDate(relativeDateState.lastCorrectDate);\n        setFocusedDate(relativeDateState.lastCorrectDate);\n    }\n\n    const [prevDateValue, setPrevDateValue] = React.useState(\n        datePickerState.dateFieldState.displayValue,\n    );\n    if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n        setPrevDateValue(datePickerState.dateFieldState.displayValue);\n        setFocusedDate(datePickerState.dateFieldState.displayValue);\n    }\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithin: onFocus,\n        onBlurWithin: onBlur,\n        onFocusWithinChange(isFocusWithin) {\n            if (!isFocusWithin) {\n                state.setActive(false);\n            }\n        },\n    });\n\n    const [isOpen, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n    if (!state.isActive && isOpen) {\n        setOpen(false);\n    }\n\n    const commonInputProps: TextInputProps = {\n        onFocus: () => {\n            if (!state.isActive) {\n                state.setActive(true);\n                setOpen(true);\n            }\n        },\n        errorMessage: props.errorMessage,\n        errorPlacement: props.errorPlacement,\n        controlProps: {\n            onClick: () => {\n                if (state.disabled) {\n                    return;\n                }\n                if (!isOpen) {\n                    state.setActive(true);\n                    setOpen(true);\n                }\n            },\n            role: 'combobox',\n            'aria-expanded': isOpen,\n        },\n    };\n\n    const {inputProps} = useDateFieldProps(datePickerState.dateFieldState, {\n        ...props,\n        value: undefined,\n        defaultValue: undefined,\n        onUpdate: undefined,\n    });\n\n    const {inputProps: relativeDateProps} = useRelativeDateFieldProps(relativeDateState, {\n        ...props,\n        value: undefined,\n        defaultValue: undefined,\n        onUpdate: undefined,\n    });\n\n    let validationState = props.validationState;\n    if (!validationState) {\n        validationState =\n            mode === 'relative'\n                ? relativeDateState.validationState\n                : datePickerState.dateFieldState.validationState;\n    }\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const handleRef = useForkRef(\n        inputRef,\n        mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef,\n    );\n\n    const calendarRef = React.useRef<CalendarInstance>(null);\n\n    function focusCalendar() {\n        setTimeout(() => {\n            calendarRef.current?.focus();\n        });\n    }\n\n    function focusInput() {\n        setTimeout(() => {\n            inputRef.current?.focus({preventScroll: true});\n        });\n    }\n    const groupRef = React.useRef<HTMLElement>(null);\n    const calendarModes = getCalendarModes(datePickerState.formatInfo);\n\n    return {\n        groupProps: {\n            ref: groupRef,\n            tabIndex: -1,\n            role: 'group',\n            ...focusWithinProps,\n            onKeyDown: (e) => {\n                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setOpen(true);\n                    focusCalendar();\n                }\n            },\n        },\n        fieldProps: mergeProps(\n            commonInputProps,\n            mode === 'relative' ? relativeDateProps : inputProps,\n            mode === 'absolute' &&\n                datePickerState.dateFieldState.isEmpty &&\n                !state.isActive &&\n                props.placeholder\n                ? {value: ''}\n                : undefined,\n            {controlRef: handleRef, validationState},\n        ),\n        modeSwitcherProps: {\n            size: getButtonSizeForInput(props.size),\n            disabled: state.readOnly || state.disabled,\n            view: 'flat-secondary',\n            style: {zIndex: 2, marginInlineEnd: 2},\n            selected: mode === 'relative',\n            extraProps: {\n                'aria-label': i18n('Formula input mode'),\n            },\n            onClick: () => {\n                setMode(mode === 'relative' ? 'absolute' : 'relative');\n                if (mode === 'relative') {\n                    const valueDate = datePickerState.value;\n                    if (valueDate) {\n                        setFocusedDate(valueDate);\n                    }\n                } else if (relativeDateState.parsedDate) {\n                    setFocusedDate(relativeDateState.parsedDate);\n                }\n                focusInput();\n            },\n        },\n        calendarButtonProps: {\n            size: getButtonSizeForInput(props.size),\n            disabled: state.disabled,\n            extraProps: {\n                'aria-label': i18n('Calendar'),\n                'aria-haspopup': 'dialog',\n                'aria-expanded': isOpen,\n            },\n            view: 'flat-secondary',\n            onClick: () => {\n                state.setActive(true);\n                setOpen(!isOpen);\n                if (!isOpen) {\n                    focusCalendar();\n                }\n            },\n        },\n        popupProps: {\n            open: isOpen,\n            onEscapeKeyDown: () => {\n                setOpen(false);\n                focusInput();\n            },\n            onOutsideClick: (e) => {\n                if (e.target && !groupRef.current?.contains(e.target as Node)) {\n                    setOpen(false);\n                }\n            },\n            onTransitionExited: () => {\n                setFocusedDate(\n                    mode === 'relative'\n                        ? relativeDateState.lastCorrectDate\n                        : datePickerState.dateFieldState.displayValue,\n                );\n            },\n        },\n        calendarProps: {\n            ref: calendarRef,\n            size: props.size === 's' ? 'm' : props.size,\n            readOnly: props.readOnly,\n            value: state.selectedDate,\n            onUpdate: (v) => {\n                datePickerState.setDateValue(v);\n                if (!state.datePickerState.formatInfo.hasTime) {\n                    setOpen(false);\n                    focusInput();\n                }\n            },\n            focusedValue: focusedDate,\n            onFocusUpdate: setFocusedDate,\n            minValue: props.minValue,\n            maxValue: props.maxValue,\n            modes: mode === 'absolute' ? calendarModes : undefined,\n        },\n        timeInputProps: {\n            value: datePickerState.timeValue,\n            onUpdate: datePickerState.setTimeValue,\n            format: datePickerState.timeFormat,\n            readOnly: state.readOnly,\n            disabled: state.disabled,\n            timeZone: props.timeZone,\n            hasClear: props.hasClear,\n            size: props.size,\n        },\n    };\n}\n"]}
+{"version":3,"file":"useRelativeDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useControlledState, useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {Calendar, CalendarInstance} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport {getCalendarModes} from '../../DatePicker/utils';\nimport {useRelativeDateFieldProps} from '../../RelativeDateField';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {RelativeDatePickerProps} from '../RelativeDatePicker';\nimport {i18n} from '../i18n';\n\nimport type {RelativeDatePickerState} from './useRelativeDatePickerState';\n\ninterface InnerRelativeDatePickerProps {\n    groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLElement>};\n    fieldProps: TextInputProps;\n    modeSwitcherProps: ButtonButtonProps;\n    calendarButtonProps: ButtonButtonProps;\n    popupProps: PopupProps;\n    calendarProps: React.ComponentProps<typeof Calendar>;\n    timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDatePickerProps(\n    state: RelativeDatePickerState,\n    {onFocus, onBlur, ...props}: RelativeDatePickerProps,\n): InnerRelativeDatePickerProps {\n    const {mode, setMode, datePickerState, relativeDateState} = state;\n\n    const [focusedDate, setFocusedDate] = React.useState(\n        mode === 'relative'\n            ? relativeDateState.lastCorrectDate\n            : datePickerState.dateFieldState.displayValue,\n    );\n\n    const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);\n    if (prevCorrectDate !== relativeDateState.lastCorrectDate) {\n        setPrevCorrectDate(relativeDateState.lastCorrectDate);\n        setFocusedDate(relativeDateState.lastCorrectDate);\n    }\n\n    const [prevDateValue, setPrevDateValue] = React.useState(\n        datePickerState.dateFieldState.displayValue,\n    );\n    if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n        setPrevDateValue(datePickerState.dateFieldState.displayValue);\n        setFocusedDate(datePickerState.dateFieldState.displayValue);\n    }\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithin: onFocus,\n        onBlurWithin: onBlur,\n        onFocusWithinChange(isFocusWithin) {\n            if (!isFocusWithin) {\n                state.setActive(false);\n            }\n        },\n    });\n\n    const [isOpen, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n    if (!state.isActive && isOpen) {\n        setOpen(false);\n    }\n\n    const commonInputProps: TextInputProps = {\n        onFocus: () => {\n            if (!state.isActive) {\n                state.setActive(true);\n                setOpen(true);\n            }\n        },\n        errorMessage: props.errorMessage,\n        errorPlacement: props.errorPlacement,\n        controlProps: {\n            onClick: () => {\n                if (state.disabled) {\n                    return;\n                }\n                if (!isOpen) {\n                    state.setActive(true);\n                    setOpen(true);\n                }\n            },\n            role: 'combobox',\n            'aria-expanded': isOpen,\n        },\n    };\n\n    const {inputProps} = useDateFieldProps(datePickerState.dateFieldState, {\n        ...props,\n        value: undefined,\n        defaultValue: undefined,\n        onUpdate: undefined,\n    });\n\n    const {inputProps: relativeDateProps} = useRelativeDateFieldProps(relativeDateState, {\n        ...props,\n        value: undefined,\n        defaultValue: undefined,\n        onUpdate: undefined,\n    });\n\n    let validationState = props.validationState;\n    if (!validationState) {\n        validationState =\n            mode === 'relative'\n                ? relativeDateState.validationState\n                : datePickerState.dateFieldState.validationState;\n    }\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const handleRef = useForkRef(\n        inputRef,\n        mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef,\n    );\n\n    const calendarRef = React.useRef<CalendarInstance>(null);\n\n    function focusCalendar() {\n        setTimeout(() => {\n            calendarRef.current?.focus();\n        });\n    }\n\n    function focusInput() {\n        setTimeout(() => {\n            inputRef.current?.focus({preventScroll: true});\n        });\n    }\n    const groupRef = React.useRef<HTMLElement>(null);\n    const calendarModes = getCalendarModes(datePickerState.formatInfo);\n\n    return {\n        groupProps: {\n            ref: groupRef,\n            tabIndex: -1,\n            role: 'group',\n            ...focusWithinProps,\n            onKeyDown: (e) => {\n                if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setOpen(true);\n                    focusCalendar();\n                }\n            },\n        },\n        fieldProps: mergeProps(\n            commonInputProps,\n            mode === 'relative' ? relativeDateProps : inputProps,\n            mode === 'absolute' &&\n                datePickerState.dateFieldState.isEmpty &&\n                !state.isActive &&\n                props.placeholder\n                ? {value: ''}\n                : undefined,\n            {controlRef: handleRef, validationState},\n        ),\n        modeSwitcherProps: {\n            size: getButtonSizeForInput(props.size),\n            disabled: state.readOnly || state.disabled,\n            view: 'flat-secondary',\n            style: {zIndex: 2, marginInlineEnd: 2},\n            selected: mode === 'relative',\n            'aria-label': i18n('Formula input mode'),\n            onClick: () => {\n                setMode(mode === 'relative' ? 'absolute' : 'relative');\n                if (mode === 'relative') {\n                    const valueDate = datePickerState.value;\n                    if (valueDate) {\n                        setFocusedDate(valueDate);\n                    }\n                } else if (relativeDateState.parsedDate) {\n                    setFocusedDate(relativeDateState.parsedDate);\n                }\n                focusInput();\n            },\n        },\n        calendarButtonProps: {\n            size: getButtonSizeForInput(props.size),\n            disabled: state.disabled,\n            'aria-label': i18n('Calendar'),\n            'aria-haspopup': 'dialog',\n            'aria-expanded': isOpen,\n            view: 'flat-secondary',\n            onClick: () => {\n                state.setActive(true);\n                setOpen(!isOpen);\n                if (!isOpen) {\n                    focusCalendar();\n                }\n            },\n        },\n        popupProps: {\n            open: isOpen,\n            onEscapeKeyDown: () => {\n                setOpen(false);\n                focusInput();\n            },\n            onOutsideClick: (e) => {\n                if (e.target && !groupRef.current?.contains(e.target as Node)) {\n                    setOpen(false);\n                }\n            },\n            onTransitionOutComplete: () => {\n                setFocusedDate(\n                    mode === 'relative'\n                        ? relativeDateState.lastCorrectDate\n                        : datePickerState.dateFieldState.displayValue,\n                );\n            },\n            placement: props.popupPlacement,\n            offset: props.popupOffset,\n            className: props.popupClassName,\n            style: props.popupStyle,\n        },\n        calendarProps: {\n            ref: calendarRef,\n            size: props.size === 's' ? 'm' : props.size,\n            readOnly: props.readOnly,\n            value: state.selectedDate,\n            onUpdate: (v) => {\n                datePickerState.setDateValue(v);\n                if (!state.datePickerState.formatInfo.hasTime) {\n                    setOpen(false);\n                    focusInput();\n                }\n            },\n            focusedValue: focusedDate,\n            onFocusUpdate: setFocusedDate,\n            minValue: props.minValue,\n            maxValue: props.maxValue,\n            modes: mode === 'absolute' ? calendarModes : undefined,\n        },\n        timeInputProps: {\n            value: datePickerState.timeValue,\n            onUpdate: datePickerState.setTimeValue,\n            format: datePickerState.timeFormat,\n            readOnly: state.readOnly,\n            disabled: state.disabled,\n            timeZone: props.timeZone,\n            hasClear: props.hasClear,\n            size: props.size,\n        },\n    };\n}\n"]}

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

@@ -1 +1,5 @@
-export declare const i18n: (key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-relative-date-picker": Record<"Calendar" | "Formula input mode", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -16,7 +16,7 @@ const b = (0, cn_1.block)('relative-range-date-picker');
 function RelativeRangeDatePicker(props) {
     const state = (0, useRelativeRangeDatePickerState_1.useRelativeRangeDatePickerState)(props);
     const isMobile = (0, uikit_1.useMobile)();
-    const anchorRef = react_1.default.useRef(null);
+    const [anchor, setAnchor] = react_1.default.useState(null);
     const inputRef = react_1.default.useRef(null);
     const [isActive, setIsActive] = react_1.default.useState(false);
     const [open, setOpen] = (0, uikit_1.useControlledState)(undefined, false, props.onOpenChange);
@@ -36,7 +36,7 @@ function RelativeRangeDatePicker(props) {
             }
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Control_1.Control, { props: props, state: state, open: open, isMobile: isMobile, ref: inputRef, onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: setAnchor }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Control_1.Control, { props: props, state: state, open: open, isMobile: isMobile, ref: inputRef, onClick: () => {
                     if (props.disabled) {
                         return;
                     }
@@ -66,14 +66,15 @@ function RelativeRangeDatePicker(props) {
                     }
                 } }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.setValue(v.value, v.timeZone);
-                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { value: state.value, onUpdate: state.setValue, timeZone: state.timeZone, open: open, onClose: (reason) => {
                     setOpen(false);
-                }, focusInput: () => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-                    });
-                }, anchorRef: anchorRef, isMobile: isMobile, className: props.popupClassName })] })));
+                    if (reason === 'escape-key') {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                        });
+                    }
+                }, anchor: anchor, modal: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList })] })));
 }
 function getNativeValue(value) {
     if (!value) {

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeRangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {Value} from '../RelativeDatePicker';\n\nimport {Control} from './components/Control/Control';\nimport {PickerDialog} from './components/PickerDialog/PickerDialog';\nimport {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from './types';\n\nimport './RelativeRangeDatePicker.scss';\n\nconst b = block('relative-range-date-picker');\n\nexport function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {\n    const state = useRelativeRangeDatePickerState(props);\n\n    const isMobile = useMobile();\n\n    const anchorRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const [isActive, setIsActive] = React.useState(false);\n    const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n    const {focusWithinProps} = useFocusWithin({\n        isDisabled: props.disabled,\n        onFocusWithin: (e) => {\n            if (!isActive) {\n                props.onFocus?.(e);\n            }\n        },\n        onBlurWithin: (e) => {\n            if (!open) {\n                setIsActive(false);\n                props.onBlur?.(e);\n            }\n        },\n    });\n\n    return (\n        <div\n            ref={anchorRef}\n            {...focusWithinProps}\n            className={b(null, props.className)}\n            style={props.style}\n        >\n            <Control\n                props={props}\n                state={state}\n                open={open}\n                isMobile={isMobile}\n                ref={inputRef}\n                onClick={() => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    if (!open) {\n                        setIsActive(true);\n                        setOpen(true);\n                    }\n                }}\n                onKeyDown={(e) => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n                        e.preventDefault();\n                        setOpen(true);\n                    }\n                }}\n                onClickCalendar={() => {\n                    setIsActive(true);\n                    setOpen(!open);\n                }}\n                onFocus={() => {\n                    if (!isActive) {\n                        setIsActive(true);\n                        setOpen(true);\n                    }\n                }}\n                onUpdate={(v: string) => {\n                    if (!props.readOnly && !v) {\n                        state.setValue(null, 'default');\n                    }\n                }}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => v?.start?.type ?? ''}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => getNativeValue(v?.start ?? null)}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => v?.end?.type ?? ''}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => getNativeValue(v?.end ?? null)}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                onReset={(v) => {\n                    state.setValue(v.value, v.timeZone);\n                }}\n                value={{value: state.value, timeZone: state.timeZone}}\n                toStringValue={(v) => v.timeZone}\n                disabled={props.disabled}\n            />\n\n            <PickerDialog\n                state={state}\n                props={props}\n                open={open}\n                onClose={() => {\n                    setOpen(false);\n                }}\n                focusInput={() => {\n                    setTimeout(() => {\n                        inputRef.current?.focus({preventScroll: true});\n                    });\n                }}\n                anchorRef={anchorRef}\n                isMobile={isMobile}\n                className={props.popupClassName}\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":"RelativeRangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {Value} from '../RelativeDatePicker';\n\nimport {Control} from './components/Control/Control';\nimport {PickerDialog} from './components/PickerDialog/PickerDialog';\nimport {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from './types';\n\nimport './RelativeRangeDatePicker.scss';\n\nconst b = block('relative-range-date-picker');\n\nexport function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {\n    const state = useRelativeRangeDatePickerState(props);\n\n    const isMobile = useMobile();\n\n    const [anchor, setAnchor] = React.useState<HTMLDivElement | null>(null);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    const [isActive, setIsActive] = React.useState(false);\n    const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n    const {focusWithinProps} = useFocusWithin({\n        isDisabled: props.disabled,\n        onFocusWithin: (e) => {\n            if (!isActive) {\n                props.onFocus?.(e);\n            }\n        },\n        onBlurWithin: (e) => {\n            if (!open) {\n                setIsActive(false);\n                props.onBlur?.(e);\n            }\n        },\n    });\n\n    return (\n        <div\n            ref={setAnchor}\n            {...focusWithinProps}\n            className={b(null, props.className)}\n            style={props.style}\n        >\n            <Control\n                props={props}\n                state={state}\n                open={open}\n                isMobile={isMobile}\n                ref={inputRef}\n                onClick={() => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    if (!open) {\n                        setIsActive(true);\n                        setOpen(true);\n                    }\n                }}\n                onKeyDown={(e) => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {\n                        e.preventDefault();\n                        setOpen(true);\n                    }\n                }}\n                onClickCalendar={() => {\n                    setIsActive(true);\n                    setOpen(!open);\n                }}\n                onFocus={() => {\n                    if (!isActive) {\n                        setIsActive(true);\n                        setOpen(true);\n                    }\n                }}\n                onUpdate={(v: string) => {\n                    if (!props.readOnly && !v) {\n                        state.setValue(null, 'default');\n                    }\n                }}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => v?.start?.type ?? ''}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => getNativeValue(v?.start ?? null)}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => v?.end?.type ?? ''}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                value={state.value}\n                toStringValue={(v) => getNativeValue(v?.end ?? null)}\n                disabled={props.disabled}\n            />\n            <HiddenInput\n                name={props.name}\n                form={props.form}\n                onReset={(v) => {\n                    state.setValue(v.value, v.timeZone);\n                }}\n                value={{value: state.value, timeZone: state.timeZone}}\n                toStringValue={(v) => v.timeZone}\n                disabled={props.disabled}\n            />\n\n            <PickerDialog\n                value={state.value}\n                onUpdate={state.setValue}\n                timeZone={state.timeZone}\n                open={open}\n                onClose={(reason) => {\n                    setOpen(false);\n                    if (reason === 'escape-key') {\n                        setTimeout(() => {\n                            inputRef.current?.focus({preventScroll: true});\n                        });\n                    }\n                }}\n                anchor={anchor}\n                modal\n                popupClassName={props.popupClassName}\n                popupStyle={props.popupStyle}\n                popupPlacement={props.popupPlacement}\n                popupOffset={props.popupOffset}\n                isMobile={isMobile}\n                size={props.size}\n                format={props.format}\n                readOnly={props.readOnly}\n                minValue={props.minValue}\n                maxValue={props.maxValue}\n                allowNullableValues={props.allowNullableValues}\n                isDateUnavailable={props.isDateUnavailable}\n                placeholderValue={props.placeholderValue}\n                withPresets={props.withPresets}\n                presetTabs={props.presetTabs}\n                docs={props.docs}\n                withApplyButton={props.withApplyButton}\n                withZonesList={props.withZonesList}\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/RelativeRangeDatePicker/components/Control/Control.js

@@ -49,11 +49,7 @@ exports.Control = react_1.default.forwardRef(({ props, state, open, isMobile, on
         errorMessage,
         open,
         triggerProps,
-    })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
-                        'aria-haspopup': 'dialog',
-                        'aria-expanded': open,
-                        'aria-label': (0, i18n_1.i18n)('Range date picker'),
-                    }, onClick: onClickCalendar, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
+    })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": (0, i18n_1.i18n)('Range date picker'), onClick: onClickCalendar, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
                     'has-clear': Boolean(props.hasClear && state.value),
                     'has-errors': state.isInvalid && props.errorPlacement === 'inside',
                     size: props.size,

package/dist/cjs/components/RelativeRangeDatePicker/components/Control/Control.js.map

@@ -1 +1 @@
-{"version":3,"file":"Control.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Control/Control.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {Calendar as CalendarIcon} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps, RelativeRangeDatePickerTriggerProps} from '../../types';\nimport {getDefaultTitle} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './Control.scss';\n\nexport type ControlProps = {\n    props: RelativeRangeDatePickerProps;\n    state: RelativeRangeDatePickerState;\n    open: boolean;\n    isMobile?: boolean;\n    onClick: (e: React.MouseEvent<HTMLElement>) => void;\n    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n    onFocus: (e: React.FocusEvent<HTMLElement>) => void;\n    onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;\n    onUpdate: (value: string) => void;\n};\n\nconst b = block('relative-range-date-picker-control');\n\nexport const Control = React.forwardRef<HTMLInputElement, ControlProps>(\n    (\n        {props, state, open, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate},\n        ref,\n    ) => {\n        const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;\n        const format = props.format || 'L';\n\n        const text = React.useMemo(\n            () =>\n                typeof getRangeTitle === 'function'\n                    ? getRangeTitle(state.value, state.timeZone)\n                    : getDefaultTitle({\n                          value: state.value,\n                          timeZone: state.timeZone,\n                          alwaysShowAsAbsolute,\n                          format,\n                          presets: presetTabs?.flatMap(({presets}) => presets),\n                      }),\n            [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value],\n        );\n\n        const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);\n        const errorMessage = props.errorMessage ?? state.errors.join('\\n');\n\n        const triggerProps: RelativeRangeDatePickerTriggerProps = {\n            id: props.id,\n            role: 'combobox',\n            'aria-haspopup': 'dialog',\n            'aria-expanded': open,\n            'aria-label': props['aria-label'],\n            'aria-labelledby': props['aria-labelledby'],\n            'aria-describedby': props['aria-describedby'],\n            'aria-details': props['aria-details'],\n            disabled: props.disabled,\n            readOnly: props.readOnly,\n            onClick: onClickCalendar,\n            onKeyDown,\n        };\n\n        return props.renderControl ? (\n            props.renderControl({\n                ref,\n                value: state.value,\n                title: text,\n                validationState,\n                errorMessage,\n                open,\n                triggerProps,\n            })\n        ) : (\n            <React.Fragment>\n                <TextInput\n                    id={props.id}\n                    autoFocus={props.autoFocus}\n                    controlRef={ref}\n                    value={text}\n                    placeholder={props.placeholder}\n                    onUpdate={onUpdate}\n                    controlProps={{\n                        className: b('input', {mobile: isMobile}),\n                        ...triggerProps,\n                        disabled: isMobile,\n                        onClick,\n                    }}\n                    onKeyDown={onKeyDown}\n                    onFocus={onFocus}\n                    validationState={validationState}\n                    errorMessage={errorMessage}\n                    errorPlacement={props.errorPlacement}\n                    pin={props.pin}\n                    size={props.size}\n                    label={props.label}\n                    hasClear={props.hasClear}\n                    disabled={props.disabled}\n                    endContent={\n                        <Button\n                            view=\"flat-secondary\"\n                            size={getButtonSizeForInput(props.size)}\n                            disabled={props.disabled}\n                            extraProps={{\n                                'aria-haspopup': 'dialog',\n                                'aria-expanded': open,\n                                'aria-label': i18n('Range date picker'),\n                            }}\n                            onClick={onClickCalendar}\n                        >\n                            <Icon data={CalendarIcon} />\n                        </Button>\n                    }\n                />\n                {isMobile ? (\n                    <button\n                        className={b('mobile-trigger', {\n                            'has-clear': Boolean(props.hasClear && state.value),\n                            'has-errors': state.isInvalid && props.errorPlacement === 'inside',\n                            size: props.size,\n                        })}\n                        onClick={onClick}\n                    />\n                ) : null}\n            </React.Fragment>\n        );\n    },\n);\n\nControl.displayName = 'Control';\n"]}
+{"version":3,"file":"Control.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Control/Control.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {Calendar as CalendarIcon} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps, RelativeRangeDatePickerTriggerProps} from '../../types';\nimport {getDefaultTitle} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './Control.scss';\n\nexport type ControlProps = {\n    props: RelativeRangeDatePickerProps;\n    state: RelativeRangeDatePickerState;\n    open: boolean;\n    isMobile?: boolean;\n    onClick: (e: React.MouseEvent<HTMLElement>) => void;\n    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n    onFocus: (e: React.FocusEvent<HTMLElement>) => void;\n    onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;\n    onUpdate: (value: string) => void;\n};\n\nconst b = block('relative-range-date-picker-control');\n\nexport const Control = React.forwardRef<HTMLInputElement, ControlProps>(\n    (\n        {props, state, open, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate},\n        ref,\n    ) => {\n        const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;\n        const format = props.format || 'L';\n\n        const text = React.useMemo(\n            () =>\n                typeof getRangeTitle === 'function'\n                    ? getRangeTitle(state.value, state.timeZone)\n                    : getDefaultTitle({\n                          value: state.value,\n                          timeZone: state.timeZone,\n                          alwaysShowAsAbsolute,\n                          format,\n                          presets: presetTabs?.flatMap(({presets}) => presets),\n                      }),\n            [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value],\n        );\n\n        const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);\n        const errorMessage = props.errorMessage ?? state.errors.join('\\n');\n\n        const triggerProps: RelativeRangeDatePickerTriggerProps = {\n            id: props.id,\n            role: 'combobox',\n            'aria-haspopup': 'dialog',\n            'aria-expanded': open,\n            'aria-label': props['aria-label'],\n            'aria-labelledby': props['aria-labelledby'],\n            'aria-describedby': props['aria-describedby'],\n            'aria-details': props['aria-details'],\n            disabled: props.disabled,\n            readOnly: props.readOnly,\n            onClick: onClickCalendar,\n            onKeyDown,\n        };\n\n        return props.renderControl ? (\n            props.renderControl({\n                ref,\n                value: state.value,\n                title: text,\n                validationState,\n                errorMessage,\n                open,\n                triggerProps,\n            })\n        ) : (\n            <React.Fragment>\n                <TextInput\n                    id={props.id}\n                    autoFocus={props.autoFocus}\n                    controlRef={ref}\n                    value={text}\n                    placeholder={props.placeholder}\n                    onUpdate={onUpdate}\n                    controlProps={{\n                        className: b('input', {mobile: isMobile}),\n                        ...triggerProps,\n                        disabled: isMobile,\n                        onClick,\n                    }}\n                    onKeyDown={onKeyDown}\n                    onFocus={onFocus}\n                    validationState={validationState}\n                    errorMessage={errorMessage}\n                    errorPlacement={props.errorPlacement}\n                    pin={props.pin}\n                    size={props.size}\n                    label={props.label}\n                    hasClear={props.hasClear}\n                    disabled={props.disabled}\n                    endContent={\n                        <Button\n                            view=\"flat-secondary\"\n                            size={getButtonSizeForInput(props.size)}\n                            disabled={props.disabled}\n                            aria-haspopup=\"dialog\"\n                            aria-expanded={open}\n                            aria-label={i18n('Range date picker')}\n                            onClick={onClickCalendar}\n                        >\n                            <Icon data={CalendarIcon} />\n                        </Button>\n                    }\n                />\n                {isMobile ? (\n                    <button\n                        className={b('mobile-trigger', {\n                            'has-clear': Boolean(props.hasClear && state.value),\n                            'has-errors': state.isInvalid && props.errorPlacement === 'inside',\n                            size: props.size,\n                        })}\n                        onClick={onClick}\n                    />\n                ) : null}\n            </React.Fragment>\n        );\n    },\n);\n\nControl.displayName = 'Control';\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/Control/i18n/index.d.ts

@@ -1 +1,5 @@
-export declare const i18n: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: ((key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "g-date-relative-range-date-picker-control": Record<"Range date picker", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -12,26 +12,4 @@
 .g-date-relative-range-date-picker-dialog__content_size_xl:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
   width: 380px;
 }
-.g-date-relative-range-date-picker-dialog__pickers {
-  display: flex;
-  flex-direction: column;
-  gap: var(--g-spacing-2);
-}
-.g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
-  width: 40px;
-}
-.g-date-relative-range-date-picker-dialog__content_size_xl .g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
-  width: 50px;
-}
-.g-date-relative-range-date-picker-dialog__apply {
-  margin-block-start: var(--g-spacing-2);
-}
-.g-date-relative-range-date-picker-dialog__zone {
-  margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));
-  margin-inline: calc(-1 * var(--_--popup-content-padding));
-  border-block-start: 1px solid var(--g-color-line-generic);
-}
-.g-date-relative-range-date-picker-dialog__presets {
-  margin-inline: calc(-1 * var(--_--popup-content-padding));
-}
 /*# sourceMappingURL=PickerDialog.css.map */

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-dialog';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20--_--g-date-picker-presets-padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20&_mobile%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-5);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20310px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_size_xl:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20380px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-dialog';\n\n#{$block} {\n    &__content {\n        --_--popup-content-padding: var(--g-spacing-2);\n\n        --_--g-date-picker-presets-padding: var(--_--popup-content-padding);\n\n        padding: var(--_--popup-content-padding);\n\n        &_mobile {\n            --_--popup-content-padding: var(--g-spacing-5);\n        }\n\n        &:not(&_mobile) {\n            width: 310px;\n        }\n\n        &_size_xl:not(&_mobile) {\n            width: 380px;\n        }\n    }\n\n    &__pickers {\n        display: flex;\n        flex-direction: column;\n        gap: var(--g-spacing-2);\n\n        .g-text-input__label {\n            width: 40px;\n\n            #{$block}__content_size_xl & {\n                width: 50px;\n            }\n        }\n    }\n\n    &__apply {\n        margin-block-start: var(--g-spacing-2);\n    }\n\n    &__zone {\n        margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));\n        margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n        border-block-start: 1px solid var(--g-color-line-generic);\n    }\n\n    &__presets {\n        margin-inline: calc(-1 * var(--_--popup-content-padding));\n    }\n}\n"],"file":"PickerDialog.css"}
+{"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-dialog';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20--_--g-date-picker-presets-padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20&_mobile%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-5);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20310px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_size_xl:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20380px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-dialog';\n\n#{$block} {\n    &__content {\n        --_--popup-content-padding: var(--g-spacing-2);\n\n        --_--g-date-picker-presets-padding: var(--_--popup-content-padding);\n\n        padding: var(--_--popup-content-padding);\n\n        &_mobile {\n            --_--popup-content-padding: var(--g-spacing-5);\n        }\n\n        &:not(&_mobile) {\n            width: 310px;\n        }\n\n        &_size_xl:not(&_mobile) {\n            width: 380px;\n        }\n    }\n}\n"],"file":"PickerDialog.css"}