@gravity-ui/date-components 2.10.3 → 2.11.0

package/dist/cjs/components/RangeDateSelection/RangeDateSelection.css

@@ -0,0 +1,28 @@
+.g-date-range-date-selection {
+  display: grid;
+  align-items: center;
+  grid-template-areas: "buttons-start ruler buttons-end";
+  grid-template-columns: auto 1fr auto;
+  border-block: 1px solid var(--g-color-line-generic);
+}
+.g-date-range-date-selection__ruler {
+  grid-area: ruler;
+}
+.g-date-range-date-selection__ruler_dragging .g-date-range-date-selection__selection {
+  pointer-events: none;
+}
+.g-date-range-date-selection__buttons {
+  display: flex;
+  align-items: center;
+  height: 22px;
+}
+.g-date-range-date-selection__buttons_position_start {
+  grid-area: buttons-start;
+  padding-inline-end: var(--g-spacing-half);
+  border-inline-end: 1px solid var(--g-color-line-generic);
+}
+.g-date-range-date-selection__buttons_position_end {
+  grid-area: buttons-end;
+  padding-inline-start: var(--g-spacing-half);
+  border-inline-start: 1px solid var(--g-color-line-generic);
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { AccessibilityProps, DomProps, StyleProps } from '../types';
+import type { ViewportDimensions, ViewportInterval } from './components/Ruler/Ruler';
+import type { RangeDateSelectionOptions } from './hooks/useRangeDateSelectionState';
+import './RangeDateSelection.css';
+export interface RangeDateSelectionProps extends RangeDateSelectionOptions, DomProps, StyleProps, AccessibilityProps {
+    /** Formats time ticks */
+    formatTime?: (time: DateTime) => string;
+    /** Displays now line */
+    displayNow?: boolean;
+    /** Enables dragging ruler */
+    draggableRuler?: boolean;
+    /** Displays buttons to scale selection */
+    hasScaleButtons?: boolean;
+    /** Position of scale buttons */
+    scaleButtonsPosition?: 'start' | 'end';
+    /** Renders additional svg content in the ruler */
+    renderAdditionalRulerContent?: (props: {
+        interval: ViewportInterval;
+        dimensions: ViewportDimensions;
+    }) => React.ReactNode;
+}
+export declare function RangeDateSelection(props: RangeDateSelectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,49 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeDateSelection = RangeDateSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const filterDOMProps_1 = require("../utils/filterDOMProps");
+const Ruler_1 = require("./components/Ruler/Ruler");
+const SelectionControl_1 = require("./components/SelectionControl/SelectionControl");
+const useRangeDateSelectionState_1 = require("./hooks/useRangeDateSelectionState");
+const i18n_1 = require("./i18n");
+require("./RangeDateSelection.css");
+const b = (0, cn_1.block)('range-date-selection');
+function RangeDateSelection(props) {
+    var _a, _b;
+    const state = (0, useRangeDateSelectionState_1.useRangeDateSelectionState)(props);
+    const [isDraggingRuler, setDraggingRuler] = react_1.default.useState(false);
+    const handleRulerMoveStart = () => {
+        state.setDraggingValue(state.value);
+        setDraggingRuler(true);
+    };
+    const handleRulerMove = (d) => {
+        const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);
+        const delta = -Math.floor((d * intervalWidth) / 100);
+        state.move(delta);
+    };
+    const handleRulerMoveEnd = () => {
+        setDraggingRuler(false);
+        state.endDragging();
+    };
+    let id = react_1.default.useId();
+    id = (_a = props.id) !== null && _a !== void 0 ? _a : id;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, filterDOMProps_1.filterDOMProps)(props, { labelable: true }), { id: id, className: b(null, props.className), style: props.style, dir: "ltr" // TODO: RTL support
+        , children: [(0, jsx_runtime_1.jsx)(Ruler_1.DateTimeRuler, Object.assign({ className: b('ruler', { dragging: isDraggingRuler }) }, state.viewportInterval, { onMoveStart: handleRulerMoveStart, onMove: props.draggableRuler ? handleRulerMove : undefined, onMoveEnd: handleRulerMoveEnd, dragDisabled: state.isDragging, displayNow: props.displayNow, minValue: props.minValue, maxValue: props.maxValue, formatTime: props.formatTime, timeZone: state.timeZone, renderAdditionalRulerContent: props.renderAdditionalRulerContent, children: (0, jsx_runtime_1.jsx)(SelectionControl_1.SelectionControl, { className: b('selection'), state: state, "aria-labelledby": id }) })), props.hasScaleButtons ? ((0, jsx_runtime_1.jsxs)("div", { className: b('buttons', { position: (_b = props.scaleButtonsPosition) !== null && _b !== void 0 ? _b : 'start' }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                            state.startDragging();
+                            state.scale(0.5);
+                            state.endDragging();
+                        }, extraProps: { 'aria-label': (0, i18n_1.i18n)('Decrease range') }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Minus }) }), (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                            state.startDragging();
+                            state.scale(1.5);
+                            state.endDragging();
+                        }, extraProps: { 'aria-label': (0, i18n_1.i18n)('Increase range') }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] })) : null] })));
+}

