npm - @gravity-ui/date-components - Versions diffs - 3.0.0-beta.0 → 3.0.0 - Mend

@gravity-ui/date-components 3.0.0-beta.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAGzC,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,kBAAkB,EAAC,6CAAoC;AAI/D,OAAO,EAAC,OAAO,EAAC,8BAA2B;AAG3C,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAC5B,OAAO,EAAC,qCAAqC,EAAC,mDAAgD;AAE9F,0BAA2B;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC;AA0BnD,MAAM,UAAU,UAAU,CACtB,KAEC;;IAED,MAAM,KAAK,GAAG,qCAAqC,CAAC,KAAK,CAAC,CAAC;IAE3D,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,mBAAmB;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,cAAc,EAAE,QAAQ;KAC3B,CAAC;IACF,MAAM,EAAC,iBAAiB,EAAC,GAAG,KAAK,CAAC;IAClC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACtE,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAC,kBAAkB,oBACX,UAAU,IACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAE9E,eAAe,EAAE,CAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,SAAS,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzE,YAAY,EACR,CAAA,MAAA,MAAA,KAAK,CAAC,eAAe,0CAAE,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,KAAI,IAAI,CAAC,qBAAqB,CAAC,EAE5E,gBAAgB,EAAE,MAAA,KAAK,CAAC,gBAAgB,0CAAE,OAAO,CAAC,KAAK,CAAC,EACxD,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,EACF,KAAC,kBAAkB,oBACX,UAAU,IACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAE5E,eAAe,EAAE,CAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,SAAS,EAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EACR,CAAA,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,MAAM,0CAAE,IAAI,CAAC,IAAI,CAAC,KAAI,IAAI,CAAC,qBAAqB,CAAC,EAE1E,gBAAgB,EAAE,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EACjB,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,EACtB,OAAO,UACT,IACA,EACL,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACxC,KAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,UAAU,EAAE,CAAC;oBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,KAAK,YAEV,IAAI,CAAC,OAAO,CAAC,GACT,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3B,KAAK,CAAC,QAAQ,CACV,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,EAChC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,CACjC,CAAC;oBACF,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE,CAAC;wBACzB,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC;gBACL,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,GACA,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","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/useRelativeRangeDatePickerDialogState.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRelativeRangeDatePickerDialogState.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/useRelativeRangeDatePickerDialogState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAE1B~~,OAAO,EAAC,~~aAAa~~,EAAC,MAAM,~~wBAAwB~~,CAAC;~~AAKrD~~,OAAO,EAAC,~~mBAAmB~~,EAAC,~~gDAA6C~~;~~AAIzE~~,~~OAAO~~,~~EAAC~~,~~IAAI~~,~~EAAC~~,~~wBAAe;AAE5B~~,MAAM,~~UAAU~~,~~qCAAqC~~,~~CACjD~~,~~KAAmC~~,~~EACnC~~,~~KAAmC;;IAEnC~~,MAAM,~~EAAC~~,eAAe,EAAE,~~mBAAmB~~,EAAC,GAAG,KAAK,CAAC;~~IAErD~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAe,MAAA,~~MAAA~~,KAAK,~~CAAC~~,KAAK,~~0CAAE~~,KAAK,mCAAI,IAAI,CAAC,CAAC;~~IACnF~~,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAe,MAAA,~~MAAA~~,KAAK,~~CAAC~~,KAAK,~~0CAAE~~,GAAG,mCAAI,IAAI,CAAC,CAAC;~~IAC7E~~,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,~~KAAK~~,CAAC,~~QAAQ,~~CAAC~~,CAAC~~;~~IAEpE~~,MAAM,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,~~QAAQ~~,CAAC;~~IAElE~~,SAAS,aAAa,CAAC,QAAsB;QACzC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,~~KAAK,CAAC,~~QAAQ,~~CAAC~~,aAAa,CAAC,QAAQ,EAAE,GAAG,kCAAM,KAAK,KAAE,QAAQ,IAAE,~~EAAE~~,QAAQ,~~CAAC~~,CAAC;~~QACjF~~,CAAC;IACL,CAAC;IAED,SAAS,WAAW,CAAC,QAAsB;QACvC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACjB,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,~~KAAK,CAAC,~~QAAQ,~~CAAC~~,aAAa,CAAC,KAAK,EAAE,QAAQ,kCAAM,KAAK,KAAE,QAAQ,IAAE,~~EAAE~~,QAAQ,~~CAAC~~,CAAC;~~QACnF~~,CAAC;IACL,CAAC;IAED,SAAS,gBAAgB,CAAC,WAAmB;QACzC,WAAW,CAAC,WAAW,CAAC,CAAC;QACzB,IAAI,CAAC,~~eAAe~~,EAAE,CAAC;~~YACnB~~,KAAK,CAAC,QAAQ,~~CACV~~,aAAa,CAAC,~~KAAK~~,EAAE,~~GAAG~~,~~kCAAM~~,KAAK,~~KAAE~~,QAAQ,EAAE,WAAW,~~IAAE~~,~~EAC5D~~,WAAW,CACd,CAAC;QACN,CAAC;IACL,CAAC;IAED,SAAS,QAAQ,CAAC,QAAe,EAAE,MAAa;QAC5C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,CAAC,MAAM,CAAC,CAAC;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,~~KAAK,CAAC,~~QAAQ,~~CAAC~~,aAAa,CAAC,QAAQ,EAAE,MAAM,kCAAM,KAAK,KAAE,QAAQ,IAAE,~~EAAE~~,QAAQ,~~CAAC~~,CAAC;~~QACpF~~,CAAC;IACL,CAAC;IAED,SAAS,UAAU;QACf,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,EAAE,GAAG,kCAAM,KAAK,KAAE,QAAQ,IAAE,EAAE,QAAQ,CAAC,CAAC;~~IAC9E~~,CAAC;IAED,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC5B,GAAG,EAAE,CACD,wBAAwB,CACpB,KAAK,~~EACL~~,GAAG,~~EACH~~,mBAAmB,EACnB,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,iBAAiB,EACvB,QAAQ,CACX,EACL;QACI,mBAAmB;QACnB,GAAG;QACH,KAAK,CAAC,iBAAiB;QACvB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,QAAQ;QACd,KAAK;QACL,QAAQ;KACX,CACJ,CAAC;IAEF,OAAO;QACH,KAAK;QACL,GAAG;QACH,QAAQ;QACR,QAAQ,EAAE,aAAa;QACvB,MAAM,EAAE,WAAW;QACnB,QAAQ;QACR,WAAW,EAAE,gBAAgB;QAC7B,UAAU;QACV,SAAS,EAAE,UAAU,CAAC,SAAS;QAC/B,eAAe,EAAE,UAAU,CAAC,qBAAqB;QACjD,aAAa,EAAE,UAAU,CAAC,mBAAmB;KAChD,CAAC;AACN,CAAC;AASD,SAAS,aAAa,CAClB,KAAmB,EACnB,GAAiB,EACjB,UAAgC,EAAE;;IAElC,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,EAAC,SAAS,EAAC,GAAG,wBAAwB,CACxC,KAAK,~~EACL~~,GAAG,~~EACH~~,OAAO,CAAC,mBAAmB,EAC3B,OAAO,CAAC,QAAQ,EAChB,OAAO,CAAC,QAAQ,EAChB,OAAO,CAAC,iBAAiB,EACzB,MAAA,OAAO,CAAC,QAAQ,mCAAI,SAAS,CAChC,CAAC;IAEF,IAAI,SAAS,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,wBAAwB,CAC7B,KAA+B,EAC/B,GAA6B,EAC7B,mBAAwC,EACxC,QAA8B,EAC9B,QAA8B,EAC9B,iBAAyD,EACzD,QAAgB;IAEhB,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;QACjB,OAAO,EAAC,SAAS,EAAE,KAAK,EAAC,CAAC;IAC9B,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACxE,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAEjF,MAAM,qBAAqB,GAAG,mBAAmB,CAC7C,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,QAAQ,CACX,CAAC;IAEF,IAAI,CAAC,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACrC,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAClE,CAAC;IAED,MAAM,mBAAmB,GAAG,mBAAmB,CAC3C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,QAAQ,CACX,CAAC;IAEF,IAAI,CAAC,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACnC,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC;QACrC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,SAAS,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QACtD,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO;QACH,SAAS,EAAE,qBAAqB,CAAC,SAAS,IAAI,mBAAmB,CAAC,SAAS;QAC3E,qBAAqB;QACrB,mBAAmB;KACtB,CAAC;AACN,CAAC","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"]}
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 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.js CHANGED Viewed

