@gravity-ui/date-components 2.10.0 → 2.11.0-beta.0

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

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSlitTicksGeometry = exports.makeMiddleTicksGeometry = void 0;
+exports.Ticks = Ticks;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const cn_1 = require("../../../../utils/cn");
+const span_1 = require("../../utils/span");
+const Ruler_1 = require("../Ruler/Ruler");
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "makeMiddleTicksGeometry", { enumerable: true, get: function () { return utils_1.makeMiddleTicksGeometry; } });
+Object.defineProperty(exports, "makeSlitTicksGeometry", { enumerable: true, get: function () { return utils_1.makeSlitTicksGeometry; } });
+require("./Ticks.css");
+const b = (0, cn_1.block)('timeline-ticks');
+function Ticks({ theme, minTickWidth, maxTickWidth, hasLabels, geometry, className, labelsClassName, formatTime, timeZone, }) {
+    const viewport = (0, Ruler_1.useViewportDimensions)();
+    const interval = (0, Ruler_1.useViewportInterval)();
+    const tickTimes = react_1.default.useMemo(() => (0, utils_1.calculateTickTimes)({
+        minTickWidth,
+        maxTickWidth,
+        viewportStart: interval.start,
+        viewportEnd: interval.end,
+        viewportWidth: viewport.width,
+        timeZone,
+    }), [maxTickWidth, minTickWidth, interval, viewport.width, timeZone]);
+    const tickCoords = react_1.default.useMemo(() => {
+        const timeToXCoeff = (0, span_1.getLerpCoeff)({ start: interval.start.valueOf(), end: interval.end.valueOf() }, { start: 0, end: viewport.width });
+        return tickTimes.map((t) => 0 + Math.round((t.valueOf() - interval.start.valueOf()) * timeToXCoeff));
+    }, [tickTimes, interval, viewport.width]);
+    const ticksGeometry = react_1.default.useMemo(() => {
+        return tickCoords.map(geometry).join('');
+    }, [geometry, tickCoords]);
+    const ticksPath = (0, jsx_runtime_1.jsx)("path", { className: b({ theme }, className), d: ticksGeometry });
+    const tickLabels = react_1.default.useMemo(() => {
+        if (!hasLabels || tickCoords.length < 2) {
+            return null;
+        }
+        const result = [];
+        for (let i = 0; i < tickCoords.length; i++) {
+            const x = tickCoords[i];
+            const t = tickTimes[i];
+            const dt = (0, date_utils_1.dateTime)({ input: t, timeZone });
+            result.push((0, jsx_runtime_1.jsx)("text", { className: b('label', labelsClassName), dominantBaseline: "middle", x: x, y: "50%", filter: "url(#g-date-tt-ticklabelbg)", children: formatTime ? formatTime(dt) : (0, utils_1.formatTick)(dt) }, i));
+        }
+        return result;
+    }, [hasLabels, tickCoords, tickTimes, timeZone, labelsClassName, formatTime]);
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [ticksPath, tickLabels] }));
+}

package/dist/cjs/components/RangeDateSelection/components/Ticks/UnavialableTicks.d.ts