package/dist/cjs/components/RangeDateSelection/components/NowLine/NowLine.css

@@ -0,0 +1,4 @@
+.g-date-timeline-now-line {
+  stroke: var(--g-date-thin-timeline-now-color);
+  stroke-width: 2px;
+}

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

@@ -0,0 +1,2 @@
+import './NowLine.css';
+export declare function NowLine(): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NowLine = NowLine;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const cn_1 = require("../../../../utils/cn");
+const constants_1 = require("../../../utils/constants");
+const Ruler_1 = require("../Ruler/Ruler");
+const MIN_UPDATE_DISTANCE = 4; // in px
+require("./NowLine.css");
+const b = (0, cn_1.block)('timeline-now-line');
+function NowLine() {
+    const viewport = (0, Ruler_1.useViewportDimensions)();
+    const { start: startDate, end: endDate } = (0, Ruler_1.useViewportInterval)();
+    const [, rerender] = react_1.default.useState({});
+    const nowTime = Date.now();
+    const needUpdateNow = endDate.valueOf() > nowTime;
+    const interval = Math.max(constants_1.SECOND, (MIN_UPDATE_DISTANCE * endDate.diff(startDate)) / viewport.width, startDate.valueOf() - nowTime);
+    react_1.default.useEffect(() => {
+        let timer = null;
+        if (needUpdateNow) {
+            timer = window.setInterval(() => {
+                rerender({});
+            }, interval);
+        }
+        return () => {
+            if (timer) {
+                window.clearInterval(timer);
+                timer = null;
+            }
+        };
+    }, [needUpdateNow, interval]);
+    if (nowTime < startDate.valueOf() || endDate.valueOf() < nowTime) {
+        return null;
+    }
+    const nowX = ((nowTime - startDate.valueOf()) / (endDate.valueOf() - startDate.valueOf())) *
+        viewport.width;
+    return (0, jsx_runtime_1.jsx)("path", { d: `M${nowX},0l0,${viewport.height}`, className: b() });
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from '../../../../hooks/useMove';
+import type { RangeValue } from '../../../types';
+interface RulerProps {
+    className?: string;
+    children?: React.ReactNode;
+    start: DateTime;
+    end: DateTime;
+    minValue?: DateTime;
+    maxValue?: DateTime;
+    onMoveStart?: (event: MoveStartEvent) => void;
+    onMove?: (delta: number, event: MoveMoveEvent) => void;
+    onMoveEnd?: (event: MoveEndEvent) => void;
+    displayNow?: boolean;
+    formatTime?: (time: DateTime) => string;
+    timeZone?: string;
+    dragDisabled?: boolean;
+    renderAdditionalRulerContent?: (props: {
+        interval: ViewportInterval;
+        dimensions: ViewportDimensions;
+    }) => React.ReactNode;
+}
+export interface ViewportDimensions {
+    width: number;
+    height: number;
+}
+export type ViewportInterval = RangeValue<DateTime>;
+export declare function DateTimeRuler({ className, children, start, end, minValue, maxValue, onMove, onMoveStart, onMoveEnd, displayNow, formatTime, timeZone, dragDisabled, renderAdditionalRulerContent, }: RulerProps): import("react/jsx-runtime").JSX.Element;
+export declare function useViewportDimensions(): ViewportDimensions;
+export declare function useViewportInterval(): ViewportInterval;
+export {};

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateTimeRuler = DateTimeRuler;
+exports.useViewportDimensions = useViewportDimensions;
+exports.useViewportInterval = useViewportInterval;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const useResizeObserver_1 = require("../../../../hooks/useResizeObserver");
+const cn_1 = require("../../../../utils/cn");
+const NowLine_1 = require("../NowLine/NowLine");
+const RulerViewport_1 = require("../RulerViewport/RulerViewport");
+const MiddleTicks_1 = require("../Ticks/MiddleTicks");
+const SlitTicks_1 = require("../Ticks/SlitTicks");
+const UnavialableTicks_1 = require("../Ticks/UnavialableTicks");
+const utils_1 = require("../Ticks/utils");
+const b = (0, cn_1.block)('ruler');
+const viewportDimensionsContext = react_1.default.createContext(null);
+const viewportIntervalContext = react_1.default.createContext(null);
+function DateTimeRuler({ className, children, start, end, minValue, maxValue, onMove, onMoveStart, onMoveEnd, displayNow, formatTime, timeZone, dragDisabled, renderAdditionalRulerContent, }) {
+    const [container, setContainer] = react_1.default.useState(null);
+    const viewportInterval = react_1.default.useMemo(() => ({ start, end }), [start, end]);
+    const [viewportDimensions, setViewportDimensions] = react_1.default.useState({
+        width: 0,
+        height: 0,
+    });
+    const onResize = react_1.default.useCallback(() => {
+        if (!container) {
+            return;
+        }
+        const { width, height } = container.getBoundingClientRect();
+        setViewportDimensions({ width, height });
+    }, [container]);
+    const containerRef = react_1.default.useMemo(() => ({ current: container }), [container]);
+    (0, useResizeObserver_1.useResizeObserver)({ ref: containerRef, onResize });
+    const hasConstrains = Boolean(minValue || maxValue);
+    return ((0, jsx_runtime_1.jsx)("div", { className: b(null, className), children: (0, jsx_runtime_1.jsx)(viewportIntervalContext.Provider, { value: viewportInterval, children: (0, jsx_runtime_1.jsxs)(viewportDimensionsContext.Provider, { value: viewportDimensions, children: [(0, jsx_runtime_1.jsxs)(RulerViewport_1.RulerViewport, { ref: setContainer, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, dragDisabled: dragDisabled, children: [(0, jsx_runtime_1.jsx)(MiddleTicks_1.MiddleTicks, { timeZone: timeZone }), (0, jsx_runtime_1.jsx)(SlitTicks_1.SlitTicks, { formatTime: formatTime, timeZone: timeZone }), hasConstrains ? ((0, jsx_runtime_1.jsx)(UnavialableTicks_1.UnavailableTicks, { theme: "dim", minValue: minValue, maxValue: maxValue, geometry: (0, utils_1.makeUnavailableTicksGeometry)({
+                                    tickHeight: 10,
+                                    viewportHeight: viewportDimensions.height,
+                                }), tickWidth: viewportDimensions.height + 10 })) : null, displayNow ? (0, jsx_runtime_1.jsx)(NowLine_1.NowLine, {}) : null, renderAdditionalRulerContent === null || renderAdditionalRulerContent === void 0 ? void 0 : renderAdditionalRulerContent({
+                                interval: viewportInterval,
+                                dimensions: viewportDimensions,
+                            })] }), container ? react_dom_1.default.createPortal(children, container) : null] }) }) }));
+}
+function useViewportDimensions() {
+    const viewport = react_1.default.useContext(viewportDimensionsContext);
+    if (!viewport) {
+        throw new Error('useViewportDimensions must be used within a RulerViewport');
+    }
+    return viewport;
+}
+function useViewportInterval() {
+    const viewport = react_1.default.useContext(viewportIntervalContext);
+    if (!viewport) {
+        throw new Error('useViewportInterval must be used within a RulerViewport');
+    }
+    return viewport;
+}

package/dist/cjs/components/RangeDateSelection/components/RulerViewport/RulerViewport.css

@@ -0,0 +1,25 @@
+.g-date-ruler-viewport {
+  --_--g-date-ruler-viewport-background: var(
+      --g-date-ruler-viewport-background,
+      var(--g-color-base-background)
+  );
+  --g-date-thin-timeline-height: 22px;
+  --g-date-thin-timeline-now-color: var(--g-color-line-danger);
+  position: relative;
+  box-sizing: border-box;
+  height: var(--g-date-thin-timeline-height);
+}
+.g-date-ruler-viewport__dragger {
+  position: absolute;
+  inset: 0;
+  cursor: grab;
+}
+.g-date-ruler-viewport__dragger:focus-visible {
+  outline: 2px solid var(--g-color-line-focus);
+}
+.g-date-ruler-viewport__dragger_disabled {
+  pointer-events: none;
+}
+.g-date-ruler-viewport__svg {
+  pointer-events: none;
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from '../../../../hooks/useMove';
+import './RulerViewport.css';
+interface RulerViewportProps {
+    className?: string;
+    children?: React.ReactNode;
+    onMoveStart?: (event: MoveStartEvent) => void;
+    onMove?: (delta: number, event: MoveMoveEvent) => void;
+    onMoveEnd?: (event: MoveEndEvent) => void;
+    dragDisabled?: boolean;
+}
+declare const _RulerViewport: React.ForwardRefExoticComponent<RulerViewportProps & React.RefAttributes<HTMLDivElement>>;
+export { _RulerViewport as RulerViewport };

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

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RulerViewport = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const useMove_1 = require("../../../../hooks/useMove");
+const cn_1 = require("../../../../utils/cn");
+require("./RulerViewport.css");
+const b = (0, cn_1.block)('ruler-viewport');
+function RulerViewport({ className, children, onMove, onMoveStart, onMoveEnd, dragDisabled }, ref) {
+    const containerRef = react_1.default.useRef(null);
+    const draggable = typeof onMove === 'function';
+    const { moveProps } = (0, useMove_1.useMove)({
+        onMoveStart: onMoveStart,
+        onMove: (e) => {
+            const container = containerRef.current;
+            if (e.deltaX !== 0 && container) {
+                const { width } = container.getBoundingClientRect();
+                let delta = (e.deltaX * 100) / width;
+                delta = Math.round(delta * 100) / 100;
+                if (delta !== 0) {
+                    onMove === null || onMove === void 0 ? void 0 : onMove(delta, e);
+                }
+            }
+        },
+        onMoveEnd: onMoveEnd,
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: b(null, className), children: [(0, jsx_runtime_1.jsxs)("svg", { ref: containerRef, className: b('svg'), width: "100%", height: "100%", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { x: "0", y: "0", width: "1", height: "1", id: "g-date-tt-ticklabelbg", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodColor: "var(--_--g-date-ruler-viewport-background)" }), (0, jsx_runtime_1.jsx)("feComposite", { in: "SourceGraphic" })] }) }), children] }), draggable ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: b('dragger', { disabled: dragDisabled }) }, moveProps))) : null] }));
+}
+const _RulerViewport = react_1.default.forwardRef(RulerViewport);
+exports.RulerViewport = _RulerViewport;

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

