@gravity-ui/date-components 2.10.3 → 2.11.0

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

@@ -3,6 +3,7 @@ export * from './RangeCalendar';
 export * from './DateField';
 export * from './DatePicker';
 export * from './RangeDatePicker';
+export * from './RangeDateSelection';
 export * from './RelativeDateField';
 export * from './RelativeDatePicker';
 export * from './RangeDateField';

package/dist/cjs/components/index.js

@@ -19,6 +19,7 @@ __exportStar(require("./RangeCalendar"), exports);
 __exportStar(require("./DateField"), exports);
 __exportStar(require("./DatePicker"), exports);
 __exportStar(require("./RangeDatePicker"), exports);
+__exportStar(require("./RangeDateSelection"), exports);
 __exportStar(require("./RelativeDateField"), exports);
 __exportStar(require("./RelativeDatePicker"), exports);
 __exportStar(require("./RangeDateField"), exports);

package/dist/cjs/components/utils/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const SECOND = 1000;
+export declare const MINUTE: number;
+export declare const HOUR: number;
+export declare const DAY: number;
+export declare const WEEK: number;
+export declare const MONTH: number;
+export declare const YEAR: number;

package/dist/cjs/components/utils/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YEAR = exports.MONTH = exports.WEEK = exports.DAY = exports.HOUR = exports.MINUTE = exports.SECOND = void 0;
+exports.SECOND = 1000;
+exports.MINUTE = 60 * exports.SECOND;
+exports.HOUR = 60 * exports.MINUTE;
+exports.DAY = 24 * exports.HOUR;
+exports.WEEK = 7 * exports.DAY;
+exports.MONTH = 30 * exports.DAY;
+exports.YEAR = 365 * exports.DAY;

package/dist/cjs/components/utils/filterDOMProps.d.ts

@@ -0,0 +1,17 @@
+import type { AccessibilityProps } from '../types';
+interface Options {
+    /**
+     * If labelling associated aria properties should be included in the filter.
+     */
+    labelable?: boolean;
+    /**
+     * A Set of other property names that should be included in the filter.
+     */
+    propNames?: Set<string>;
+}
+export declare function filterDOMProps(props: {
+    id?: string;
+} & AccessibilityProps, options?: Options): {
+    id?: string;
+} & AccessibilityProps;
+export {};

package/dist/cjs/components/utils/filterDOMProps.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterDOMProps = filterDOMProps;
+const DOMPropNames = new Set(['id']);
+const labelablePropNames = new Set([
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-details',
+]);
+const propRe = /^(data-.*)$/;
+/* FIXME: use the same function from @gravity-ui/uikit */
+function filterDOMProps(props, options = {}) {
+    const { labelable, propNames } = options;
+    const filteredProps = {};
+    for (const prop in props) {
+        if (Object.prototype.hasOwnProperty.call(props, prop) &&
+            (DOMPropNames.has(prop) ||
+                (labelable && labelablePropNames.has(prop)) ||
+                (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) ||
+                propRe.test(prop))) {
+            // @ts-expect-error
+            filteredProps[prop] = props[prop];
+        }
+    }
+    return filteredProps;
+}

package/dist/cjs/hooks/useEventHandler.d.ts

@@ -0,0 +1 @@
+export declare function useEventHandler<T extends Function>(handler?: T): T;

package/dist/cjs/hooks/useEventHandler.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEventHandler = useEventHandler;
+const react_1 = __importDefault(require("react"));
+/*
+ * TODO: move to @gravity-ui/uikit
+ * The hook returns a stable function (an empty list of dependencies),
+ * but this function always calls the actual function associated with the last render.
+ * The returned function should be used as an event handler or inside a useEffect.
+ */
+function useEventHandler(handler) {
+    const ref = react_1.default.useRef(handler);
+    react_1.default.useLayoutEffect(() => {
+        ref.current = handler;
+    }, [handler]);
+    // @ts-expect-error
+    return react_1.default.useCallback((...args) => {
+        var _a;
+        return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args);
+    }, []);
+}

package/dist/cjs/hooks/useMove.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard';
+interface EventBase {
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    altKey: boolean;
+}
+interface BaseMoveEvent extends EventBase {
+    pointerType: PointerType;
+}
+export interface MoveStartEvent extends BaseMoveEvent {
+    type: 'movestart';
+}
+export interface MoveMoveEvent extends BaseMoveEvent {
+    type: 'move';
+    deltaX: number;
+    deltaY: number;
+}
+export interface MoveEndEvent extends BaseMoveEvent {
+    type: 'moveend';
+}
+export interface MoveEvents {
+    onMoveStart?: (e: MoveStartEvent) => void;
+    onMove?: (e: MoveMoveEvent) => void;
+    onMoveEnd?: (e: MoveEndEvent) => void;
+}
+export declare function useMove(props: MoveEvents): {
+    moveProps: React.DOMAttributes<HTMLElement>;
+};
+export {};