@@ -0,0 +1,15 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Geometry } from './utils';
+import { makeMiddleTicksGeometry, makeSlitTicksGeometry } from './utils';
+import './Ticks.css';
+interface TicksProps {
+    theme: 'normal' | 'dim';
+    tickWidth: number;
+    minValue?: DateTime;
+    maxValue?: DateTime;
+    geometry: Geometry;
+    className?: string;
+}
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export type { Geometry };
+export declare function UnavailableTicks({ theme, geometry, tickWidth, minValue, maxValue, className, }: TicksProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/RangeDateSelection/components/Ticks/UnavialableTicks.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeSlitTicksGeometry = exports.makeMiddleTicksGeometry = void 0;
+exports.UnavailableTicks = UnavailableTicks;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const Ruler_1 = require("../Ruler/Ruler");
+const utils_1 = require("./utils");
+Object.defineProperty(exports, "makeMiddleTicksGeometry", { enumerable: true, get: function () { return utils_1.makeMiddleTicksGeometry; } });
+Object.defineProperty(exports, "makeSlitTicksGeometry", { enumerable: true, get: function () { return utils_1.makeSlitTicksGeometry; } });
+require("./Ticks.css");
+const b = (0, cn_1.block)('timeline-ticks');
+function UnavailableTicks({ theme, geometry, tickWidth, minValue, maxValue, className, }) {
+    const viewport = (0, Ruler_1.useViewportDimensions)();
+    const interval = (0, Ruler_1.useViewportInterval)();
+    const endPoint = (0, utils_1.calculatePosition)(minValue, interval, viewport.width);
+    const startPoint = (0, utils_1.calculatePosition)(maxValue, interval, viewport.width);
+    const tickCoords = [];
+    if (!isNaN(endPoint) && endPoint > 0) {
+        let x = endPoint - tickWidth;
+        if (endPoint > viewport.width) {
+            x = endPoint - tickWidth * Math.floor((endPoint - viewport.width) / tickWidth);
+        }
+        tickCoords.push(x);
+        while (x > 0) {
+            x -= tickWidth;
+            tickCoords.push(x);
+        }
+    }
+    if (!isNaN(startPoint) && startPoint < viewport.width) {
+        let x = startPoint;
+        if (startPoint < 0) {
+            x = startPoint + tickWidth * Math.floor((0 - startPoint) / tickWidth) - tickWidth;
+        }
+        tickCoords.push(x);
+        while (x < viewport.width) {
+            x += tickWidth;
+            tickCoords.push(x);
+        }
+    }
+    const ticksGeometry = react_1.default.useMemo(() => {
+        return tickCoords.map(geometry).join('');
+    }, [geometry, tickCoords]);
+    const ticksPath = (0, jsx_runtime_1.jsx)("path", { className: b({ theme }, className), d: ticksGeometry });
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: ticksPath });
+}

package/dist/cjs/components/RangeDateSelection/components/Ticks/utils.d.ts

@@ -0,0 +1,24 @@
+import type { DateTime } from '@gravity-ui/date-utils/build/typings';
+import type { RangeValue } from '../../../types';
+interface CalculateTicksOptions {
+    viewportStart: DateTime;
+    viewportEnd: DateTime;
+    minTickWidth: number;
+    maxTickWidth: number;
+    viewportWidth: number;
+    timeZone?: string;
+}
+export declare function calculateTickTimes({ viewportStart, viewportEnd, minTickWidth, maxTickWidth, viewportWidth, timeZone, }: CalculateTicksOptions): number[];
+export declare function formatTick(t: DateTime): string;
+export interface Geometry {
+    (x: number): string;
+}
+interface MakeTicksOptions {
+    tickHeight: number;
+    viewportHeight: number;
+}
+export declare function makeMiddleTicksGeometry({ tickHeight, viewportHeight }: MakeTicksOptions): Geometry;
+export declare function makeSlitTicksGeometry({ tickHeight, viewportHeight }: MakeTicksOptions): Geometry;
+export declare function makeUnavailableTicksGeometry({ tickHeight, viewportHeight, }: MakeTicksOptions): Geometry;
+export declare function calculatePosition(value: DateTime | undefined, interval: RangeValue<DateTime>, width: number): number;
+export {};

