npm - @gravity-ui/date-components - Versions diffs - 3.2.3 → 3.3.0 - Mend

@gravity-ui/date-components 3.2.3 → 3.3.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 (236) hide show

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 {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 returnFocus: false,\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"]}
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 {filterDOMProps} from '../../utils/filterDOMProps';\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 const {t} = i18n.useTranslation();\n\n const DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return {\n groupProps: {\n ...DOMProps,\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': t('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': t('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 returnFocus: false,\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/i18n/index.d.ts CHANGED Viewed

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "Calendar" | "Formula input mode", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "g-date-relative-date-picker": Record<"Calendar" | "Formula input mode", import("@gravity-ui/i18n").KeyData>;
     };

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeRangeDatePicker/data:;charset=utf-8,@use%20'../variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20position:%20relative;%0A%0A%20%20%20%20display:%20inline-flex;%0A%0A%20%20%20%20&__value-label%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%0A%20%20%20%20%20%20%20%20width:%20100%25;%0A%0A%20%20%20%20%20%20%20%20&%20%3E%20div%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20flex:%201%200%200;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&-content%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20%20%20%20%20flex-direction:%20column;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&-tooltip%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--g-popover-max-width:%20'none';%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&-item,%0A%20%20%20%20%20%20%20%20&-to,%0A%20%20%20%20%20%20%20%20&-tz%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20text-align:%20center;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&-tz%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20margin-block-start:%205px;%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20color:%20var(--g-color-text-hint);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAIA;EACI;EAEA;;AAEA;EACI;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EAGI;;AAGJ;EACI;EAEA","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-flex;\n\n &__value-label {\n display: flex;\n\n width: 100%;\n\n & > div {\n flex: 1 0 0;\n }\n\n &-content {\n display: flex;\n flex-direction: column;\n }\n\n &-tooltip {\n --g-popover-max-width: 'none';\n }\n\n &-item,\n &-to,\n &-tz {\n text-align: center;\n }\n\n &-tz {\n margin-block-start: 5px;\n\n color: var(--g-color-text-hint);\n }\n }\n}\n"],"file":"RelativeRangeDatePicker.css"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.scss"],"names":[],"mappings":"AAIA;EACI;EAEA;;AAEA;EACI;EAEA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EAGI;;AAGJ;EACI;EAEA","sourcesContent":["@use '../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker';\n\n#{$block} {\n position: relative;\n\n display: inline-flex;\n\n &__value-label {\n display: flex;\n\n width: 100%;\n\n & > div {\n flex: 1 0 0;\n }\n\n &-content {\n display: flex;\n flex-direction: column;\n }\n\n &-tooltip {\n --g-popover-max-width: 'none';\n }\n\n &-item,\n &-to,\n &-tz {\n text-align: center;\n }\n\n &-tz {\n margin-block-start: 5px;\n\n color: var(--g-color-text-hint);\n }\n }\n}\n"],"file":"RelativeRangeDatePicker.css"}

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

@@ -8,6 +8,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn.js");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput.js");
+const filterDOMProps_1 = require("../utils/filterDOMProps.js");
 const Control_1 = require("./components/Control/Control.js");
 const PickerDialog_1 = require("./components/PickerDialog/PickerDialog.js");
 const useRelativeRangeDatePickerState_1 = require("./hooks/useRelativeRangeDatePickerState.js");
@@ -33,7 +34,9 @@ function RelativeRangeDatePicker(props) {
             }
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: setAnchor }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Control_1.Control, { props: props, state: state, open: open, setOpen: setOpen, isMobile: isMobile, onClick: () => {
+    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
+    delete DOMProps.id;
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, DOMProps, { ref: setAnchor }, focusWithinProps, { className: b(null, props.className), style: props.style, children: [(0, jsx_runtime_1.jsx)(Control_1.Control, { props: props, state: state, open: open, setOpen: setOpen, isMobile: isMobile, onClick: () => {
                     if (props.disabled) {
                         return;
                     }

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 dialogClosing = React.useRef(false);\n\n const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n const {focusWithinProps} = useFocusWithin({\n isDisabled: props.disabled,\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n onFocusWithinChange: (isFocusWithin) => {\n if (\n isFocusWithin &&\n !dialogClosing.current &&\n !props.renderControl &&\n document.activeElement?.tagName !== 'BUTTON'\n ) {\n setOpen(true);\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 setOpen={setOpen}\n isMobile={isMobile}\n onClick={() => {\n if (props.disabled) {\n return;\n }\n setOpen(true);\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 setOpen(!open);\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={() => {\n setOpen(false);\n dialogClosing.current = true;\n }}\n onRemove={() => {\n setTimeout(() => {\n dialogClosing.current = false;\n });\n }}\n anchor={anchor}\n modal\n returnFocus\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 applyPresetsImmediately={props.applyPresetsImmediately}\n presetTabs={props.presetTabs}\n docs={props.docs}\n withApplyButton={props.withApplyButton}\n withZonesList={props.withZonesList}\n withHeader={props.withHeader}\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';\nimport {filterDOMProps} from '../utils/filterDOMProps';\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 dialogClosing = React.useRef(false);\n\n const [open, setOpen] = useControlledState<boolean>(undefined, false, props.onOpenChange);\n\n const {focusWithinProps} = useFocusWithin({\n isDisabled: props.disabled,\n onFocusWithin: props.onFocus,\n onBlurWithin: props.onBlur,\n onFocusWithinChange: (isFocusWithin) => {\n if (\n isFocusWithin &&\n !dialogClosing.current &&\n !props.renderControl &&\n document.activeElement?.tagName !== 'BUTTON'\n ) {\n setOpen(true);\n }\n },\n });\n\n const DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <div\n {...DOMProps}\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 setOpen={setOpen}\n isMobile={isMobile}\n onClick={() => {\n if (props.disabled) {\n return;\n }\n setOpen(true);\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 setOpen(!open);\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={() => {\n setOpen(false);\n dialogClosing.current = true;\n }}\n onRemove={() => {\n setTimeout(() => {\n dialogClosing.current = false;\n });\n }}\n anchor={anchor}\n modal\n returnFocus\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 applyPresetsImmediately={props.applyPresetsImmediately}\n presetTabs={props.presetTabs}\n docs={props.docs}\n withApplyButton={props.withApplyButton}\n withZonesList={props.withZonesList}\n withHeader={props.withHeader}\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/Control/Control.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeRangeDatePicker/components/~~variables~~.scss';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-control';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__input%20%7B%0A%20%20%20%20%20%20%20%20caret-color:%20transparent;%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%20pointer-events:%20none;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__mobile-trigger%20%7B%0A%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-clear-width:%200px;%0A%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-errors-width:%200px;%0A%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-button-width:%2024px;%0A%0A%20%20%20%20%20%20%20%20position:%20absolute;%0A%20%20%20%20%20%20%20%20inset:%200;%0A%20%20%20%20%20%20%20%20inset-inline-end:%20calc(%0A%20%20%20%20%20%20%20%20%20%20%20%20var(--g-spacing-2)%20+%20var(--_--g-date-mobile-trigger-button-width)%20+%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--_--g-date-mobile-trigger-clear-width)%20+%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--_--g-date-mobile-trigger-errors-width)%0A%20%20%20%20%20%20%20%20);%0A%0A%20%20%20%20%20%20%20%20opacity:%200;%0A%0A%20%20%20%20%20%20%20%20&_size_s%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-button-width:%2020px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_size_l%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-button-width:%2028px;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_size_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-button-width:%2036px;%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&_has-clear%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-clear-width:%20calc(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--_--g-date-mobile-trigger-button-width)%20+%202px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20&_has-errors%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20--_--g-date-mobile-trigger-errors-width:%20calc(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var(--_--g-date-mobile-trigger-button-width)%20+%202px%0A%20%20%20%20%20%20%20%20%20%20%20%20);%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A"],"names":[],"mappings":"AAKI;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EAEA;EACA;EACA;EAMA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;AAAA;AAAA;;AAIJ;EACI;AAAA;AAAA","sourcesContent":["@use '../../../variables.scss';\n\n$block: '.#{variables.$ns}relative-range-date-picker-control';\n\n#{$block} {\n &__input {\n caret-color: transparent;\n\n &_mobile {\n pointer-events: none;\n }\n }\n\n &__mobile-trigger {\n --_--g-date-mobile-trigger-clear-width: 0px;\n --_--g-date-mobile-trigger-errors-width: 0px;\n --_--g-date-mobile-trigger-button-width: 24px;\n\n position: absolute;\n inset: 0;\n inset-inline-end: calc(\n var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) +\n var(--_--g-date-mobile-trigger-clear-width) +\n var(--_--g-date-mobile-trigger-errors-width)\n );\n\n opacity: 0;\n\n &_size_s {\n --_--g-date-mobile-trigger-button-width: 20px;\n }\n &_size_l {\n --_--g-date-mobile-trigger-button-width: 28px;\n }\n &_size_xl {\n --_--g-date-mobile-trigger-button-width: 36px;\n }\n\n &_has-clear {\n --_--g-date-mobile-trigger-clear-width: calc(\n var(--_--g-date-mobile-trigger-button-width) + 2px\n );\n }\n &_has-errors {\n --_--g-date-mobile-trigger-errors-width: calc(\n var(--_--g-date-mobile-trigger-button-width) + 2px\n );\n }\n }\n}\n"],"file":"Control.css"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/Control/Control.scss"],"names":[],"mappings":"AAKI;EACI;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EAEA;EACA;EACA;EAMA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAGJ;EACI;AAAA;AAAA;;AAIJ;EACI;AAAA;AAAA","sourcesContent":["@use '../../../variables.scss';\n\n$block: '.#{variables.$ns}relative-range-date-picker-control';\n\n#{$block} {\n &__input {\n caret-color: transparent;\n\n &_mobile {\n pointer-events: none;\n }\n }\n\n &__mobile-trigger {\n --_--g-date-mobile-trigger-clear-width: 0px;\n --_--g-date-mobile-trigger-errors-width: 0px;\n --_--g-date-mobile-trigger-button-width: 24px;\n\n position: absolute;\n inset: 0;\n inset-inline-end: calc(\n var(--g-spacing-2) + var(--_--g-date-mobile-trigger-button-width) +\n var(--_--g-date-mobile-trigger-clear-width) +\n var(--_--g-date-mobile-trigger-errors-width)\n );\n\n opacity: 0;\n\n &_size_s {\n --_--g-date-mobile-trigger-button-width: 20px;\n }\n &_size_l {\n --_--g-date-mobile-trigger-button-width: 28px;\n }\n &_size_xl {\n --_--g-date-mobile-trigger-button-width: 36px;\n }\n\n &_has-clear {\n --_--g-date-mobile-trigger-clear-width: calc(\n var(--_--g-date-mobile-trigger-button-width) + 2px\n );\n }\n &_has-errors {\n --_--g-date-mobile-trigger-errors-width: calc(\n var(--_--g-date-mobile-trigger-button-width) + 2px\n );\n }\n }\n}\n"],"file":"Control.css"}

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

@@ -9,13 +9,17 @@ const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
 const getButtonSizeForInput_1 = require("../../../utils/getButtonSizeForInput.js");
 const utils_1 = require("../../utils.js");
-const i18n_1 = require("./i18n/index.js");
+const i18n_1 = require("../Presets/i18n/index.js");
+const i18n_2 = require("./i18n/index.js");
 require("./Control.css");
 const b = (0, cn_1.block)('relative-range-date-picker-control');
 exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isMobile, onClick, onKeyDown, onFocus, onClickCalendar, onUpdate, }, ref) => {
     var _a;
     const { alwaysShowAsAbsolute, presetTabs, getRangeTitle } = props;
     const format = props.format || 'L';
+    const { t } = i18n_2.i18n.useTranslation();
+    const { t: presetsTranslations } = i18n_1.i18n.useTranslation();
+    const { lang } = (0, uikit_1.useLang)();
     const text = react_1.default.useMemo(() => typeof getRangeTitle === 'function'
         ? getRangeTitle(state.value, state.timeZone)
         : (0, utils_1.getDefaultTitle)({
@@ -24,7 +28,18 @@ exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isM
             alwaysShowAsAbsolute,
             format,
             presets: presetTabs === null || presetTabs === void 0 ? void 0 : presetTabs.flatMap(({ presets }) => presets),
-        }), [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value]);
+            presetsTranslations,
+            lang,
+        }), [
+        alwaysShowAsAbsolute,
+        format,
+        getRangeTitle,
+        lang,
+        presetTabs,
+        presetsTranslations,
+        state.timeZone,
+        state.value,
+    ]);
     const validationState = props.validationState || (state.isInvalid ? 'invalid' : undefined);
     const errorMessage = (_a = props.errorMessage) !== null && _a !== void 0 ? _a : state.errors.join('\n');
     const triggerProps = {
@@ -50,7 +65,7 @@ exports.Control = react_1.default.forwardRef(({ props, state, open, setOpen, isM
         open,
         setOpen,
         triggerProps,
-    })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": (0, i18n_1.i18n)('Range date picker'), onClick: onClickCalendar, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
+    })) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { id: props.id, autoFocus: props.autoFocus, controlRef: ref, value: text, placeholder: props.placeholder, onUpdate: onUpdate, controlProps: Object.assign(Object.assign({ className: b('input', { mobile: isMobile }) }, triggerProps), { disabled: isMobile, onClick }), onKeyDown: onKeyDown, onFocus: onFocus, validationState: validationState, errorMessage: errorMessage, errorPlacement: props.errorPlacement, pin: props.pin, size: props.size, label: props.label, hasClear: props.hasClear, disabled: props.disabled, endContent: (0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: (0, getButtonSizeForInput_1.getButtonSizeForInput)(props.size), disabled: props.disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": t('Range date picker'), onClick: onClickCalendar, tabIndex: -1, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }) }), isMobile ? ((0, jsx_runtime_1.jsx)("button", { className: b('mobile-trigger', {
                     'has-clear': Boolean(props.hasClear && state.value),
                     'has-errors': state.isInvalid && props.errorPlacement === 'inside',
                     size: props.size,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Control.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Control/Control.tsx"],"names":[],"mappings":";;;;;AAAA,0DAA0B;AAE1B,6CAA2D;AAC3D,~~6CAA0D~~;~~AAE1D~~,gDAA2C;AAC3C,mFAA2E;AAG3E,0CAA4C;~~AAE5C~~,0CAA4B;AAE5B,yBAAwB;AAexB,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,oCAAoC,CAAC,CAAC;AAEzC,QAAA,OAAO,GAAG,eAAK,CAAC,UAAU,CACnC,CACI,EACI,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,eAAe,EACf,QAAQ,GACX,EACD,GAAG,EACL,EAAE;;IACA,MAAM,EAAC,oBAAoB,EAAE,UAAU,EAAE,aAAa,EAAC,GAAG,KAAK,CAAC;IAChE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,IAAI,GAAG,CAAC;IAEnC,MAAM,IAAI,GAAG,eAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CACD,OAAO,aAAa,KAAK,UAAU;QAC/B,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;QAC5C,CAAC,CAAC,IAAA,uBAAe,EAAC;YACZ,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,oBAAoB;YACpB,MAAM;YACN,OAAO,EAAE,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,OAAO,CAAC;~~SACvD~~,CAAC,EACZ,~~CAAC,~~oBAAoB,~~EAAE,~~MAAM,~~EAAE,~~aAAa,~~EAAE~~,UAAU,~~EAAE~~,KAAK,CAAC,QAAQ,~~EAAE,~~KAAK,CAAC,KAAK,~~CAAC~~,~~CACzF,~~CAAC;IAEF,MAAM,eAAe,GAAG,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3F,MAAM,YAAY,GAAG,MAAA,KAAK,CAAC,YAAY,mCAAI,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEnE,MAAM,YAAY,GAAwC;QACtD,EAAE,EAAE,KAAK,CAAC,EAAE;QACZ,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,QAAQ;QACzB,eAAe,EAAE,IAAI;QACrB,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;QACjC,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,CAAC;QAC3C,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,CAAC;QAC7C,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC;QACrC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,OAAO,EAAE,eAAe;QACxB,SAAS;KACZ,CAAC;IAEF,OAAO,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACzB,KAAK,CAAC,aAAa,CAAC;QAChB,GAAG;QACH,KAAK,EAAE,KAAK,CAAC,KAAK;QAClB,KAAK,EAAE,IAAI;QACX,eAAe;QACf,YAAY;QACZ,IAAI;QACJ,OAAO;QACP,YAAY;KACf,CAAC,CACL,CAAC,CAAC,CAAC,CACA,wBAAC,eAAK,CAAC,QAAQ,eACX,uBAAC,iBAAS,IACN,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,GAAG,EACf,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,QAAQ,EAAE,QAAQ,EAClB,YAAY,gCACR,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,MAAM,EAAE,QAAQ,EAAC,CAAC,IACtC,YAAY,KACf,QAAQ,EAAE,QAAQ,EAClB,OAAO,KAEX,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,KAAK,CAAC,cAAc,EACpC,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EACN,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAE,IAAA,6CAAqB,EAAC,KAAK,CAAC,IAAI,CAAC,EACvC,QAAQ,EAAE,KAAK,CAAC,QAAQ,mBACV,QAAQ,mBACP,IAAI,gBACP,~~IAAA~~,~~WAAI~~,~~EAAC,~~mBAAmB,CAAC,~~EACrC~~,OAAO,EAAE,eAAe,EACxB,QAAQ,EAAE,CAAC,CAAC,YAEZ,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAY,GAAI,GACvB,GAEf,EACD,QAAQ,CAAC,CAAC,CAAC,CACR,mCACI,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAAE;oBAC3B,WAAW,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,KAAK,CAAC;oBACnD,YAAY,EAAE,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,cAAc,KAAK,QAAQ;oBAClE,IAAI,EAAE,KAAK,CAAC,IAAI;iBACnB,CAAC,EACF,OAAO,EAAE,OAAO,GAClB,CACL,CAAC,CAAC,CAAC,IAAI,IACK,CACpB,CAAC;AACN,CAAC,CACJ,CAAC;AAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import React from 'react';\n\nimport {Calendar as CalendarIcon} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps, RelativeRangeDatePickerTriggerProps} from '../../types';\nimport {getDefaultTitle} from '../../utils';\n\nimport {i18n} from './i18n';\n\nimport './Control.scss';\n\nexport type ControlProps = {\n props: RelativeRangeDatePickerProps;\n state: RelativeRangeDatePickerState;\n open: boolean;\n setOpen: (open: boolean) => void;\n isMobile?: boolean;\n onClick: (e: React.MouseEvent<HTMLElement>) => void;\n onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLElement>) => void;\n onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;\n onUpdate: (value: string) => void;\n};\n\nconst b = block('relative-range-date-picker-control');\n\nexport const Control = React.forwardRef<HTMLInputElement, ControlProps>(\n (\n {\n props,\n state,\n open,\n setOpen,\n isMobile,\n onClick,\n onKeyDown,\n onFocus,\n onClickCalendar,\n onUpdate,\n },\n ref,\n ) => {\n const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;\n const format = props.format \|\| 'L';\n\n const text = React.useMemo(\n () =>\n typeof getRangeTitle === 'function'\n ? getRangeTitle(state.value, state.timeZone)\n : getDefaultTitle({\n value: state.value,\n timeZone: state.timeZone,\n alwaysShowAsAbsolute,\n format,\n presets: presetTabs?.flatMap(({presets}) => presets),\n }),\n [alwaysShowAsAbsolute, format, getRangeTitle, presetTabs, state.timeZone, state.value],\n );\n\n const validationState = props.validationState \|\| (state.isInvalid ? 'invalid' : undefined);\n const errorMessage = props.errorMessage ?? state.errors.join('\\n');\n\n const triggerProps: RelativeRangeDatePickerTriggerProps = {\n id: props.id,\n role: 'combobox',\n 'aria-haspopup': 'dialog',\n 'aria-expanded': open,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details'],\n disabled: props.disabled,\n readOnly: props.readOnly,\n onClick: onClickCalendar,\n onKeyDown,\n };\n\n return props.renderControl ? (\n props.renderControl({\n ref,\n value: state.value,\n title: text,\n validationState,\n errorMessage,\n open,\n setOpen,\n triggerProps,\n })\n ) : (\n <React.Fragment>\n <TextInput\n id={props.id}\n autoFocus={props.autoFocus}\n controlRef={ref}\n value={text}\n placeholder={props.placeholder}\n onUpdate={onUpdate}\n controlProps={{\n className: b('input', {mobile: isMobile}),\n ...triggerProps,\n disabled: isMobile,\n onClick,\n }}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n validationState={validationState}\n errorMessage={errorMessage}\n errorPlacement={props.errorPlacement}\n pin={props.pin}\n size={props.size}\n label={props.label}\n hasClear={props.hasClear}\n disabled={props.disabled}\n endContent={\n <Button\n view=\"flat-secondary\"\n size={getButtonSizeForInput(props.size)}\n disabled={props.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n aria-label={~~i18n~~('Range date picker')}\n onClick={onClickCalendar}\n tabIndex={-1}\n >\n <Icon data={CalendarIcon} />\n </Button>\n }\n />\n {isMobile ? (\n <button\n className={b('mobile-trigger', {\n 'has-clear': Boolean(props.hasClear && state.value),\n 'has-errors': state.isInvalid && props.errorPlacement === 'inside',\n size: props.size,\n })}\n onClick={onClick}\n />\n ) : null}\n </React.Fragment>\n );\n },\n);\n\nControl.displayName = 'Control';\n"]}
1	+ {"version":3,"file":"Control.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/Control/Control.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {Calendar as CalendarIcon} from '@gravity-ui/icons';\nimport {Button, Icon, TextInput, useLang} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {RelativeRangeDatePickerState} from '../../hooks/useRelativeRangeDatePickerState';\nimport type {RelativeRangeDatePickerProps, RelativeRangeDatePickerTriggerProps} from '../../types';\nimport {getDefaultTitle} from '../../utils';\nimport {i18n as i18nPresets} from '../Presets/i18n';\n\nimport {i18n} from './i18n';\n\nimport './Control.scss';\n\nexport type ControlProps = {\n props: RelativeRangeDatePickerProps;\n state: RelativeRangeDatePickerState;\n open: boolean;\n setOpen: (open: boolean) => void;\n isMobile?: boolean;\n onClick: (e: React.MouseEvent<HTMLElement>) => void;\n onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLElement>) => void;\n onClickCalendar: (e: React.MouseEvent<HTMLElement>) => void;\n onUpdate: (value: string) => void;\n};\n\nconst b = block('relative-range-date-picker-control');\n\nexport const Control = React.forwardRef<HTMLInputElement, ControlProps>(\n (\n {\n props,\n state,\n open,\n setOpen,\n isMobile,\n onClick,\n onKeyDown,\n onFocus,\n onClickCalendar,\n onUpdate,\n },\n ref,\n ) => {\n const {alwaysShowAsAbsolute, presetTabs, getRangeTitle} = props;\n const format = props.format \|\| 'L';\n\n const {t} = i18n.useTranslation();\n const {t: presetsTranslations} = i18nPresets.useTranslation();\n const {lang} = useLang();\n\n const text = React.useMemo(\n () =>\n typeof getRangeTitle === 'function'\n ? getRangeTitle(state.value, state.timeZone)\n : getDefaultTitle({\n value: state.value,\n timeZone: state.timeZone,\n alwaysShowAsAbsolute,\n format,\n presets: presetTabs?.flatMap(({presets}) => presets),\n presetsTranslations,\n lang,\n }),\n [\n alwaysShowAsAbsolute,\n format,\n getRangeTitle,\n lang,\n presetTabs,\n presetsTranslations,\n state.timeZone,\n state.value,\n ],\n );\n\n const validationState = props.validationState \|\| (state.isInvalid ? 'invalid' : undefined);\n const errorMessage = props.errorMessage ?? state.errors.join('\\n');\n\n const triggerProps: RelativeRangeDatePickerTriggerProps = {\n id: props.id,\n role: 'combobox',\n 'aria-haspopup': 'dialog',\n 'aria-expanded': open,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n 'aria-details': props['aria-details'],\n disabled: props.disabled,\n readOnly: props.readOnly,\n onClick: onClickCalendar,\n onKeyDown,\n };\n\n return props.renderControl ? (\n props.renderControl({\n ref,\n value: state.value,\n title: text,\n validationState,\n errorMessage,\n open,\n setOpen,\n triggerProps,\n })\n ) : (\n <React.Fragment>\n <TextInput\n id={props.id}\n autoFocus={props.autoFocus}\n controlRef={ref}\n value={text}\n placeholder={props.placeholder}\n onUpdate={onUpdate}\n controlProps={{\n className: b('input', {mobile: isMobile}),\n ...triggerProps,\n disabled: isMobile,\n onClick,\n }}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n validationState={validationState}\n errorMessage={errorMessage}\n errorPlacement={props.errorPlacement}\n pin={props.pin}\n size={props.size}\n label={props.label}\n hasClear={props.hasClear}\n disabled={props.disabled}\n endContent={\n <Button\n view=\"flat-secondary\"\n size={getButtonSizeForInput(props.size)}\n disabled={props.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={open}\n aria-label={t('Range date picker')}\n onClick={onClickCalendar}\n tabIndex={-1}\n >\n <Icon data={CalendarIcon} />\n </Button>\n }\n />\n {isMobile ? (\n <button\n className={b('mobile-trigger', {\n 'has-clear': Boolean(props.hasClear && state.value),\n 'has-errors': state.isInvalid && props.errorPlacement === 'inside',\n size: props.size,\n })}\n onClick={onClick}\n />\n ) : null}\n </React.Fragment>\n );\n },\n);\n\nControl.displayName = 'Control';\n"]}

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

@@ -1,4 +1,12 @@
 export declare const i18n: ((key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string) & {
+    Translation: import("react").ComponentType<{
+        children: (props: {
+            t: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string;
+        }) => React.ReactNode;
+    }>;
+    useTranslation: () => {
+        t: (key: "Range date picker", params?: import("@gravity-ui/i18n").Params) => string;
+    };
     keysetData: {
         "g-date-relative-range-date-picker-control": Record<"Range date picker", import("@gravity-ui/i18n").KeyData>;
     };

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%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"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDialog.scss"],"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/PickerDoc.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/data:;charset=utf-8,@use%20'@gravity-ui/uikit/variables';%0A%0A$block:%20'.%23%7Bvariables.$ns%7Drelative-range-date-picker-doc';%0A%0A%23%7B$block%7D%20%7B%0A%20%20%20%20&__button%20%7B%0A%20%20%20%20%20%20%20%20--g-button-background-color-hover:%20transparent;%0A%20%20%20%20%7D%0A%0A%20%20%20%20&__table%20%7B%0A%20%20%20%20%20%20%20%20&_size_xl%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20@include%20mixins.text-body-2();%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20&%20%3E%20table%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20width:%20100%25;%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D%0A","components/RelativeRangeDatePicker/components/PickerDialog/file:/home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAMI;EACI;;AAIA;EC8JJ;EACA;EACA;EACA;;AD7JI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-doc';\n\n#{$block} {\n &__button {\n --g-button-background-color-hover: transparent;\n }\n\n &__table {\n &_size_xl {\n @include mixins.text-body-2();\n }\n\n & > table {\n width: 100%;\n }\n }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: $type;\n}\n\n@mixin button-reset() {\n padding: 0;\n\n font-family: var(--g-text-body-font-family);\n font-size: inherit;\n font-weight: var(--g-text-body-font-weight);\n\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n inset: logical (-$v) (-$h) (-$v);\n }\n}\n\n@mixin max-height($height) {\n max-height: $height;\n overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n @include overflow-ellipsis();\n\n max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n position: relative;\n\n &::before {\n display: block;\n content: '';\n width: 100%;\n padding-block-start: $ratio * 100%;\n }\n\n > :only-child {\n position: absolute;\n inset: 0;\n }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n @if $append {\n @return selector.append($mod, $selector);\n } @else {\n @return list.join($mod, $selector, $separator: space);\n }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n @each $selector in $selectors {\n &#{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n border-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n border-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n border-radius: 0;\n border-inline: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n border-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n }\n\n &#{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n border-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n border-radius: 0;\n border-inline-start: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n }\n\n &#{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n &#{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n border-inline-start: 0;\n }\n }\n}\n\n// Typography\n\n@mixin text-body-1() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-3-font-size);\n line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-short-font-size);\n line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-1-font-size);\n line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-2-font-size);\n line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-1-font-size);\n line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-1-font-size);\n line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-2-font-size);\n line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-3-font-size);\n line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-4-font-size);\n line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-1-font-size);\n line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-2-font-size);\n line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-3-font-size);\n line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-1-font-size);\n line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-2-font-size);\n line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-3-font-size);\n line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n background-image: repeating-linear-gradient(\n -45deg,\n $loading-color-1,\n $loading-color-1 4px,\n $loading-color-2 4px,\n $loading-color-2 8px\n );\n background-size: 150%;\n background-clip: padding-box;\n\n // stylelint-disable-next-line no-unknown-animations\n animation: g-loading-animation 0.5s linear infinite;\n}\n\n@mixin scrollbar() {\n &::-webkit-scrollbar,\n ::-webkit-scrollbar {\n width: var(--g-scrollbar-width);\n height: var(--g-scrollbar-width);\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-track,\n ::-webkit-scrollbar-track {\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-corner,\n ::-webkit-scrollbar-corner {\n background: var(--g-color-scroll-corner);\n }\n\n &::-webkit-scrollbar-thumb,\n ::-webkit-scrollbar-thumb {\n background: var(--g-color-scroll-handle);\n }\n\n &::-webkit-scrollbar-thumb:hover,\n ::-webkit-scrollbar-thumb:hover {\n background: var(--g-color-scroll-handle-hover);\n }\n}\n"],"file":"PickerDoc.css"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAMI;EACI;;AAIA;ECmKJ;EACA;EACA;EACA;;ADlKI;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../../../variables';\n\n$block: '.#{variables.$ns}relative-range-date-picker-doc';\n\n#{$block} {\n &__button {\n --g-button-background-color-hover: transparent;\n }\n\n &__table {\n &_size_xl {\n @include mixins.text-body-2();\n }\n\n & > table {\n width: 100%;\n }\n }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: $type;\n}\n\n@mixin button-reset() {\n padding: 0;\n\n font-family: var(--g-text-body-font-family);\n font-size: inherit;\n font-weight: var(--g-text-body-font-weight);\n\n color: inherit;\n background: none;\n border: none;\n outline: none;\n cursor: pointer;\n}\n\n@mixin link-reset() {\n color: inherit;\n text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n inset: logical (-$v) (-$h);\n }\n}\n\n@mixin max-height($height) {\n max-height: $height;\n overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n @include overflow-ellipsis();\n\n max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n position: relative;\n\n &::before {\n display: block;\n content: '';\n width: 100%;\n padding-block-start: $ratio * 100%;\n }\n\n > :only-child {\n position: absolute;\n inset: 0;\n }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n @if $append {\n @return selector.append($mod, $selector);\n } @else {\n @return list.join($mod, $selector, $separator: space);\n }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n @each $selector in $selectors {\n @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n border-radius: $radius;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n border-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n border-radius: 0;\n border-inline: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n border-radius: 100px;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n border-start-start-radius: $radius;\n border-start-end-radius: 0;\n border-end-start-radius: $radius;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: $radius;\n border-end-start-radius: 0;\n border-end-end-radius: $radius;\n border-inline-start: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n border-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n border-radius: 0;\n border-inline-start: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n border-start-start-radius: 100px;\n border-start-end-radius: 0;\n border-end-start-radius: 100px;\n border-end-end-radius: 0;\n border-inline-end: 0;\n }\n\n @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n border-start-start-radius: 0;\n border-start-end-radius: 100px;\n border-end-start-radius: 0;\n border-end-end-radius: 100px;\n border-inline-start: 0;\n }\n }\n}\n\n// Typography\n\n@mixin text-body-1() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-1-font-size);\n line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-2-font-size);\n line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-3-font-size);\n line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n font-family: var(--g-text-body-font-family);\n font-weight: var(--g-text-body-font-weight);\n font-size: var(--g-text-body-short-font-size);\n line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-1-font-size);\n line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n font-family: var(--g-text-caption-font-family);\n font-weight: var(--g-text-caption-font-weight);\n font-size: var(--g-text-caption-2-font-size);\n line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-1-font-size);\n line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n font-family: var(--g-text-header-font-family);\n font-weight: var(--g-text-header-font-weight);\n font-size: var(--g-text-header-2-font-size);\n line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-1-font-size);\n line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-2-font-size);\n line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n font-family: var(--g-text-subheader-font-family);\n font-weight: var(--g-text-subheader-font-weight);\n font-size: var(--g-text-subheader-3-font-size);\n line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-1-font-size);\n line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-2-font-size);\n line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-3-font-size);\n line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n font-family: var(--g-text-display-font-family);\n font-weight: var(--g-text-display-font-weight);\n font-size: var(--g-text-display-4-font-size);\n line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-1-font-size);\n line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-2-font-size);\n line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-3-font-size);\n line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-1-font-size);\n line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-2-font-size);\n line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n font-family: var(--g-text-code-font-family);\n font-weight: var(--g-text-code-font-weight);\n font-size: var(--g-text-code-inline-3-font-size);\n line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n background-image: repeating-linear-gradient(\n -45deg,\n $loading-color-1,\n $loading-color-1 4px,\n $loading-color-2 4px,\n $loading-color-2 8px\n );\n background-size: 150%;\n background-clip: padding-box;\n\n // stylelint-disable-next-line no-unknown-animations\n animation: g-loading-animation 0.5s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n}\n\n@mixin scrollbar() {\n &::-webkit-scrollbar,\n ::-webkit-scrollbar {\n width: var(--g-scrollbar-width);\n height: var(--g-scrollbar-width);\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-track,\n ::-webkit-scrollbar-track {\n background: var(--g-color-scroll-track);\n }\n\n &::-webkit-scrollbar-corner,\n ::-webkit-scrollbar-corner {\n background: var(--g-color-scroll-corner);\n }\n\n &::-webkit-scrollbar-thumb,\n ::-webkit-scrollbar-thumb {\n background: var(--g-color-scroll-handle);\n }\n\n &::-webkit-scrollbar-thumb:hover,\n ::-webkit-scrollbar-thumb:hover {\n background: var(--g-color-scroll-handle-hover);\n }\n}\n"],"file":"PickerDoc.css"}

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

@@ -9,70 +9,62 @@ const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../../../utils/cn.js");
 const getButtonSizeForInput_1 = require("../../../utils/getButtonSizeForInput.js");
+const defaultPresets_1 = require("../Presets/defaultPresets.js");
 const i18n_1 = require("../Presets/i18n/index.js");
 require("./PickerDoc.css");
 const b = (0, cn_1.block)('relative-range-date-picker-doc');
 const data = [
     {
-        get title() {
-            return (0, i18n_1.i18n)('Last 5 minutes');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "Last 5 minutes" }),
         from: 'now - 5m',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('From start of day');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "From start of day" }),
         from: 'now/d',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('This week');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "This week" }),
         from: 'now/w',
         to: 'now/w',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('From start of week');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "From start of week" }),
         from: 'now/w',
         to: 'now',
     },
     {
-        get title() {
-            return (0, i18n_1.i18n)('Previous month');
-        },
+        title: (0, jsx_runtime_1.jsx)(defaultPresets_1.PresetTitle, { title: "Previous month" }),
         from: 'now - 1M/M',
         to: 'now - 1M/M',
     },
 ];
 function DocContent({ size, docs, onStartUpdate, onEndUpdate }) {
     const isMobile = (0, uikit_1.useMobile)();
+    const { t } = i18n_1.i18n.useTranslation();
     const columns = react_1.default.useMemo(() => [
         {
             id: 'title',
             name: () => {
-                return (0, i18n_1.i18n)('Range');
+                return t('Range');
             },
         },
         {
             id: 'from',
             name: () => {
-                return (0, i18n_1.i18n)('From');
+                return t('From');
             },
             template: (item) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { size: isMobile ? 'l' : (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), onClick: () => onStartUpdate(item.from), children: item.from })),
         },
         {
             id: 'to',
             name: () => {
-                return (0, i18n_1.i18n)('To');
+                return t('To');
             },
             template: (item) => ((0, jsx_runtime_1.jsx)(uikit_1.Button, { size: isMobile ? 'l' : (0, getButtonSizeForInput_1.getButtonSizeForInput)(size), onClick: () => onEndUpdate(item.to), children: item.to })),
         },
-    ], [isMobile, onEndUpdate, onStartUpdate, size]);
+    ], [isMobile, onEndUpdate, onStartUpdate, size, t]);
     return (0, jsx_runtime_1.jsx)(uikit_1.Table, { columns: columns, data: docs, className: b('table', { size }), wordWrap: true });
 }
 function DesktopDoc(_a) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;~~AAiKb~~,8BAYC;;;~~AA3KD~~,0DAA0B;AAE1B,6CAAiD;AACjD,6CAAiF;AAGjF,gDAA2C;AAC3C,mFAA2E;~~AAE3E~~,mDAAqC;AAErC,2BAA0B;AAE1B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,gCAAgC,CAAC,CAAC;AAElD,MAAM,IAAI,GAAa;IACnB;QACI,~~IAAI,~~KAAK~~;YACL~~,~~OAAO~~,~~IAAA~~,~~WAAI~~,EAAC,gBAAgB,~~CAAC,CAAC~~;~~QAClC~~,~~CAAC;QACD,~~IAAI,EAAE,UAAU;QAChB,EAAE,EAAE,KAAK;KACZ;IACD;QACI,~~IAAI,~~KAAK~~;YACL~~,~~OAAO~~,~~IAAA~~,~~WAAI~~,EAAC,mBAAmB,~~CAAC,CAAC~~;~~QACrC~~,~~CAAC;QACD,~~IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,~~IAAI,~~KAAK~~;YACL~~,~~OAAO~~,~~IAAA~~,~~WAAI~~,EAAC,WAAW,~~CAAC,CAAC~~;~~QAC7B~~,~~CAAC;QACD,~~IAAI,EAAE,OAAO;QACb,EAAE,EAAE,OAAO;KACd;IACD;QACI,~~IAAI,~~KAAK~~;YACL~~,~~OAAO~~,~~IAAA~~,~~WAAI~~,EAAC,oBAAoB,~~CAAC,CAAC~~;~~QACtC~~,~~CAAC;QACD,~~IAAI,EAAE,OAAO;QACb,EAAE,EAAE,KAAK;KACZ;IACD;QACI,~~IAAI,~~KAAK~~;YACL~~,~~OAAO~~,~~IAAA~~,~~WAAI~~,EAAC,gBAAgB,~~CAAC,CAAC~~;~~QAClC~~,~~CAAC;QACD,~~IAAI,EAAE,YAAY;QAClB,EAAE,EAAE,YAAY;KACnB;CACJ,CAAC;AAMF,SAAS,UAAU,CAAC,EAAC,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,WAAW,EAAkB;IACzE,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,MAAM,OAAO,GAAgC,eAAK,CAAC,OAAO,CACtD,GAAG,EAAE,CAAC;QACF;YACI,EAAE,EAAE,OAAO;YACX,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,~~IAAA~~,~~WAAI~~,~~EAAC,~~OAAO,CAAC,CAAC;~~YACzB~~,CAAC;SACJ;QACD;YACI,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,~~IAAA~~,~~WAAI~~,~~EAAC,~~MAAM,CAAC,CAAC;~~YACxB~~,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uBAAC,cAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAA,6CAAqB,EAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,YAEtC,IAAI,CAAC,IAAI,GACL,CACZ;SACJ;QACD;YACI,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,GAAG,EAAE;gBACP,OAAO,~~IAAA~~,~~WAAI~~,~~EAAC,~~IAAI,CAAC,CAAC;~~YACtB~~,CAAC;YACD,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,uBAAC,cAAM,IACH,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAA,6CAAqB,EAAC,IAAI,CAAC,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,YAElC,IAAI,CAAC,EAAE,GACH,CACZ;SACJ;KACJ,EACD,CAAC,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC,~~CAC/C~~,CAAC;IAEF,OAAO,uBAAC,aAAK,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,IAAI,EAAC,CAAC,EAAE,QAAQ,SAAG,CAAC;AAC3F,CAAC;AAMD,SAAS,UAAU,CAAC,EAA4C;QAA5C,EAAC,SAAS,EAAE,IAAI,OAA4B,EAAvB,KAAK,sBAA1B,qBAA2B,CAAD;IAC1C,OAAO,CACH,uBAAC,eAAO,IACJ,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,EAClB,QAAQ,EAAE,KAAK,EACf,SAAS,EAAE,CAAC,aAAa,EAAE,YAAY,CAAC,EACxC,OAAO,EAAE,uBAAC,UAAU,kBAAC,IAAI,EAAE,IAAI,IAAM,KAAK,EAAI,YAE9C,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,EACjC,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAE,IAAA,6CAAqB,EAAC,IAAI,CAAC,YAEjC,uBAAC,YAAI,IAAC,IAAI,EAAE,sBAAc,GAAI,GACzB,GACH,CACb,CAAC;AACN,CAAC;AAMD,SAAS,SAAS,CAAC,EAAqC;QAArC,EAAC,SAAS,OAA2B,EAAtB,KAAK,sBAApB,aAAqB,CAAD;IACnC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC9B,uBAAC,cAAM,IACH,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,EACtB,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC,YAED,uBAAC,YAAI,IAAC,IAAI,EAAE,sBAAc,GAAI,GACzB,EACT,uBAAC,aAAK,IAAC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,YAC/C,uBAAC,UAAU,oBAAK,KAAK,EAAI,GACrB,IACN,CACT,CAAC;AACN,CAAC;AAUD,SAAgB,SAAS,CAAC,EAAwC;QAAxC,EAAC,IAAI,GAAG,IAAI,OAA4B,EAAvB,KAAK,sBAAtB,QAAuB,CAAD;IAC5C,MAAM,QAAQ,GAAG,IAAA,iBAAS,GAAE,CAAC;IAE7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5C,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,uBAAC,SAAS,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;IAChD,CAAC;IAED,OAAO,uBAAC,UAAU,oBAAK,KAAK,IAAE,IAAI,EAAE,IAAI,IAAI,CAAC;AACjD,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: Preset[] = [\n {\n ~~get~~ title() ~~{\n return~~ ~~i18n('~~Last 5 minutes~~');\~~n ~~},\n~~ from: 'now - 5m',\n to: 'now',\n },\n {\n ~~get~~ title() ~~{\n return~~ ~~i18n('~~From start of day~~');\~~n ~~},\n~~ from: 'now/d',\n to: 'now',\n },\n {\n ~~get~~ title() ~~{\n return~~ ~~i18n('~~This week~~');\~~n ~~},\n~~ from: 'now/w',\n to: 'now/w',\n },\n {\n ~~get~~ title() ~~{\n return~~ ~~i18n('~~From start of week~~');\~~n ~~},\n~~ from: 'now/w',\n to: 'now',\n },\n {\n ~~get~~ title() ~~{\n return~~ ~~i18n('~~Previous month~~');\~~n ~~},\n~~ from: 'now - 1M/M',\n to: 'now - 1M/M',\n },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' \| 'className'> {\n docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {\n const isMobile = useMobile();\n\n const columns: TableColumnConfig<Preset>[] = React.useMemo(\n () => [\n {\n id: 'title',\n name: () => {\n return ~~i18n~~('Range');\n },\n },\n {\n id: 'from',\n name: () => {\n return ~~i18n~~('From');\n },\n template: (item) => (\n <Button\n size={isMobile ? 'l' : getButtonSizeForInput(size)}\n onClick={() => onStartUpdate(item.from)}\n >\n {item.from}\n </Button>\n ),\n },\n {\n id: 'to',\n name: () => {\n return ~~i18n~~('To');\n },\n template: (item) => (\n <Button\n size={isMobile ? 'l' : getButtonSizeForInput(size)}\n onClick={() => onEndUpdate(item.to)}\n >\n {item.to}\n </Button>\n ),\n },\n ],\n [isMobile, onEndUpdate, onStartUpdate, size],\n );\n\n return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n return (\n <Popover\n className={b(null)}\n hasArrow={false}\n placement={['right-start', 'left-start']}\n content={<DocContent size={size} {...props} />}\n >\n <Button\n className={b('button', className)}\n view=\"flat-secondary\"\n size={getButtonSizeForInput(size)}\n >\n <Icon data={CircleQuestion} />\n </Button>\n </Popover>\n );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n const [open, setOpen] = React.useState(false);\n return (\n <div className={b(null, className)}>\n <Button\n className={b('button')}\n view=\"flat-secondary\"\n size=\"l\"\n onClick={() => {\n setOpen(true);\n }}\n >\n <Icon data={CircleQuestion} />\n </Button>\n <Sheet visible={open} onClose={() => setOpen(false)}>\n <DocContent {...props} />\n </Sheet>\n </div>\n );\n}\n\ninterface PresetsDocProps {\n className?: string;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n docs?: Preset[];\n onStartUpdate: (start: string) => void;\n onEndUpdate: (end: string) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n const isMobile = useMobile();\n\n if (!Array.isArray(docs) \|\| docs.length === 0) {\n return null;\n }\n\n if (isMobile) {\n return <MobileDoc {...props} docs={docs} />;\n }\n\n return <DesktopDoc {...props} docs={docs} />;\n}\n"]}
1	+ {"version":3,"file":"PickerDoc.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerDoc.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {CircleQuestion} from '@gravity-ui/icons';\nimport {Button, Icon, Popover, Sheet, Table, useMobile} from '@gravity-ui/uikit';\nimport type {TableColumnConfig} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {getButtonSizeForInput} from '../../../utils/getButtonSizeForInput';\nimport {PresetTitle} from '../Presets/defaultPresets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {i18n} from '../Presets/i18n';\n\nimport './PickerDoc.scss';\n\nconst b = block('relative-range-date-picker-doc');\n\nconst data: Preset[] = [\n {\n title: <PresetTitle title=\"Last 5 minutes\" />,\n from: 'now - 5m',\n to: 'now',\n },\n {\n title: <PresetTitle title=\"From start of day\" />,\n from: 'now/d',\n to: 'now',\n },\n {\n title: <PresetTitle title=\"This week\" />,\n from: 'now/w',\n to: 'now/w',\n },\n {\n title: <PresetTitle title=\"From start of week\" />,\n from: 'now/w',\n to: 'now',\n },\n {\n title: <PresetTitle title=\"Previous month\" />,\n from: 'now - 1M/M',\n to: 'now - 1M/M',\n },\n];\n\ninterface DocContentProps extends Omit<PresetsDocProps, 'docs' \| 'className'> {\n docs: Preset[];\n}\n\nfunction DocContent({size, docs, onStartUpdate, onEndUpdate}: DocContentProps) {\n const isMobile = useMobile();\n\n const {t} = i18n.useTranslation();\n const columns: TableColumnConfig<Preset>[] = React.useMemo(\n () => [\n {\n id: 'title',\n name: () => {\n return t('Range');\n },\n },\n {\n id: 'from',\n name: () => {\n return t('From');\n },\n template: (item) => (\n <Button\n size={isMobile ? 'l' : getButtonSizeForInput(size)}\n onClick={() => onStartUpdate(item.from)}\n >\n {item.from}\n </Button>\n ),\n },\n {\n id: 'to',\n name: () => {\n return t('To');\n },\n template: (item) => (\n <Button\n size={isMobile ? 'l' : getButtonSizeForInput(size)}\n onClick={() => onEndUpdate(item.to)}\n >\n {item.to}\n </Button>\n ),\n },\n ],\n [isMobile, onEndUpdate, onStartUpdate, size, t],\n );\n\n return <Table columns={columns} data={docs} className={b('table', {size})} wordWrap />;\n}\n\ninterface DesktopDocProps extends Omit<PresetsDocProps, 'docs'> {\n docs: Preset[];\n}\n\nfunction DesktopDoc({className, size, ...props}: DesktopDocProps) {\n return (\n <Popover\n className={b(null)}\n hasArrow={false}\n placement={['right-start', 'left-start']}\n content={<DocContent size={size} {...props} />}\n >\n <Button\n className={b('button', className)}\n view=\"flat-secondary\"\n size={getButtonSizeForInput(size)}\n >\n <Icon data={CircleQuestion} />\n </Button>\n </Popover>\n );\n}\n\ninterface MobileDocProps extends Omit<PresetsDocProps, 'docs'> {\n docs: Preset[];\n}\n\nfunction MobileDoc({className, ...props}: MobileDocProps) {\n const [open, setOpen] = React.useState(false);\n return (\n <div className={b(null, className)}>\n <Button\n className={b('button')}\n view=\"flat-secondary\"\n size=\"l\"\n onClick={() => {\n setOpen(true);\n }}\n >\n <Icon data={CircleQuestion} />\n </Button>\n <Sheet visible={open} onClose={() => setOpen(false)}>\n <DocContent {...props} />\n </Sheet>\n </div>\n );\n}\n\ninterface PresetsDocProps {\n className?: string;\n size?: 's' \| 'm' \| 'l' \| 'xl';\n docs?: Preset[];\n onStartUpdate: (start: string) => void;\n onEndUpdate: (end: string) => void;\n}\n\nexport function PickerDoc({docs = data, ...props}: PresetsDocProps) {\n const isMobile = useMobile();\n\n if (!Array.isArray(docs) \|\| docs.length === 0) {\n return null;\n }\n\n if (isMobile) {\n return <MobileDoc {...props} docs={docs} />;\n }\n\n return <DesktopDoc {...props} docs={docs} />;\n}\n"]}