@@ -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,

package/dist/esm/components/RelativeRangeDatePicker/components/Presets/Presets.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,IAAI,EAAE,~~IAAI~~,EAAC,MAAM,mBAAmB,CAAC;~~AAE7C~~,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAE3C,OAAO,EAAC,UAAU,EAAC,wBAAqB;AAExC,OAAO,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,mBAAgB;AAG/D,uBAAwB;AAExB,MAAM,CAAC,GAAG,KAAK,CAAC,oCAAoC,CAAC,CAAC;AAWtD,MAAM,UAAU,OAAO,CAAC,EACpB,SAAS,EACT,IAAI,GAAG,GAAG,EACV,QAAQ,EACR,QAAQ,EACR,cAAc,EACd,UAAU,EACV,IAAI,GACM;;IACV,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,gBAAgB,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,oBAAoB,CAAC,EAAC,QAAQ,EAAC,CAAC,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAErC,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,MAAA,IAAI,CAAC,CAAC,CAAC,0CAAE,EAAE,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,mCAAI,IAAI,CAAC,CAAC,CAAC,CAAC;IACxE,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,SAAS,CAAC,EAAE,KAAK,WAAW,EAAE,CAAC;QAC/B,YAAY,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;IAED,OAAO,CACH,~~eAAK~~,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAC,EAAE,SAAS,CAAC,~~aAChC~~,eAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACrB,KAAC,~~IAAI~~,~~IACD~~,~~SAAS~~,EAAE,~~WAAW~~,~~EACtB~~,~~WAAW~~,~~EAAE~~,~~YAAY~~,~~EACzB~~,~~KAAK~~,~~EAAE~~,~~IAAI~~,~~EACX~~,IAAI,~~EAAE~~,IAAI,~~KAAK~~,GAAG,CAAC,CAAC,CAAC,GAAG,~~CAAC~~,~~CAAC~~,CAAC,~~IAAI~~,~~GACjC~~,~~EACF,~~KAAC,UAAU,IAAC,SAAS,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,IACzD,EACN,~~cAAK~~,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,~~YACxB~~,KAAC,WAAW,IACR,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,GACZ,~~GACA~~,~~IACJ~~,CACT,CAAC;AACN,CAAC;AACD,MAAM,CAAC,MAAM,mBAAmB,GAAG;IAC/B,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,CAAC,EAAE,EAAE;IACL,EAAE,EAAE,EAAE;CACT,CAAC;AAOF,SAAS,WAAW,CAAC,EAAC,OAAO,EAAE,cAAc,EAAE,IAAI,GAAG,GAAG,EAAmB;IACxE,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAe,IAAI,CAAC,CAAC;IAE7C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;;QACjB,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC;QACzB,MAAM,SAAS,GAAG,MAAA,MAAA,GAAG,CAAC,OAAO,0CAAE,YAAY,CAAC,OAAO,0CAAE,IAAkC,CAAC;QACxF,IAAI,IAAI,IAAI,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC;gBACD,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;gBACxC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;gBACrD,MAAM,WAAW,GAAG,GAAG,EAAE;oBACrB,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC;wBAChC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;oBAC/B,CAAC;gBACL,CAAC,CAAC;gBACF,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;gBACjD,OAAO,GAAG,EAAE;oBACR,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;gBACxD,CAAC,CAAC;YACN,CAAC;YAAC,WAAM,CAAC;gBACL,SAAS;YACb,CAAC;QACL,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACH,KAAC,IAAI,IACD,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,EACpB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,EACxB,KAAK,EAAE,OAAO,EACd,UAAU,EAAE,KAAK,EACjB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,EAChC,UAAU,EAAE,mBAAmB,CAAC,IAAI,CAAC,EACrC,WAAW,EAAE,CAAC,IAAI,EAAE,EAAE;YAClB,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QACvC,CAAC,GACH,CACL,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {List, ~~Tabs~~} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\n\nimport {PresetsDoc} from './PresetsDoc';\nimport type {Preset} from './defaultPresets';\nimport {filterPresetTabs, getDefaultPresetTabs} from './utils';\nimport type {PresetTab} from './utils';\n\nimport './Presets.scss';\n\nconst b = block('relative-range-date-picker-presets');\n\nexport interface PresetProps {\n className?: string;\n onChoosePreset: (start: string, end: string) => void;\n withTime?: boolean;\n minValue?: DateTime;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n presetTabs?: PresetTab[];\n docs?: Preset[];\n}\nexport function Presets({\n className,\n size = 'm',\n minValue,\n withTime,\n onChoosePreset,\n presetTabs,\n docs,\n}: PresetProps) {\n const tabs = React.useMemo(() => {\n return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});\n }, [withTime, minValue, presetTabs]);\n\n const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);\n\n if (tabs.length === 0) {\n return null;\n }\n\n const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];\n if (!activeTab) {\n return null;\n }\n\n if (activeTab.id !== activeTabId) {\n setActiveTab(activeTab.id);\n }\n\n return (\n <div className={b({size}, className)}>\n <~~div~~ ~~className~~={~~b('tabs')}>\n <Tabs\n activeTab={~~activeTabId}~~\n onSelectTab~~={setActiveTab}\n ~~items~~={tabs}\n size={size === 's' ? 'm' : size}\n ~~/>\~~n <PresetsDoc className={b('doc')} size={size} docs={docs} />\n </div>\n <~~div~~ className={b('content')}>\n <PresetsList\n presets={activeTab.presets}\n onChoosePreset={onChoosePreset}\n size={size}\n />\n </~~div~~>\n </div>\n );\n}\nexport const SIZE_TO_ITEM_HEIGHT = {\n s: 28,\n m: 28,\n l: 32,\n xl: 36,\n};\n\ninterface PresetsListProps {\n size?: 's' \| 'm' \| 'l' \| 'xl';\n presets: Preset[];\n onChoosePreset: (start: string, end: string) => void;\n}\nfunction PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {\n const ref = React.useRef<List<Preset>>(null);\n\n React.useEffect(() => {\n const list = ref.current;\n const container = ref.current?.refContainer.current?.node as HTMLDivElement \| undefined;\n if (list && container) {\n try {\n container.setAttribute('tabindex', '0');\n container.setAttribute('class', b('list-container'));\n const handleFocus = () => {\n if (list.getActiveItem() === null) {\n list.activateItem(0, true);\n }\n };\n container.addEventListener('focus', handleFocus);\n return () => {\n container.removeEventListener('focus', handleFocus);\n };\n } catch {\n // Oooops\n }\n }\n return undefined;\n }, []);\n\n return (\n <List\n ref={ref}\n className={b('list')}\n itemClassName={b('item')}\n items={presets}\n filterable={false}\n virtualized={false}\n renderItem={(item) => item.title}\n itemHeight={SIZE_TO_ITEM_HEIGHT[size]}\n onItemClick={(item) => {\n onChoosePreset(item.from, item.to);\n }}\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Presets.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Presets/Presets.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {List, Tab, TabList, TabPanel, TabProvider} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\n\nimport {PresetsDoc} from './PresetsDoc';\nimport type {Preset} from './defaultPresets';\nimport {filterPresetTabs, getDefaultPresetTabs} from './utils';\nimport type {PresetTab} from './utils';\n\nimport './Presets.scss';\n\nconst b = block('relative-range-date-picker-presets');\n\nexport interface PresetProps {\n className?: string;\n onChoosePreset: (start: string, end: string) => void;\n withTime?: boolean;\n minValue?: DateTime;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n presetTabs?: PresetTab[];\n docs?: Preset[];\n}\nexport function Presets({\n className,\n size = 'm',\n minValue,\n withTime,\n onChoosePreset,\n presetTabs,\n docs,\n}: PresetProps) {\n const tabs = React.useMemo(() => {\n return filterPresetTabs(presetTabs ?? getDefaultPresetTabs({withTime}), {minValue});\n }, [withTime, minValue, presetTabs]);\n\n const [activeTabId, setActiveTab] = React.useState(tabs[0]?.id);\n\n if (tabs.length === 0) {\n return null;\n }\n\n const activeTab = tabs.find((tab) => tab.id === activeTabId) ?? tabs[0];\n if (!activeTab) {\n return null;\n }\n\n if (activeTab.id !== activeTabId) {\n setActiveTab(activeTab.id);\n }\n\n return (\n <div className={b({size}, className)}>\n <TabProvider value={activeTabId} onUpdate={setActiveTab}>\n <div className={b('tabs')}>\n <TabList size={size === 's' ? 'm' : size}>\n {tabs.map(({id, title}) => (\n <Tab key={id} value={id}>\n {title}\n </Tab>\n ))}\n </TabList>\n <PresetsDoc className={b('doc')} size={size} docs={docs} />\n </div>\n <TabPanel className={b('content')} value={activeTabId}>\n <PresetsList\n presets={activeTab.presets}\n onChoosePreset={onChoosePreset}\n size={size}\n />\n </TabPanel>\n </TabProvider>\n </div>\n );\n}\nexport const SIZE_TO_ITEM_HEIGHT = {\n s: 28,\n m: 28,\n l: 32,\n xl: 36,\n};\n\ninterface PresetsListProps {\n size?: 's' \| 'm' \| 'l' \| 'xl';\n presets: Preset[];\n onChoosePreset: (start: string, end: string) => void;\n}\nfunction PresetsList({presets, onChoosePreset, size = 'm'}: PresetsListProps) {\n const ref = React.useRef<List<Preset>>(null);\n\n React.useEffect(() => {\n const list = ref.current;\n const container = ref.current?.refContainer.current?.node as HTMLDivElement \| undefined;\n if (list && container) {\n try {\n container.setAttribute('tabindex', '0');\n container.setAttribute('class', b('list-container'));\n const handleFocus = () => {\n if (list.getActiveItem() === null) {\n list.activateItem(0, true);\n }\n };\n container.addEventListener('focus', handleFocus);\n return () => {\n container.removeEventListener('focus', handleFocus);\n };\n } catch {\n // Oooops\n }\n }\n return undefined;\n }, []);\n\n return (\n <List\n ref={ref}\n className={b('list')}\n itemClassName={b('item')}\n items={presets}\n filterable={false}\n virtualized={false}\n renderItem={(item) => item.title}\n itemHeight={SIZE_TO_ITEM_HEIGHT[size]}\n onItemClick={(item) => {\n onChoosePreset(item.from, item.to);\n }}\n />\n );\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/components/Zones/Zones.js CHANGED Viewed

@@ -47,7 +47,7 @@ export function Zones(props) {
             }
         }, width: "max", renderControl: (controlProps) => {
             const value = timeZone === 'system' || timeZone === 'default' ? i18n(timeZone) : timeZone;
-            return (_jsxs(Button, { component: "button", ref: controlProps.ref, onClick: controlProps.triggerProps.onClick, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, "aria-haspopup": "listbox", "aria-expanded": controlProps.open, onKeyDown: controlProps.triggerProps.onKeyDown, className: b('control'), children: [`${value} (${getTimeZoneOffset(timeZone)})`, _jsx(Icon, { className: b('control-icon'), data: ChevronRight, size: props.isMobile ? 20 : 16 })] }));
+            return (_jsxs(Button, { ref: controlProps.ref, onClick: controlProps.triggerProps.onClick, view: "flat-secondary", width: "max", pin: "clear-clear", size: size, disabled: props.disabled, "aria-haspopup": "listbox", "aria-expanded": controlProps.open, onKeyDown: controlProps.triggerProps.onKeyDown, className: b('control'), children: [`${value} (${getTimeZoneOffset(timeZone)})`, _jsx(Icon, { className: b('control-icon'), data: ChevronRight, size: props.isMobile ? 20 : 16 })] }));
         }, renderOption: ({ value, content }) => {
             const v = content !== null && content !== void 0 ? content : value;
             return (_jsxs("span", { className: b('item'), children: [_jsxs("span", { className: b('item-title'), title: value, children: [v, "\u00A0"] }), _jsx(Text, { color: "secondary", children: getTimeZoneOffset(value) })] }));

package/dist/esm/components/RelativeRangeDatePicker/components/Zones/Zones.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Zones.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Zones/Zones.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG7D,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,uBAAoB;AAEjE,OAAO,EAAC,IAAI,EAAC,wBAAe;AAE5B,qBAAsB;AAEtB,MAAM,MAAM,GAA6D,EAAE,CAAC;AAE5E,MAAM,KAAK,GAAG,gBAAgB,EAAE,CAAC,MAAM,CAAuC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;IAC1F,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,IAAI,SAAS,EAAE,CAAC;QACZ,IAAI,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC9B,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,KAAK,GAAG,EAAC,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,EAAC,CAAC;YACxC,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrB,CAAC;QACD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAC,KAAK,EAAC,CAAC,CAAC;IAChC,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,EAAE,EAAE,CAAC,CAAC;AAEP,KAAK,CAAC,OAAO,CAAC;IACV,KAAK,EAAE,KAAK;CACf,CAAC,CAAC;AAEH,KAAK,CAAC,OAAO,CAAC;IACV,KAAK,EAAE,QAAQ;IACf,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC1B,CAAC;CACJ,CAAC,CAAC;AAEH,KAAK,CAAC,OAAO,CAAC;IACV,KAAK,EAAE,SAAS;IAChB,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3B,CAAC;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,GAAG,KAAK,CAAC,kCAAkC,CAAC,CAAC;AAUpD,MAAM,UAAU,KAAK,CAAC,KAAiB;IACnC,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAChD,OAAO,CACH,KAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,CAAC,QAAQ,CAAC,EACjB,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACZ,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YAChB,IAAI,EAAE,EAAE,CAAC;gBACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;QACL,CAAC,EACD,KAAK,EAAC,KAAK,EACX,aAAa,EAAE,CAAC,YAAY,EAAE,EAAE;YAC5B,MAAM,KAAK,GACP,QAAQ,KAAK,QAAQ,IAAI,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;YAChF,OAAO,CACH,MAAC,MAAM,IACH,~~SAAS,EAAC,QAAQ,EAClB,~~GAAG,EAAE,YAAY,CAAC,~~GAAG~~,~~EACrB~~,OAAO,EAAE,YAAY,CAAC,YAAY,CAAC,OAAO,EAC1C,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAC,KAAK,EACX,GAAG,EAAC,aAAa,EACjB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACV,SAAS,mBACR,YAAY,CAAC,IAAI,EAChC,SAAS,EAAE,YAAY,CAAC,YAAY,CAAC,SAAS,EAC9C,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aAEtB,GAAG,KAAK,KAAK,iBAAiB,CAAC,QAAQ,CAAC,GAAG,EAC5C,KAAC,IAAI,IACD,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAC5B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAChC,IACG,CACZ,CAAC;QACN,CAAC,EACD,YAAY,EAAE,CAAC,EAAC,KAAK,EAAE,OAAO,EAAC,EAAE,EAAE;YAC/B,MAAM,CAAC,GAAG,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,CAAC;YAC3B,OAAO,CACH,gBAAM,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,aACtB,gBAAM,SAAS,EAAE,CAAC,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,KAAK,aACzC,CAAC,cACC,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,YAAE,iBAAiB,CAAC,KAAK,CAAC,GAAQ,IACtD,CACV,CAAC;QACN,CAAC,EACD,UAAU,SACZ,CACL,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport {getTimeZonesList} from '@gravity-ui/date-utils';\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Button, Icon, Select, Text} from '@gravity-ui/uikit';\nimport type {SelectOption, SelectOptionGroup} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getTimeZoneOffset, normalizeTimeZone} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './Zones.scss';\n\nconst groups: Record<string, {label: string; options: SelectOption[]}> = {};\n\nconst zones = getTimeZonesList().reduce<(SelectOption \| SelectOptionGroup)[]>((opts, value) => {\n const [groupName] = value.split('/');\n if (groupName) {\n let group = groups[groupName];\n if (!group) {\n group = {label: groupName, options: []};\n groups[groupName] = group;\n opts.push(group);\n }\n group.options.push({value});\n }\n return opts;\n}, []);\n\nzones.unshift({\n value: 'UTC',\n});\n\nzones.unshift({\n value: 'system',\n get content() {\n return i18n('system');\n },\n});\n\nzones.unshift({\n value: 'default',\n get content() {\n return i18n('default');\n },\n});\n\nconst b = block('relative-range-date-picker-zones');\n\nexport interface ZonesProps {\n value: string;\n onUpdate: (timeZone: string) => void;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n isMobile?: boolean;\n disabled?: boolean;\n}\n\nexport function Zones(props: ZonesProps) {\n const timeZone = normalizeTimeZone(props.value);\n const size = props.isMobile ? 'xl' : props.size;\n return (\n <Select\n disabled={props.disabled}\n value={[timeZone]}\n options={zones}\n size={size}\n onUpdate={(v) => {\n const tz = v[0];\n if (tz) {\n props.onUpdate(tz);\n }\n }}\n width=\"max\"\n renderControl={(controlProps) => {\n const value =\n timeZone === 'system' \|\| timeZone === 'default' ? i18n(timeZone) : timeZone;\n return (\n <Button\n ~~component=\"button\"\n~~ ref={controlProps.ref}\n onClick={controlProps.triggerProps.onClick}\n view=\"flat-secondary\"\n width=\"max\"\n pin=\"clear-clear\"\n size={size}\n disabled={props.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={controlProps.open}\n onKeyDown={controlProps.triggerProps.onKeyDown}\n className={b('control')}\n >\n {`${value} (${getTimeZoneOffset(timeZone)})`}\n <Icon\n className={b('control-icon')}\n data={ChevronRight}\n size={props.isMobile ? 20 : 16}\n />\n </Button>\n );\n }}\n renderOption={({value, content}) => {\n const v = content ?? value;\n return (\n <span className={b('item')}>\n <span className={b('item-title')} title={value}>\n {v} \n </span>\n <Text color=\"secondary\">{getTimeZoneOffset(value)}</Text>\n </span>\n );\n }}\n filterable\n />\n );\n}\n"]}
1	+ {"version":3,"file":"Zones.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Zones/Zones.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {getTimeZonesList} from '@gravity-ui/date-utils';\nimport {ChevronRight} from '@gravity-ui/icons';\nimport {Button, Icon, Select, Text} from '@gravity-ui/uikit';\nimport type {SelectOption, SelectOptionGroup} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getTimeZoneOffset, normalizeTimeZone} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './Zones.scss';\n\nconst groups: Record<string, {label: string; options: SelectOption[]}> = {};\n\nconst zones = getTimeZonesList().reduce<(SelectOption \| SelectOptionGroup)[]>((opts, value) => {\n const [groupName] = value.split('/');\n if (groupName) {\n let group = groups[groupName];\n if (!group) {\n group = {label: groupName, options: []};\n groups[groupName] = group;\n opts.push(group);\n }\n group.options.push({value});\n }\n return opts;\n}, []);\n\nzones.unshift({\n value: 'UTC',\n});\n\nzones.unshift({\n value: 'system',\n get content() {\n return i18n('system');\n },\n});\n\nzones.unshift({\n value: 'default',\n get content() {\n return i18n('default');\n },\n});\n\nconst b = block('relative-range-date-picker-zones');\n\nexport interface ZonesProps {\n value: string;\n onUpdate: (timeZone: string) => void;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n isMobile?: boolean;\n disabled?: boolean;\n}\n\nexport function Zones(props: ZonesProps) {\n const timeZone = normalizeTimeZone(props.value);\n const size = props.isMobile ? 'xl' : props.size;\n return (\n <Select\n disabled={props.disabled}\n value={[timeZone]}\n options={zones}\n size={size}\n onUpdate={(v) => {\n const tz = v[0];\n if (tz) {\n props.onUpdate(tz);\n }\n }}\n width=\"max\"\n renderControl={(controlProps) => {\n const value =\n timeZone === 'system' \|\| timeZone === 'default' ? i18n(timeZone) : timeZone;\n return (\n <Button\n ref={controlProps.ref as React.Ref<HTMLButtonElement>}\n onClick={controlProps.triggerProps.onClick}\n view=\"flat-secondary\"\n width=\"max\"\n pin=\"clear-clear\"\n size={size}\n disabled={props.disabled}\n aria-haspopup=\"listbox\"\n aria-expanded={controlProps.open}\n onKeyDown={controlProps.triggerProps.onKeyDown}\n className={b('control')}\n >\n {`${value} (${getTimeZoneOffset(timeZone)})`}\n <Icon\n className={b('control-icon')}\n data={ChevronRight}\n size={props.isMobile ? 20 : 16}\n />\n </Button>\n );\n }}\n renderOption={({value, content}) => {\n const v = content ?? value;\n return (\n <span className={b('item')}>\n <span className={b('item-title')} title={value}>\n {v} \n </span>\n <Text color=\"secondary\">{getTimeZoneOffset(value)}</Text>\n </span>\n );\n }}\n filterable\n />\n );\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.d.ts CHANGED Viewed

@@ -21,7 +21,18 @@ export interface RelativeRangeDatePickerStateOptions {
     /** The maximum allowed date that a user may select. */
     maxValue?: DateTime;
     /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */
-    isDateUnavailable?: (date: DateTime) => boolean;
+    isDateUnavailable?: (date: DateTime, endpoint: 'start' | 'end') => boolean;
     allowNullableValues?: boolean;
 }
 export declare function useRelativeRangeDatePickerState(props: RelativeRangeDatePickerStateOptions): RelativeRangeDatePickerState;
+export declare function getRangeValidationResult(value: RelativeRangeDatePickerValue | null, allowNullableValues: boolean | undefined, minValue: DateTime | undefined, maxValue: DateTime | undefined, isDateUnavailable: ((v: DateTime, endpoint: 'start' | 'end') => boolean) | undefined, timeZone: string): {
+    isInvalid: boolean;
+    errors: never[];
+    startValidationResult?: undefined;
+    endValidationResult?: undefined;
+} | {
+    isInvalid: boolean;
+    startValidationResult: import("../../utils/validation/datePicker.js").ValidationResult;
+    endValidationResult: import("../../utils/validation/datePicker.js").ValidationResult;
+    errors: string[];
+};

package/dist/esm/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.js CHANGED Viewed

@@ -26,18 +26,18 @@ export function useRelativeRangeDatePickerState(props) {
             }
         } }, validation);
 }