package/dist/cjs/components/RangeDateSelection/components/Ticks/utils.js

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateTickTimes = calculateTickTimes;
+exports.formatTick = formatTick;
+exports.makeMiddleTicksGeometry = makeMiddleTicksGeometry;
+exports.makeSlitTicksGeometry = makeSlitTicksGeometry;
+exports.makeUnavailableTicksGeometry = makeUnavailableTicksGeometry;
+exports.calculatePosition = calculatePosition;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const constants_1 = require("../../../utils/constants");
+const span_1 = require("../../utils/span");
+const MAX_TICKS = 100000;
+function makeTickSizes(periodSize, periodName, ...multipliers) {
+    return multipliers.map((m) => ({
+        duration: m * periodSize,
+        period: periodName,
+        multiplier: m,
+    }));
+}
+const tickSizes = [
+    ...makeTickSizes(constants_1.SECOND, 'second', 1, 2, 5, 10, 15, 30),
+    ...makeTickSizes(constants_1.MINUTE, 'minute', 1, 2, 5, 10, 20, 30),
+    ...makeTickSizes(constants_1.HOUR, 'hour', 1, 2, 3, 6, 12),
+    ...makeTickSizes(constants_1.DAY, 'day', 1, 2, 3),
+    ...makeTickSizes(constants_1.WEEK, 'week', 1, 2),
+    ...makeTickSizes(constants_1.MONTH, 'month', 1, 2, 3, 6),
+    ...makeTickSizes(constants_1.YEAR, 'year', 1, 2, 5, 10, 15, 20, 30),
+];
+const TickFormat = {
+    SECONDS: 'HH:mm:ss',
+    MINUTES: 'HH:mm',
+    DATE: 'DD.MM.YY',
+    MONTH: 'MM-YYYY',
+    YEAR: 'YYYY',
+};
+function findTickSize({ minWidth, maxWidth, timelineWidth, timelineDuration }) {
+    const minDuration = (minWidth / timelineWidth) * timelineDuration;
+    const maxDuration = (maxWidth / timelineWidth) * timelineDuration;
+    const suitableSizes = [];
+    for (const size of tickSizes) {
+        if (minDuration <= size.duration) {
+            if (size.duration <= maxDuration) {
+                suitableSizes.push(size);
+            }
+            else if (!suitableSizes.length) {
+                return size;
+            }
+        }
+    }
+    if (!suitableSizes.length) {
+        return tickSizes[tickSizes.length - 1];
+    }
+    return suitableSizes[Math.floor(suitableSizes.length / 2)];
+}
+function calculateTickTimes({ viewportStart, viewportEnd, minTickWidth, maxTickWidth, viewportWidth, timeZone, }) {
+    const tickSize = findTickSize({
+        minWidth: minTickWidth,
+        maxWidth: maxTickWidth,
+        timelineDuration: viewportEnd.valueOf() - viewportStart.valueOf(),
+        timelineWidth: viewportWidth,
+    });
+    let cursor;
+    const stableDate = (0, date_utils_1.dateTimeUtc)({ input: '1977-01-01' }).timeZone(timeZone || date_utils_1.settings.getDefaultTimeZone(), true);
+    const diff = stableDate.diff(viewportStart, tickSize.period);
+    const divider = tickSize.multiplier;
+    const multiplier = Math.floor(diff / divider);
+    cursor = stableDate.subtract(multiplier * divider, tickSize.period);
+    if (viewportStart.isBefore(cursor)) {
+        cursor = cursor.subtract(divider, tickSize.period);
+    }
+    const timeDiff = stableDate.utcOffset() - cursor.utcOffset();
+    if (timeDiff !== 0 &&
+        (tickSize.period === 'hour' || tickSize.period === 'minute' || tickSize.period === 'second')) {
+        cursor = cursor.add(timeDiff, 'minutes');
+    }
+    const ticks = [];
+    let i = 0;
+    let maxTickValue = cursor.valueOf();
+    while (cursor.valueOf() < viewportEnd.valueOf()) {
+        if (i >= MAX_TICKS) {
+            throw new Error('TimeLine: too much ticks');
+        }
+        i++;
+        ticks.push(cursor.valueOf());
+        let next = cursor.add(tickSize.multiplier, tickSize.period);
+        // Get time shift when season timeZone changed
+        const timeDiff = cursor.utcOffset() - next.utcOffset();
+        if (timeDiff !== 0 &&
+            (tickSize.period === 'hour' ||
+                tickSize.period === 'minute' ||
+                tickSize.period === 'second')) {
+            // Tick should be on same local time distance. Then labels will have correct format (such as date/week/month)
+            // For example, Amsterdam timezone:
+            //
+            //  2023-10-28T22:00Z -> Summer time is 2023-10-29T00:00, displays as 29.10.2023
+            //  2023-10-29T22:00Z -> Winter time is 2023-10-29T23:00, displays as 23:00
+            //
+            //  Add 1h:
+            //  2023-10-29T23:00Z -> Winter time is 2023-10-30T00:00, displays as 30.10.2023
+            //
+            next = next.add(timeDiff, 'minutes');
+            let k = 1;
+            while (next.valueOf() <= maxTickValue) {
+                // Example of case, Amsterdam timezone:
+                //  2023-03-26T00:00Z -> Winter time is 2023-03-26T01:00, displays as 01:00
+                //  2023-03-26T01:00Z -> Summer time is 2023-03-26T03:00, displays as 03:00
+                // We shift time on -1h... And again:
+                //  2023-03-26T00:00Z -> Winter time is 2023-03-26T01:00, displays as 01:00
+                // Infinite loop
+                //
+                // Therefore we need to skip period in the past
+                next = next
+                    .add(tickSize.multiplier * k++, tickSize.period)
+                    .add(timeDiff, 'minutes');
+            }
+        }
+        cursor = next;
+        maxTickValue = Math.max(maxTickValue, cursor.valueOf());
+    }
+    return ticks;
+}
+function formatTick(t) {
+    let format;
+    if (t.valueOf() % constants_1.MINUTE === 0) {
+        if (t.hour() === 0 && t.minute() === 0) {
+            if (t.date() === 1) {
+                if (t.month() === 0) {
+                    format = TickFormat.YEAR;
+                }
+                else {
+                    format = TickFormat.MONTH;
+                }
+            }
+            else {
+                format = TickFormat.DATE;
+            }
+        }
+        else {
+            format = TickFormat.MINUTES;
+        }
+    }
+    else {
+        format = TickFormat.SECONDS;
+    }
+    return t.format(format);
+}
+function makeMiddleTicksGeometry({ tickHeight, viewportHeight }) {
+    const tickYStart = (viewportHeight - tickHeight) / 2;
+    return (x) => `M${x},${tickYStart}l0,${tickHeight}`;
+}
+function makeSlitTicksGeometry({ tickHeight, viewportHeight }) {
+    const slitHeight = viewportHeight - 2 * tickHeight;
+    return (x) => `M${x},0l0,${tickHeight}m0,${slitHeight}l0,${tickHeight}`;
+}
+function makeUnavailableTicksGeometry({ tickHeight, viewportHeight, }) {
+    const w = tickHeight;
+    const h = viewportHeight;
+    return (x) => `M${x},0l${h},${h}l${w},0l${-h},${-h}l${-w},0`;
+}
+function calculatePosition(value, interval, width) {
+    if (!value) {
+        return NaN;
+    }
+    const timeToXCoeff = (0, span_1.getLerpCoeff)({ start: interval.start.valueOf(), end: interval.end.valueOf() }, { start: 0, end: width });
+    return Math.round((value.valueOf() - interval.start.valueOf()) * timeToXCoeff);
+}