@@ -0,0 +1,78 @@
+.g-date-range-date-selection-control {
+  --_--g-date-timeline-color-selection: var(
+      --g-date-timeline-color-selection,
+      var(--g-color-base-info-light)
+  );
+  --_--g-date-timeline-color-selection-hover: var(
+      --g-date-timeline-color-selection-hover,
+      var(--g-color-base-info-light-hover)
+  );
+  --_--g-date-timeline-color-selection-handle: var(
+      --g-date-timeline-color-selection-handle,
+      var(--g-color-base-brand)
+  );
+  --_--g-date-timeline-color-selection-handle-hover: var(
+      --g-date-timeline-color-selection-handle-hover,
+      var(--g-color-base-brand-hover)
+  );
+  position: absolute;
+  z-index: 1;
+  inset-block: 0;
+}
+@supports (selector(:has(*))) and (selector(:focus-visible)) {
+  .g-date-range-date-selection-control__start:has(.g-date-range-date-selection-control__slider-input:focus-visible), .g-date-range-date-selection-control__end:has(.g-date-range-date-selection-control__slider-input:focus-visible), .g-date-range-date-selection-control__dragger:has(.g-date-range-date-selection-control__slider-input:focus-visible) {
+    border-radius: var(--g-border-radius-xs);
+    outline: var(--g-color-line-focus) solid 2px;
+  }
+}
+@supports not (selector(:has(*))) {
+  .g-date-range-date-selection-control__start:focus-within, .g-date-range-date-selection-control__end:focus-within, .g-date-range-date-selection-control__dragger:focus-within {
+    border-radius: var(--g-border-radius-xs);
+    outline: var(--g-color-line-focus) solid 2px;
+  }
+}
+.g-date-range-date-selection-control__dragger {
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 2px;
+  cursor: move;
+  background: var(--_--g-date-timeline-color-selection);
+}
+.g-date-range-date-selection-control__dragger:hover, .g-date-range-date-selection-control__dragger_dragging {
+  background: var(--_--g-date-timeline-color-selection-hover);
+}
+.g-date-range-date-selection-control__dragger_disabled {
+  pointer-events: none;
+}
+.g-date-range-date-selection-control__start {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+  width: 4px;
+  background: var(--_--g-date-timeline-color-selection-handle);
+}
+.g-date-range-date-selection-control__end {
+  position: absolute;
+  inset-inline-end: 0;
+  width: 4px;
+  height: 100%;
+  background: var(--_--g-date-timeline-color-selection-handle);
+}
+.g-date-range-date-selection-control__start, .g-date-range-date-selection-control__end {
+  cursor: ew-resize;
+}
+.g-date-range-date-selection-control__start:hover, .g-date-range-date-selection-control__start_dragging, .g-date-range-date-selection-control__end:hover, .g-date-range-date-selection-control__end_dragging {
+  background: var(--_--g-date-timeline-color-selection-handle-hover);
+}
+.g-date-range-date-selection-control__slider-input-wrapper {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}

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

