@gravity-ui/date-components 2.12.0 → 3.0.0

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

@@ -1,15 +1,17 @@
-import type { RelativeRangeDatePickerState } from "../../hooks/useRelativeRangeDatePickerState.js";
-import type { RelativeRangeDatePickerProps } from "../../types.js";
+import type { PopupProps } from '@gravity-ui/uikit';
+import type { PopupStyleProps } from "../../../types/index.js";
+import type { PickerFormProps } from "./PickerForm.js";
 import "./PickerDialog.css";
-export interface PickerDialogProps {
-    className?: string;
-    state: RelativeRangeDatePickerState;
-    props: RelativeRangeDatePickerProps;
+export interface PickerDialogProps extends PickerFormProps, PopupStyleProps {
+    /** Popup anchor */
+    anchor: HTMLElement | null;
+    /** Manages `Popup` visibility */
     open: boolean;
+    /** Handles popup close event */
+    onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;
+    /** If true `Popup` act like a modal dialog */
+    modal?: boolean;
+    /** If true `Sheet` is used instead of `Popup`  */
     isMobile?: boolean;
-    anchorRef?: React.RefObject<HTMLElement>;
-    onClose: () => void;
-    focusInput?: () => void;
-    disableFocusTrap?: boolean;
 }
-export declare function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, disableFocusTrap, }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function PickerDialog({ open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal, ...props }: PickerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,47 +1,26 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { dateTime } from '@gravity-ui/date-utils';
-import { Button, Popup, Sheet } from '@gravity-ui/uikit';
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popup, Sheet } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
-import { RelativeDatePicker } from "../../../RelativeDatePicker/index.js";
-import { Presets } from "../Presets/Presets.js";
-import { Zones } from "../Zones/Zones.js";
-import { i18n } from "./i18n/index.js";
-import { useRelativeRangeDatePickerDialogState } from "./useRelativeRangeDatePickerDialogState.js";
+import { PickerForm } from "./PickerForm.js";
 import "./PickerDialog.css";
 const b = block('relative-range-date-picker-dialog');