-function getRangeValidationResult(value, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
+export function getRangeValidationResult(value, allowNullableValues, minValue, maxValue, isDateUnavailable, timeZone) {
     if (!value) {
         return { isInvalid: false, errors: [] };
     }
     const startDate = value.start ? dateTimeParse(value.start.value, { timeZone }) : null;
     const endDate = value.end ? dateTimeParse(value.end.value, { timeZone, roundUp: true }) : null;
-    const startValidationResult = getValidationResult(startDate, minValue, maxValue, isDateUnavailable, timeZone, i18n('"From"'));
+    const startValidationResult = getValidationResult(startDate, minValue, maxValue, isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined, timeZone, i18n('"From"'));
     if (!startDate && !allowNullableValues) {
         startValidationResult.isInvalid = true;
         startValidationResult.errors.push(i18n('"From" is required.'));
     }
-    const endValidationResult = getValidationResult(endDate, minValue, maxValue, isDateUnavailable, timeZone, i18n('"To"'));
+    const endValidationResult = getValidationResult(endDate, minValue, maxValue, isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined, timeZone, i18n('"To"'));
     if (!endDate && !allowNullableValues) {
         endValidationResult.isInvalid = true;
         endValidationResult.errors.push(i18n('"To" is required.'));
@@ -48,6 +48,8 @@ function getRangeValidationResult(value, allowNullableValues, minValue, maxValue
     }
     return {
         isInvalid: startValidationResult.isInvalid || endValidationResult.isInvalid,
+        startValidationResult,
+        endValidationResult,
         errors: startValidationResult.errors.concat(endValidationResult.errors),
     };
 }

package/dist/esm/components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRelativeRangeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,OAAO,EAAC,kBAAkB,EAAC,MAAM,mBAAmB,CAAC;AAIrD,OAAO,EAAC,mBAAmB,EAAC,6CAA0C;AACtE,OAAO,EAAC,IAAI,EAAC,yBAAgB;AA4B7B,MAAM,UAAU,+BAA+B,CAC3C,KAA0C;;IAE1C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,KAAK,EAAE,MAAA,KAAK,CAAC,YAAY,mCAAI,IAAI,CAAC,CAAC;IAEtF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,kBAAkB,CAC9C,KAAK,CAAC,QAAQ,EACd,MAAA,KAAK,CAAC,eAAe,mCAAI,SAAS,EAClC,KAAK,CAAC,gBAAgB,CACzB,CAAC;IAEF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAC5B,GAAG,EAAE,CACD,wBAAwB,CACpB,KAAK,EACL,KAAK,CAAC,mBAAmB,EACzB,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,iBAAiB,EACvB,QAAQ,CACX,EACL;QACI,KAAK;QACL,KAAK,CAAC,mBAAmB;QACzB,KAAK,CAAC,iBAAiB;QACvB,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,QAAQ;QACd,QAAQ;KACX,CACJ,CAAC;IAEF,uBACI,KAAK;QACL,QAAQ;QACR,QAAQ,CAAC,CAAC,EAAE,EAAE;;YACV,QAAQ,CAAC,CAAC,CAAC,CAAC;YACZ,WAAW,CAAC,EAAE,CAAC,CAAC;YAChB,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,QAAQ,KAAK,EAAE,CAAC,EAAE,CAAC;gBAC5C,MAAA,KAAK,CAAC,QAAQ,sDAAG,CAAC,EAAE,EAAE,CAAC,CAAC;YAC5B,CAAC;QACL,CAAC,IACE,UAAU,EACf;AACN,CAAC;AAED,~~SAAS~~,wBAAwB,~~CAC7B~~,KAA0C,EAC1C,mBAAwC,EACxC,QAA8B,EAC9B,QAA8B,EAC9B,~~iBAAyD~~,~~EACzD~~,QAAgB;IAEhB,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,EAAC,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;IAC1C,CAAC;IAED,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACpF,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,EAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE7F,MAAM,qBAAqB,GAAG,mBAAmB,CAC7C,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,iBAAiB,~~EACjB~~,QAAQ,EACR,IAAI,CAAC,QAAQ,CAAC,CACjB,CAAC;IAEF,IAAI,CAAC,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACrC,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC;IACnE,CAAC;IAED,MAAM,mBAAmB,GAAG,mBAAmB,CAC3C,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,iBAAiB,~~EACjB~~,QAAQ,EACR,IAAI,CAAC,MAAM,CAAC,CACf,CAAC;IAEF,IAAI,CAAC,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;QACnC,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC;QACrC,mBAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,SAAS,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;QACtD,qBAAqB,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,qBAAqB,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC,CAAC;IAC3E,CAAC;IAED,OAAO;QACH,SAAS,EAAE,qBAAqB,CAAC,SAAS,IAAI,mBAAmB,CAAC,SAAS;QAC3E,MAAM,EAAE,qBAAqB,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,CAAC;KAC1E,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport {dateTimeParse} from '@gravity-ui/date-utils';\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 {getValidationResult} from '../../utils/validation/datePicker';\nimport {i18n} from '../i18n';\n\nexport type RelativeRangeDatePickerValue = RangeValue<Value \| null>;\n\nexport interface RelativeRangeDatePickerState {\n value: RelativeRangeDatePickerValue \| null;\n timeZone: string;\n setValue: (value: RelativeRangeDatePickerValue \| null, timeZone: string) => void;\n isInvalid: boolean;\n errors: string[];\n}\n\nexport interface RelativeRangeDatePickerStateOptions {\n value?: RelativeRangeDatePickerValue \| null;\n defaultValue?: RelativeRangeDatePickerValue;\n onUpdate?: (value: RelativeRangeDatePickerValue \| null, timeZone: string) => void;\n timeZone?: string;\n defaultTimeZone?: string;\n onUpdateTimeZone?: (timeZone: string) => void;\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n isDateUnavailable?: (date: DateTime) => boolean;\n allowNullableValues?: boolean;\n}\n\nexport function useRelativeRangeDatePickerState(\n props: RelativeRangeDatePickerStateOptions,\n): RelativeRangeDatePickerState {\n const [value, setValue] = useControlledState(props.value, props.defaultValue ?? null);\n\n const [timeZone, setTimeZone] = useControlledState(\n props.timeZone,\n props.defaultTimeZone ?? 'default',\n props.onUpdateTimeZone,\n );\n\n const validation = React.useMemo(\n () =>\n getRangeValidationResult(\n value,\n props.allowNullableValues,\n props.minValue,\n props.maxValue,\n props.isDateUnavailable,\n timeZone,\n ),\n [\n value,\n props.allowNullableValues,\n props.isDateUnavailable,\n props.maxValue,\n props.minValue,\n timeZone,\n ],\n );\n\n return {\n value,\n timeZone,\n setValue(v, tz) {\n setValue(v);\n setTimeZone(tz);\n if (value !== v \|\| (value && timeZone !== tz)) {\n props.onUpdate?.(v, tz);\n }\n },\n ...validation,\n };\n}\n\~~nfunction~~ getRangeValidationResult(\n value: RelativeRangeDatePickerValue \| null,\n allowNullableValues: boolean \| undefined,\n minValue: DateTime \| undefined,\n maxValue: DateTime \| undefined,\n isDateUnavailable: ((v: DateTime) => boolean) \| undefined,\n timeZone: string,\n) {\n if (!value) {\n return {isInvalid: false, errors: []};\n }\n\n const startDate = value.start ? dateTimeParse(value.start.value, {timeZone}) : null;\n const endDate = value.end ? dateTimeParse(value.end.value, {timeZone, roundUp: true}) : null;\n\n const startValidationResult = getValidationResult(\n startDate,\n minValue,\n maxValue,\n isDateUnavailable,\n timeZone,\n i18n('\"From\"'),\n );\n\n if (!startDate && !allowNullableValues) {\n startValidationResult.isInvalid = true;\n startValidationResult.errors.push(i18n('\"From\" is required.'));\n }\n\n const endValidationResult = getValidationResult(\n endDate,\n minValue,\n maxValue,\n isDateUnavailable,\n timeZone,\n i18n('\"To\"'),\n );\n\n if (!endDate && !allowNullableValues) {\n endValidationResult.isInvalid = true;\n endValidationResult.errors.push(i18n('\"To\" 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 errors: startValidationResult.errors.concat(endValidationResult.errors),\n };\n}\n"]}
1	+ {"version":3,"file":"useRelativeRangeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RelativeRangeDatePicker/hooks/useRelativeRangeDatePickerState.ts"],"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';\nimport {useControlledState} from '@gravity-ui/uikit';\n\nimport type {Value} from '../../RelativeDatePicker';\nimport type {RangeValue} from '../../types';\nimport {getValidationResult} from '../../utils/validation/datePicker';\nimport {i18n} from '../i18n';\n\nexport type RelativeRangeDatePickerValue = RangeValue<Value \| null>;\n\nexport interface RelativeRangeDatePickerState {\n value: RelativeRangeDatePickerValue \| null;\n timeZone: string;\n setValue: (value: RelativeRangeDatePickerValue \| null, timeZone: string) => void;\n isInvalid: boolean;\n errors: string[];\n}\n\nexport interface RelativeRangeDatePickerStateOptions {\n value?: RelativeRangeDatePickerValue \| null;\n defaultValue?: RelativeRangeDatePickerValue;\n onUpdate?: (value: RelativeRangeDatePickerValue \| null, timeZone: string) => void;\n timeZone?: string;\n defaultTimeZone?: string;\n onUpdateTimeZone?: (timeZone: string) => void;\n /** The minimum allowed date that a user may select. /\n minValue?: DateTime;\n /* The maximum allowed date that a user may select. /\n maxValue?: DateTime;\n /* Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */\n isDateUnavailable?: (date: DateTime, endpoint: 'start' \| 'end') => boolean;\n allowNullableValues?: boolean;\n}\n\nexport function useRelativeRangeDatePickerState(\n props: RelativeRangeDatePickerStateOptions,\n): RelativeRangeDatePickerState {\n const [value, setValue] = useControlledState(props.value, props.defaultValue ?? null);\n\n const [timeZone, setTimeZone] = useControlledState(\n props.timeZone,\n props.defaultTimeZone ?? 'default',\n props.onUpdateTimeZone,\n );\n\n const validation = React.useMemo(\n () =>\n getRangeValidationResult(\n value,\n props.allowNullableValues,\n props.minValue,\n props.maxValue,\n props.isDateUnavailable,\n timeZone,\n ),\n [\n value,\n props.allowNullableValues,\n props.isDateUnavailable,\n props.maxValue,\n props.minValue,\n timeZone,\n ],\n );\n\n return {\n value,\n timeZone,\n setValue(v, tz) {\n setValue(v);\n setTimeZone(tz);\n if (value !== v \|\| (value && timeZone !== tz)) {\n props.onUpdate?.(v, tz);\n }\n },\n ...validation,\n };\n}\n\nexport function getRangeValidationResult(\n value: RelativeRangeDatePickerValue \| null,\n allowNullableValues: boolean \| undefined,\n minValue: DateTime \| undefined,\n maxValue: DateTime \| undefined,\n isDateUnavailable: ((v: DateTime, endpoint: 'start' \| 'end') => boolean) \| undefined,\n timeZone: string,\n) {\n if (!value) {\n return {isInvalid: false, errors: []};\n }\n\n const startDate = value.start ? dateTimeParse(value.start.value, {timeZone}) : null;\n const endDate = value.end ? dateTimeParse(value.end.value, {timeZone, roundUp: true}) : null;\n\n const startValidationResult = getValidationResult(\n startDate,\n minValue,\n maxValue,\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined,\n timeZone,\n i18n('\"From\"'),\n );\n\n if (!startDate && !allowNullableValues) {\n startValidationResult.isInvalid = true;\n startValidationResult.errors.push(i18n('\"From\" is required.'));\n }\n\n const endValidationResult = getValidationResult(\n endDate,\n minValue,\n maxValue,\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined,\n timeZone,\n i18n('\"To\"'),\n );\n\n if (!endDate && !allowNullableValues) {\n endValidationResult.isInvalid = true;\n endValidationResult.errors.push(i18n('\"To\" 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 errors: startValidationResult.errors.concat(endValidationResult.errors),\n };\n}\n"]}

package/dist/esm/components/RelativeRangeDatePicker/i18n/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-export declare const i18n: ((key: "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", params?: import("@gravity-ui/i18n").Params) => string) & {
+export declare const i18n: ((key: "to" | "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\".", params?: import("@gravity-ui/i18n").Params) => string) & {
     keysetData: {
-        "g-date-relative-range-date-picker": Record<"\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\"." | "to", import("@gravity-ui/i18n").KeyData>;
+        "g-date-relative-range-date-picker": Record<"to" | "\"From\"" | "\"From\" is required." | "\"To\"" | "\"To\" is required." | "\"From\" can't be after \"To\".", import("@gravity-ui/i18n").KeyData>;
     };
 };

package/dist/esm/components/RelativeRangeDatePicker/index.d.ts CHANGED Viewed

@@ -2,6 +2,8 @@ export * from "./RelativeRangeDatePicker.js";
 export * from "./types.js";
 export { PickerDialog as RelativeRangeDatePickerDialog } from "./components/PickerDialog/PickerDialog.js";
 export type { PickerDialogProps as RelativeRangeDatePickerDialogProps } from "./components/PickerDialog/PickerDialog.js";
+export { PickerForm as RelativeRangeDatePickerForm } from "./components/PickerDialog/PickerForm.js";
+export type { PickerFormProps as RelativeRangeDatePickerFormProps } from "./components/PickerDialog/PickerForm.js";
 export * from "./hooks/useRelativeRangeDatePickerState.js";
 export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from "./components/Presets/defaultPresets.js";
 export { getDefaultPresetTabs } from "./components/Presets/utils.js";

package/dist/esm/components/RelativeRangeDatePicker/index.js CHANGED Viewed

@@ -1,6 +1,7 @@
 export * from "./RelativeRangeDatePicker.js";
 export * from "./types.js";
 export { PickerDialog as RelativeRangeDatePickerDialog } from "./components/PickerDialog/PickerDialog.js";
+export { PickerForm as RelativeRangeDatePickerForm } from "./components/PickerDialog/PickerForm.js";
 export * from "./hooks/useRelativeRangeDatePickerState.js";
 export { DEFAULT_DATE_PRESETS, DEFAULT_TIME_PRESETS, DEFAULT_OTHERS_PRESETS, } from "./components/Presets/defaultPresets.js";
 export { getDefaultPresetTabs } from "./components/Presets/utils.js";

package/dist/esm/components/RelativeRangeDatePicker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,2BAAwB;AACxB,OAAO,EAAC,YAAY,IAAI,6BAA6B,EAAC,kDAA+C;AAErG,2DAAwD;AACxD,OAAO,EACH,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,GACzB,+CAA4C;AAC7C,OAAO,EAAC,oBAAoB,EAAC,sCAAmC","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/index.ts"],"names":[],"mappings":"AAAA,6CAA0C;AAC1C,2BAAwB;AACxB,OAAO,EAAC,YAAY,IAAI,6BAA6B,EAAC,kDAA+C;AAErG,OAAO,EAAC,UAAU,IAAI,2BAA2B,EAAC,gDAA6C;AAE/F,2DAAwD;AACxD,OAAO,EACH,oBAAoB,EACpB,oBAAoB,EACpB,sBAAsB,GACzB,+CAA4C;AAC7C,OAAO,EAAC,oBAAoB,EAAC,sCAAmC","sourcesContent":["export * from './RelativeRangeDatePicker';\nexport * from './types';\nexport {PickerDialog as RelativeRangeDatePickerDialog} from './components/PickerDialog/PickerDialog';\nexport type {PickerDialogProps as RelativeRangeDatePickerDialogProps} from './components/PickerDialog/PickerDialog';\nexport {PickerForm as RelativeRangeDatePickerForm} from './components/PickerDialog/PickerForm';\nexport type {PickerFormProps as RelativeRangeDatePickerFormProps} from './components/PickerDialog/PickerForm';\nexport * from './hooks/useRelativeRangeDatePickerState';\nexport {\n DEFAULT_DATE_PRESETS,\n DEFAULT_TIME_PRESETS,\n DEFAULT_OTHERS_PRESETS,\n} from './components/Presets/defaultPresets';\nexport {getDefaultPresetTabs} from './components/Presets/utils';\nexport type {Preset as RelativeRangeDatePickerPreset} from './components/Presets/defaultPresets';\nexport type {PresetTab as RelativeRangeDatePickerPresetTab} from './components/Presets/utils';\n"]}

package/dist/esm/components/RelativeRangeDatePicker/types.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { PopupPlacement } from '@gravity-ui/uikit';
 import type { Value } from "../RelativeDatePicker/index.js";
-import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, RangeValue, StyleProps, TextInputProps, Validation } from "../types/index.js";
+import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, PopupStyleProps, RangeValue, StyleProps, TextInputProps, Validation } from "../types/index.js";
 import type { Preset } from "./components/Presets/defaultPresets.js";
 import type { PresetTab } from "./components/Presets/utils.js";
 import type { RelativeRangeDatePickerStateOptions, RelativeRangeDatePickerValue } from "./hooks/useRelativeRangeDatePickerState.js";
@@ -15,7 +14,7 @@ export interface RelativeRangeDatePickerRenderControlProps {
     open: boolean;
     triggerProps: RelativeRangeDatePickerTriggerProps;
 }
-export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps {
+export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps, PopupStyleProps {
     /** 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. */
@@ -34,10 +33,6 @@ export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerSta
     alwaysShowAsAbsolute?: boolean;
     /** */
     getRangeTitle?: (value: RangeValue<Value | null> | null, timeZone: string) => string;
-    /** Sets the CSS className for the popup element. */
-    popupClassName?: string;
-    /** */
-    popupPlacement?: PopupPlacement;
     /** Handler that is called when the popup's open state changes. */
     onOpenChange?: (open: boolean) => void;
     /** Used to render control. */