@@ -0,0 +1,8 @@
+import type { AccessibilityProps, DomProps, StyleProps } from '../../../types';
+import type { RangeDateSelectionState } from '../../hooks/useRangeDateSelectionState';
+import './SelectionControl.css';
+interface SelectionControlProps extends DomProps, StyleProps, AccessibilityProps {
+    state: RangeDateSelectionState;
+}
+export declare function SelectionControl({ state, style, className, ...props }: SelectionControlProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionControl = SelectionControl;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useMove_1 = require("../../../../hooks/useMove");
+const cn_1 = require("../../../../utils/cn");
+const i18n_1 = require("../../i18n");
+const span_1 = require("../../utils/span");
+const Ruler_1 = require("../Ruler/Ruler");
+require("./SelectionControl.css");
+const b = (0, cn_1.block)('range-date-selection-control');
+const MIN_SELECTION_WIDTH = 12; // px;
+const MIN_DRAG_SCALE = 0.01;
+const MAX_DRAG_SCALE = 100;
+const DRAG_SCALE_STRENGTH = 20;
+function SelectionControl(_a) {
+    var _b;
+    var { state, style, className } = _a, props = tslib_1.__rest(_a, ["state", "style", "className"]);
+    const { start: startDate, end: endDate } = (0, Ruler_1.useViewportInterval)();
+    const viewport = (0, Ruler_1.useViewportDimensions)();
+    const [isDragging, setIsDragging] = react_1.default.useState(null);
+    const moveDataRef = react_1.default.useRef({
+        isZooming: false,
+    });
+    const visualMinDuration = (MIN_SELECTION_WIDTH * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+    const handleMoveEnd = () => {
+        state.endDragging();
+        setIsDragging(null);
+    };
+    const { moveProps } = (0, useMove_1.useMove)({
+        onMoveStart: (e) => {
+            setIsDragging('dragger');
+            state.startDragging();
+            moveDataRef.current = {
+                isZooming: state.canResize && (e.ctrlKey || e.metaKey),
+            };
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            if (moveDataRef.current.isZooming) {
+                let scale = Math.exp((e.deltaX * DRAG_SCALE_STRENGTH) / viewport.width);
+                scale = Math.min(Math.max(scale, MIN_DRAG_SCALE), MAX_DRAG_SCALE);
+                state.scale(scale, { visualMinDuration });
+            }
+            else {
+                let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+                if (e.pointerType === 'keyboard') {
+                    delta =
+                        delta > 0
+                            ? Math.max(delta, state.align)
+                            : Math.min(delta, -1 * state.align);
+                }
+                state.move(delta, { visualMinDuration });
+            }
+        },
+    });
+    const { moveProps: moveStartProps } = (0, useMove_1.useMove)({
+        onMoveStart: () => {
+            setIsDragging('start');
+            state.startDragging();
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+            if (e.pointerType === 'keyboard') {
+                delta =
+                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);
+            }
+            state.moveStart(delta, { visualMinDuration });
+        },
+    });
+    const { moveProps: moveEndProps } = (0, useMove_1.useMove)({
+        onMoveStart: () => {
+            setIsDragging('end');
+            state.startDragging();
+        },
+        onMoveEnd: handleMoveEnd,
+        onMove: (e) => {
+            if (e.deltaX === 0) {
+                return;
+            }
+            let delta = (e.deltaX * (endDate.valueOf() - startDate.valueOf())) / viewport.width;
+            if (e.pointerType === 'keyboard') {
+                delta =
+                    delta > 0 ? Math.max(delta, state.align) : Math.min(delta, -1 * state.align);
+            }
+            state.moveEnd(delta, { visualMinDuration });
+        },
+    });
+    const { start: startValue, end: endValue } = state.value;
+    const startX = (0, span_1.lerp)({ start: startDate.valueOf(), end: endDate.valueOf() }, { start: 0, end: viewport.width }, startValue.valueOf());
+    const endX = (0, span_1.lerp)({ start: startDate.valueOf(), end: endDate.valueOf() }, { start: 0, end: viewport.width }, endValue.valueOf());
+    const draggerInputRef = react_1.default.useRef(null);
+    const startInputRef = react_1.default.useRef(null);
+    const endInputRef = react_1.default.useRef(null);
+    let id = react_1.default.useId();
+    id = (_b = props.id) !== null && _b !== void 0 ? _b : id;
+    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']]
+                            .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 */
+            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: b('start', {
+                    dragging: isDragging === 'start',
+                    disabled: Boolean(isDragging && isDragging !== 'start'),
+                }) }, 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']]
+                            .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 */
+            (0, jsx_runtime_1.jsx)("div", Object.assign({ className: b('end', {
+                    dragging: isDragging === 'end',
+                    disabled: Boolean(isDragging && isDragging !== 'end'),
+                }) }, 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']]
+                            .filter(Boolean)
+                            .join(' '), "aria-orientation": "horizontal", "aria-valuetext": `${endValue.format()}`, value: 0, onChange: () => { } }) }) }))) : null] }));
+}

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

