@gravity-ui/date-components 3.2.4 → 3.3.1

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                        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"]}
+{"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    const {t} = i18n.useTranslation();\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={t('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={t('Increase range')}\n                    >\n                        <Icon data={Plus} />\n                    </Button>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

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

@@ -103,13 +103,14 @@ function SelectionControl(_a) {
     const endInputRef = react_1.default.useRef(null);
     let id = react_1.default.useId();
     id = (_b = props.id) !== null && _b !== void 0 ? _b : id;
+    const { t } = i18n_1.i18n.useTranslation();
     return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), style: Object.assign(Object.assign({}, style), { left: startX, width: endX - startX }), children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: b('dragger', {
                     dragging: isDragging === 'dragger',
                     disabled: Boolean(isDragging && isDragging !== 'dragger'),
                 }) }, moveProps, { onClick: () => {
                     var _a;
                     (_a = draggerInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-range`, ref: draggerInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": (0, i18n_1.i18n)('Range'), "aria-labelledby": [`${id}-range`, props['aria-labelledby']]
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-range`, ref: draggerInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('Range'), "aria-labelledby": [`${id}-range`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()} - ${endValue.format()}`, value: 0, onChange: () => { } }) }) })), state.canResize ? (
             /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -119,7 +120,7 @@ function SelectionControl(_a) {
                 }) }, moveStartProps, { onClick: () => {
                     var _a;
                     (_a = startInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-start`, ref: startInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": (0, i18n_1.i18n)('Start of range'), "aria-labelledby": [`${id}-start`, props['aria-labelledby']]
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-start`, ref: startInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('Start of range'), "aria-labelledby": [`${id}-start`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${startValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null, state.canResize ? (
             /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
@@ -129,7 +130,7 @@ function SelectionControl(_a) {
                 }) }, moveEndProps, { onClick: () => {
                     var _a;
                     (_a = endInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-end`, ref: endInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": (0, i18n_1.i18n)('End of range'), "aria-labelledby": [`${id}-end`, props['aria-labelledby']]
+                }, children: (0, jsx_runtime_1.jsx)("div", { className: b('slider-input-wrapper'), children: (0, jsx_runtime_1.jsx)("input", { id: `${id}-end`, ref: endInputRef, className: b('slider-input'), type: "range", step: 1, "aria-label": t('End of range'), "aria-labelledby": [`${id}-end`, props['aria-labelledby']]
                             .filter(Boolean)
                             .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${endValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SelectionControl.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":";;AAuBA,4CAsMC;;;AA7ND,0DAA0B;AAE1B,0DAAkD;AAClD,gDAA2C;AAG3C,8CAAgC;AAChC,8CAAsC;AACtC,6CAA0E;AAE1E,kCAAiC;AAEjC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,8BAA8B,CAAC,CAAC;AAEhD,MAAM,mBAAmB,GAAG,EAAE,CAAC,CAAC,MAAM;AACtC,MAAM,cAAc,GAAG,IAAI,CAAC;AAC5B,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAM/B,SAAgB,gBAAgB,CAAC,EAA0D;;QAA1D,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,OAAkC,EAA7B,KAAK,sBAAlC,+BAAmC,CAAD;IAC/D,MAAM,EAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAC,GAAG,IAAA,2BAAmB,GAAE,CAAC;IAC/D,MAAM,QAAQ,GAAG,IAAA,6BAAqB,GAAE,CAAC;IAEzC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAqC,IAAI,CAAC,CAAC;IAE7F,MAAM,WAAW,GAAG,eAAK,CAAC,MAAM,CAAuB;QACnD,SAAS,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,MAAM,iBAAiB,GACnB,CAAC,mBAAmB,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEvF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,aAAa,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,EAAC,SAAS,EAAC,GAAG,IAAA,iBAAO,EAAC;QACxB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,aAAa,CAAC,SAAS,CAAC,CAAC;YACzB,KAAK,CAAC,aAAa,EAAE,CAAC;YACtB,WAAW,CAAC,OAAO,GAAG;gBAClB,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC;aACzD,CAAC;QACN,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,WAAW,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBAChC,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;gBACxE,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;gBAClE,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;YAC5C,CAAC;iBAAM,CAAC;gBACJ,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;gBACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;oBAC/B,KAAK;wBACD,KAAK,GAAG,CAAC;4BACL,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC;4BAC9B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;gBAChD,CAAC;gBACD,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;YAC3C,CAAC;QACL,CAAC;KACJ,CAAC,CAAC;IACH,MAAM,EAAC,SAAS,EAAE,cAAc,EAAC,GAAG,IAAA,iBAAO,EAAC;QACxC,WAAW,EAAE,GAAG,EAAE;YACd,aAAa,CAAC,OAAO,CAAC,CAAC;YACvB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;YACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK;oBACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;YACrF,CAAC;YACD,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;QAChD,CAAC;KACJ,CAAC,CAAC;IACH,MAAM,EAAC,SAAS,EAAE,YAAY,EAAC,GAAG,IAAA,iBAAO,EAAC;QACtC,WAAW,EAAE,GAAG,EAAE;YACd,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,KAAK,CAAC,aAAa,EAAE,CAAC;QAC1B,CAAC;QACD,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBACjB,OAAO;YACX,CAAC;YACD,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;YACpF,IAAI,CAAC,CAAC,WAAW,KAAK,UAAU,EAAE,CAAC;gBAC/B,KAAK;oBACD,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC;YACrF,CAAC;YACD,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,EAAC,iBAAiB,EAAC,CAAC,CAAC;QAC9C,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,EAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAC,GAAG,KAAK,CAAC,KAAK,CAAC;IACvD,MAAM,MAAM,GAAG,IAAA,WAAI,EACf,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAC,EACpD,EAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAC,EAC/B,UAAU,CAAC,OAAO,EAAE,CACvB,CAAC;IACF,MAAM,IAAI,GAAG,IAAA,WAAI,EACb,EAAC,KAAK,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAC,EACpD,EAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,QAAQ,CAAC,KAAK,EAAC,EAC/B,QAAQ,CAAC,OAAO,EAAE,CACrB,CAAC;IAEF,MAAM,eAAe,GAAG,eAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC7D,MAAM,aAAa,GAAG,eAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC3D,MAAM,WAAW,GAAG,eAAK,CAAC,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEzD,IAAI,EAAE,GAAG,eAAK,CAAC,KAAK,EAAE,CAAC;IACvB,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,EAAE,CAAC;IAEpB,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,kCAAM,KAAK,KAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,gBAEpF,8CACI,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE;oBACpB,QAAQ,EAAE,UAAU,KAAK,SAAS;oBAClC,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,SAAS,CAAC;iBAC5D,CAAC,IACE,SAAS,IACb,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,eAAe,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACrC,CAAC,YAED,gCAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,kCACI,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,GAAG,EAAE,eAAe,EACpB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,IAAA,WAAI,EAAC,OAAO,CAAC,qBACR,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACrD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,QAAQ,CAAC,MAAM,EAAE,EAAE,EAC/D,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,EACL,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACf,6GAA6G;YAC7G,8CACI,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE;oBAClB,QAAQ,EAAE,UAAU,KAAK,OAAO;oBAChC,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,OAAO,CAAC;iBAC1D,CAAC,IACE,cAAc,IAClB,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,aAAa,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACnC,CAAC,YAED,gCAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,kCACI,EAAE,EAAE,GAAG,EAAE,QAAQ,EACjB,GAAG,EAAE,aAAa,EAClB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,IAAA,WAAI,EAAC,gBAAgB,CAAC,qBACjB,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACrD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,UAAU,CAAC,MAAM,EAAE,EAAE,EACxC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,CACT,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YACf,6GAA6G;YAC7G,8CACI,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE;oBAChB,QAAQ,EAAE,UAAU,KAAK,KAAK;oBAC9B,QAAQ,EAAE,OAAO,CAAC,UAAU,IAAI,UAAU,KAAK,KAAK,CAAC;iBACxD,CAAC,IACE,YAAY,IAChB,OAAO,EAAE,GAAG,EAAE;;oBACV,MAAA,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACjC,CAAC,YAED,gCAAK,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC,YACrC,kCACI,EAAE,EAAE,GAAG,EAAE,MAAM,EACf,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,CAAC,gBACK,IAAA,WAAI,EAAC,cAAc,CAAC,qBACf,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC;6BACnD,MAAM,CAAC,OAAO,CAAC;6BACf,IAAI,CAAC,GAAG,CAAC,sBACG,YAAY,oBACb,GAAG,QAAQ,CAAC,MAAM,EAAE,EAAE,EACtC,KAAK,EAAE,CAAC,EACR,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GACpB,GACA,IACJ,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {useMove} from '../../../../hooks/useMove';\nimport {block} from '../../../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../../../types';\nimport type {RangeDateSelectionState} from '../../hooks/useRangeDateSelectionState';\nimport {i18n} from '../../i18n';\nimport {lerp} from '../../utils/span';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport './SelectionControl.scss';\n\nconst b = block('range-date-selection-control');\n\nconst MIN_SELECTION_WIDTH = 12; // px;\nconst MIN_DRAG_SCALE = 0.01;\nconst MAX_DRAG_SCALE = 100;\nconst DRAG_SCALE_STRENGTH = 20;\n\ninterface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {\n    state: RangeDateSelectionState;\n}\n\nexport function SelectionControl({state, style, className, ...props}: SelectionControlProps) {\n    const {start: startDate, end: endDate} = useViewportInterval();\n    const viewport = useViewportDimensions();\n\n    const [isDragging, setIsDragging] = React.useState<'dragger' | 'start' | 'end' | null>(null);\n\n    const moveDataRef = React.useRef<{isZooming: boolean}>({\n        isZooming: false,\n    });\n\n    const visualMinDuration =\n        (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n\n    const handleMoveEnd = () => {\n        state.endDragging();\n        setIsDragging(null);\n    };\n\n    const {moveProps} = useMove({\n        onMoveStart: (e) => {\n            setIsDragging('dragger');\n            state.startDragging();\n            moveDataRef.current = {\n                isZooming: state.canResize && (e.ctrlKey || e.metaKey),\n            };\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            if (moveDataRef.current.isZooming) {\n                let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);\n                scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);\n                state.scale(scale, {visualMinDuration});\n            } else {\n                let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n                if (e.pointerType === 'keyboard') {\n                    delta =\n                        delta > 0\n                            ? Math.max(delta, state.align)\n                            : Math.min(delta, -1 * state.align);\n                }\n                state.move(delta, {visualMinDuration});\n            }\n        },\n    });\n    const {moveProps: moveStartProps} = useMove({\n        onMoveStart: () => {\n            setIsDragging('start');\n            state.startDragging();\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n            if (e.pointerType === 'keyboard') {\n                delta =\n                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n            }\n            state.moveStart(delta, {visualMinDuration});\n        },\n    });\n    const {moveProps: moveEndProps} = useMove({\n        onMoveStart: () => {\n            setIsDragging('end');\n            state.startDragging();\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n            if (e.pointerType === 'keyboard') {\n                delta =\n                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n            }\n            state.moveEnd(delta, {visualMinDuration});\n        },\n    });\n\n    const {start: startValue, end: endValue} = state.value;\n    const startX = lerp(\n        {start: startDate.valueOf(), end: endDate.valueOf()},\n        {start: 0, end: viewport.width},\n        startValue.valueOf(),\n    );\n    const endX = lerp(\n        {start: startDate.valueOf(), end: endDate.valueOf()},\n        {start: 0, end: viewport.width},\n        endValue.valueOf(),\n    );\n\n    const draggerInputRef = React.useRef<HTMLInputElement>(null);\n    const startInputRef = React.useRef<HTMLInputElement>(null);\n    const endInputRef = React.useRef<HTMLInputElement>(null);\n\n    let id = React.useId();\n    id = props.id ?? id;\n\n    return (\n        <div className={b(null, className)} style={{...style, left: startX, width: endX - startX}}>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n            <div\n                className={b('dragger', {\n                    dragging: isDragging === 'dragger',\n                    disabled: Boolean(isDragging && isDragging !== 'dragger'),\n                })}\n                {...moveProps}\n                onClick={() => {\n                    draggerInputRef.current?.focus();\n                }}\n            >\n                <div className={b('slider-input-wrapper')}>\n                    <input\n                        id={`${id}-range`}\n                        ref={draggerInputRef}\n                        className={b('slider-input')}\n                        type=\"range\"\n                        step={1}\n                        aria-label={i18n('Range')}\n                        aria-labelledby={[`${id}-range`, props['aria-labelledby']]\n                            .filter(Boolean)\n                            .join(' ')}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext={`${startValue.format()} - ${endValue.format()}`}\n                        value={0}\n                        onChange={() => {}}\n                    />\n                </div>\n            </div>\n            {state.canResize ? (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n                <div\n                    className={b('start', {\n                        dragging: isDragging === 'start',\n                        disabled: Boolean(isDragging && isDragging !== 'start'),\n                    })}\n                    {...moveStartProps}\n                    onClick={() => {\n                        startInputRef.current?.focus();\n                    }}\n                >\n                    <div className={b('slider-input-wrapper')}>\n                        <input\n                            id={`${id}-start`}\n                            ref={startInputRef}\n                            className={b('slider-input')}\n                            type=\"range\"\n                            step={1}\n                            aria-label={i18n('Start of range')}\n                            aria-labelledby={[`${id}-start`, props['aria-labelledby']]\n                                .filter(Boolean)\n                                .join(' ')}\n                            aria-orientation=\"horizontal\"\n                            aria-valuetext={`${startValue.format()}`}\n                            value={0}\n                            onChange={() => {}}\n                        />\n                    </div>\n                </div>\n            ) : null}\n            {state.canResize ? (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n                <div\n                    className={b('end', {\n                        dragging: isDragging === 'end',\n                        disabled: Boolean(isDragging && isDragging !== 'end'),\n                    })}\n                    {...moveEndProps}\n                    onClick={() => {\n                        endInputRef.current?.focus();\n                    }}\n                >\n                    <div className={b('slider-input-wrapper')}>\n                        <input\n                            id={`${id}-end`}\n                            ref={endInputRef}\n                            className={b('slider-input')}\n                            type=\"range\"\n                            step={1}\n                            aria-label={i18n('End of range')}\n                            aria-labelledby={[`${id}-end`, props['aria-labelledby']]\n                                .filter(Boolean)\n                                .join(' ')}\n                            aria-orientation=\"horizontal\"\n                            aria-valuetext={`${endValue.format()}`}\n                            value={0}\n                            onChange={() => {}}\n                        />\n                    </div>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SelectionControl.js","sourceRoot":"../../../../../../src","sources":["components/RangeDateSelection/components/SelectionControl/SelectionControl.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useMove} from '../../../../hooks/useMove';\nimport {block} from '../../../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../../../types';\nimport type {RangeDateSelectionState} from '../../hooks/useRangeDateSelectionState';\nimport {i18n} from '../../i18n';\nimport {lerp} from '../../utils/span';\nimport {useViewportDimensions, useViewportInterval} from '../Ruler/Ruler';\n\nimport './SelectionControl.scss';\n\nconst b = block('range-date-selection-control');\n\nconst MIN_SELECTION_WIDTH = 12; // px;\nconst MIN_DRAG_SCALE = 0.01;\nconst MAX_DRAG_SCALE = 100;\nconst DRAG_SCALE_STRENGTH = 20;\n\ninterface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {\n    state: RangeDateSelectionState;\n}\n\nexport function SelectionControl({state, style, className, ...props}: SelectionControlProps) {\n    const {start: startDate, end: endDate} = useViewportInterval();\n    const viewport = useViewportDimensions();\n\n    const [isDragging, setIsDragging] = React.useState<'dragger' | 'start' | 'end' | null>(null);\n\n    const moveDataRef = React.useRef<{isZooming: boolean}>({\n        isZooming: false,\n    });\n\n    const visualMinDuration =\n        (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n\n    const handleMoveEnd = () => {\n        state.endDragging();\n        setIsDragging(null);\n    };\n\n    const {moveProps} = useMove({\n        onMoveStart: (e) => {\n            setIsDragging('dragger');\n            state.startDragging();\n            moveDataRef.current = {\n                isZooming: state.canResize && (e.ctrlKey || e.metaKey),\n            };\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            if (moveDataRef.current.isZooming) {\n                let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);\n                scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);\n                state.scale(scale, {visualMinDuration});\n            } else {\n                let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n                if (e.pointerType === 'keyboard') {\n                    delta =\n                        delta > 0\n                            ? Math.max(delta, state.align)\n                            : Math.min(delta, -1 * state.align);\n                }\n                state.move(delta, {visualMinDuration});\n            }\n        },\n    });\n    const {moveProps: moveStartProps} = useMove({\n        onMoveStart: () => {\n            setIsDragging('start');\n            state.startDragging();\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n            if (e.pointerType === 'keyboard') {\n                delta =\n                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n            }\n            state.moveStart(delta, {visualMinDuration});\n        },\n    });\n    const {moveProps: moveEndProps} = useMove({\n        onMoveStart: () => {\n            setIsDragging('end');\n            state.startDragging();\n        },\n        onMoveEnd: handleMoveEnd,\n        onMove: (e) => {\n            if (e.deltaX === 0) {\n                return;\n            }\n            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;\n            if (e.pointerType === 'keyboard') {\n                delta =\n                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);\n            }\n            state.moveEnd(delta, {visualMinDuration});\n        },\n    });\n\n    const {start: startValue, end: endValue} = state.value;\n    const startX = lerp(\n        {start: startDate.valueOf(), end: endDate.valueOf()},\n        {start: 0, end: viewport.width},\n        startValue.valueOf(),\n    );\n    const endX = lerp(\n        {start: startDate.valueOf(), end: endDate.valueOf()},\n        {start: 0, end: viewport.width},\n        endValue.valueOf(),\n    );\n\n    const draggerInputRef = React.useRef<HTMLInputElement>(null);\n    const startInputRef = React.useRef<HTMLInputElement>(null);\n    const endInputRef = React.useRef<HTMLInputElement>(null);\n\n    let id = React.useId();\n    id = props.id ?? id;\n\n    const {t} = i18n.useTranslation();\n\n    return (\n        <div className={b(null, className)} style={{...style, left: startX, width: endX - startX}}>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}\n            <div\n                className={b('dragger', {\n                    dragging: isDragging === 'dragger',\n                    disabled: Boolean(isDragging && isDragging !== 'dragger'),\n                })}\n                {...moveProps}\n                onClick={() => {\n                    draggerInputRef.current?.focus();\n                }}\n            >\n                <div className={b('slider-input-wrapper')}>\n                    <input\n                        id={`${id}-range`}\n                        ref={draggerInputRef}\n                        className={b('slider-input')}\n                        type=\"range\"\n                        step={1}\n                        aria-label={t('Range')}\n                        aria-labelledby={[`${id}-range`, props['aria-labelledby']]\n                            .filter(Boolean)\n                            .join(' ')}\n                        aria-orientation=\"horizontal\"\n                        aria-valuetext={`${startValue.format()} - ${endValue.format()}`}\n                        value={0}\n                        onChange={() => {}}\n                    />\n                </div>\n            </div>\n            {state.canResize ? (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n                <div\n                    className={b('start', {\n                        dragging: isDragging === 'start',\n                        disabled: Boolean(isDragging && isDragging !== 'start'),\n                    })}\n                    {...moveStartProps}\n                    onClick={() => {\n                        startInputRef.current?.focus();\n                    }}\n                >\n                    <div className={b('slider-input-wrapper')}>\n                        <input\n                            id={`${id}-start`}\n                            ref={startInputRef}\n                            className={b('slider-input')}\n                            type=\"range\"\n                            step={1}\n                            aria-label={t('Start of range')}\n                            aria-labelledby={[`${id}-start`, props['aria-labelledby']]\n                                .filter(Boolean)\n                                .join(' ')}\n                            aria-orientation=\"horizontal\"\n                            aria-valuetext={`${startValue.format()}`}\n                            value={0}\n                            onChange={() => {}}\n                        />\n                    </div>\n                </div>\n            ) : null}\n            {state.canResize ? (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */\n                <div\n                    className={b('end', {\n                        dragging: isDragging === 'end',\n                        disabled: Boolean(isDragging && isDragging !== 'end'),\n                    })}\n                    {...moveEndProps}\n                    onClick={() => {\n                        endInputRef.current?.focus();\n                    }}\n                >\n                    <div className={b('slider-input-wrapper')}>\n                        <input\n                            id={`${id}-end`}\n                            ref={endInputRef}\n                            className={b('slider-input')}\n                            type=\"range\"\n                            step={1}\n                            aria-label={t('End of range')}\n                            aria-labelledby={[`${id}-end`, props['aria-labelledby']]\n                                .filter(Boolean)\n                                .join(' ')}\n                            aria-orientation=\"horizontal\"\n                            aria-valuetext={`${endValue.format()}`}\n                            value={0}\n                            onChange={() => {}}\n                        />\n                    </div>\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

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

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (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.js

@@ -10,6 +10,7 @@ const cn_1 = require("../../utils/cn.js");
 const Calendar_1 = require("../Calendar/index.js");
 const DateField_1 = require("../DateField/index.js");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput.js");
+const filterDOMProps_1 = require("../utils/filterDOMProps.js");
 const useRelativeDateFieldProps_1 = require("./hooks/useRelativeDateFieldProps.js");
 const useRelativeDateFieldState_1 = require("./hooks/useRelativeDateFieldState.js");
 require("./RelativeDateField.css");
@@ -29,7 +30,9 @@ function RelativeDateField(props) {
         },
         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: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
+    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
+    delete DOMProps.id;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, DOMProps, { role: "group", className: b(null, props.className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { className: b('field'), ref: setAnchor, onBlur: props.onBlur, onKeyDown: (e) => {
                     var _a;
                     (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
                     if (!e.defaultPrevented &&

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

@@ -1 +1 @@
-{"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {Popup, TextInput, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {Calendar} from '../Calendar';\nimport {DateField} from '../DateField';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {\n    AccessibilityProps,\n    DomProps,\n    FocusableProps,\n    InputDOMProps,\n    KeyboardEvents,\n    PopupStyleProps,\n    StyleProps,\n    TextInputExtendProps,\n    TextInputProps,\n} from '../types';\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    const dialogClosing = React.useRef(false);\n\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocusWithin) => {\n            if (!dialogClosing.current) {\n                setOpen(isFocusWithin);\n            }\n        },\n        isDisabled: isMobile,\n    });\n\n    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                controlProps={{\n                    ...inputProps.controlProps,\n                    onClick: () => {\n                        setOpen(true);\n                    },\n                }}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && (\n                <Popup\n                    anchorElement={anchor}\n                    open={isOpen}\n                    onOpenChange={(open) => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                        dialogClosing.current = !open;\n                    }}\n                    onTransitionOutComplete={() => {\n                        setTimeout(() => {\n                            dialogClosing.current = false;\n                        });\n                    }}\n                    placement={props.popupPlacement}\n                    offset={props.popupOffset}\n                    className={props.popupClassName}\n                    style={props.popupStyle}\n                >\n                    <div className={b('popup-content')}>\n                        <Calendar {...calendarProps} />\n                        {props.hasTime ? (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField className={b('time-field')} {...timeInputProps} />\n                            </div>\n                        ) : null}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"RelativeDateField.js","sourceRoot":"../../../../src","sources":["components/RelativeDateField/RelativeDateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAgDb,8CAgGC;;;AA9ID,0DAA0B;AAE1B,6CAA8E;AAE9E,0CAAqC;AACrC,mDAAqC;AACrC,qDAAuC;AACvC,+DAAuD;AAYvD,+DAAuD;AAEvD,oFAA4E;AAC5E,oFAA4E;AAG5E,mCAAkC;AAElC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,qBAAqB,CAAC,CAAC;AAmBvC,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,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAqB,IAAI,CAAC,CAAC;IAErE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,eAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,sBAAc,EAAC;QACtC,mBAAmB,EAAE,CAAC,aAAa,EAAE,EAAE;YACnC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;gBACzB,OAAO,CAAC,aAAa,CAAC,CAAC;YAC3B,CAAC;QACL,CAAC;QACD,UAAU,EAAE,QAAQ;KACvB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACvC,OAAO,QAAQ,CAAC,EAAE,CAAC;IAEnB,OAAO,CACH,iDACQ,QAAQ,IACZ,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,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;;oBACb,MAAA,UAAU,CAAC,SAAS,2DAAG,CAAC,CAAC,CAAC;oBAC1B,IACI,CAAC,CAAC,CAAC,gBAAgB;wBACnB,CAAC,CAAC,MAAM;wBACR,CAAC,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,CAAC,EAChD,CAAC;wBACC,CAAC,CAAC,cAAc,EAAE,CAAC;wBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC;gBACL,CAAC,EACD,YAAY,kCACL,UAAU,CAAC,YAAY,KAC1B,OAAO,EAAE,GAAG,EAAE;wBACV,OAAO,CAAC,IAAI,CAAC,CAAC;oBAClB,CAAC,OAEP,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,IACF,aAAa,EAAE,MAAM,EACrB,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE;oBACnB,IAAI,CAAC,IAAI,EAAE,CAAC;wBACR,OAAO,CAAC,KAAK,CAAC,CAAC;oBACnB,CAAC;oBACD,aAAa,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC;gBAClC,CAAC,EACD,uBAAuB,EAAE,GAAG,EAAE;oBAC1B,UAAU,CAAC,GAAG,EAAE;wBACZ,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;oBAClC,CAAC,CAAC,CAAC;gBACP,CAAC,EACD,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,MAAM,EAAE,KAAK,CAAC,WAAW,EACzB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,KAAK,CAAC,UAAU,YAEvB,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    PopupStyleProps,\n    StyleProps,\n    TextInputExtendProps,\n    TextInputProps,\n} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {useRelativeDateFieldProps} from './hooks/useRelativeDateFieldProps';\nimport {useRelativeDateFieldState} from './hooks/useRelativeDateFieldState';\nimport type {RelativeDateFieldOptions} from './hooks/useRelativeDateFieldState';\n\nimport './RelativeDateField.scss';\n\nconst b = block('relative-date-field');\n\nexport interface RelativeDateFieldProps\n    extends RelativeDateFieldOptions,\n        TextInputProps,\n        TextInputExtendProps,\n        DomProps,\n        InputDOMProps,\n        StyleProps,\n        AccessibilityProps,\n        FocusableProps,\n        KeyboardEvents,\n        PopupStyleProps {\n    /**\n     * Show time field in popup\n     * @default false\n     */\n    hasTime?: boolean;\n}\nexport function RelativeDateField(props: RelativeDateFieldProps) {\n    const state = useRelativeDateFieldState(props);\n    const {inputProps, calendarProps, timeInputProps} = useRelativeDateFieldProps(state, props);\n\n    const isMobile = useMobile();\n\n    const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);\n\n    const [isOpen, setOpen] = React.useState(false);\n    const dialogClosing = React.useRef(false);\n\n    const {focusWithinProps} = useFocusWithin({\n        onFocusWithinChange: (isFocusWithin) => {\n            if (!dialogClosing.current) {\n                setOpen(isFocusWithin);\n            }\n        },\n        isDisabled: isMobile,\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return (\n        <div\n            {...DOMProps}\n            role=\"group\"\n            className={b(null, props.className)}\n            style={props.style}\n            {...focusWithinProps}\n        >\n            <TextInput\n                {...inputProps}\n                className={b('field')}\n                ref={setAnchor}\n                onBlur={props.onBlur}\n                onKeyDown={(e) => {\n                    inputProps.onKeyDown?.(e);\n                    if (\n                        !e.defaultPrevented &&\n                        e.altKey &&\n                        (e.key === 'ArrowDown' || e.key === 'ArrowUp')\n                    ) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        setOpen(true);\n                    }\n                }}\n                controlProps={{\n                    ...inputProps.controlProps,\n                    onClick: () => {\n                        setOpen(true);\n                    },\n                }}\n            />\n            <HiddenInput\n                name={props.name}\n                value={state.value}\n                onReset={(value) => {\n                    state.setValue(value);\n                }}\n                disabled={state.disabled}\n                form={props.form}\n            />\n            {!isMobile && (\n                <Popup\n                    anchorElement={anchor}\n                    open={isOpen}\n                    onOpenChange={(open) => {\n                        if (!open) {\n                            setOpen(false);\n                        }\n                        dialogClosing.current = !open;\n                    }}\n                    onTransitionOutComplete={() => {\n                        setTimeout(() => {\n                            dialogClosing.current = false;\n                        });\n                    }}\n                    placement={props.popupPlacement}\n                    offset={props.popupOffset}\n                    className={props.popupClassName}\n                    style={props.popupStyle}\n                >\n                    <div className={b('popup-content')}>\n                        <Calendar {...calendarProps} />\n                        {props.hasTime ? (\n                            <div className={b('time-field-wrapper')}>\n                                <DateField className={b('time-field')} {...timeInputProps} />\n                            </div>\n                        ) : null}\n                    </div>\n                </Popup>\n            )}\n        </div>\n    );\n}\n"]}

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

@@ -7,6 +7,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField/index.js");
 const utils_1 = require("../../DatePicker/utils/index.js");
 const RelativeDateField_1 = require("../../RelativeDateField/index.js");
+const filterDOMProps_1 = require("../../utils/filterDOMProps.js");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput.js");
 const mergeProps_1 = require("../../utils/mergeProps.js");
 const i18n_1 = require("../i18n/index.js");
@@ -88,8 +89,11 @@ function useRelativeDatePickerProps(state, _a) {
     }
     const groupRef = react_1.default.useRef(null);
     const calendarModes = (0, utils_1.getCalendarModes)(datePickerState.formatInfo);
+    const { t } = i18n_1.i18n.useTranslation();
+    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
+    delete DOMProps.id;
     return {
-        groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
+        groupProps: Object.assign(Object.assign(Object.assign(Object.assign({}, DOMProps), { ref: groupRef, tabIndex: -1, role: 'group' }), focusWithinProps), { onKeyDown: (e) => {
                 if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
                     e.preventDefault();
                     e.stopPropagation();
@@ -109,7 +113,7 @@ function useRelativeDatePickerProps(state, _a) {
             view: 'flat-secondary',
             style: { zIndex: 2, marginInlineEnd: 2 },
             selected: mode === 'relative',
-            'aria-label': (0, i18n_1.i18n)('Formula input mode'),
+            'aria-label': t('Formula input mode'),
             onClick: () => {
                 setMode(mode === 'relative' ? 'absolute' : 'relative');
                 if (mode === 'relative') {
@@ -127,7 +131,7 @@ function useRelativeDatePickerProps(state, _a) {
         calendarButtonProps: {
             size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size),
             disabled: state.disabled,
-            'aria-label': (0, i18n_1.i18n)('Calendar'),
+            'aria-label': t('Calendar'),
             'aria-haspopup': 'dialog',
             'aria-expanded': isOpen,
             view: 'flat-secondary',

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 {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            returnFocus: false,\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 {filterDOMProps} from '../../utils/filterDOMProps';\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    const {t} = i18n.useTranslation();\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return {\n        groupProps: {\n            ...DOMProps,\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': t('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': t('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            returnFocus: false,\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,4 +1,12 @@
 export declare const i18n: ((key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (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

@@ -8,6 +8,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn.js");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput.js");
+const filterDOMProps_1 = require("../utils/filterDOMProps.js");
 const Control_1 = require("./components/Control/Control.js");
 const PickerDialog_1 = require("./components/PickerDialog/PickerDialog.js");
 const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState.js");
@@ -33,7 +34,9 @@ function RelativeRangeDatePicker(props) {
             }
         },
     });
-    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, setOpen: setOpen, isMobile: isMobile, onClick: () => {
+    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
+    delete DOMProps.id;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, DOMProps, { 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, setOpen: setOpen, isMobile: isMobile, onClick: () => {
                     if (props.disabled) {
                         return;
                     }

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 [anchor, setAnchor] = React.useState<HTMLDivElement | null>(null);\n    const dialogClosing = React.useRef(false);\n\n    const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n    const {focusWithinProps} = useFocusWithin({\n        isDisabled: props.disabled,\n        onFocusWithin: props.onFocus,\n        onBlurWithin: props.onBlur,\n        onFocusWithinChange: (isFocusWithin) => {\n            if (\n                isFocusWithin &&\n                !dialogClosing.current &&\n                !props.renderControl &&\n                document.activeElement?.tagName !== 'BUTTON'\n            ) {\n                setOpen(true);\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                setOpen={setOpen}\n                isMobile={isMobile}\n                onClick={() => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    setOpen(true);\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                    setOpen(!open);\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={() => {\n                    setOpen(false);\n                    dialogClosing.current = true;\n                }}\n                onRemove={() => {\n                    setTimeout(() => {\n                        dialogClosing.current = false;\n                    });\n                }}\n                anchor={anchor}\n                modal\n                returnFocus\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                applyPresetsImmediately={props.applyPresetsImmediately}\n                presetTabs={props.presetTabs}\n                docs={props.docs}\n                withApplyButton={props.withApplyButton}\n                withZonesList={props.withZonesList}\n                withHeader={props.withHeader}\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';\nimport {filterDOMProps} from '../utils/filterDOMProps';\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 dialogClosing = React.useRef(false);\n\n    const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n    const {focusWithinProps} = useFocusWithin({\n        isDisabled: props.disabled,\n        onFocusWithin: props.onFocus,\n        onBlurWithin: props.onBlur,\n        onFocusWithinChange: (isFocusWithin) => {\n            if (\n                isFocusWithin &&\n                !dialogClosing.current &&\n                !props.renderControl &&\n                document.activeElement?.tagName !== 'BUTTON'\n            ) {\n                setOpen(true);\n            }\n        },\n    });\n\n    const DOMProps = filterDOMProps(props);\n    delete DOMProps.id;\n\n    return (\n        <div\n            {...DOMProps}\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                setOpen={setOpen}\n                isMobile={isMobile}\n                onClick={() => {\n                    if (props.disabled) {\n                        return;\n                    }\n                    setOpen(true);\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                    setOpen(!open);\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={() => {\n                    setOpen(false);\n                    dialogClosing.current = true;\n                }}\n                onRemove={() => {\n                    setTimeout(() => {\n                        dialogClosing.current = false;\n                    });\n                }}\n                anchor={anchor}\n                modal\n                returnFocus\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                applyPresetsImmediately={props.applyPresetsImmediately}\n                presetTabs={props.presetTabs}\n                docs={props.docs}\n                withApplyButton={props.withApplyButton}\n                withZonesList={props.withZonesList}\n                withHeader={props.withHeader}\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

@@ -9,13 +9,17 @@ const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
 const getButtonSizeForInput_1 = require("../../../utils/getButtonSizeForInput.js");
 const utils_1 = require("../../utils.js");
-const i18n_1 = require("./i18n/index.js");
+const i18n_1 = require("../Presets/i18n/index.js");
+const i18n_2 = require("./i18n/index.js");
 require("./Control.css");
 const b = (0, cn_1.block)('relative-range-date-picker-control');
 exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate, }, ref) => {
     var _a;
     const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
     const format = props.format || 'L';
+    const { t } = i18n_2.i18n.useTranslation();
+    const { t: presetsTranslations } = i18n_1.i18n.useTranslation();
+    const { lang } = (0, uikit_1.useLang)();
     const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
         ? getRangeTitle(state.value, state.timeZone)
         : (0, utils_1.getDefaultTitle)({
@@ -24,7 +28,18 @@ exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isM
             alwaysShowAsAbsolute,
             format,
             presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
-        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
+            presetsTranslations,
+            lang,
+        }), [
+        alwaysShowAsAbsolute,
+        format,
+        getRangeTitle,
+        lang,
+        presetTabs,
+        presetsTranslations,
+        state.timeZone,
+        state.value,
+    ]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
     const triggerProps = {
@@ -50,7 +65,7 @@ exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isM
         open,
         setOpen,
         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, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": (0, i18n_1.i18n)('Range date picker'), onClick: onClickCalendar, tabIndex: -1, 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": t('Range date picker'), onClick: onClickCalendar, tabIndex: -1, 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    setOpen: (open: boolean) => void;\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        {\n            props,\n            state,\n            open,\n            setOpen,\n            isMobile,\n            onClick,\n            onKeyDown,\n            onFocus,\n            onClickCalendar,\n            onUpdate,\n        },\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                setOpen,\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                            tabIndex={-1}\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, useLang} 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';\nimport {i18n as i18nPresets} from '../Presets/i18n';\n\nimport {i18n} from './i18n';\n\nimport './Control.scss';\n\nexport type ControlProps = {\n    props: RelativeRangeDatePickerProps;\n    state: RelativeRangeDatePickerState;\n    open: boolean;\n    setOpen: (open: boolean) => void;\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        {\n            props,\n            state,\n            open,\n            setOpen,\n            isMobile,\n            onClick,\n            onKeyDown,\n            onFocus,\n            onClickCalendar,\n            onUpdate,\n        },\n        ref,\n    ) => {\n        const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;\n        const format = props.format || 'L';\n\n        const {t} = i18n.useTranslation();\n        const {t: presetsTranslations} = i18nPresets.useTranslation();\n        const {lang} = useLang();\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                          presetsTranslations,\n                          lang,\n                      }),\n            [\n                alwaysShowAsAbsolute,\n                format,\n                getRangeTitle,\n                lang,\n                presetTabs,\n                presetsTranslations,\n                state.timeZone,\n                state.value,\n            ],\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                setOpen,\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={t('Range date picker')}\n                            onClick={onClickCalendar}\n                            tabIndex={-1}\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,4 +1,12 @@
 export declare const i18n: ((key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (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>;
     };