package/dist/cjs/hooks/useMove.js

@@ -0,0 +1,173 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMove = useMove;
+const react_1 = __importDefault(require("react"));
+const useEventHandler_1 = require("./useEventHandler");
+function useMove(props) {
+    const { onMoveStart, onMove, onMoveEnd } = props;
+    const state = react_1.default.useRef({
+        isMoving: false,
+        lastPosition: null,
+        id: null,
+    });
+    const move = (0, useEventHandler_1.useEventHandler)((originalEvent, deltaX, deltaY, pointerType) => {
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+        if (!state.current.isMoving) {
+            state.current.isMoving = true;
+            onMoveStart === null || onMoveStart === void 0 ? void 0 : onMoveStart({
+                type: 'movestart',
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+        onMove === null || onMove === void 0 ? void 0 : onMove({
+            type: 'move',
+            pointerType,
+            deltaX,
+            deltaY,
+            shiftKey: originalEvent.shiftKey,
+            ctrlKey: originalEvent.ctrlKey,
+            metaKey: originalEvent.metaKey,
+            altKey: originalEvent.altKey,
+        });
+    });
+    const end = (0, useEventHandler_1.useEventHandler)((originalEvent, pointerType) => {
+        if (state.current.isMoving) {
+            state.current.isMoving = false;
+            onMoveEnd === null || onMoveEnd === void 0 ? void 0 : onMoveEnd({
+                type: 'moveend',
+                pointerType,
+                shiftKey: originalEvent.shiftKey,
+                ctrlKey: originalEvent.ctrlKey,
+                metaKey: originalEvent.metaKey,
+                altKey: originalEvent.altKey,
+            });
+        }
+    });
+    return react_1.default.useMemo(() => {
+        const moveProps = {};
+        if (typeof PointerEvent === 'undefined') {
+            moveProps.onMouseDown = (e) => {
+                if (e.button === 0) {
+                    state.current.isMoving = false;
+                    e.preventDefault();
+                    state.current.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+                    const handleMouseMove = (ev) => {
+                        var _a, _b;
+                        if (ev.buttons === 0) {
+                            move(ev, ev.pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), ev.pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), 'mouse');
+                            state.current.lastPosition = { pageX: ev.pageX, pageY: ev.pageY };
+                        }
+                    };
+                    const handleMouseUp = (ev) => {
+                        if (ev.button === 0) {
+                            end(ev, 'mouse');
+                            window.removeEventListener('mousemove', handleMouseMove);
+                            window.removeEventListener('mouseup', handleMouseUp);
+                        }
+                    };
+                    window.addEventListener('mousemove', handleMouseMove);
+                    window.addEventListener('mouseup', handleMouseUp);
+                }
+            };
+            moveProps.onTouchStart = (e) => {
+                if (e.touches.length === 0 || state.current.id !== null) {
+                    return;
+                }
+                const { pageX, pageY, identifier } = e.touches[0];
+                state.current.id = identifier;
+                state.current.lastPosition = { pageX, pageY };
+                e.preventDefault();
+                const handleTouchMove = (ev) => {
+                    var _a, _b;
+                    const touch = [...ev.changedTouches].findIndex((el) => el.identifier === state.current.id);
+                    if (touch !== -1) {
+                        const { pageX, pageY } = e.changedTouches[touch];
+                        move(ev, pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), 'touch');
+                        state.current.lastPosition = { pageX, pageY };
+                    }
+                };
+                const handleTouchEnd = (ev) => {
+                    const touch = [...ev.changedTouches].findIndex((el) => el.identifier === state.current.id);
+                    if (touch !== -1) {
+                        end(ev, 'touch');
+                        state.current.id = null;
+                        window.removeEventListener('touchmove', handleTouchMove);
+                        window.removeEventListener('touchend', handleTouchEnd);
+                        window.removeEventListener('touchcancel', handleTouchEnd);
+                    }
+                };
+                window.addEventListener('touchmove', handleTouchMove);
+                window.addEventListener('touchend', handleTouchEnd);
+                window.addEventListener('touchcancel', handleTouchEnd);
+            };
+        }
+        else {
+            moveProps.onPointerDown = (e) => {
+                if (e.button === 0 && state.current.id === null) {
+                    e.preventDefault();
+                    state.current.isMoving = false;
+                    state.current.id = e.pointerId;
+                    state.current.lastPosition = { pageX: e.pageX, pageY: e.pageY };
+                    const handlePointerMove = (ev) => {
+                        var _a, _b;
+                        if (ev.pointerId === state.current.id) {
+                            move(ev, ev.pageX - (((_a = state.current.lastPosition) === null || _a === void 0 ? void 0 : _a.pageX) || 0), ev.pageY - (((_b = state.current.lastPosition) === null || _b === void 0 ? void 0 : _b.pageY) || 0), (ev.pointerType || 'mouse'));
+                            state.current.lastPosition = { pageX: ev.pageX, pageY: ev.pageY };
+                        }
+                    };
+                    const handlePointerUp = (ev) => {
+                        if (ev.pointerId === state.current.id) {
+                            end(ev, (ev.pointerType || 'mouse'));
+                            state.current.id = null;
+                            window.removeEventListener('pointermove', handlePointerMove);
+                            window.removeEventListener('pointerup', handlePointerUp);
+                            window.removeEventListener('pointercancel', handlePointerUp);
+                        }
+                    };
+                    window.addEventListener('pointermove', handlePointerMove);
+                    window.addEventListener('pointerup', handlePointerUp);
+                    window.addEventListener('pointercancel', handlePointerUp);
+                }
+            };
+        }
+        const handleKeyboardMove = (e, deltaX, deltaY) => {
+            state.current.isMoving = false;
+            move(e, deltaX, deltaY, 'keyboard');
+            end(e, 'keyboard');
+        };
+        moveProps.onKeyDown = (e) => {
+            switch (e.key) {
+                case 'ArrowLeft': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, -1, 0);
+                    break;
+                }
+                case 'ArrowRight': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 1, 0);
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 0, -1);
+                    break;
+                }
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    handleKeyboardMove(e, 0, 1);
+                    break;
+                }
+            }
+        };
+        return { moveProps };
+    }, [end, move]);
+}

