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/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js CHANGED Viewed

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const DateField_1 = require("../../DateField/index.js");
+const utils_1 = require("../../DatePicker/utils/index.js");
 const RelativeDateField_1 = require("../../RelativeDateField/index.js");
 const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput.js");
 const mergeProps_1 = require("../../utils/mergeProps.js");
@@ -86,6 +87,7 @@ function useRelativeDatePickerProps(state, _a) {
         });
     }
     const groupRef = react_1.default.useRef(null);
+    const calendarModes = (0, utils_1.getCalendarModes)(datePickerState.formatInfo);
     return {
         groupProps: Object.assign(Object.assign({ ref: groupRef, tabIndex: -1, role: 'group' }, focusWithinProps), { onKeyDown: (e) => {
                 if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
@@ -154,6 +156,10 @@ function useRelativeDatePickerProps(state, _a) {
                     ? relativeDateState.lastCorrectDate
                     : datePickerState.dateFieldState.displayValue);
             },
+            placement: props.popupPlacement,
+            offset: props.popupOffset,
+            className: props.popupClassName,
+            style: props.popupStyle,
         },
         calendarProps: {
             ref: calendarRef,
@@ -162,7 +168,7 @@ function useRelativeDatePickerProps(state, _a) {
             value: state.selectedDate,
             onUpdate: (v) => {
                 datePickerState.setDateValue(v);
-                if (!state.datePickerState.hasTime) {
+                if (!state.datePickerState.formatInfo.hasTime) {
                     setOpen(false);
                     focusInput();
                 }
@@ -171,6 +177,7 @@ function useRelativeDatePickerProps(state, _a) {
             onFocusUpdate: setFocusedDate,
             minValue: props.minValue,
             maxValue: props.maxValue,
+            modes: mode === 'absolute' ? calendarModes : undefined,
         },
         timeInputProps: {
             value: datePickerState.timeValue,

package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRelativeDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useControlledState, useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {Calendar, CalendarInstance} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport {useRelativeDateFieldProps} from '../../RelativeDateField';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {RelativeDatePickerProps} from '../RelativeDatePicker';\nimport {i18n} from '../i18n';\n\nimport type {RelativeDatePickerState} from './useRelativeDatePickerState';\n\ninterface InnerRelativeDatePickerProps {\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLElement>};\n fieldProps: TextInputProps;\n modeSwitcherProps: ButtonButtonProps;\n calendarButtonProps: ButtonButtonProps;\n popupProps: PopupProps;\n calendarProps: React.ComponentProps<typeof Calendar>;\n timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDatePickerProps(\n state: RelativeDatePickerState,\n {onFocus, onBlur, ...props}: RelativeDatePickerProps,\n): InnerRelativeDatePickerProps {\n const {mode, setMode, datePickerState, relativeDateState} = state;\n\n const [focusedDate, setFocusedDate] = React.useState(\n mode === 'relative'\n ? relativeDateState.lastCorrectDate\n : datePickerState.dateFieldState.displayValue,\n );\n\n const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);\n if (prevCorrectDate !== relativeDateState.lastCorrectDate) {\n setPrevCorrectDate(relativeDateState.lastCorrectDate);\n setFocusedDate(relativeDateState.lastCorrectDate);\n }\n\n const [prevDateValue, setPrevDateValue] = React.useState(\n datePickerState.dateFieldState.displayValue,\n );\n if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n setPrevDateValue(datePickerState.dateFieldState.displayValue);\n setFocusedDate(datePickerState.dateFieldState.displayValue);\n }\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n if (!isFocusWithin) {\n state.setActive(false);\n }\n },\n });\n\n const [isOpen, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n if (!state.isActive && isOpen) {\n setOpen(false);\n }\n\n const commonInputProps: TextInputProps = {\n onFocus: () => {\n if (!state.isActive) {\n state.setActive(true);\n setOpen(true);\n }\n },\n errorMessage: props.errorMessage,\n errorPlacement: props.errorPlacement,\n controlProps: {\n onClick: () => {\n if (state.disabled) {\n return;\n }\n if (!isOpen) {\n state.setActive(true);\n setOpen(true);\n }\n },\n role: 'combobox',\n 'aria-expanded': isOpen,\n },\n };\n\n const {inputProps} = useDateFieldProps(datePickerState.dateFieldState, {\n ...props,\n value: undefined,\n defaultValue: undefined,\n onUpdate: undefined,\n });\n\n const {inputProps: relativeDateProps} = useRelativeDateFieldProps(relativeDateState, {\n ...props,\n value: undefined,\n defaultValue: undefined,\n onUpdate: undefined,\n });\n\n let validationState = props.validationState;\n if (!validationState) {\n validationState =\n mode === 'relative'\n ? relativeDateState.validationState\n : datePickerState.dateFieldState.validationState;\n }\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(\n inputRef,\n mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef,\n );\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n\n function focusCalendar() {\n setTimeout(() => {\n calendarRef.current?.focus();\n });\n }\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n const groupRef = React.useRef<HTMLElement>(null);\n\n return {\n groupProps: {\n ref: groupRef,\n tabIndex: -1,\n role: 'group',\n ...focusWithinProps,\n onKeyDown: (e) => {\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n focusCalendar();\n }\n },\n },\n fieldProps: mergeProps(\n commonInputProps,\n mode === 'relative' ? relativeDateProps : inputProps,\n mode === 'absolute' &&\n datePickerState.dateFieldState.isEmpty &&\n !state.isActive &&\n props.placeholder\n ? {value: ''}\n : undefined,\n {controlRef: handleRef, validationState},\n ),\n modeSwitcherProps: {\n size: getButtonSizeForInput(props.size),\n disabled: state.readOnly \|\| state.disabled,\n view: 'flat-secondary',\n style: {zIndex: 2, marginInlineEnd: 2},\n selected: mode === 'relative',\n 'aria-label': i18n('Formula input mode'),\n onClick: () => {\n setMode(mode === 'relative' ? 'absolute' : 'relative');\n if (mode === 'relative') {\n const valueDate = datePickerState.value;\n if (valueDate) {\n setFocusedDate(valueDate);\n }\n } else if (relativeDateState.parsedDate) {\n setFocusedDate(relativeDateState.parsedDate);\n }\n focusInput();\n },\n },\n calendarButtonProps: {\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n 'aria-label': i18n('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': isOpen,\n view: 'flat-secondary',\n onClick: () => {\n state.setActive(true);\n setOpen(!isOpen);\n if (!isOpen) {\n focusCalendar();\n }\n },\n },\n popupProps: {\n open: isOpen,\n onEscapeKeyDown: () => {\n setOpen(false);\n focusInput();\n },\n onOutsideClick: (e) => {\n if (e.target && !groupRef.current?.contains(e.target as Node)) {\n setOpen(false);\n }\n },\n onTransitionOutComplete: () => {\n setFocusedDate(\n mode === 'relative'\n ? relativeDateState.lastCorrectDate\n : datePickerState.dateFieldState.displayValue,\n );\n },\n },\n calendarProps: {\n ref: calendarRef,\n size: props.size === 's' ? 'm' : props.size,\n readOnly: props.readOnly,\n value: state.selectedDate,\n onUpdate: (v) => {\n datePickerState.setDateValue(v);\n if (!state.datePickerState.hasTime) {\n setOpen(false);\n focusInput();\n }\n },\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n minValue: props.minValue,\n maxValue: props.maxValue,\n },\n timeInputProps: {\n value: datePickerState.timeValue,\n onUpdate: datePickerState.setTimeValue,\n format: datePickerState.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: props.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}
1	+ {"version":3,"file":"useRelativeDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {useControlledState, useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {Calendar, CalendarInstance} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport {getCalendarModes} from '../../DatePicker/utils';\nimport {useRelativeDateFieldProps} from '../../RelativeDateField';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {RelativeDatePickerProps} from '../RelativeDatePicker';\nimport {i18n} from '../i18n';\n\nimport type {RelativeDatePickerState} from './useRelativeDatePickerState';\n\ninterface InnerRelativeDatePickerProps {\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<HTMLElement>};\n fieldProps: TextInputProps;\n modeSwitcherProps: ButtonButtonProps;\n calendarButtonProps: ButtonButtonProps;\n popupProps: PopupProps;\n calendarProps: React.ComponentProps<typeof Calendar>;\n timeInputProps: DateFieldProps;\n}\n\nexport function useRelativeDatePickerProps(\n state: RelativeDatePickerState,\n {onFocus, onBlur, ...props}: RelativeDatePickerProps,\n): InnerRelativeDatePickerProps {\n const {mode, setMode, datePickerState, relativeDateState} = state;\n\n const [focusedDate, setFocusedDate] = React.useState(\n mode === 'relative'\n ? relativeDateState.lastCorrectDate\n : datePickerState.dateFieldState.displayValue,\n );\n\n const [prevCorrectDate, setPrevCorrectDate] = React.useState(relativeDateState.lastCorrectDate);\n if (prevCorrectDate !== relativeDateState.lastCorrectDate) {\n setPrevCorrectDate(relativeDateState.lastCorrectDate);\n setFocusedDate(relativeDateState.lastCorrectDate);\n }\n\n const [prevDateValue, setPrevDateValue] = React.useState(\n datePickerState.dateFieldState.displayValue,\n );\n if (!datePickerState.dateFieldState.displayValue.isSame(prevDateValue, 'day')) {\n setPrevDateValue(datePickerState.dateFieldState.displayValue);\n setFocusedDate(datePickerState.dateFieldState.displayValue);\n }\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n if (!isFocusWithin) {\n state.setActive(false);\n }\n },\n });\n\n const [isOpen, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n if (!state.isActive && isOpen) {\n setOpen(false);\n }\n\n const commonInputProps: TextInputProps = {\n onFocus: () => {\n if (!state.isActive) {\n state.setActive(true);\n setOpen(true);\n }\n },\n errorMessage: props.errorMessage,\n errorPlacement: props.errorPlacement,\n controlProps: {\n onClick: () => {\n if (state.disabled) {\n return;\n }\n if (!isOpen) {\n state.setActive(true);\n setOpen(true);\n }\n },\n role: 'combobox',\n 'aria-expanded': isOpen,\n },\n };\n\n const {inputProps} = useDateFieldProps(datePickerState.dateFieldState, {\n ...props,\n value: undefined,\n defaultValue: undefined,\n onUpdate: undefined,\n });\n\n const {inputProps: relativeDateProps} = useRelativeDateFieldProps(relativeDateState, {\n ...props,\n value: undefined,\n defaultValue: undefined,\n onUpdate: undefined,\n });\n\n let validationState = props.validationState;\n if (!validationState) {\n validationState =\n mode === 'relative'\n ? relativeDateState.validationState\n : datePickerState.dateFieldState.validationState;\n }\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(\n inputRef,\n mode === 'relative' ? relativeDateProps.controlRef : inputProps.controlRef,\n );\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n\n function focusCalendar() {\n setTimeout(() => {\n calendarRef.current?.focus();\n });\n }\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n const groupRef = React.useRef<HTMLElement>(null);\n const calendarModes = getCalendarModes(datePickerState.formatInfo);\n\n return {\n groupProps: {\n ref: groupRef,\n tabIndex: -1,\n role: 'group',\n ...focusWithinProps,\n onKeyDown: (e) => {\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n focusCalendar();\n }\n },\n },\n fieldProps: mergeProps(\n commonInputProps,\n mode === 'relative' ? relativeDateProps : inputProps,\n mode === 'absolute' &&\n datePickerState.dateFieldState.isEmpty &&\n !state.isActive &&\n props.placeholder\n ? {value: ''}\n : undefined,\n {controlRef: handleRef, validationState},\n ),\n modeSwitcherProps: {\n size: getButtonSizeForInput(props.size),\n disabled: state.readOnly \|\| state.disabled,\n view: 'flat-secondary',\n style: {zIndex: 2, marginInlineEnd: 2},\n selected: mode === 'relative',\n 'aria-label': i18n('Formula input mode'),\n onClick: () => {\n setMode(mode === 'relative' ? 'absolute' : 'relative');\n if (mode === 'relative') {\n const valueDate = datePickerState.value;\n if (valueDate) {\n setFocusedDate(valueDate);\n }\n } else if (relativeDateState.parsedDate) {\n setFocusedDate(relativeDateState.parsedDate);\n }\n focusInput();\n },\n },\n calendarButtonProps: {\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n 'aria-label': i18n('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': isOpen,\n view: 'flat-secondary',\n onClick: () => {\n state.setActive(true);\n setOpen(!isOpen);\n if (!isOpen) {\n focusCalendar();\n }\n },\n },\n popupProps: {\n open: isOpen,\n onEscapeKeyDown: () => {\n setOpen(false);\n focusInput();\n },\n onOutsideClick: (e) => {\n if (e.target && !groupRef.current?.contains(e.target as Node)) {\n setOpen(false);\n }\n },\n onTransitionOutComplete: () => {\n setFocusedDate(\n mode === 'relative'\n ? relativeDateState.lastCorrectDate\n : datePickerState.dateFieldState.displayValue,\n );\n },\n placement: props.popupPlacement,\n offset: props.popupOffset,\n className: props.popupClassName,\n style: props.popupStyle,\n },\n calendarProps: {\n ref: calendarRef,\n size: props.size === 's' ? 'm' : props.size,\n readOnly: props.readOnly,\n value: state.selectedDate,\n onUpdate: (v) => {\n datePickerState.setDateValue(v);\n if (!state.datePickerState.formatInfo.hasTime) {\n setOpen(false);\n focusInput();\n }\n },\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n minValue: props.minValue,\n maxValue: props.maxValue,\n modes: mode === 'absolute' ? calendarModes : undefined,\n },\n timeInputProps: {\n value: datePickerState.timeValue,\n onUpdate: datePickerState.setTimeValue,\n format: datePickerState.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: props.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}

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

@@ -4,6 +4,7 @@ exports.useRelativeDatePickerState = useRelativeDatePickerState;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../DateField/utils.js");
 const DatePicker_1 = require("../../DatePicker/index.js");
 const RelativeDateField_1 = require("../../RelativeDateField/index.js");
 function useRelativeDatePickerState(props) {
@@ -24,11 +25,18 @@ function useRelativeDatePickerState(props) {
     const datePickerState = (0, DatePicker_1.useDatePickerState)({
         value: valueDate,
         onUpdate: (date) => {
-            setValueDate(date);
-            if ((value === null || value === void 0 ? void 0 : value.type) === 'absolute' && (date === null || date === void 0 ? void 0 : date.isSame(value.value))) {
+            let newDate = date;
+            if (newDate && props.roundUp) {
+                newDate = (0, utils_1.adjustDateToFormat)(newDate, datePickerState.formatInfo, 'endOf');
+                if (!datePickerState.formatInfo.hasTime) {
+                    newDate = newDate.endOf('day');
+                }
+            }
+            setValueDate(newDate);
+            if ((value === null || value === void 0 ? void 0 : value.type) === 'absolute' && (newDate === null || newDate === void 0 ? void 0 : newDate.isSame(value.value))) {
                 return;
             }
-            setValue(date ? { type: 'absolute', value: date } : null);
+            setValue(newDate ? { type: 'absolute', value: newDate } : null);
         },
         format: props.format,
         placeholderValue: props.placeholderValue,

package/dist/cjs/components/RelativeDatePicker/hooks/useRelativeDatePickerState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRelativeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerState.ts"],"names":[],"mappings":";;~~AAgDA~~,~~gEAyHC~~;;~~AAzKD~~,0DAA0B;AAG1B,6CAAqD;AAErD,0DAAoD;AAEpD,wEAAkE;AAyClE,SAAgB,0BAA0B,CACtC,KAAqC;;IAErC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,0BAAkB,EACxC,KAAK,CAAC,KAAK,EACX,MAAA,KAAK,CAAC,YAAY,mCAAI,IAAI,EAC1B,KAAK,CAAC,QAAQ,CACjB,CAAC;IAEF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAClC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CACvD,CAAC;IAEF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACtB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;IACL,CAAC;IAED,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAC5C,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAClD,CAAC;IAEF,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,UAAU,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;QAC1D,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED,MAAM,eAAe,GAAG,IAAA,+BAAkB,EAAC;QACvC,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;YACf,~~YAAY~~,CAAC,IAAI,CAAC,CAAC;~~YAEnB~~,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAK,UAAU,KAAI,~~IAAI~~,~~aAAJ~~,~~IAAI~~,~~uBAAJ~~,~~IAAI~~,CAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA,EAAE,CAAC;~~gBAC1D~~,OAAO;YACX,CAAC;YAED,QAAQ,CAAC,~~IAAI~~,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,~~IAAI~~,EAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;~~QAC5D~~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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 {useDatePickerState} from '../../DatePicker';\nimport type {DatePickerState} from '../../DatePicker';\nimport {useRelativeDateFieldState} from '../../RelativeDateField';\nimport type {RelativeDateFieldState} from '../../RelativeDateField';\nimport type {DateFieldBase} from '../../types';\n\nexport type Value =\n \| {\n type: 'absolute';\n value: DateTime;\n }\n \| {\n type: 'relative';\n value: string;\n };\n\nexport type RelativeDatePickerMode = Value['type'];\n\nexport interface RelativeDatePickerStateOptions extends DateFieldBase<Value> {\n /** Round up parsed date to the nearest granularity. /\n roundUp?: boolean;\n}\n\nexport interface RelativeDatePickerState {\n value: Value \| null;\n setValue: (value: Value \| null) => void;\n mode: RelativeDatePickerMode;\n setMode: (mode: RelativeDatePickerMode) => void;\n datePickerState: DatePickerState;\n relativeDateState: RelativeDateFieldState;\n selectedDate: DateTime \| null;\n /\n Whether the field is disabled.\n /\n disabled?: boolean;\n /\n Whether the value is immutable.\n */\n readOnly?: boolean;\n isActive: boolean;\n setActive: (isActive: boolean) => void;\n}\n\nexport function useRelativeDatePickerState(\n props: RelativeDatePickerStateOptions,\n): RelativeDatePickerState {\n const [value, setValue] = useControlledState(\n props.value,\n props.defaultValue ?? null,\n props.onUpdate,\n );\n\n const [mode, setMode] = React.useState<Value['type']>(\n value?.type === 'relative' ? 'relative' : 'absolute',\n );\n\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n if (value && value.type !== mode) {\n setMode(value.type);\n }\n }\n\n const [valueDate, setValueDate] = React.useState(\n value?.type === 'absolute' ? value.value : null,\n );\n\n if (value?.type === 'absolute' && value.value !== valueDate) {\n setValueDate(value.value);\n }\n\n const datePickerState = useDatePickerState({\n value: valueDate,\n onUpdate: (date) => {\n setValueDate(~~date~~);\n\n if (value?.type === 'absolute' && ~~date~~?.isSame(value.value)) {\n return;\n }\n\n setValue(~~date~~ ? {type: 'absolute', value: ~~date~~} : null);\n },\n format: props.format,\n placeholderValue: props.placeholderValue,\n timeZone: props.timeZone,\n disabled: props.disabled,\n readOnly: props.readOnly,\n minValue: props.minValue,\n maxValue: props.maxValue,\n });\n\n const [valueRelative, setValueRelative] = React.useState(\n value?.type === 'relative' ? value.value : null,\n );\n\n if (value?.type === 'relative' && value.value !== valueRelative) {\n setValueRelative(value.value);\n }\n\n const relativeDateState = useRelativeDateFieldState({\n value: valueRelative,\n onUpdate: (v) => {\n setValueRelative(v);\n\n if (value?.type === 'relative' && v === value.value) {\n return;\n }\n\n setValue(v ? {type: 'relative', value: v} : null);\n },\n disabled: props.disabled,\n readOnly: props.readOnly,\n timeZone: datePickerState.timeZone,\n roundUp: props.roundUp,\n });\n\n if (!value) {\n if (mode === 'absolute' && valueDate) {\n setValueDate(null);\n } else if (mode === 'relative' && valueRelative) {\n setValueRelative(null);\n }\n }\n\n const selectedDate =\n mode === 'relative'\n ? relativeDateState.parsedDate\n : datePickerState.dateFieldState.displayValue;\n\n const [isActive, setActive] = React.useState(false);\n\n return {\n value,\n setValue(v) {\n if (props.readOnly \|\| props.disabled) {\n return;\n }\n\n setValue(v);\n },\n disabled: props.disabled,\n readOnly: props.readOnly,\n mode,\n setMode(newMode: RelativeDatePickerMode) {\n if (props.readOnly \|\| props.disabled \|\| newMode === mode) {\n return;\n }\n\n setMode(newMode);\n if (newMode === 'relative') {\n if ((!value && valueRelative) \|\| value) {\n setValue(valueRelative ? {type: 'relative', value: valueRelative} : null);\n }\n } else if ((!value && valueDate) \|\| value) {\n setValue(valueDate ? {type: 'absolute', value: valueDate} : null);\n }\n },\n datePickerState,\n relativeDateState,\n selectedDate,\n isActive,\n setActive,\n };\n}\n"]}
1	+ {"version":3,"file":"useRelativeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RelativeDatePicker/hooks/useRelativeDatePickerState.ts"],"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 {adjustDateToFormat} from '../../DateField/utils';\nimport {useDatePickerState} from '../../DatePicker';\nimport type {DatePickerState} from '../../DatePicker';\nimport {useRelativeDateFieldState} from '../../RelativeDateField';\nimport type {RelativeDateFieldState} from '../../RelativeDateField';\nimport type {DateFieldBase} from '../../types';\n\nexport type Value =\n \| {\n type: 'absolute';\n value: DateTime;\n }\n \| {\n type: 'relative';\n value: string;\n };\n\nexport type RelativeDatePickerMode = Value['type'];\n\nexport interface RelativeDatePickerStateOptions extends DateFieldBase<Value> {\n /** Round up parsed date to the nearest granularity. /\n roundUp?: boolean;\n}\n\nexport interface RelativeDatePickerState {\n value: Value \| null;\n setValue: (value: Value \| null) => void;\n mode: RelativeDatePickerMode;\n setMode: (mode: RelativeDatePickerMode) => void;\n datePickerState: DatePickerState;\n relativeDateState: RelativeDateFieldState;\n selectedDate: DateTime \| null;\n /\n Whether the field is disabled.\n /\n disabled?: boolean;\n /\n Whether the value is immutable.\n */\n readOnly?: boolean;\n isActive: boolean;\n setActive: (isActive: boolean) => void;\n}\n\nexport function useRelativeDatePickerState(\n props: RelativeDatePickerStateOptions,\n): RelativeDatePickerState {\n const [value, setValue] = useControlledState(\n props.value,\n props.defaultValue ?? null,\n props.onUpdate,\n );\n\n const [mode, setMode] = React.useState<Value['type']>(\n value?.type === 'relative' ? 'relative' : 'absolute',\n );\n\n const [prevValue, setPrevValue] = React.useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n if (value && value.type !== mode) {\n setMode(value.type);\n }\n }\n\n const [valueDate, setValueDate] = React.useState(\n value?.type === 'absolute' ? value.value : null,\n );\n\n if (value?.type === 'absolute' && value.value !== valueDate) {\n setValueDate(value.value);\n }\n\n const datePickerState = useDatePickerState({\n value: valueDate,\n onUpdate: (date) => {\n let newDate = date;\n if (newDate && props.roundUp) {\n newDate = adjustDateToFormat(newDate, datePickerState.formatInfo, 'endOf');\n if (!datePickerState.formatInfo.hasTime) {\n newDate = newDate.endOf('day');\n }\n }\n setValueDate(newDate);\n\n if (value?.type === 'absolute' && newDate?.isSame(value.value)) {\n return;\n }\n\n setValue(newDate ? {type: 'absolute', value: newDate} : null);\n },\n format: props.format,\n placeholderValue: props.placeholderValue,\n timeZone: props.timeZone,\n disabled: props.disabled,\n readOnly: props.readOnly,\n minValue: props.minValue,\n maxValue: props.maxValue,\n });\n\n const [valueRelative, setValueRelative] = React.useState(\n value?.type === 'relative' ? value.value : null,\n );\n\n if (value?.type === 'relative' && value.value !== valueRelative) {\n setValueRelative(value.value);\n }\n\n const relativeDateState = useRelativeDateFieldState({\n value: valueRelative,\n onUpdate: (v) => {\n setValueRelative(v);\n\n if (value?.type === 'relative' && v === value.value) {\n return;\n }\n\n setValue(v ? {type: 'relative', value: v} : null);\n },\n disabled: props.disabled,\n readOnly: props.readOnly,\n timeZone: datePickerState.timeZone,\n roundUp: props.roundUp,\n });\n\n if (!value) {\n if (mode === 'absolute' && valueDate) {\n setValueDate(null);\n } else if (mode === 'relative' && valueRelative) {\n setValueRelative(null);\n }\n }\n\n const selectedDate =\n mode === 'relative'\n ? relativeDateState.parsedDate\n : datePickerState.dateFieldState.displayValue;\n\n const [isActive, setActive] = React.useState(false);\n\n return {\n value,\n setValue(v) {\n if (props.readOnly \|\| props.disabled) {\n return;\n }\n\n setValue(v);\n },\n disabled: props.disabled,\n readOnly: props.readOnly,\n mode,\n setMode(newMode: RelativeDatePickerMode) {\n if (props.readOnly \|\| props.disabled \|\| newMode === mode) {\n return;\n }\n\n setMode(newMode);\n if (newMode === 'relative') {\n if ((!value && valueRelative) \|\| value) {\n setValue(valueRelative ? {type: 'relative', value: valueRelative} : null);\n }\n } else if ((!value && valueDate) \|\| value) {\n setValue(valueDate ? {type: 'absolute', value: valueDate} : null);\n }\n },\n datePickerState,\n relativeDateState,\n selectedDate,\n isActive,\n setActive,\n };\n}\n"]}

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

@@ -66,14 +66,15 @@ function RelativeRangeDatePicker(props) {
                     }
                 } }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.start) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.start) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a, _b; return (_b = (_a = v === null || v === void 0 ? void 0 : v.end) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ''; }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => { var _a; return getNativeValue((_a = v === null || v === void 0 ? void 0 : v.end) !== null && _a !== void 0 ? _a : null); }, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
                     state.setValue(v.value, v.timeZone);
-                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { state: state, props: props, open: open, onClose: () => {
+                }, value: { value: state.value, timeZone: state.timeZone }, toStringValue: (v) => v.timeZone, disabled: props.disabled }), (0, jsx_runtime_1.jsx)(PickerDialog_1.PickerDialog, { value: state.value, onUpdate: state.setValue, timeZone: state.timeZone, open: open, onClose: (reason) => {
                     setOpen(false);
-                }, focusInput: () => {
-                    setTimeout(() => {
-                        var _a;
-                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
-                    });
-                }, anchor: anchor, isMobile: isMobile, className: props.popupClassName, placement: props.popupPlacement })] })));
+                    if (reason === 'escape-key') {
+                        setTimeout(() => {
+                            var _a;
+                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+                        });
+                    }
+                }, anchor: anchor, modal: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList })] })));
 }
 function getNativeValue(value) {
     if (!value) {

package/dist/cjs/components/RelativeRangeDatePicker/RelativeRangeDatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeRangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {Value} from '../RelativeDatePicker';\n\nimport {Control} from './components/Control/Control';\nimport {PickerDialog} from './components/PickerDialog/PickerDialog';\nimport {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from './types';\n\nimport './RelativeRangeDatePicker.scss';\n\nconst b = block('relative-range-date-picker');\n\nexport function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {\n const state = useRelativeRangeDatePickerState(props);\n\n const isMobile = useMobile();\n\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const [isActive, setIsActive] = React.useState(false);\n const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n const {focusWithinProps} = useFocusWithin({\n isDisabled: props.disabled,\n onFocusWithin: (e) => {\n if (!isActive) {\n props.onFocus?.(e);\n }\n },\n onBlurWithin: (e) => {\n if (!open) {\n setIsActive(false);\n props.onBlur?.(e);\n }\n },\n });\n\n return (\n <div\n ref={setAnchor}\n {...focusWithinProps}\n className={b(null, props.className)}\n style={props.style}\n >\n <Control\n props={props}\n state={state}\n open={open}\n isMobile={isMobile}\n ref={inputRef}\n onClick={() => {\n if (props.disabled) {\n return;\n }\n if (!open) {\n setIsActive(true);\n setOpen(true);\n }\n }}\n onKeyDown={(e) => {\n if (props.disabled) {\n return;\n }\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n onClickCalendar={() => {\n setIsActive(true);\n setOpen(!open);\n }}\n onFocus={() => {\n if (!isActive) {\n setIsActive(true);\n setOpen(true);\n }\n }}\n onUpdate={(v: string) => {\n if (!props.readOnly && !v) {\n state.setValue(null, 'default');\n }\n }}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => v?.start?.type ?? ''}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => getNativeValue(v?.start ?? null)}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => v?.end?.type ?? ''}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => getNativeValue(v?.end ?? null)}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.setValue(v.value, v.timeZone);\n }}\n value={{value: state.value, timeZone: state.timeZone}}\n toStringValue={(v) => v.timeZone}\n disabled={props.disabled}\n />\n\n <PickerDialog\n state={state}\n props={props}\n open={open}\n onClose={() => {\n setOpen(false);\n }}\n focusInput={() => {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }}\n anchor={anchor}\n isMobile={isMobile}\n className={props.popupClassName}\n placement={props.popupPlacement}\n />\n </div>\n );\n}\n\nfunction getNativeValue(value: Value \| null) {\n if (!value) {\n return '';\n }\n if (value.type === 'relative') {\n return value.value;\n }\n return value.value.toISOString();\n}\n"]}
1	+ {"version":3,"file":"RelativeRangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {Value} from '../RelativeDatePicker';\n\nimport {Control} from './components/Control/Control';\nimport {PickerDialog} from './components/PickerDialog/PickerDialog';\nimport {useRelativeRangeDatePickerState} from './hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps} from './types';\n\nimport './RelativeRangeDatePicker.scss';\n\nconst b = block('relative-range-date-picker');\n\nexport function RelativeRangeDatePicker(props: RelativeRangeDatePickerProps) {\n const state = useRelativeRangeDatePickerState(props);\n\n const isMobile = useMobile();\n\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const [isActive, setIsActive] = React.useState(false);\n const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n const {focusWithinProps} = useFocusWithin({\n isDisabled: props.disabled,\n onFocusWithin: (e) => {\n if (!isActive) {\n props.onFocus?.(e);\n }\n },\n onBlurWithin: (e) => {\n if (!open) {\n setIsActive(false);\n props.onBlur?.(e);\n }\n },\n });\n\n return (\n <div\n ref={setAnchor}\n {...focusWithinProps}\n className={b(null, props.className)}\n style={props.style}\n >\n <Control\n props={props}\n state={state}\n open={open}\n isMobile={isMobile}\n ref={inputRef}\n onClick={() => {\n if (props.disabled) {\n return;\n }\n if (!open) {\n setIsActive(true);\n setOpen(true);\n }\n }}\n onKeyDown={(e) => {\n if (props.disabled) {\n return;\n }\n if (e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n setOpen(true);\n }\n }}\n onClickCalendar={() => {\n setIsActive(true);\n setOpen(!open);\n }}\n onFocus={() => {\n if (!isActive) {\n setIsActive(true);\n setOpen(true);\n }\n }}\n onUpdate={(v: string) => {\n if (!props.readOnly && !v) {\n state.setValue(null, 'default');\n }\n }}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => v?.start?.type ?? ''}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => getNativeValue(v?.start ?? null)}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => v?.end?.type ?? ''}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => getNativeValue(v?.end ?? null)}\n disabled={props.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.setValue(v.value, v.timeZone);\n }}\n value={{value: state.value, timeZone: state.timeZone}}\n toStringValue={(v) => v.timeZone}\n disabled={props.disabled}\n />\n\n <PickerDialog\n value={state.value}\n onUpdate={state.setValue}\n timeZone={state.timeZone}\n open={open}\n onClose={(reason) => {\n setOpen(false);\n if (reason === 'escape-key') {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n }}\n anchor={anchor}\n modal\n popupClassName={props.popupClassName}\n popupStyle={props.popupStyle}\n popupPlacement={props.popupPlacement}\n popupOffset={props.popupOffset}\n isMobile={isMobile}\n size={props.size}\n format={props.format}\n readOnly={props.readOnly}\n minValue={props.minValue}\n maxValue={props.maxValue}\n allowNullableValues={props.allowNullableValues}\n isDateUnavailable={props.isDateUnavailable}\n placeholderValue={props.placeholderValue}\n withPresets={props.withPresets}\n presetTabs={props.presetTabs}\n docs={props.docs}\n withApplyButton={props.withApplyButton}\n withZonesList={props.withZonesList}\n />\n </div>\n );\n}\n\nfunction getNativeValue(value: Value \| null) {\n if (!value) {\n return '';\n }\n if (value.type === 'relative') {\n return value.value;\n }\n return value.value.toISOString();\n}\n"]}

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