@@ -0,0 +1,3 @@
+export declare function MiddleTicks({ timeZone }: {
+    timeZone?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MiddleTicks = MiddleTicks;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Ruler_1 = require("../Ruler/Ruler");
+const Ticks_1 = require("./Ticks");
+function MiddleTicks({ timeZone }) {
+    const { height } = (0, Ruler_1.useViewportDimensions)();
+    return ((0, jsx_runtime_1.jsx)(Ticks_1.Ticks, { minTickWidth: 8, maxTickWidth: 20, theme: "dim", geometry: (0, Ticks_1.makeMiddleTicksGeometry)({ tickHeight: 4, viewportHeight: height }), timeZone: timeZone }));
+}

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

@@ -0,0 +1,5 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+export declare function SlitTicks({ formatTime, timeZone, }: {
+    formatTime?: (time: DateTime) => string;
+    timeZone?: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SlitTicks = SlitTicks;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Ruler_1 = require("../Ruler/Ruler");
+const Ticks_1 = require("./Ticks");
+function SlitTicks({ formatTime, timeZone, }) {
+    const { height } = (0, Ruler_1.useViewportDimensions)();
+    return ((0, jsx_runtime_1.jsx)(Ticks_1.Ticks, { minTickWidth: 80, maxTickWidth: 200, theme: "normal", geometry: (0, Ticks_1.makeSlitTicksGeometry)({ tickHeight: 4, viewportHeight: height }), hasLabels: true, formatTime: formatTime, timeZone: timeZone }));
+}

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

@@ -0,0 +1,16 @@
+.g-date-timeline-ticks {
+  stroke: var(--g-color-text-secondary);
+  fill: var(--g-color-text-secondary);
+  stroke-width: 1px;
+}
+.g-date-timeline-ticks_theme_dim {
+  stroke: var(--g-color-line-generic-accent);
+  fill: var(--g-color-line-generic-accent);
+}
+.g-date-timeline-ticks__label {
+  font-size: 11px;
+  line-height: 14px;
+  user-select: none;
+  fill: var(--g-color-text-secondary);
+  text-anchor: middle;
+}

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

@@ -0,0 +1,18 @@
+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';
+    minTickWidth: number;
+    maxTickWidth: number;
+    hasLabels?: boolean;
+    geometry: Geometry;
+    className?: string;
+    labelsClassName?: string;
+    formatTime?: (time: DateTime) => string;
+    timeZone?: string;
+}
+export { makeMiddleTicksGeometry, makeSlitTicksGeometry };
+export type { Geometry };
+export declare function Ticks({ theme, minTickWidth, maxTickWidth, hasLabels, geometry, className, labelsClassName, formatTime, timeZone, }: TicksProps): import("react/jsx-runtime").JSX.Element;