@gravity-ui/date-components 1.5.0 → 2.0.1

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

@@ -3,17 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRelativeDatePickerState = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const DateField_1 = require("../../DateField");
+const uikit_1 = require("@gravity-ui/uikit");
 const DatePicker_1 = require("../../DatePicker");
 const RelativeDateField_1 = require("../../RelativeDateField");
-const useControlledState_1 = require("../../hooks/useControlledState");
 function useRelativeDatePickerState(props) {
-    const [value, setValue] = (0, useControlledState_1.useControlledState)(props.value, props.defaultValue, props.onUpdate);
+    var _a;
+    const [value, setValue] = (0, uikit_1.useControlledState)(props.value, (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null, props.onUpdate);
     const [mode, setMode] = react_1.default.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? 'relative' : 'absolute');
     const [prevValue, setPrevValue] = react_1.default.useState(value);
     if (value !== prevValue) {
         setPrevValue(value);
-        if (value) {
+        if (value && value.type !== mode) {
             setMode(value.type);
         }
     }
@@ -35,15 +35,8 @@ function useRelativeDatePickerState(props) {
         timeZone: props.timeZone,
         disabled: props.disabled,
         readOnly: props.readOnly,
-    });
-    const dateFieldState = (0, DateField_1.useDateFieldState)({
-        value: valueDate,
-        onUpdate: datePickerState.setValue,
-        format: props.format,
-        placeholderValue: props.placeholderValue,
-        timeZone: props.timeZone,
-        disabled: props.disabled,
-        readOnly: props.readOnly,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
     });
     const [valueRelative, setValueRelative] = react_1.default.useState((value === null || value === void 0 ? void 0 : value.type) === 'relative' ? value.value : null);
     if ((value === null || value === void 0 ? void 0 : value.type) === 'relative' && value.value !== valueRelative) {
@@ -60,6 +53,8 @@ function useRelativeDatePickerState(props) {
         },
         disabled: props.disabled,
         readOnly: props.readOnly,
+        timeZone: datePickerState.timeZone,
+        roundUp: props.roundUp,
     });
     if (!value) {
         if (mode === 'absolute' && valueDate) {
@@ -69,10 +64,12 @@ function useRelativeDatePickerState(props) {
             setValueRelative(null);
         }
     }
-    const selectedDate = mode === 'relative' ? relativeDateState.parsedDate : datePickerState.dateValue;
+    const selectedDate = mode === 'relative'
+        ? relativeDateState.parsedDate
+        : datePickerState.dateFieldState.displayValue;
     const [isActive, setActive] = react_1.default.useState(false);
     return {
-        value: value !== null && value !== void 0 ? value : null,
+        value,
         setValue(v) {
             if (props.readOnly || props.disabled) {
                 return;
@@ -97,7 +94,6 @@ function useRelativeDatePickerState(props) {
             }
         },
         datePickerState,
-        dateFieldState,
         relativeDateState,
         selectedDate,
         isActive,

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

@@ -0,0 +1,56 @@
+.g-date-relative-range-date-picker {
+  position: relative;
+  display: inline-flex;
+}
+.g-date-relative-range-date-picker__input_mobile {
+  pointer-events: none;
+}
+.g-date-relative-range-date-picker__mobile-trigger {
+  --_--g-date-mobile-trigger-clear-width: 0px;
+  --_--g-date-mobile-trigger-errors-width: 0px;
+  --_--g-date-mobile-trigger-button-width: 24px;
+  position: absolute;
+  inset: 0;
+  inset-inline-end: calc(var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) + var(--_--g-date-mobile-trigger-clear-width) + var(--_--g-date-mobile-trigger-errors-width));
+  opacity: 0;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_s {
+  --_--g-date-mobile-trigger-button-width: 20px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_l {
+  --_--g-date-mobile-trigger-button-width: 28px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_size_xl {
+  --_--g-date-mobile-trigger-button-width: 36px;
+}
+.g-date-relative-range-date-picker__mobile-trigger_has-clear {
+  --_--g-date-mobile-trigger-clear-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}
+.g-date-relative-range-date-picker__mobile-trigger_has-errors {
+  --_--g-date-mobile-trigger-errors-width: calc(
+      var(--_--g-date-mobile-trigger-button-width) + 2px
+  );
+}
+.g-date-relative-range-date-picker__value-label {
+  display: flex;
+  width: 100%;
+}
+.g-date-relative-range-date-picker__value-label > div {
+  flex: 1 0 0;
+}
+.g-date-relative-range-date-picker__value-label-content {
+  display: flex;
+  flex-direction: column;
+}
+.g-date-relative-range-date-picker__value-label-tooltip {
+  --g-popover-max-width: "none";
+}
+.g-date-relative-range-date-picker__value-label-item, .g-date-relative-range-date-picker__value-label-to, .g-date-relative-range-date-picker__value-label-tz {
+  text-align: center;
+}
+.g-date-relative-range-date-picker__value-label-tz {
+  margin-block-start: 5px;
+  color: var(--g-color-text-hint);
+}

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

@@ -0,0 +1,27 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { Value } from '../RelativeDatePicker';
+import type { DomProps, InputBase, RangeValue, StyleProps, TextInputProps, Validation } from '../types';
+import type { PresetTab } from './components/Presets/utils';
+import type { RelativeRangeDatePickerStateOptions } from './hooks/useRelativeRangeDatePickerState';
+import './RelativeRangeDatePicker.css';
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, InputBase, TextInputProps, Validation, StyleProps {
+    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
+    format?: string;
+    /** 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;
+    /** Apply changes with button */
+    withApplyButton?: boolean;
+    /** Show time zone selector */
+    withZonesList?: boolean;
+    /** Show relative range presets */
+    withPresets?: boolean;
+    /** Custom preset tabs */
+    presetTabs?: PresetTab[];
+    /** Show selected relative values as absolute dates */
+    alwaysShowAsAbsolute?: boolean;
+    /** */
+    getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
+    /** Sets the CSS className for the popup element. */
+    popupClassName?: string;
+}
+export declare function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelativeRangeDatePicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../utils/cn");
+const getButtonSizeForInput_1 = require("../utils/getButtonSizeForInput");
+const PickerDialog_1 = require("./components/PickerDialog/PickerDialog");
+const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState");
+const i18n_1 = require("./i18n");
+const utils_1 = require("./utils");
+require("./RelativeRangeDatePicker.css");
+const b = (0, cn_1.block)('relative-range-date-picker');
+function RelativeRangeDatePicker(props) {
+    var _a, _b;
+    const state = (0, useRelativeRangeDatePickerState_1.useRelativeRangeDatePickerState)(props);
+    const isMobile = (0, uikit_1.useMobile)();
+    const anchorRef = react_1.default.useRef(null);
+    const inputRef = react_1.default.useRef(null);
+    const [isActive, setIsActive] = react_1.default.useState(false);
+    const [open, setOpen] = react_1.default.useState(false);
+    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
+        isDisabled: props.disabled || isMobile,
+        onFocusWithinChange: (isFocusedWithin) => {
+            if (!isFocusedWithin) {
+                setIsActive(false);
+            }
+        },
+    });
+    const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
+    const format = (_a = props.format) !== null && _a !== void 0 ? _a : 'L';
+    const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
+        ? getRangeTitle(state.value, state.timeZone)
+        : (0, utils_1.getDefaultTitle)({
+            value: state.value,
+            timeZone: state.timeZone,
+            alwaysShowAsAbsolute: alwaysShowAsAbsolute,
+            format,
+            presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
+        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
+    const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
+    const errorMessage = (_b = props.errorMessage) !== null && _b !== void 0 ? _b : state.errors.join('\n');
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: anchorRef }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.Popover, { className: b('value-label'), tooltipContentClassName: b('value-label-tooltip'), disabled: isMobile || open || !state.value, delayOpening: 500, placement: ['right', 'right-start', 'right-end', 'auto'], hasArrow: false, content: (0, jsx_runtime_1.jsx)(ValueLabel, { value: state.value, format: format, timeZone: state.timeZone }), children: (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { controlRef: inputRef, value: text, placeholder: props.placeholder, onUpdate: (v) => {
+                        if (!props.readOnly && !v) {
+                            state.setValue(null, 'default');
+                        }
+                    }, controlProps: {
+                        'aria-haspopup': 'dialog',
+                        'aria-expanded': open,
+                        disabled: isMobile,
+                        className: b('input', { mobile: isMobile }),
+                    }, onKeyDown: (e) => {
+                        if (props.disabled) {
+                            return;
+                        }
+                        if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                            e.preventDefault();
+                            setOpen(true);
+                        }
+                    }, onFocus: () => {
+                        if (!isActive) {
+                            setIsActive(true);
+                            setOpen(true);
+                        }
+                    }, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, extraProps: {
+                            'aria-haspopup': 'dialog',
+                            'aria-expanded': open,
+                        }, onClick: () => {
+                            setIsActive(true);
+                            setOpen(!open);
+                        }, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
+                    'has-clear': Boolean(props.hasClear && state.value),
+                    'has-errors': state.isInvalid && props.errorPlacement === 'inside',
+                    size: props.size,
+                }), onClick: () => {
+                    setIsActive(true);
+                    setOpen(true);
+                } })) : null, (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                    setOpen(false);
+                }, anchorRef: anchorRef, isMobile: isMobile, className: props.className })] })));
+}
+exports.RelativeRangeDatePicker = RelativeRangeDatePicker;
+function ValueLabel({ value, format, timeZone }) {
+    var _a, _b, _c, _d;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b('value-label-content'), children: [(0, jsx_runtime_1.jsx)("span", { className: b('value-label-item'), children: (_b = (0, date_utils_1.dateTimeParse)((_a = value === null || value === void 0 ? void 0 : value.start) === null || _a === void 0 ? void 0 : _a.value, { timeZone })) === null || _b === void 0 ? void 0 : _b.format(format) }), (0, jsx_runtime_1.jsx)("span", { className: b('value-label-to'), children: (0, i18n_1.i18n)('to') }), (0, jsx_runtime_1.jsx)("span", { className: b('value-label-item'), children: (_d = (0, date_utils_1.dateTimeParse)((_c = value === null || value === void 0 ? void 0 : value.end) === null || _c === void 0 ? void 0 : _c.value, { timeZone, roundUp: true })) === null || _d === void 0 ? void 0 : _d.format(format) }), timeZone && (0, jsx_runtime_1.jsx)("span", { className: b('value-label-tz'), children: timeZone })] }));
+}

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