package/dist/cjs/hooks/useResizeObserver.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface UseResizeObserverProps<T> {
+    ref: React.RefObject<T | null | undefined> | undefined;
+    onResize: () => void;
+    box?: ResizeObserverBoxOptions;
+}
+export declare function useResizeObserver<T extends Element>({ ref, onResize, box, }: UseResizeObserverProps<T>): void;
+export {};

package/dist/cjs/hooks/useResizeObserver.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useResizeObserver = useResizeObserver;
+const react_1 = __importDefault(require("react"));
+/* FIXME: use the same hook from @gravity-ui/uikit */
+function useResizeObserver({ ref, onResize, box, }) {
+    react_1.default.useEffect(() => {
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!element) {
+            return undefined;
+        }
+        if (typeof window.ResizeObserver === 'undefined') {
+            window.addEventListener('resize', onResize, false);
+            return () => {
+                window.removeEventListener('resize', onResize, false);
+            };
+        }
+        const observer = new ResizeObserver((entries) => {
+            if (!entries.length) {
+                return;
+            }
+            onResize();
+        });
+        observer.observe(element, { box });
+        return () => {
+            observer.disconnect();
+        };
+    }, [ref, onResize, box]);
+}

package/dist/esm/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/esm/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/esm/components/RangeDateSelection/RangeDateSelection.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Minus, Plus } from '@gravity-ui/icons';
+import { Button, Icon } from '@gravity-ui/uikit';
+import { block } from '../../utils/cn';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { DateTimeRuler } from './components/Ruler/Ruler';
+import { SelectionControl } from './components/SelectionControl/SelectionControl';
+import { useRangeDateSelectionState } from './hooks/useRangeDateSelectionState';
+import { i18n } from './i18n';
+import './RangeDateSelection.css';
+const b = block('range-date-selection');
+export function RangeDateSelection(props) {
+    var _a, _b;
+    const state = useRangeDateSelectionState(props);
+    const [isDraggingRuler, setDraggingRuler] = React.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.useId();
+    id = (_a = props.id) !== null && _a !== void 0 ? _a : id;
+    return (_jsxs("div", Object.assign({}, filterDOMProps(props, { labelable: true }), { id: id, className: b(null, props.className), style: props.style, dir: "ltr" // TODO: RTL support
+        , children: [_jsx(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: _jsx(SelectionControl, { className: b('selection'), state: state, "aria-labelledby": id }) })), props.hasScaleButtons ? (_jsxs("div", { className: b('buttons', { position: (_b = props.scaleButtonsPosition) !== null && _b !== void 0 ? _b : 'start' }), children: [_jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                            state.startDragging();
+                            state.scale(0.5);
+                            state.endDragging();
+                        }, extraProps: { 'aria-label': i18n('Decrease range') }, children: _jsx(Icon, { data: Minus }) }), _jsx(Button, { view: "flat-secondary", size: "xs", onClick: () => {
+                            state.startDragging();
+                            state.scale(1.5);
+                            state.endDragging();
+                        }, extraProps: { 'aria-label': i18n('Increase range') }, children: _jsx(Icon, { data: Plus }) })] })) : null] })));
+}