package/dist/cjs/components/RangeDateSelection/hooks/useRangeDateSelectionState.d.ts

@@ -0,0 +1,60 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeValue, ValueBase } from '../../types';
+export interface RangeDateSelectionState {
+    viewportInterval: RangeValue<DateTime>;
+    value: RangeValue<DateTime>;
+    setValue: (value: RangeValue<DateTime>) => void;
+    timeZone: string;
+    setDraggingValue: (value: RangeValue<DateTime> | null) => void;
+    canResize: boolean;
+    startDragging: () => void;
+    move: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    scale: (scale: number, options?: {
+        visualMinDuration?: number;
+        fixedPoint?: number;
+    }) => void;
+    moveStart: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    moveEnd: (delta: number, options?: {
+        visualMinDuration?: number;
+    }) => void;
+    endDragging: () => void;
+    align: number;
+    isDragging: boolean;
+}
+export interface RangeDateSelectionOptions extends ValueBase<RangeValue<DateTime>> {
+    /** The minimum allowed date that a user may select. */
+    minValue?: DateTime;
+    /** The maximum allowed date that a user may select. */
+    maxValue?: DateTime;
+    /** Minimum duration of the selection in milliseconds. Defaults to 1 second. */
+    minDuration?: number;
+    /** Maximum duration of the selection in milliseconds. Defaults to 15 years. */
+    maxDuration?: number;
+    /** Alignment of the selection in milliseconds. Defaults to 1 second. */
+    align?: number;
+    /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
+    placeholderValue?: DateTime;
+    /**
+     * Which timezone use to show values. Example: 'default', 'system', 'Europe/Amsterdam'.
+     * @default The timezone of the `value` or `defaultValue` or `placeholderValue`, 'default' otherwise.
+     */
+    timeZone?: string;
+    /**
+     * The number of selection intervals that fit into the underlying ruler.
+     *
+     * @default 4
+     */
+    numberOfIntervals?: number;
+    /**
+     * Place of the selection on the underlying ruler.
+     * Value must be between 0 and 1, where 0 is the start of the ruler and 1 is the end.
+     *
+     * @default 0.5 - center of the ruler
+     */
+    placeOnRuler?: number;
+}
+export declare function useRangeDateSelectionState(props: RangeDateSelectionOptions): RangeDateSelectionState;