-export function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchorRef, className, disableFocusTrap, }) {
+export function PickerDialog(_a) {
+    var { open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal } = _a, props = __rest(_a, ["open", "onClose", "isMobile", "anchor", "popupClassName", "popupStyle", "popupPlacement", "popupOffset", "modal"]);
     if (isMobile) {
-        return (_jsx(Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: _jsx(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
+        return (_jsx(Sheet, { visible: open, onClose: () => {
+                onClose('outside-press');
+            }, contentClassName: b('content', { mobile: true, size: 'xl' }, popupClassName), children: _jsx(PickerForm, Object.assign({}, props, { size: "xl", onApply: () => {
+                    onClose('apply');
+                } })) }));
     }
-    return (_jsx(Popup, { open: open, onEscapeKeyDown: () => {
-            onClose();
-            focusInput === null || focusInput === void 0 ? void 0 : focusInput();
-        }, onClose: onClose, role: "dialog", anchorRef: anchorRef, contentClassName: b('content', { size: props.size }, className), autoFocus: !disableFocusTrap, focusTrap: !disableFocusTrap, children: _jsx(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
-}
-function DialogContent(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const state = useRelativeRangeDatePickerDialogState(props.state, props);
-    const placeholderValue = ((_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(props.state.timeZone)) ||
-        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 (_jsxs("div", { children: [_jsxs("div", { className: b('pickers'), children: [_jsx(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')) || i18n('Value is incorrect.'), placeholderValue: placeholderValue.startOf('day'), label: i18n('From'), value: state.start, onUpdate: state.setStart })), _jsx(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')) || i18n('Value is incorrect.'), placeholderValue: placeholderValue.endOf('day'), label: i18n('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
-                    state.applyValue();
-                    props.onApply();
-                }, className: b('apply'), width: "max", children: i18n('Apply') })) : null, props.withPresets && !props.readOnly ? (_jsx(Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
-                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
-                    if (!props.withApplyButton) {
-                        props.onApply();
-                    }
-                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+    return (_jsx(Popup, { open: open, onOpenChange: (isOpen, _event, reason) => {
+            if (!isOpen) {
+                onClose(reason);
+            }
+        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, children: _jsx(PickerForm, Object.assign({}, props, { onApply: () => {
+                onClose('apply');
+            } })) }));
 }
 //# sourceMappingURL=PickerDialog.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {dateTime} from '@gravity-ui/date-utils';\nimport {Button, Popup, Sheet} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from '../../types';\nimport {Presets} from '../Presets/Presets';\nimport {Zones} from '../Zones/Zones';\n\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps {\n    className?: string;\n    state: RelativeRangeDatePickerState;\n    props: RelativeRangeDatePickerProps;\n    open: boolean;\n    isMobile?: boolean;\n    anchorRef?: React.RefObject<HTMLElement>;\n    onClose: () => void;\n    focusInput?: () => void;\n    disableFocusTrap?: boolean;\n}\n\nexport function PickerDialog({\n    props,\n    state,\n    open,\n    onClose,\n    focusInput,\n    isMobile,\n    anchorRef,\n    className,\n    disableFocusTrap,\n}: PickerDialogProps) {\n    if (isMobile) {\n        return (\n            <Sheet\n                visible={open}\n                onClose={onClose}\n                contentClassName={b('content', {mobile: true, size: 'xl'}, className)}\n            >\n                <DialogContent {...props} size=\"xl\" state={state} onApply={onClose} />\n            </Sheet>\n        );\n    }\n\n    return (\n        <Popup\n            open={open}\n            onEscapeKeyDown={() => {\n                onClose();\n                focusInput?.();\n            }}\n            onClose={onClose}\n            role=\"dialog\"\n            anchorRef={anchorRef}\n            contentClassName={b('content', {size: props.size}, className)}\n            autoFocus={!disableFocusTrap}\n            focusTrap={!disableFocusTrap}\n        >\n            <DialogContent {...props} state={state} onApply={onClose} />\n        </Popup>\n    );\n}\n\nfunction DialogContent(\n    props: {\n        state: RelativeRangeDatePickerState;\n        onApply: () => void;\n    } & RelativeRangeDatePickerProps,\n) {\n    const state = useRelativeRangeDatePickerDialogState(props.state, props);\n\n    const placeholderValue =\n        props.placeholderValue?.timeZone(props.state.timeZone) ||\n        dateTime({timeZone: props.state.timeZone});\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: props.state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n    };\n    return (\n        <div>\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={placeholderValue.startOf('day')}\n                    label={i18n('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={placeholderValue.endOf('day')}\n                    label={i18n('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {i18n('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            {type: 'relative', value: start},\n                            {type: 'relative', value: end},\n                        );\n                        if (!props.withApplyButton) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    docs={props.docs}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAEb,OAAO,EAAC,KAAK,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAG3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAGxC,4BAA6B;AAE7B,MAAM,CAAC,GAAG,KAAK,CAAC,mCAAmC,CAAC,CAAC;AAerD,MAAM,UAAU,YAAY,CAAC,EAWT;QAXS,EACzB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAM,EACN,cAAc,EACd,UAAU,EACV,cAAc,EACd,WAAW,EACX,KAAK,OAEW,EADb,KAAK,cAViB,mHAW5B,CADW;IAER,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,KAAC,KAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,eAAe,CAAC,CAAC;YAC7B,CAAC,EACD,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,cAAc,CAAC,YAE1E,KAAC,UAAU,oBACH,KAAK,IACT,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,OAAO,CAAC,CAAC;gBACrB,CAAC,IACH,GACE,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,CAAC,MAAM,CAAC,CAAC;YACpB,CAAC;QACL,CAAC,EACD,SAAS,EAAE,cAAc,EACzB,MAAM,EAAE,WAAW,EACnB,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,cAAc,CAAC,EAC3D,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,oBACH,KAAK,IACT,OAAO,EAAE,GAAG,EAAE;gBACV,OAAO,CAAC,OAAO,CAAC,CAAC;YACrB,CAAC,IACH,GACE,CACX,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {Popup, Sheet} from '@gravity-ui/uikit';\nimport type {PopupProps} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport type {PopupStyleProps} from '../../../types';\n\nimport {PickerForm} from './PickerForm';\nimport type {PickerFormProps} from './PickerForm';\n\nimport './PickerDialog.scss';\n\nconst b = block('relative-range-date-picker-dialog');\n\nexport interface PickerDialogProps extends PickerFormProps, PopupStyleProps {\n    /** Popup anchor */\n    anchor: HTMLElement | null;\n    /** Manages `Popup` visibility */\n    open: boolean;\n    /** Handles popup close event */\n    onClose: (reason?: Parameters<NonNullable<PopupProps['onOpenChange']>>[2] | 'apply') => void;\n    /** If true `Popup` act like a modal dialog */\n    modal?: boolean;\n    /** If true `Sheet` is used instead of `Popup`  */\n    isMobile?: boolean;\n}\n\nexport function PickerDialog({\n    open,\n    onClose,\n    isMobile,\n    anchor,\n    popupClassName,\n    popupStyle,\n    popupPlacement,\n    popupOffset,\n    modal,\n    ...props\n}: PickerDialogProps) {\n    if (isMobile) {\n        return (\n            <Sheet\n                visible={open}\n                onClose={() => {\n                    onClose('outside-press');\n                }}\n                contentClassName={b('content', {mobile: true, size: 'xl'}, popupClassName)}\n            >\n                <PickerForm\n                    {...props}\n                    size=\"xl\"\n                    onApply={() => {\n                        onClose('apply');\n                    }}\n                />\n            </Sheet>\n        );\n    }\n\n    return (\n        <Popup\n            open={open}\n            onOpenChange={(isOpen, _event, reason) => {\n                if (!isOpen) {\n                    onClose(reason);\n                }\n            }}\n            placement={popupPlacement}\n            offset={popupOffset}\n            role=\"dialog\"\n            anchorElement={anchor}\n            className={b('content', {size: props.size}, popupClassName)}\n            style={popupStyle}\n            modal={modal}\n        >\n            <PickerForm\n                {...props}\n                onApply={() => {\n                    onClose('apply');\n                }}\n            />\n        </Popup>\n    );\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css

@@ -0,0 +1,23 @@
+.g-date-relative-range-date-picker-form__pickers {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-form__pickers .g-text-input__label {
+  width: 40px;
+}
+.g-date-relative-range-date-picker-form_size_xl .g-date-relative-range-date-picker-form__pickers .g-text-input__label {
+  width: 50px;
+}
+.g-date-relative-range-date-picker-form__apply {
+  margin-block-start: var(--g-spacing-2);
+}
+.g-date-relative-range-date-picker-form__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);
+}
+.g-date-relative-range-date-picker-form__presets {
+  margin-inline: calc(-1 * var(--_--popup-content-padding));
+}
+/*# sourceMappingURL=PickerForm.css.map */

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-form';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__pickers%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20.g-text-input__label%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%2040px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D_size_xl%20&%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width:%2050px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__apply%20%7B%0A%20%20%20%20%20%20%20%20margin-block-start:%20var(--g-spacing-2);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__zone%20%7B%0A%20%20%20%20%20%20%20%20margin-block:%20var(--g-spacing-2)%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%0A%20%20%20%20%20%20%20%20border-block-start:%201px%20solid%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__presets%20%7B%0A%20%20%20%20%20%20%20%20margin-inline:%20calc(-1%20*%20var(--_--popup-content-padding));%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-form';\n\n#{$block} {\n    &__pickers {\n        display: flex;\n        flex-direction: column;\n        gap: var(--g-spacing-2);\n\n        .g-text-input__label {\n            width: 40px;\n\n            #{$block}_size_xl & {\n                width: 50px;\n            }\n        }\n    }\n\n    &__apply {\n        margin-block-start: var(--g-spacing-2);\n    }\n\n    &__zone {\n        margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));\n        margin-inline: calc(-1 * var(--_--popup-content-padding));\n\n        border-block-start: 1px solid var(--g-color-line-generic);\n    }\n\n    &__presets {\n        margin-inline: calc(-1 * var(--_--popup-content-padding));\n    }\n}\n"],"file":"PickerForm.css"}

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.d.ts

@@ -0,0 +1,33 @@
+import type { DateTime } from '@gravity-ui/date-utils';
+import type { TextInputSize } from '@gravity-ui/uikit';
+import type { DomProps, StyleProps } from "../../../types/index.js";
+import type { RelativeRangeDatePickerStateOptions } from "../../hooks/useRelativeRangeDatePickerState.js";
+import type { Preset } from "../Presets/defaultPresets.js";
+import type { PresetTab } from "../Presets/utils.js";
+import "./PickerForm.css";
+export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {
+    /** The size of the element */
+    size?: TextInputSize;
+    /**
+     * Whether the values is immutable.
+     * @default false
+     */
+    readOnly?: boolean;
+    /** 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[];
+    /** Custom docs for presets, if empty array docs will be hidden */
+    docs?: Preset[];
+}
+export declare function PickerForm(props: PickerFormProps & {
+    onApply: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@gravity-ui/uikit';
+import { block } from "../../../../utils/cn.js";
+import { RelativeDatePicker } from "../../../RelativeDatePicker/index.js";
+import { Presets } from "../Presets/Presets.js";
+import { Zones } from "../Zones/Zones.js";
+import { i18n } from "./i18n/index.js";
+import { useRelativeRangeDatePickerDialogState } from "./useRelativeRangeDatePickerDialogState.js";
+import "./PickerForm.css";
+const b = block('relative-range-date-picker-form');
+export function PickerForm(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const state = useRelativeRangeDatePickerDialogState(props);
+    const fieldProps = {
+        timeZone: state.timeZone,
+        format: props.format,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        hasClear: props.allowNullableValues,
+        readOnly: props.readOnly,
+        size: props.size,
+        errorPlacement: 'inside',
+    };
+    const { isDateUnavailable } = props;
+    return (_jsxs("div", { className: b({ size: props.size }, props.className), style: props.style, children: [_jsxs("div", { className: b('pickers'), children: [_jsx(RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, validationState: ((_a = state.startValidation) === null || _a === void 0 ? void 0 : _a.isInvalid) ? 'invalid' : undefined, errorMessage: ((_c = (_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.join('\n')) || i18n('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: i18n('From'), value: state.start, onUpdate: state.setStart })), _jsx(RelativeDatePicker, Object.assign({}, fieldProps, { isDateUnavailable: isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, 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')) || i18n('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: i18n('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? (_jsx(Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                    state.applyValue();
+                    props.onApply();
+                }, className: b('apply'), width: "max", children: i18n('Apply') })) : null, props.withPresets && !props.readOnly ? (_jsx(Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
+                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
+                    if (!props.withApplyButton) {
+                        props.onApply();
+                    }
+                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? (_jsx("div", { className: b('zone'), children: _jsx(Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+}
+//# sourceMappingURL=PickerForm.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n    /** The size of the element */\n    size?: TextInputSize;\n    /**\n     * Whether the values is immutable.\n     * @default false\n     */\n    readOnly?: boolean;\n    /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */\n    format?: string;\n    /** 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. */\n    placeholderValue?: DateTime;\n    /** Apply changes with button */\n    withApplyButton?: boolean;\n    /** Show time zone selector */\n    withZonesList?: boolean;\n    /** Show relative range presets */\n    withPresets?: boolean;\n    /** Custom preset tabs */\n    presetTabs?: PresetTab[];\n    /** Custom docs for presets, if empty array docs will be hidden */\n    docs?: Preset[];\n}\n\nexport function PickerForm(\n    props: PickerFormProps & {\n        onApply: () => void;\n    },\n) {\n    const state = useRelativeRangeDatePickerDialogState(props);\n\n    const fieldProps: RelativeDatePickerProps = {\n        timeZone: state.timeZone,\n        format: props.format,\n        minValue: props.minValue,\n        maxValue: props.maxValue,\n        hasClear: props.allowNullableValues,\n        readOnly: props.readOnly,\n        size: props.size,\n        errorPlacement: 'inside',\n    };\n    const {isDateUnavailable} = props;\n    return (\n        <div className={b({size: props.size}, props.className)} style={props.style}>\n            <div className={b('pickers')}>\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n                    }\n                    validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.startValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.startOf('day')}\n                    label={i18n('From')}\n                    value={state.start}\n                    onUpdate={state.setStart}\n                />\n                <RelativeDatePicker\n                    {...fieldProps}\n                    isDateUnavailable={\n                        isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n                    }\n                    validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n                    errorMessage={\n                        state.endValidation?.errors?.join('\\n') || i18n('Value is incorrect.')\n                    }\n                    placeholderValue={props.placeholderValue?.endOf('day')}\n                    label={i18n('To')}\n                    value={state.end}\n                    onUpdate={state.setEnd}\n                    roundUp\n                />\n            </div>\n            {props.withApplyButton && !props.readOnly ? (\n                <Button\n                    disabled={state.isInvalid}\n                    size={props.size}\n                    onClick={() => {\n                        state.applyValue();\n                        props.onApply();\n                    }}\n                    className={b('apply')}\n                    width=\"max\"\n                >\n                    {i18n('Apply')}\n                </Button>\n            ) : null}\n            {props.withPresets && !props.readOnly ? (\n                <Presets\n                    size={props.size}\n                    presetTabs={props.presetTabs}\n                    onChoosePreset={(start, end) => {\n                        state.setRange(\n                            {type: 'relative', value: start},\n                            {type: 'relative', value: end},\n                        );\n                        if (!props.withApplyButton) {\n                            props.onApply();\n                        }\n                    }}\n                    minValue={props.minValue}\n                    docs={props.docs}\n                    className={b('presets')}\n                />\n            ) : null}\n            {props.withZonesList ? (\n                <div className={b('zone')}>\n                    <Zones\n                        value={state.timeZone}\n                        onUpdate={state.setTimeZone}\n                        disabled={props.readOnly}\n                        size={props.size}\n                    />\n                </div>\n            ) : null}\n        </div>\n    );\n}\n"]}

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

@@ -1 +1,5 @@
-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;
+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) => string) & {
+    keysetData: {
+        "g-date-relative-range-date-picker-dialog": Record<"Value is required." | "\"From\" can't be after \"To\"." | "From" | "To" | "Value is incorrect." | "Apply", import("@gravity-ui/i18n").KeyData>;
+    };
+};

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

@@ -1,7 +1,6 @@
 import type { Value } from "../../../RelativeDatePicker/index.js";
-import type { RelativeRangeDatePickerState } from "../../hooks/useRelativeRangeDatePickerState.js";
-import type { RelativeRangeDatePickerProps } from "../../types.js";
-export declare function useRelativeRangeDatePickerDialogState(state: RelativeRangeDatePickerState, props: RelativeRangeDatePickerProps): {
+import type { PickerFormProps } from "./PickerForm.js";
+export declare function useRelativeRangeDatePickerDialogState(props: PickerFormProps): {
     start: Value | null;
     end: Value | null;
     timeZone: string;

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

@@ -1,43 +1,76 @@
 import React from 'react';
-import { dateTimeParse } from '@gravity-ui/date-utils';
-import { getValidationResult } from "../../../utils/validation/datePicker.js";
-import { i18n } from "./i18n/index.js";
-export function useRelativeRangeDatePickerDialogState(state, props) {
+import { useControlledState } from '@gravity-ui/uikit';
+import { getRangeValidationResult } from "../../hooks/useRelativeRangeDatePickerState.js";
+export function useRelativeRangeDatePickerDialogState(props) {
     var _a, _b, _c, _d;
-    const { withApplyButton, allowNullableValues } = props;
-    const [start, setStart] = React.useState((_b = (_a = state.value) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : null);
-    const [end, setEnd] = React.useState((_d = (_c = state.value) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : null);
-    const [innerTimeZone, setTimeZone] = React.useState(state.timeZone);
-    const timeZone = withApplyButton ? innerTimeZone : state.timeZone;
+    const [userTimeZone, setUserTimeZone] = useControlledState(props.timeZone, (_a = props.defaultTimeZone) !== null && _a !== void 0 ? _a : 'default', props.onUpdateTimeZone);
+    const [value, setValue] = useControlledState(props.value, (_b = props.defaultValue) !== null && _b !== void 0 ? _b : null, (v, tz) => {
+        var _a;
+        setUserTimeZone(tz);
+        if (value !== v || (value && userTimeZone !== tz)) {
+            (_a = props.onUpdate) === null || _a === void 0 ? void 0 : _a.call(props, v, tz);
+        }
+    });
+    const { withApplyButton } = props;
+    const [start, setStart] = React.useState((_c = value === null || value === void 0 ? void 0 : value.start) !== null && _c !== void 0 ? _c : null);
+    const [end, setEnd] = React.useState((_d = value === null || value === void 0 ? void 0 : value.end) !== null && _d !== void 0 ? _d : null);
+    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);
+    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;
+    const allowNullableValues = props.allowNullableValues;
     function setStartValue(newValue) {
+        if (props.readOnly) {
+            return;
+        }
         setStart(newValue);
         if (!withApplyButton) {
-            state.setValue(getRangeValue(newValue, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+            setValue(getRangeValue(newValue, end, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
         }
     }
     function setEndValue(newValue) {
+        if (props.readOnly) {
+            return;
+        }
         setEnd(newValue);
         if (!withApplyButton) {
-            state.setValue(getRangeValue(start, newValue, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+            setValue(getRangeValue(start, newValue, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
         }
     }
     function setTimeZoneValue(newTimeZone) {
+        if (props.readOnly) {
+            return;
+        }
         setTimeZone(newTimeZone);
+        const newStart = start ? Object.assign({}, start) : start;
+        if ((newStart === null || newStart === void 0 ? void 0 : newStart.type) === 'absolute') {
+            newStart.value = newStart.value.timeZone(newTimeZone, true);
+            setStart(newStart);
+        }
+        const newEnd = end ? Object.assign({}, end) : end;
+        if ((newEnd === null || newEnd === void 0 ? void 0 : newEnd.type) === 'absolute') {
+            newEnd.value = newEnd.value.timeZone(newTimeZone, true);
+            setEnd(newEnd);
+        }
         if (!withApplyButton) {
-            state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone: newTimeZone })), newTimeZone);
+            setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone: newTimeZone, allowNullableValues })), newTimeZone);
         }
     }
     function setRange(newStart, newEnd) {
+        if (props.readOnly) {
+            return;
+        }
         setStart(newStart);
         setEnd(newEnd);
         if (!withApplyButton) {
-            state.setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+            setValue(getRangeValue(newStart, newEnd, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
         }
     }
     function applyValue() {
-        state.setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone })), timeZone);
+        if (props.readOnly) {
+            return;
+        }
+        setValue(getRangeValue(start, end, Object.assign(Object.assign({}, props), { timeZone, allowNullableValues })), timeZone);
     }
-    const validation = React.useMemo(() => getRangeValidationResult(start, end, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
+    const validation = React.useMemo(() => getRangeValidationResult(start || end ? { start, end } : null, allowNullableValues, props.minValue, props.maxValue, props.isDateUnavailable, timeZone), [
         allowNullableValues,
         end,
         props.isDateUnavailable,
@@ -65,36 +98,10 @@ function getRangeValue(start, end, options = {}) {
     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');
+    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 ? dateTimeParse(start.value, { timeZone }) : null;
-    const endDate = end ? dateTimeParse(end.value, { timeZone, roundUp: true }) : null;
-    const startValidationResult = getValidationResult(startDate, minValue, maxValue, isDateUnavailable, timeZone);
-    if (!startDate && !allowNullableValues) {
-        startValidationResult.isInvalid = true;
-        startValidationResult.errors.push(i18n('Value is required.'));
-    }
-    const endValidationResult = getValidationResult(endDate, minValue, maxValue, isDateUnavailable, timeZone);
-    if (!endDate && !allowNullableValues) {
-        endValidationResult.isInvalid = true;
-        endValidationResult.errors.push(i18n('Value is required.'));
-    }
-    if (startDate && endDate && endDate.isBefore(startDate)) {
-        startValidationResult.isInvalid = true;
-        startValidationResult.errors.push(i18n(`"From" can't be after "To".`));
-    }
-    return {
-        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
-        startValidationResult,
-        endValidationResult,
-    };
-}
 //# sourceMappingURL=useRelativeRangeDatePickerDialogState.js.map

package/dist/esm/components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {dateTimeParse} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {getValidationResult} from '../../../utils/validation/datePicker';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from '../../types';\n\nimport {i18n} from './i18n';\n\nexport function useRelativeRangeDatePickerDialogState(\n    state: RelativeRangeDatePickerState,\n    props: RelativeRangeDatePickerProps,\n) {\n    const {withApplyButton, allowNullableValues} = props;\n\n    const [start, setStart] = React.useState<Value | null>(state.value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(state.value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(state.timeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : state.timeZone;\n\n    function setStartValue(newValue: Value | null) {\n        setStart(newValue);\n        if (!withApplyButton) {\n            state.setValue(getRangeValue(newValue, end, {...props, timeZone}), timeZone);\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        setEnd(newValue);\n        if (!withApplyButton) {\n            state.setValue(getRangeValue(start, newValue, {...props, timeZone}), timeZone);\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        setTimeZone(newTimeZone);\n        if (!withApplyButton) {\n            state.setValue(\n                getRangeValue(start, end, {...props, timeZone: newTimeZone}),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value, newEnd: Value) {\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton) {\n            state.setValue(getRangeValue(newStart, newEnd, {...props, timeZone}), timeZone);\n        }\n    }\n\n    function applyValue() {\n        state.setValue(getRangeValue(start, end, {...props, timeZone}), timeZone);\n    }\n\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start,\n                end,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime) => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        start,\n        end,\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n\nfunction getRangeValidationResult(\n    start: Value | null | undefined,\n    end: Value | null | undefined,\n    allowNullableValues: boolean | undefined,\n    minValue: DateTime | undefined,\n    maxValue: DateTime | undefined,\n    isDateUnavailable: ((v: DateTime) => boolean) | undefined,\n    timeZone: string,\n) {\n    if (!start && !end) {\n        return {isInvalid: false};\n    }\n\n    const startDate = start ? dateTimeParse(start.value, {timeZone}) : null;\n    const endDate = end ? dateTimeParse(end.value, {timeZone, roundUp: true}) : null;\n\n    const startValidationResult = getValidationResult(\n        startDate,\n        minValue,\n        maxValue,\n        isDateUnavailable,\n        timeZone,\n    );\n\n    if (!startDate && !allowNullableValues) {\n        startValidationResult.isInvalid = true;\n        startValidationResult.errors.push(i18n('Value is required.'));\n    }\n\n    const endValidationResult = getValidationResult(\n        endDate,\n        minValue,\n        maxValue,\n        isDateUnavailable,\n        timeZone,\n    );\n\n    if (!endDate && !allowNullableValues) {\n        endValidationResult.isInvalid = true;\n        endValidationResult.errors.push(i18n('Value is required.'));\n    }\n\n    if (startDate && endDate && endDate.isBefore(startDate)) {\n        startValidationResult.isInvalid = true;\n        startValidationResult.errors.push(i18n(`\"From\" can't be after \"To\".`));\n    }\n\n    return {\n        isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,\n        startValidationResult,\n        endValidationResult,\n    };\n}\n"]}
+{"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../../RelativeDatePicker';\nimport type {RangeValue} from '../../../types';\nimport {getRangeValidationResult} from '../../hooks/useRelativeRangeDatePickerState';\n\nimport type {PickerFormProps} from './PickerForm';\n\nexport function useRelativeRangeDatePickerDialogState(props: PickerFormProps) {\n    const [userTimeZone, setUserTimeZone] = useControlledState(\n        props.timeZone,\n        props.defaultTimeZone ?? 'default',\n        props.onUpdateTimeZone,\n    );\n\n    const [value, setValue] = useControlledState(\n        props.value,\n        props.defaultValue ?? null,\n        (v, tz: string) => {\n            setUserTimeZone(tz);\n            if (value !== v || (value && userTimeZone !== tz)) {\n                props.onUpdate?.(v, tz);\n            }\n        },\n    );\n\n    const {withApplyButton} = props;\n\n    const [start, setStart] = React.useState<Value | null>(value?.start ?? null);\n    const [end, setEnd] = React.useState<Value | null>(value?.end ?? null);\n    const [innerTimeZone, setTimeZone] = React.useState(userTimeZone);\n\n    const timeZone = withApplyButton ? innerTimeZone : userTimeZone;\n    const allowNullableValues = props.allowNullableValues;\n\n    function setStartValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newValue, end, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setEndValue(newValue: Value | null) {\n        if (props.readOnly) {\n            return;\n        }\n        setEnd(newValue);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(start, newValue, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function setTimeZoneValue(newTimeZone: string) {\n        if (props.readOnly) {\n            return;\n        }\n        setTimeZone(newTimeZone);\n        const newStart = start ? {...start} : start;\n        if (newStart?.type === 'absolute') {\n            newStart.value = newStart.value.timeZone(newTimeZone, true);\n            setStart(newStart);\n        }\n        const newEnd = end ? {...end} : end;\n        if (newEnd?.type === 'absolute') {\n            newEnd.value = newEnd.value.timeZone(newTimeZone, true);\n            setEnd(newEnd);\n        }\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {\n                    ...props,\n                    timeZone: newTimeZone,\n                    allowNullableValues,\n                }),\n                newTimeZone,\n            );\n        }\n    }\n\n    function setRange(newStart: Value, newEnd: Value) {\n        if (props.readOnly) {\n            return;\n        }\n        setStart(newStart);\n        setEnd(newEnd);\n        if (!withApplyButton) {\n            setValue(\n                getRangeValue(newStart, newEnd, {...props, timeZone, allowNullableValues}),\n                timeZone,\n            );\n        }\n    }\n\n    function applyValue() {\n        if (props.readOnly) {\n            return;\n        }\n        setValue(getRangeValue(start, end, {...props, timeZone, allowNullableValues}), timeZone);\n    }\n\n    const validation = React.useMemo(\n        () =>\n            getRangeValidationResult(\n                start || end ? {start, end} : null,\n                allowNullableValues,\n                props.minValue,\n                props.maxValue,\n                props.isDateUnavailable,\n                timeZone,\n            ),\n        [\n            allowNullableValues,\n            end,\n            props.isDateUnavailable,\n            props.maxValue,\n            props.minValue,\n            start,\n            timeZone,\n        ],\n    );\n\n    return {\n        start,\n        end,\n        timeZone,\n        setStart: setStartValue,\n        setEnd: setEndValue,\n        setRange,\n        setTimeZone: setTimeZoneValue,\n        applyValue,\n        isInvalid: validation.isInvalid,\n        startValidation: validation.startValidationResult,\n        endValidation: validation.endValidationResult,\n    };\n}\n\ninterface GetRangeValueOptions {\n    allowNullableValues?: boolean;\n    minValue?: DateTime;\n    maxValue?: DateTime;\n    isDateUnavailable?: (v: DateTime, endPoint: 'start' | 'end') => boolean;\n    timeZone?: string;\n}\nfunction getRangeValue(\n    start: Value | null,\n    end: Value | null,\n    options: GetRangeValueOptions = {},\n): RangeValue<Value | null> | null {\n    if (!start && !end) {\n        return null;\n    }\n\n    const {isInvalid} = getRangeValidationResult(\n        {start, end},\n        options.allowNullableValues,\n        options.minValue,\n        options.maxValue,\n        options.isDateUnavailable,\n        options.timeZone ?? 'default',\n    );\n\n    if (isInvalid) {\n        return null;\n    }\n\n    return {start, end};\n}\n"]}

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

@@ -24,8 +24,9 @@
 }
 .g-date-relative-range-date-picker-presets_size_xl .g-date-relative-range-date-picker-presets__content {
   height: 162px;
+  font-family: var(--g-text-body-font-family);
+  font-weight: var(--g-text-body-font-weight);
   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);
 }
 /*# sourceMappingURL=Presets.css.map */

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.css.map

@@ -1 +1 @@
-{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__doc%20%7B%0A%20%20%20%20%20%20%20%20margin-inline-start:%20auto;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;EC2HZ;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n    --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n    &__tabs {\n        --g-tabs-border-width: 0;\n\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n        box-shadow: inset 0 -1px var(--g-color-line-generic);\n    }\n\n    &__list-container {\n        outline: none;\n    }\n\n    &__doc {\n        margin-inline-start: auto;\n    }\n\n    &__content {\n        overflow: auto;\n\n        height: 128px;\n    }\n\n    &_size {\n        &_l {\n            #{$block}__content {\n                height: 144px;\n            }\n        }\n        &_xl {\n            #{$block}__content {\n                height: 162px;\n                @include mixins.text-body-2();\n            }\n        }\n    }\n}\n","@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h) (-$v);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector-append($mod, $selector);\n    } @else {\n        @return join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n    font-weight: var(--g-text-body-font-weight);\n}\n\n@mixin text-body-2() {\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n    font-weight: var(--g-text-body-font-weight);\n}\n\n@mixin text-body-3() {\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n    font-weight: var(--g-text-body-font-weight);\n}\n\n@mixin text-body-short() {\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n    font-weight: var(--g-text-body-font-weight);\n}\n\n@mixin text-caption-1() {\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n    font-weight: var(--g-text-caption-font-weight);\n}\n\n@mixin text-caption-2() {\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n    font-weight: var(--g-text-caption-font-weight);\n}\n\n@mixin text-header-1() {\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n    font-weight: var(--g-text-header-font-weight);\n}\n\n@mixin text-header-2() {\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n    font-weight: var(--g-text-header-font-weight);\n}\n\n@mixin text-subheader-1() {\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n    font-weight: var(--g-text-subheader-font-weight);\n}\n\n@mixin text-subheader-2() {\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n    font-weight: var(--g-text-subheader-font-weight);\n}\n\n@mixin text-subheader-3() {\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n    font-weight: var(--g-text-subheader-font-weight);\n}\n\n@mixin text-display-1() {\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n    font-weight: var(--g-text-display-font-weight);\n}\n\n@mixin text-display-2() {\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n    font-weight: var(--g-text-display-font-weight);\n}\n\n@mixin text-display-3() {\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n    font-weight: var(--g-text-display-font-weight);\n}\n\n@mixin text-display-4() {\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n    font-weight: var(--g-text-display-font-weight);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-font-family-monospace);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n    font-weight: var(--g-text-code-font-weight);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n"],"file":"Presets.css"}
+{"version":3,"sources":["components/RelativeRangeDatePicker/components/Presets/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-presets';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20--g-list-item-padding:%200%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20&__tabs%20%7B%0A%20%20%20%20%20%20%20%20--g-tabs-border-width:%200;%0A%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20padding-inline:%20var(--_--g-date-picker-presets-padding,%200);%0A%0A%20%20%20%20%20%20%20%20box-shadow:%20inset%200%20-1px%20var(--g-color-line-generic);%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__list-container%20%7B%0A%20%20%20%20%20%20%20%20outline:%20none;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__doc%20%7B%0A%20%20%20%20%20%20%20%20margin-inline-start:%20auto;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20overflow:%20auto;%0A%0A%20%20%20%20%20%20%20%20height:%20128px;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&_size%20%7B%0A%20%20%20%20%20%20%20%20&_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20144px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%23%7B$block%7D__content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height:%20162px;%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/Presets/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;;AAEA;EACI;EAEA;EACA;EACA;EAEA;EAEA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAKI;EACI;;AAIJ;EACI;EC+HZ;EACA;EACA;EACA","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-presets';\n\n#{$block} {\n    --g-list-item-padding: 0 var(--_--g-date-picker-presets-padding, 0);\n\n    &__tabs {\n        --g-tabs-border-width: 0;\n\n        display: flex;\n        align-items: center;\n        gap: var(--g-spacing-2);\n\n        padding-inline: var(--_--g-date-picker-presets-padding, 0);\n\n        box-shadow: inset 0 -1px var(--g-color-line-generic);\n    }\n\n    &__list-container {\n        outline: none;\n    }\n\n    &__doc {\n        margin-inline-start: auto;\n    }\n\n    &__content {\n        overflow: auto;\n\n        height: 128px;\n    }\n\n    &_size {\n        &_l {\n            #{$block}__content {\n                height: 144px;\n            }\n        }\n        &_xl {\n            #{$block}__content {\n                height: 162px;\n                @include mixins.text-body-2();\n            }\n        }\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h) (-$v);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Presets.css"}

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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { List, Tabs } from '@gravity-ui/uikit';
+import { List, Tab, TabList, TabPanel, TabProvider } from '@gravity-ui/uikit';
 import { block } from "../../../../utils/cn.js";
 import { PresetsDoc } from "./PresetsDoc.js";
 import { filterPresetTabs, getDefaultPresetTabs } from "./utils.js";
@@ -23,7 +23,7 @@ export function Presets({ className, size = 'm', minValue, withTime, onChoosePre
     if (activeTab.id !== activeTabId) {
         setActiveTab(activeTab.id);
     }
-    return (_jsxs("div", { className: b({ size }, className), children: [_jsxs("div", { className: b('tabs'), children: [_jsx(Tabs, { activeTab: activeTabId, onSelectTab: setActiveTab, items: tabs, size: size === 's' ? 'm' : size }), _jsx(PresetsDoc, { className: b('doc'), size: size, docs: docs })] }), _jsx("div", { className: b('content'), children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }));
+    return (_jsx("div", { className: b({ size }, className), children: _jsxs(TabProvider, { value: activeTabId, onUpdate: setActiveTab, children: [_jsxs("div", { className: b('tabs'), children: [_jsx(TabList, { size: size === 's' ? 'm' : size, children: tabs.map(({ id, title }) => (_jsx(Tab, { value: id, children: title }, id))) }), _jsx(PresetsDoc, { className: b('doc'), size: size, docs: docs })] }), _jsx(TabPanel, { className: b('content'), value: activeTabId, children: _jsx(PresetsList, { presets: activeTab.presets, onChoosePreset: onChoosePreset, size: size }) })] }) }));
 }
 export const SIZE_TO_ITEM_HEIGHT = {
     s: 28,