@@ -0,0 +1,32 @@
+.g-date-relative-range-date-picker-dialog__content {
+  --_--popup-content-padding: var(--g-spacing-2);
+  padding: var(--_--popup-content-padding);
+}
+.g-date-relative-range-date-picker-dialog__content_mobile {
+  --_--popup-content-padding: var(--g-spacing-5);
+}
+.g-date-relative-range-date-picker-dialog__content:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
+  width: 310px;
+}
+.g-date-relative-range-date-picker-dialog__content_size_xl:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
+  width: 380px;
+}
+.g-date-relative-range-date-picker-dialog__pickers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
+  width: 40px;
+}
+.g-date-relative-range-date-picker-dialog__content_size_xl .g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
+  width: 50px;
+}
+.g-date-relative-range-date-picker-dialog__apply {
+  margin-block-start: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-dialog__zone {
+  margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));
+  margin-inline: calc(-1 * var(--_--popup-content-padding));
+  border-block-start: 1px solid var(--g-color-line-generic);
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+import './PickerDialog.css';
+export interface PickerDialogProps {
+    className?: string;
+    state: RelativeRangeDatePickerState;
+    props: RelativeRangeDatePickerProps;
+    open: boolean;
+    isMobile?: boolean;
+    anchorRef?: React.RefObject<HTMLElement>;
+    onClose: () => void;
+}
+export declare function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const RelativeDatePicker_1 = require("../../../RelativeDatePicker");
+const Presets_1 = require("../Presets/Presets");
+const Zones_1 = require("../Zones/Zones");
+const i18n_1 = require("./i18n");
+const useRelativeRangeDatePickerDialogState_1 = require("./useRelativeRangeDatePickerDialogState");
+require("./PickerDialog.css");
+const b = (0, cn_1.block)('relative-range-date-picker-dialog');
+function PickerDialog({ props, state, open, onClose, isMobile, anchorRef, className, }) {
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), focusTrap: true, restoreFocus: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
+}
+exports.PickerDialog = PickerDialog;
+function DialogContent(props) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const state = (0, useRelativeRangeDatePickerDialogState_1.useRelativeRangeDatePickerDialogState)(props.state, props);
+    const placeholderValue = ((_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(props.state.timeZone)) ||
+        (0, date_utils_1.dateTime)({ timeZone: props.state.timeZone });
+    const fieldProps = {
+        timeZone: props.state.timeZone,
+        format: props.format,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        hasClear: props.allowNullableValues,
+        readOnly: props.readOnly,
+        size: props.size,
+        errorPlacement: 'inside',
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.isInvalid) ? 'invalid' : undefined, errorMessage: ((_d = (_c = state.startValidation) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: placeholderValue.startOf('day'), label: (0, i18n_1.i18n)('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: placeholderValue.endOf('day'), label: (0, i18n_1.i18n)('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                    state.applyValue();
+                    props.onApply();
+                }, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
+                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
+                }, minValue: props.minValue })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/en.json