package/dist/cjs/components/RangeDateSelection/hooks/useRangeDateSelectionState.js

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRangeDateSelectionState = useRangeDateSelectionState;
+const react_1 = __importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const constants_1 = require("../../utils/constants");
+const dates_1 = require("../../utils/dates");
+const useDefaultTimeZone_1 = require("../../utils/useDefaultTimeZone");
+const date_1 = require("../utils/date");
+function getViewportIntervalFromDates(start, end, numberOfIntervals = 4, placeInViewport = 0.5) {
+    const diff = end.diff(start);
+    return {
+        start: start.subtract(diff * (numberOfIntervals - 1) * placeInViewport),
+        end: end.add(diff * (numberOfIntervals - 1) * (1 - placeInViewport)),
+    };
+}
+function useRangeDateSelectionState(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const inputTimeZone = (0, useDefaultTimeZone_1.useDefaultTimeZone)(((_a = props.value) === null || _a === void 0 ? void 0 : _a.start) || ((_b = props.defaultValue) === null || _b === void 0 ? void 0 : _b.start) || props.placeholderValue);
+    const timeZone = props.timeZone || inputTimeZone;
+    const placeholderValue = (0, dates_1.createPlaceholderValue)({
+        placeholderValue: props.placeholderValue,
+        timeZone,
+    });
+    const [isDragging, setIsDragging] = react_1.default.useState(false);
+    const [currentValue, setCurrentValue] = react_1.default.useState(null);
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_c = props.defaultValue) !== null && _c !== void 0 ? _c : {
+        start: placeholderValue.startOf('day').timeZone(inputTimeZone),
+        end: placeholderValue.endOf('day').timeZone(inputTimeZone),
+    }, props.onUpdate);
+    const setInterval = (newValue) => {
+        setCurrentValue(null);
+        setValue({
+            start: (0, date_1.alignDateTime)(newValue.start, props.align).timeZone(inputTimeZone),
+            end: (0, date_1.alignDateTime)(newValue.end, props.align).timeZone(inputTimeZone),
+        });
+    };
+    const displayValue = {
+        start: value.start.timeZone(timeZone),
+        end: value.end.timeZone(timeZone),
+    };
+    const interval = isDragging ? displayValue : currentValue !== null && currentValue !== void 0 ? currentValue : displayValue;
+    const viewportInterval = getViewportIntervalFromDates(interval.start, interval.end, props.numberOfIntervals, props.placeOnRuler);
+    const minValue = ((_d = props.minValue) === null || _d === void 0 ? void 0 : _d.isAfter(viewportInterval.start))
+        ? props.minValue
+        : viewportInterval.start;
+    const maxValue = ((_e = props.maxValue) === null || _e === void 0 ? void 0 : _e.isBefore(viewportInterval.end))
+        ? props.maxValue
+        : viewportInterval.end;
+    const align = (_f = props.align) !== null && _f !== void 0 ? _f : constants_1.SECOND;
+    const minDuration = Math.max((_g = props.minDuration) !== null && _g !== void 0 ? _g : constants_1.SECOND, align);
+    const maxDuration = Math.max(Math.min((_h = props.maxDuration) !== null && _h !== void 0 ? _h : 15 * constants_1.YEAR, maxValue.diff(minValue)), minDuration);
+    const canResize = minDuration < maxDuration;
+    const draggingState = react_1.default.useRef(null);
+    const setDraggingValue = (v) => {
+        draggingState.current = v;
+        setCurrentValue(v);
+    };
+    const startDragging = () => {
+        setIsDragging(true);
+        setDraggingValue(displayValue);
+    };
+    const endDragging = () => {
+        setIsDragging(false);
+        if (draggingState.current) {
+            setInterval(draggingState.current);
+        }
+    };
+    const moveInterval = (delta) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newStart = start.add(delta, 'millisecond');
+        let newEnd = end.add(delta, 'millisecond');
+        const diff = newEnd.diff(newStart);
+        if (newStart.valueOf() < minValue.valueOf()) {
+            newStart = minValue;
+            newEnd = (0, dates_1.constrainValue)(newStart.add(diff, 'millisecond'), newStart, maxValue);
+        }
+        else if (newEnd.valueOf() > maxValue.valueOf()) {
+            newEnd = maxValue;
+            newStart = (0, dates_1.constrainValue)(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);
+        }
+        setDraggingValue({ start: newStart, end: newEnd });
+    };
+    const moveStart = (delta, { visualMinDuration = minDuration } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newStart = start.add(delta, 'millisecond');
+        const deltaMin = Math.max(visualMinDuration, minDuration);
+        const deltaMax = Math.min(maxDuration, end.diff(minValue));
+        newStart = (0, dates_1.constrainValue)(newStart, end.subtract(deltaMax, 'millisecond'), end.subtract(deltaMin, 'millisecond'));
+        setDraggingValue({ start: newStart, end });
+    };
+    const moveEnd = (delta, { visualMinDuration = minDuration } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        let newEnd = end.add(delta, 'millisecond');
+        const deltaMin = Math.max(visualMinDuration, minDuration);
+        const deltaMax = Math.min(maxDuration, maxValue.diff(start));
+        newEnd = (0, dates_1.constrainValue)(end.add(delta, 'millisecond'), start.add(deltaMin, 'millisecond'), start.add(deltaMax, 'millisecond'));
+        setDraggingValue({ start, end: newEnd });
+    };
+    const zoomInterval = (scale, { visualMinDuration = minDuration, fixedPoint = 0.5, } = {}) => {
+        if (!draggingState.current) {
+            return;
+        }
+        const { start, end } = draggingState.current;
+        const len = end.diff(start);
+        let newDiff = len * scale;
+        newDiff = align * Math.round(newDiff / align);
+        newDiff = Math.min(Math.max(newDiff, Math.max(visualMinDuration, minDuration)), maxDuration);
+        let newStart = start.subtract(fixedPoint * (newDiff - len));
+        let newEnd = newStart.add(newDiff, 'millisecond');
+        const diff = newEnd.diff(newStart);
+        if (newStart.valueOf() < minValue.valueOf()) {
+            newStart = minValue;
+            newEnd = (0, dates_1.constrainValue)(newStart.add(diff, 'millisecond'), newStart, maxValue);
+        }
+        else if (newEnd.valueOf() > maxValue.valueOf()) {
+            newEnd = maxValue;
+            newStart = (0, dates_1.constrainValue)(newEnd.subtract(diff, 'millisecond'), minValue, newEnd);
+        }
+        setDraggingValue({ start: newStart, end: newEnd });
+    };
+    return {
+        viewportInterval,
+        value: currentValue !== null && currentValue !== void 0 ? currentValue : displayValue,
+        setValue: setInterval,
+        setDraggingValue,
+        canResize,
+        startDragging,
+        move: moveInterval,
+        scale: zoomInterval,
+        moveStart,
+        moveEnd,
+        endDragging,
+        timeZone,
+        align,
+        isDragging,
+    };
+}

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