@@ -12,26 +12,4 @@
 .g-date-relative-range-date-picker-dialog__content_size_xl:not(.g-date-relative-range-date-picker-dialog__content_mobile) {
   width: 380px;
 }
-.g-date-relative-range-date-picker-dialog__pickers {
-  display: flex;
-  flex-direction: column;
-  gap: var(--g-spacing-2);
-}
-.g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
-  width: 40px;
-}
-.g-date-relative-range-date-picker-dialog__content_size_xl .g-date-relative-range-date-picker-dialog__pickers .g-text-input__label {
-  width: 50px;
-}
-.g-date-relative-range-date-picker-dialog__apply {
-  margin-block-start: var(--g-spacing-2);
-}
-.g-date-relative-range-date-picker-dialog__zone {
-  margin-block: var(--g-spacing-2) calc(-1 * var(--_--popup-content-padding));
-  margin-inline: calc(-1 * var(--_--popup-content-padding));
-  border-block-start: 1px solid var(--g-color-line-generic);
-}
-.g-date-relative-range-date-picker-dialog__presets {
-  margin-inline: calc(-1 * var(--_--popup-content-padding));
-}
 /*# sourceMappingURL=PickerDialog.css.map */

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-dialog';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20--_--g-date-picker-presets-padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20&_mobile%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-5);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20310px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_size_xl:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20380px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%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__content_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;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI~~;;AAIR;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-dialog';\n\n#{$block} {\n &__content {\n --_--popup-content-padding: var(--g-spacing-2);\n\n --_--g-date-picker-presets-padding: var(--_--popup-content-padding);\n\n padding: var(--_--popup-content-padding);\n\n &_mobile {\n --_--popup-content-padding: var(--g-spacing-5);\n }\n\n &:not(&_mobile) {\n width: 310px;\n }\n\n &_size_xl:not(&_mobile) {\n width: 380px;\n }\n }\n~~\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~~}~~__content_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":"PickerDialog.css"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-dialog';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__content%20%7B%0A%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-2);%0A%0A%20%20%20%20%20%20%20%20--_--g-date-picker-presets-padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20padding:%20var(--_--popup-content-padding);%0A%0A%20%20%20%20%20%20%20%20&_mobile%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--popup-content-padding:%20var(--g-spacing-5);%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20310px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_size_xl:not(&_mobile)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20380px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;EAEA;EAEA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI","sourcesContent":["@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-dialog';\n\n#{$block} {\n &__content {\n --_--popup-content-padding: var(--g-spacing-2);\n\n --_--g-date-picker-presets-padding: var(--_--popup-content-padding);\n\n padding: var(--_--popup-content-padding);\n\n &_mobile {\n --_--popup-content-padding: var(--g-spacing-5);\n }\n\n &:not(&_mobile) {\n width: 310px;\n }\n\n &_size_xl:not(&_mobile) {\n width: 380px;\n }\n }\n}\n"],"file":"PickerDialog.css"}

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