@@ -0,0 +1,8 @@
+{
+  "Value is incorrect.": "Value is incorrect.",
+  "Value is required.": "Value is required.",
+  "\"From\" can't be after \"To\".": "\"From\" can't be after \"To\".",
+  "From": "From",
+  "To": "To",
+  "Apply": "Apply"
+}

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

@@ -0,0 +1 @@
+export declare const i18n: (key: "Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+const tslib_1 = require("tslib");
+const i18n_1 = require("@gravity-ui/uikit/i18n");
+const cn_1 = require("../../../../../utils/cn");
+const en_json_1 = tslib_1.__importDefault(require("./en.json"));
+const ru_json_1 = tslib_1.__importDefault(require("./ru.json"));
+exports.i18n = (0, i18n_1.addComponentKeysets)({ en: en_json_1.default, ru: ru_json_1.default }, `${cn_1.NAMESPACE}relative-range-date-picker-dialog`);

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/i18n/ru.json

@@ -0,0 +1,8 @@
+{
+  "Value is incorrect.": "Значение некорректно.",
+  "Value is required.": "Value is required.",
+  "\"From\" can't be after \"To\".": "Значение «От» не может быть позже чем «До».",
+  "From": "От",
+  "To": "Дo",
+  "Apply": "Применить"
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.d.ts

@@ -0,0 +1,16 @@
+import type { Value } from '../../../RelativeDatePicker';
+import type { RelativeRangeDatePickerProps } from '../../RelativeRangeDatePicker';
+import type { RelativeRangeDatePickerState } from '../../hooks/useRelativeRangeDatePickerState';
+export declare function useRelativeRangeDatePickerDialogState(state: RelativeRangeDatePickerState, props: RelativeRangeDatePickerProps): {
+    start: Value | null;
+    end: Value | null;
+    timeZone: string;
+    setStart: (newValue: Value | null) => void;
+    setEnd: (newValue: Value | null) => void;
+    setRange: (newStart: Value, newEnd: Value) => void;
+    setTimeZone: (newTimeZone: string) => void;
+    applyValue: () => void;
+    isInvalid: boolean;
+    startValidation: import("../../../utils/validation/datePicker").ValidationResult | undefined;
+    endValidation: import("../../../utils/validation/datePicker").ValidationResult | undefined;
+};

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

@@ -0,0 +1,104 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRelativeRangeDatePickerDialogState = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const date_utils_1 = require("@gravity-ui/date-utils");
+const datePicker_1 = require("../../../utils/validation/datePicker");
+const i18n_1 = require("./i18n");
+function useRelativeRangeDatePickerDialogState(state, props) {
+    var _a, _b, _c, _d;
+    const { withApplyButton, allowNullableValues } = props;
+    const [start, setStart] = react_1.default.useState((_b = (_a = state.value) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : null);
+    const [end, setEnd] = react_1.default.useState((_d = (_c = state.value) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : null);
+    const [innerTimeZone, setTimeZone] = react_1.default.useState(state.timeZone);
+    const timeZone = withApplyButton ? innerTimeZone : state.timeZone;
+    function setStartValue(newValue) {
+        setStart(newValue);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(newValue, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function setEndValue(newValue) {
+        setEnd(newValue);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(start, newValue, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function setTimeZoneValue(newTimeZone) {
+        setTimeZone(newTimeZone);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone: newTimeZone })), newTimeZone);
+        }
+    }
+    function setRange(newStart, newEnd) {
+        setStart(newStart);
+        setEnd(newEnd);
+        if (!withApplyButton) {
+            state.setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        }
+    }
+    function applyValue() {
+        state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+    }
+    const validation = react_1.default.useMemo(() => getRangeValidationResult(start, end, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+        allowNullableValues,
+        end,
+        props.isDateUnavailable,
+        props.maxValue,
+        props.minValue,
+        start,
+        timeZone,
+    ]);
+    return {
+        start,
+        end,
+        timeZone,
+        setStart: setStartValue,
+        setEnd: setEndValue,
+        setRange,
+        setTimeZone: setTimeZoneValue,
+        applyValue,
+        isInvalid: validation.isInvalid,
+        startValidation: validation.startValidationResult,
+        endValidation: validation.endValidationResult,
+    };
+}
+exports.useRelativeRangeDatePickerDialogState = useRelativeRangeDatePickerDialogState;
+function getRangeValue(start, end, options = {}) {
+    var _a;
+    if (!start && !end) {
+        return null;
+    }
+    const { isInvalid } = getRangeValidationResult(start, end, options.allowNullableValues, options.minValue, options.maxValue, options.isDateUnavailable, (_a = options.timeZone) !== null && _a !== void 0 ? _a : 'default');
+    if (isInvalid) {
+        return null;
+    }
+    return { start, end };
+}
+function getRangeValidationResult(start, end, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
+    if (!start && !end) {
+        return { isInvalid: false };
+    }
+    const startDate = start ? (0, date_utils_1.dateTimeParse)(start.value, { timeZone }) : null;
+    const endDate = end ? (0, date_utils_1.dateTimeParse)(end.value, { timeZone, roundUp: true }) : null;
+    const startValidationResult = (0, datePicker_1.getValidationResult)(startDate, minValue, maxValue, isDateUnavailable, timeZone);
+    if (!startDate && !allowNullableValues) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)('Value is required.'));
+    }
+    const endValidationResult = (0, datePicker_1.getValidationResult)(endDate, minValue, maxValue, isDateUnavailable, timeZone);
+    if (!endDate && !allowNullableValues) {
+        endValidationResult.isInvalid = true;
+        endValidationResult.errors.push((0, i18n_1.i18n)('Value is required.'));
+    }
+    if (startDate && endDate && endDate.isBefore(startDate)) {
+        startValidationResult.isInvalid = true;
+        startValidationResult.errors.push((0, i18n_1.i18n)(`"From" can't be after "To".`));
+    }
+    return {
+        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        startValidationResult,
+        endValidationResult,
+    };
+}

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