@@ -0,0 +1,7 @@
+{
+  "Range": "Range",
+  "Start of range": "Start of range",
+  "End of range": "End of range",
+  "Increase range": "Increase range",
+  "Decrease range": "Decrease range"
+}

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

@@ -0,0 +1 @@
+export declare const i18n: (key: "Range" | "Start of range" | "End of range" | "Increase range" | "Decrease range", params?: import("@gravity-ui/i18n").Params | undefined) => string;

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

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

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

@@ -0,0 +1,7 @@
+{
+  "Range": "Интервал",
+  "Start of range": "Начало интервала",
+  "End of range": "Конец интервала",
+  "Increase range": "Увеличить интервал",
+  "Decrease range": "Уменьшить интервал"
+}

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

@@ -0,0 +1,3 @@
+export * from './RangeDateSelection';
+export * from './hooks/useRangeDateSelectionState';
+export type { ViewportDimensions, ViewportInterval } from './components/Ruler/Ruler';

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

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

package/dist/cjs/components/RangeDateSelection/utils/date.d.ts

@@ -0,0 +1,2 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function alignDateTime(date: DateTime, align?: number): DateTime;

package/dist/cjs/components/RangeDateSelection/utils/date.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alignDateTime = alignDateTime;
+const date_utils_1 = require("@gravity-ui/date-utils");
+const constants_1 = require("../../utils/constants");
+function alignDateTime(date, align = constants_1.SECOND) {
+    return (0, date_utils_1.dateTimeUtc)({
+        input: Math.round(date.utc(true).valueOf() / align) * align,
+    }).timeZone(date.timeZone(), true);
+}