package/dist/cjs/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.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-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&__header%20%7B%0A%20%20%20%20%20%20%20%20display:%20flex;%0A%20%20%20%20%20%20%20%20align-items:%20center;%0A%20%20%20%20%20%20%20%20gap:%20var(--g-spacing-1);%0A%0A%20%20%20%20%20%20%20%20margin-block-end:%20var(--g-spacing-2);%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;EACA;EACA;EAEA;;AAGJ;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 &__header {\n display: flex;\n align-items: center;\n gap: var(--g-spacing-1);\n\n margin-block-end: var(--g-spacing-2);\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"}
1	+ {"version":3,"sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.scss"],"names":[],"mappings":"AAKI;EACI;EACA;EACA;;AAEA;EACI;;AAEA;EACI;;AAKZ;EACI;EACA;EACA;EAEA;;AAGJ;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 &__header {\n display: flex;\n align-items: center;\n gap: var(--g-spacing-1);\n\n margin-block-end: var(--g-spacing-2);\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.js CHANGED Viewed

@@ -27,14 +27,15 @@ function PickerForm(props) {
         errorPlacement: 'inside',
     };
     const { isDateUnavailable, withHeader = false } = props;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && ((0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: (0, i18n_1.i18n)('Select the interval') }), (0, jsx_runtime_1.jsx)(PickerDoc_1.PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
+    const { t } = i18n_1.i18n.useTranslation();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b({ size: props.size }, props.className), style: props.style, children: [withHeader && ((0, jsx_runtime_1.jsxs)("div", { className: b('header'), children: [(0, jsx_runtime_1.jsx)(uikit_1.Text, { variant: props.size === 'xl' ? 'subheader-3' : 'subheader-2', children: t('Select the interval') }), (0, jsx_runtime_1.jsx)(PickerDoc_1.PickerDoc, { size: props.size, docs: props.docs, onStartUpdate: (start) => {
                             state.setStart({ type: 'relative', value: start });
                         }, onEndUpdate: (end) => {
                             state.setEnd({ type: 'relative', value: end });
-                        } })] })), (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: () => {
+                        } })] })), (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')) || t('Value is incorrect.'), placeholderValue: (_d = props.placeholderValue) === null || _d === void 0 ? void 0 : _d.startOf('day'), label: t('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')) || t('Value is incorrect.'), placeholderValue: (_h = props.placeholderValue) === null || _h === void 0 ? void 0 : _h.endOf('day'), label: t('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) => {
+                }, className: b('apply'), width: "max", children: t('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 }, props.applyPresetsImmediately);
                     if (!props.withApplyButton || props.applyPresetsImmediately) {
                         props.onApply();