@@ -1,17 +1,17 @@
-import type { PopupOffset, PopupPlacement } from '@gravity-ui/uikit';
-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;
-    placement?: PopupPlacement;
-    offset?: PopupOffset;
+    /** 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;
-    anchor: HTMLElement | null;
-    onClose: () => void;
-    focusInput: () => void;
 }
-export declare function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchor, className, placement, offset, }: 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/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js CHANGED Viewed

@@ -2,53 +2,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickerDialog = PickerDialog;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const date_utils_1 = require("@gravity-ui/date-utils");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
-const RelativeDatePicker_1 = require("../../../RelativeDatePicker/index.js");
-const Presets_1 = require("../Presets/Presets.js");
-const Zones_1 = require("../Zones/Zones.js");
-const i18n_1 = require("./i18n/index.js");
-const useRelativeRangeDatePickerDialogState_1 = require("./useRelativeRangeDatePickerDialogState.js");
+const PickerForm_1 = require("./PickerForm.js");
 require("./PickerDialog.css");
 const b = (0, cn_1.block)('relative-range-date-picker-dialog');
-function PickerDialog({ props, state, open, onClose, focusInput, isMobile, anchor, className, placement, offset, }) {
+function PickerDialog(_a) {
+    var { open, onClose, isMobile, anchor, popupClassName, popupStyle, popupPlacement, popupOffset, modal } = _a, props = tslib_1.__rest(_a, ["open", "onClose", "isMobile", "anchor", "popupClassName", "popupStyle", "popupPlacement", "popupOffset", "modal"]);
     if (isMobile) {
-        return ((0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: onClose, contentClassName: b('content', { mobile: true, size: 'xl' }, className), children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { size: "xl", state: state, onApply: onClose })) }));
+        return ((0, jsx_runtime_1.jsx)(uikit_1.Sheet, { visible: open, onClose: () => {
+                onClose('outside-press');
+            }, contentClassName: b('content', { mobile: true, size: 'xl' }, popupClassName), children: (0, jsx_runtime_1.jsx)(PickerForm_1.PickerForm, Object.assign({}, props, { size: "xl", onApply: () => {
+                    onClose('apply');
+                } })) }));
     }
     return ((0, jsx_runtime_1.jsx)(uikit_1.Popup, { open: open, onOpenChange: (isOpen, _event, reason) => {
             if (!isOpen) {
-                onClose();
-                if (reason === 'escape-key') {
-                    focusInput();
-                }
+                onClose(reason);
             }
-        }, placement: placement, offset: offset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, className), modal: true, children: (0, jsx_runtime_1.jsx)(DialogContent, Object.assign({}, props, { state: state, onApply: onClose })) }));
-}
-function DialogContent(props) {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const state = (0, useRelativeRangeDatePickerDialogState_1.useRelativeRangeDatePickerDialogState)(props.state, props);
-    const placeholderValue = ((_a = props.placeholderValue) === null || _a === void 0 ? void 0 : _a.timeZone(props.state.timeZone)) ||
-        (0, date_utils_1.dateTime)({ timeZone: props.state.timeZone });
-    const fieldProps = {
-        timeZone: props.state.timeZone,
-        format: props.format,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        hasClear: props.allowNullableValues,
-        readOnly: props.readOnly,
-        size: props.size,
-        errorPlacement: 'inside',
-    };
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_b = state.startValidation) === null || _b === void 0 ? void 0 : _b.isInvalid) ? 'invalid' : undefined, errorMessage: ((_d = (_c = state.startValidation) === null || _c === void 0 ? void 0 : _c.errors) === null || _d === void 0 ? void 0 : _d.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: placeholderValue.startOf('day'), label: (0, i18n_1.i18n)('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { validationState: ((_e = state.endValidation) === null || _e === void 0 ? void 0 : _e.isInvalid) ? 'invalid' : undefined, errorMessage: ((_g = (_f = state.endValidation) === null || _f === void 0 ? void 0 : _f.errors) === null || _g === void 0 ? void 0 : _g.join('\n')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: placeholderValue.endOf('day'), label: (0, i18n_1.i18n)('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
-                    state.applyValue();
-                    props.onApply();
-                }, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
-                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
-                    if (!props.withApplyButton) {
-                        props.onApply();
-                    }
-                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+        }, placement: popupPlacement, offset: popupOffset, role: "dialog", anchorElement: anchor, className: b('content', { size: props.size }, popupClassName), style: popupStyle, modal: modal, children: (0, jsx_runtime_1.jsx)(PickerForm_1.PickerForm, Object.assign({}, props, { onApply: () => {
+                onClose('apply');
+            } })) }));
 }
 //# sourceMappingURL=PickerDialog.js.map

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;~~AAkCb~~,~~oCA6CC;;AA7ED~~,~~uDAAgD;AAChD,6CAAuD;AAGvD,gDAA2C;AAC3C,6EAA~~+D;~~AAI~~/D,~~mDAA2C~~;~~AAC3C~~,~~6CAAqC~~;~~AAErC~~,~~0CAA4B;AAC5B,sGAA8F;AAE9F,~~8BAA6B;AAE7B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,mCAAmC,CAAC,CAAC;AAerD,SAAgB,YAAY,CAAC,EACzB,~~KAAK,EACL,KAAK,EACL,~~IAAI,EACJ,OAAO,EACP,~~UAAU,EACV,~~QAAQ,EACR,MAAM,EACN,~~SAAS~~,~~EACT~~,~~SAAS~~,~~EACT~~,~~MAAM~~,~~GACU~~;~~IAChB~~,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,uBAAC,aAAK,IACF,OAAO,EAAE,IAAI,EACb,OAAO,EAAE,OAAO,~~EAChB~~,gBAAgB,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,EAAE,~~SAAS~~,CAAC,~~YAErE~~,uBAAC,~~aAAa~~,~~oBAAK~~,KAAK,~~IAAE~~,IAAI,EAAC,IAAI,~~EAAC~~,~~KAAK~~,EAAE,~~KAAK~~,EAAE,OAAO,~~EAAE~~,OAAO,~~IAAI~~,~~GAClE~~,CACX,CAAC;IACN,CAAC;IAED,OAAO,CACH,uBAAC,aAAK,IACF,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACrC,IAAI,CAAC,MAAM,EAAE,CAAC;gBACV,OAAO,~~EAAE,~~CAAC~~;gBACV~~,~~IAAI,~~MAAM,~~KAAK,YAAY,EAAE,~~CAAC~~;oBAC1B~~,~~UAAU,EAAE,~~CAAC;~~gBACjB~~,CAAC;~~YACL,CAAC;~~QACL,CAAC,EACD,SAAS,EAAE,~~SAAS~~,~~EACpB~~,MAAM,EAAE,~~MAAM~~,~~EACd~~,IAAI,EAAC,QAAQ,EACb,aAAa,EAAE,MAAM,EACrB,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,SAAS,CAAC,EACtD,KAAK,kBAEL,uBAAC,aAAa,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,IAAI,GACxD,CACX,CAAC;AACN,CAAC;AAED,SAAS,aAAa,CAClB,KAGgC;;IAEhC,MAAM,KAAK,GAAG,IAAA,6EAAqC,EAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAExE,MAAM,gBAAgB,GAClB,CAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;QACtD,IAAA,qBAAQ,EAAC,EAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAC,CAAC,CAAC;IAC/C,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ;QAC9B,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~~,~~OAAO~~,~~CACH,4CACI,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,uBAAC,uCAAkB,oBACX,UAAU,IACd,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,IAAA,WAAI,EAAC,qBAAqB,CAAC,EAE5E,gBAAgB,~~EAAE,~~gBAAgB,CAAC,OAAO,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,IAAA,WAAI,EAAC,MAAM,CAAC,EACnB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAC1B,EACF,uBAAC,uCAAkB,oBACX,~~UAAU,IACd,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,IAAA,WAAI,EAAC,qBAAqB,CAAC,EAE1E,gBAAgB,EAAE,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,EAC/C,KAAK,EAAE,IAAA,WAAI,EAAC,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,~~uBAAC,~~cAAM~~,~~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,IAAA,WAAI,EAAC,OAAO,~~CAAC,GACT,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,uBAAC,iBAAO,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,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,~~uBAAC,aAAK,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 {~~dateTime} from '@gravity-ui/date-utils';\nimport {Button,~~ Popup, Sheet} from '@gravity-ui/uikit';\nimport type {~~PopupOffset, PopupPlacement~~} 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 ~~placement?:~~ ~~PopupPlacement;\~~n ~~offset~~?: ~~PopupOffset~~;\n ~~isMobile~~?: boolean;\n ~~anchor:~~ ~~HTMLElement~~ \| ~~null;\n onClose:~~ () => ~~void;\~~n ~~focusInput:~~ ~~() => void~~;\n}\n\nexport function PickerDialog({\n ~~props~~,\n ~~state~~,\n ~~open~~,\n ~~onClose~~,\n ~~focusInput~~,\n ~~isMobile~~,\n ~~anchor~~,\n ~~className~~,\n ~~placement~~,\n ~~offset,\~~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 onOpenChange={(isOpen, _event, reason) => {\n if (!isOpen) {\n onClose(~~);\n if (~~reason ~~=== 'escape-key'~~) ~~{\n focusInput()~~;\n ~~}\n~~ }\n }}\n placement={~~placement~~}\n offset={~~offset~~}\n role=\"dialog\"\n anchorElement={anchor}\n className={b('content', {size: props.size}, ~~className~~)}\n ~~modal\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"]}
1	+ {"version":3,"file":"PickerDialog.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AA4Bb,oCAwDC;;;AAlFD,6CAA+C;AAG/C,gDAA2C;AAG3C,gDAAwC;AAGxC,8BAA6B;AAE7B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,mCAAmC,CAAC,CAAC;AAerD,SAAgB,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,sBAViB,mHAW5B,CADW;IAER,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,uBAAC,aAAK,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,uBAAC,uBAAU,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,uBAAC,aAAK,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,uBAAC,uBAAU,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/cjs/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/cjs/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/cjs/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/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.js ADDED Viewed

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerForm = PickerForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const uikit_1 = require("@gravity-ui/uikit");
+const cn_1 = require("../../../../utils/cn.js");
+const RelativeDatePicker_1 = require("../../../RelativeDatePicker/index.js");
+const Presets_1 = require("../Presets/Presets.js");
+const Zones_1 = require("../Zones/Zones.js");
+const i18n_1 = require("./i18n/index.js");
+const useRelativeRangeDatePickerDialogState_1 = require("./useRelativeRangeDatePickerDialogState.js");
+require("./PickerForm.css");
+const b = (0, cn_1.block)('relative-range-date-picker-form');
+function PickerForm(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const state = (0, useRelativeRangeDatePickerDialogState_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [(0, jsx_runtime_1.jsxs)("div", { className: b('pickers'), children: [(0, jsx_runtime_1.jsx)(RelativeDatePicker_1.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')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: (0, i18n_1.i18n)('From'), value: state.start, onUpdate: state.setStart })), (0, jsx_runtime_1.jsx)(RelativeDatePicker_1.RelativeDatePicker, Object.assign({}, fieldProps, { 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')) || (0, i18n_1.i18n)('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: (0, i18n_1.i18n)('To'), value: state.end, onUpdate: state.setEnd, roundUp: true }))] }), props.withApplyButton && !props.readOnly ? ((0, jsx_runtime_1.jsx)(uikit_1.Button, { disabled: state.isInvalid, size: props.size, onClick: () => {
+                    state.applyValue();
+                    props.onApply();
+                }, className: b('apply'), width: "max", children: (0, i18n_1.i18n)('Apply') })) : null, props.withPresets && !props.readOnly ? ((0, jsx_runtime_1.jsx)(Presets_1.Presets, { size: props.size, presetTabs: props.presetTabs, onChoosePreset: (start, end) => {
+                    state.setRange({ type: 'relative', value: start }, { type: 'relative', value: end });
+                    if (!props.withApplyButton) {
+                        props.onApply();
+                    }
+                }, minValue: props.minValue, docs: props.docs, className: b('presets') })) : null, props.withZonesList ? ((0, jsx_runtime_1.jsx)("div", { className: b('zone'), children: (0, jsx_runtime_1.jsx)(Zones_1.Zones, { value: state.timeZone, onUpdate: state.setTimeZone, disabled: props.readOnly, size: props.size }) })) : null] }));
+}
+//# sourceMappingURL=PickerForm.js.map