package/dist/cjs/components/RangeDateSelection/utils/span.d.ts

@@ -0,0 +1,23 @@
+export interface Span {
+    start: number;
+    end: number;
+}
+/**
+ * Implements linear interpolation (lerp).
+ *
+ * Calculates such a linear mapping `R -> R` that `from.start` will be mapped
+ * into `to.start`, and `from.end` will be mapped to `to.end`. Then applies
+ * this mapping to `value`.
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @param value Value from domain
+ * @returns Value from target
+ */
+export declare function lerp(from: Span, to: Span, value: number): number;
+/**
+ * Calculates a lerp scale coefficient
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @returns Scale coefficient
+ */
+export declare function getLerpCoeff(from: Span, to: Span): number;

package/dist/cjs/components/RangeDateSelection/utils/span.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lerp = lerp;
+exports.getLerpCoeff = getLerpCoeff;
+/**
+ * Implements linear interpolation (lerp).
+ *
+ * Calculates such a linear mapping `R -> R` that `from.start` will be mapped
+ * into `to.start`, and `from.end` will be mapped to `to.end`. Then applies
+ * this mapping to `value`.
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @param value Value from domain
+ * @returns Value from target
+ */
+function lerp(from, to, value) {
+    return to.start + ((value - from.start) * (to.end - to.start)) / (from.end - from.start);
+}
+/**
+ * Calculates a lerp scale coefficient
+ * @param from Interpolation domain
+ * @param to Interpolation target
+ * @returns Scale coefficient
+ */
+function getLerpCoeff(from, to) {
+    return (to.end - to.start) / (from.end - from.start);
+}

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

@@ -1 +1 @@
-export declare const i18n: (key: "Last 5 minutes" | "Last 15 minutes" | "Last 30 minutes" | "Last hour" | "Last 3 hours" | "Last 6 hours" | "Last 12 hours" | "Last day" | "Last 3 days" | "Last week" | "Last month" | "Last 3 months" | "Last 6 months" | "Last year" | "Last 3 years" | "Today" | "Yesterday" | "Day before yesterday" | "This week" | "This month" | "This year" | "From start of day" | "From start of week" | "From start of month" | "From start of year" | "Previous month" | "Last second" | "Last minute" | "Main" | "Other" | "Range" | "From" | "To" | "Last {count} second" | "Last {count} minute" | "Last {count} hour" | "Last {count} day" | "Last {count} week" | "Last {count} month" | "Last {count} year", params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export declare const i18n: (key: "Range" | "Last 5 minutes" | "Last 15 minutes" | "Last 30 minutes" | "Last hour" | "Last 3 hours" | "Last 6 hours" | "Last 12 hours" | "Last day" | "Last 3 days" | "Last week" | "Last month" | "Last 3 months" | "Last 6 months" | "Last year" | "Last 3 years" | "Today" | "Yesterday" | "Day before yesterday" | "This week" | "This month" | "This year" | "From start of day" | "From start of week" | "From start of month" | "From start of year" | "Previous month" | "Last second" | "Last minute" | "Main" | "Other" | "From" | "To" | "Last {count} second" | "Last {count} minute" | "Last {count} hour" | "Last {count} day" | "Last {count} week" | "Last {count} month" | "Last {count} year", params?: import("@gravity-ui/i18n").Params | undefined) => string;