package/dist/esm/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/esm/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/esm/components/RangeDateSelection/components/NowLine/NowLine.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { block } from '../../../../utils/cn';
+import { SECOND } from '../../../utils/constants';
+import { useViewportDimensions, useViewportInterval } from '../Ruler/Ruler';
+const MIN_UPDATE_DISTANCE = 4; // in px
+import './NowLine.css';
+const b = block('timeline-now-line');
+export function NowLine() {
+    const viewport = useViewportDimensions();
+    const { start: startDate, end: endDate } = useViewportInterval();
+    const [, rerender] = React.useState({});
+    const nowTime = Date.now();
+    const needUpdateNow = endDate.valueOf() > nowTime;
+    const interval = Math.max(SECOND, (MIN_UPDATE_DISTANCE * endDate.diff(startDate)) / viewport.width, startDate.valueOf() - nowTime);
+    React.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 _jsx("path", { d: `M${nowX},0l0,${viewport.height}`, className: b() });
+}

package/dist/esm/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/esm/components/RangeDateSelection/components/Ruler/Ruler.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useResizeObserver } from '../../../../hooks/useResizeObserver';
+import { block } from '../../../../utils/cn';
+import { NowLine } from '../NowLine/NowLine';
+import { RulerViewport } from '../RulerViewport/RulerViewport';
+import { MiddleTicks } from '../Ticks/MiddleTicks';
+import { SlitTicks } from '../Ticks/SlitTicks';
+import { UnavailableTicks } from '../Ticks/UnavialableTicks';
+import { makeUnavailableTicksGeometry } from '../Ticks/utils';
+const b = block('ruler');
+const viewportDimensionsContext = React.createContext(null);
+const viewportIntervalContext = React.createContext(null);
+export function DateTimeRuler({ className, children, start, end, minValue, maxValue, onMove, onMoveStart, onMoveEnd, displayNow, formatTime, timeZone, dragDisabled, renderAdditionalRulerContent, }) {
+    const [container, setContainer] = React.useState(null);
+    const viewportInterval = React.useMemo(() => ({ start, end }), [start, end]);
+    const [viewportDimensions, setViewportDimensions] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    const onResize = React.useCallback(() => {
+        if (!container) {
+            return;
+        }
+        const { width, height } = container.getBoundingClientRect();
+        setViewportDimensions({ width, height });
+    }, [container]);
+    const containerRef = React.useMemo(() => ({ current: container }), [container]);
+    useResizeObserver({ ref: containerRef, onResize });
+    const hasConstrains = Boolean(minValue || maxValue);
+    return (_jsx("div", { className: b(null, className), children: _jsx(viewportIntervalContext.Provider, { value: viewportInterval, children: _jsxs(viewportDimensionsContext.Provider, { value: viewportDimensions, children: [_jsxs(RulerViewport, { ref: setContainer, onMove: onMove, onMoveStart: onMoveStart, onMoveEnd: onMoveEnd, dragDisabled: dragDisabled, children: [_jsx(MiddleTicks, { timeZone: timeZone }), _jsx(SlitTicks, { formatTime: formatTime, timeZone: timeZone }), hasConstrains ? (_jsx(UnavailableTicks, { theme: "dim", minValue: minValue, maxValue: maxValue, geometry: makeUnavailableTicksGeometry({
+                                    tickHeight: 10,
+                                    viewportHeight: viewportDimensions.height,
+                                }), tickWidth: viewportDimensions.height + 10 })) : null, displayNow ? _jsx(NowLine, {}) : null, renderAdditionalRulerContent === null || renderAdditionalRulerContent === void 0 ? void 0 : renderAdditionalRulerContent({
+                                interval: viewportInterval,
+                                dimensions: viewportDimensions,
+                            })] }), container ? ReactDOM.createPortal(children, container) : null] }) }) }));
+}
+export function useViewportDimensions() {
+    const viewport = React.useContext(viewportDimensionsContext);
+    if (!viewport) {
+        throw new Error('useViewportDimensions must be used within a RulerViewport');
+    }
+    return viewport;
+}
+export function useViewportInterval() {
+    const viewport = React.useContext(viewportIntervalContext);
+    if (!viewport) {
+        throw new Error('useViewportInterval must be used within a RulerViewport');
+    }
+    return viewport;
+}

package/dist/esm/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/esm/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 };