@@ -0,0 +1,26 @@
+.g-date-relative-range-date-picker-presets__tabs {
+  --g-tabs-border-width: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+  box-shadow: inset 0 -1px var(--g-color-line-generic);
+}
+.g-date-relative-range-date-picker-presets__list-container {
+  outline: none;
+}
+.g-date-relative-range-date-picker-presets__doc {
+  margin-inline-start: auto;
+}
+.g-date-relative-range-date-picker-presets__content {
+  overflow: auto;
+  height: 128px;
+}
+.g-date-relative-range-date-picker-presets_size_l .g-date-relative-range-date-picker-presets__content {
+  height: 144px;
+}
+.g-date-relative-range-date-picker-presets_size_xl .g-date-relative-range-date-picker-presets__content {
+  height: 162px;
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

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

@@ -0,0 +1,18 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { PresetTab } from './utils';
+import './Presets.css';
+export interface PresetProps {
+    className?: string;
+    onChoosePreset: (start: string, end: string) => void;
+    withTime?: boolean;
+    minValue?: DateTime;
+    size?: 's' | 'm' | 'l' | 'xl';
+    presetTabs?: PresetTab[];
+}
+export declare function Presets({ className, size, minValue, withTime, onChoosePreset, presetTabs, }: PresetProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const SIZE_TO_ITEM_HEIGHT: {
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+};

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE_TO_ITEM_HEIGHT = exports.Presets = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn");
+const PresetsDoc_1 = require("./PresetsDoc");
+const utils_1 = require("./utils");
+require("./Presets.css");
+const b = (0, cn_1.block)('relative-range-date-picker-presets');
+function Presets({ className, size = 'm', minValue, withTime, onChoosePreset, presetTabs, }) {
+    var _a, _b;
+    const tabs = react_1.default.useMemo(() => {
+        return (0, utils_1.filterPresetTabs)(presetTabs !== null && presetTabs !== void 0 ? presetTabs : (0, utils_1.getDefaultPresetTabs)({ withTime }), { minValue });
+    }, [withTime, minValue, presetTabs]);
+    const [activeTabId, setActiveTab] = react_1.default.useState((_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.id);
+    if (tabs.length === 0) {
+        return null;
+    }
+    const activeTab = (_b = tabs.find((tab) => tab.id === activeTabId)) !== null && _b !== void 0 ? _b : tabs[0];
+    if (!activeTab) {
+        return null;
+    }
+    if (activeTab.id !== activeTabId) {
+        setActiveTab(activeTab.id);
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size }, className), children: [(0, jsx_runtime_1.jsxs)("div", { className: b('tabs'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), (0, jsx_runtime_1.jsx)(PresetsDoc_1.PresetsDoc, { className: b('doc'), size: size })] }), (0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
+}
+exports.Presets = Presets;
+exports.SIZE_TO_ITEM_HEIGHT = {
+    s: 28,
+    m: 28,
+    l: 32,
+    xl: 36,
+};
+function PresetsList({ presets, onChoosePreset, size = 'm' }) {
+    const ref = react_1.default.useRef(null);
+    react_1.default.useEffect(() => {
+        var _a, _b;
+        const list = ref.current;
+        const container = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.refContainer.current) === null || _b === void 0 ? void 0 : _b.node;
+        if (list && container) {
+            try {
+                container.setAttribute('tabindex', '0');
+                container.setAttribute('class', b('list-container'));
+                const handleFocus = () => {
+                    if (list.getActiveItem() === null) {
+                        list.activateItem(0, true);
+                    }
+                };
+                container.addEventListener('focus', handleFocus);
+                return () => {
+                    container.removeEventListener('focus', handleFocus);
+                };
+            }
+            catch (_c) {
+                // Oooops
+            }
+        }
+        return undefined;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(uikit_1.List, { ref: ref, className: b('list'), itemClassName: b('item'), items: presets, filterable: false, virtualized: false, renderItem: (item) => item.title, itemHeight: exports.SIZE_TO_ITEM_HEIGHT[size], onItemClick: (item) => {
+            onChoosePreset(item.from, item.to);
+        } }));
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.css

@@ -0,0 +1,14 @@
+.g-date-relative-range-date-picker-presets-doc__button {
+  --g-button-background-color-hover: transparent;
+}
+.g-date-relative-range-date-picker-presets-doc__content {
+  --g-popover-max-width: "none";
+}
+.g-date-relative-range-date-picker-presets-doc__table_size_xl {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}
+.g-date-relative-range-date-picker-presets-doc__table > table {
+  width: 100%;
+}

package/dist/cjs/components/RelativeRangeDatePicker/components/Presets/PresetsDoc.d.ts

@@ -0,0 +1,7 @@
+import './PresetsDoc.css';
+interface PresetsDocProps {
+    className?: string;
+    size?: 's' | 'm' | 'l' | 'xl';
+}
+export declare function PresetsDoc({ className, size }: PresetsDocProps): import("react/jsx-runtime").JSX.Element;
+export {};