npm - @gravity-ui/date-components - Versions diffs - 4.0.0 → 4.1.0 - Mend

@gravity-ui/date-components 4.0.0 → 4.1.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 (17) hide show

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

@@ -72,7 +72,7 @@ function RelativeRangeDatePicker(props) {
                     setTimeout(() => {
                         dialogClosing.current = false;
                     });
-                }, anchor: anchor, modal: true, returnFocus: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, applyPresetsImmediately: props.applyPresetsImmediately, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList, withHeader: props.withHeader })] }));
+                }, anchor: anchor, modal: true, returnFocus: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, calendarPopupPlacement: props.calendarPopupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, applyPresetsImmediately: props.applyPresetsImmediately, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList, withHeader: props.withHeader })] }));
 }
 function getNativeValue(value) {
     if (!value) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RelativeRangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/RelativeRangeDatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {useControlledState, useFocusWithin, useMobile} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {Value} from '../RelativeDatePicker';\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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n {...DOMProps}\n ref={setAnchor}\n {...focusWithinProps}\n onKeyDown={(e) => {\n if (\n open &&\n e.key === 'Escape' &&\n (e.currentTarget as HTMLElement).contains(e.target as Node)\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(false);\n dialogClosing.current = true;\n }\n }}\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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n {...DOMProps}\n ref={setAnchor}\n {...focusWithinProps}\n onKeyDown={(e) => {\n if (\n open &&\n e.key === 'Escape' &&\n (e.currentTarget as HTMLElement).contains(e.target as Node)\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(false);\n dialogClosing.current = true;\n }\n }}\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 calendarPopupPlacement={props.calendarPopupPlacement}\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/PickerDialog/PickerForm.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { TextInputSize } from '@gravity-ui/uikit';
+import type { RelativeDatePickerProps } from "../../../RelativeDatePicker/index.js";
 import type { DomProps, StyleProps } from "../../../types/index.js";
 import type { RelativeRangeDatePickerStateOptions } from "../../hooks/useRelativeRangeDatePickerState.js";
 import type { Preset } from "../Presets/defaultPresets.js";
@@ -16,6 +17,8 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     readOnly?: boolean;
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
     /** Apply changes with button */

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

@@ -39,6 +39,7 @@ function PickerForm(props) {
         readOnly: props.readOnly,
         size: props.size,
         errorPlacement: 'inside',
+        popupPlacement: props.calendarPopupPlacement,
     };
     const { isDateUnavailable, withHeader = false } = props;
     const { t } = i18n_1.i18n.useTranslation();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {filterPresetList} from '../Presets/utils';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element /\n size?: TextInputSize;\n /\n Whether the values is immutable.\n * @default false\n /\n readOnly?: boolean;\n /* Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n const docs = React.useMemo(\n () =>\n props.docs\n ? filterPresetList(props.docs, {\n minValue: props.minValue,\n allowNullableValues: props.allowNullableValues,\n })\n : props.docs,\n [props.allowNullableValues, props.docs, props.minValue],\n );\n\n const toRelativeValue = (value: string \| null) => {\n if (value === null && !props.allowNullableValues) {\n return undefined;\n }\n\n return value === null ? null : {type: 'relative' as const, value};\n };\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n };\n const {isDateUnavailable, withHeader = false} = props;\n const {t} = i18n.useTranslation();\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n {withHeader && (\n <div className={b('header')}>\n <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n {t('Select the interval')}\n </Text>\n <PickerDoc\n size={props.size}\n docs={docs}\n onStartUpdate={(start) => {\n const nextStart = toRelativeValue(start);\n if (nextStart !== undefined) {\n state.setStart(nextStart);\n }\n }}\n onEndUpdate={(end) => {\n const nextEnd = toRelativeValue(end);\n if (nextEnd !== undefined) {\n state.setEnd(nextEnd);\n }\n }}\n onRangeUpdate={(start, end) => {\n const nextStart = toRelativeValue(start);\n const nextEnd = toRelativeValue(end);\n if (nextStart !== undefined && nextEnd !== undefined) {\n state.setRange(nextStart, nextEnd);\n }\n }}\n />\n </div>\n )}\n\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={t('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={t('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {t('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n start === null ? null : {type: 'relative', value: start},\n end === null ? null : {type: 'relative', value: end},\n props.applyPresetsImmediately,\n );\n if (!props.withApplyButton \|\| props.applyPresetsImmediately) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n allowNullableValues={props.allowNullableValues}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAyDb,gCAmJC;;;AA1MD,0DAA0B;AAG1B,6CAA+C;AAG/C,gDAA2C;AAC3C,6EAA+D;AAI/D,mDAA2C;AAE3C,+CAAkD;AAElD,6CAAqC;AAErC,8CAAsC;AACtC,0CAA4B;AAC5B,sGAA8F;AAE9F,4BAA2B;AAE3B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,iCAAiC,CAAC,CAAC;AAgCnD,SAAgB,UAAU,CACtB,KAEC;IAED,MAAM,KAAK,GAAG,IAAA,6EAAqC,EAAC,KAAK,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,eAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CACD,KAAK,CAAC,IAAI;QACN,CAAC,CAAC,IAAA,wBAAgB,EAAC,KAAK,CAAC,IAAI,EAAE;YACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;SACjD,CAAC;QACJ,CAAC,CAAC,KAAK,CAAC,IAAI,EACpB,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAC1D,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC/C,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAmB,EAAE,KAAK,EAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,mBAAmB;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,KAAK,CAAC,sBAAsB;KAC/C,CAAC;IACF,MAAM,EAAC,iBAAiB,EAAE,UAAU,GAAG,KAAK,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,CAAC,EAAC,GAAG,WAAI,CAAC,cAAc,EAAE,CAAC;IAClC,OAAO,CACH,iCAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACrE,UAAU,IAAI,CACX,iCAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,uBAAC,YAAI,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,YAC7D,CAAC,CAAC,qBAAqB,CAAC,GACtB,EACP,uBAAC,qBAAS,IACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gCAC1B,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;4BAC9B,CAAC;wBACL,CAAC,EACD,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE;4BACjB,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;4BAC1B,CAAC;wBACL,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;4BAC1B,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,SAAS,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACnD,KAAK,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;4BACvC,CAAC;wBACL,CAAC,GACH,IACA,CACT,EAED,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,uBAAC,uCAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAE9E,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzE,YAAY,EACR,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEzE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,EACxD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,uBAAC,uCAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAE5E,eAAe,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EACR,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEvE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EACd,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,EACtB,OAAO,SACT,IACA,EACL,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACxC,uBAAC,cAAM,IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,UAAU,EAAE,CAAC;oBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,KAAK,YAEV,CAAC,CAAC,OAAO,CAAC,GACN,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,uBAAC,iBAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3B,KAAK,CAAC,QAAQ,CACV,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,EACxD,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,EACpD,KAAK,CAAC,uBAAuB,CAChC,CAAC;oBACF,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;wBAC1D,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC;gBACL,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,gCAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,uBAAC,aAAK,IACF,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,GACA,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {filterPresetList} from '../Presets/utils';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element /\n size?: TextInputSize;\n /\n Whether the values is immutable.\n * @default false\n /\n readOnly?: boolean;\n /* Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* Placement of calendar popups inside the range picker dialog. /\n calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n const docs = React.useMemo(\n () =>\n props.docs\n ? filterPresetList(props.docs, {\n minValue: props.minValue,\n allowNullableValues: props.allowNullableValues,\n })\n : props.docs,\n [props.allowNullableValues, props.docs, props.minValue],\n );\n\n const toRelativeValue = (value: string \| null) => {\n if (value === null && !props.allowNullableValues) {\n return undefined;\n }\n\n return value === null ? null : {type: 'relative' as const, value};\n };\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n popupPlacement: props.calendarPopupPlacement,\n };\n const {isDateUnavailable, withHeader = false} = props;\n const {t} = i18n.useTranslation();\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n {withHeader && (\n <div className={b('header')}>\n <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n {t('Select the interval')}\n </Text>\n <PickerDoc\n size={props.size}\n docs={docs}\n onStartUpdate={(start) => {\n const nextStart = toRelativeValue(start);\n if (nextStart !== undefined) {\n state.setStart(nextStart);\n }\n }}\n onEndUpdate={(end) => {\n const nextEnd = toRelativeValue(end);\n if (nextEnd !== undefined) {\n state.setEnd(nextEnd);\n }\n }}\n onRangeUpdate={(start, end) => {\n const nextStart = toRelativeValue(start);\n const nextEnd = toRelativeValue(end);\n if (nextStart !== undefined && nextEnd !== undefined) {\n state.setRange(nextStart, nextEnd);\n }\n }}\n />\n </div>\n )}\n\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={t('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={t('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {t('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n start === null ? null : {type: 'relative', value: start},\n end === null ? null : {type: 'relative', value: end},\n props.applyPresetsImmediately,\n );\n if (!props.withApplyButton \|\| props.applyPresetsImmediately) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n allowNullableValues={props.allowNullableValues}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}

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

@@ -1,5 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { Value } from "../RelativeDatePicker/index.js";
+import type { RelativeDatePickerProps, Value } from "../RelativeDatePicker/index.js";
 import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, PopupStyleProps, RangeValue, StyleProps, TextInputProps, Validation } from "../types/index.js";
 import type { Preset } from "./components/Presets/defaultPresets.js";
 import type { PresetTab } from "./components/Presets/utils.js";
@@ -18,6 +18,8 @@ export interface RelativeRangeDatePickerRenderControlProps {
 export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps, PopupStyleProps {
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
     /** Apply changes with button */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'id'\n \| 'role'\n \| 'aria-controls'\n \| 'aria-haspopup'\n \| 'aria-expanded'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'aria-details'\n \| 'onClick'\n \| 'onKeyDown'\n \| 'disabled'\n \| 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue \| null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends\n RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden /\n docs?: Preset[];\n /* Show selected relative values as absolute dates /\n alwaysShowAsAbsolute?: boolean;\n /* /\n getRangeTitle?: (value: RangeValue<Value \| null> \| null, timeZone: string) => string;\n /* Handler that is called when the popup's open state changes. /\n onOpenChange?: (open: boolean) => void;\n /* Used to render control. */\n renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {RelativeDatePickerProps, Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'id'\n \| 'role'\n \| 'aria-controls'\n \| 'aria-haspopup'\n \| 'aria-expanded'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'aria-details'\n \| 'onClick'\n \| 'onKeyDown'\n \| 'disabled'\n \| 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue \| null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends\n RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* Placement of calendar popups inside the range picker dialog. /\n calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden /\n docs?: Preset[];\n /* Show selected relative values as absolute dates /\n alwaysShowAsAbsolute?: boolean;\n /* /\n getRangeTitle?: (value: RangeValue<Value \| null> \| null, timeZone: string) => string;\n /* Handler that is called when the popup's open state changes. /\n onOpenChange?: (open: boolean) => void;\n /* Used to render control. */\n renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}

package/dist/cjs/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"type":"commonjs","version":"4.0.0","sideEffects":[".css",".scss"]}
1	+ {"type":"commonjs","version":"4.1.0","sideEffects":[".css",".scss"]}

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

@@ -68,7 +68,7 @@ export function RelativeRangeDatePicker(props) {
                     setTimeout(() => {
                         dialogClosing.current = false;
                     });
-                }, anchor: anchor, modal: true, returnFocus: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, applyPresetsImmediately: props.applyPresetsImmediately, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList, withHeader: props.withHeader })] }));
+                }, anchor: anchor, modal: true, returnFocus: true, popupClassName: props.popupClassName, popupStyle: props.popupStyle, popupPlacement: props.popupPlacement, calendarPopupPlacement: props.calendarPopupPlacement, popupOffset: props.popupOffset, isMobile: isMobile, size: props.size, format: props.format, readOnly: props.readOnly, minValue: props.minValue, maxValue: props.maxValue, allowNullableValues: props.allowNullableValues, isDateUnavailable: props.isDateUnavailable, placeholderValue: props.placeholderValue, withPresets: props.withPresets, applyPresetsImmediately: props.applyPresetsImmediately, presetTabs: props.presetTabs, docs: props.docs, withApplyButton: props.withApplyButton, withZonesList: props.withZonesList, withHeader: props.withHeader })] }));
 }
 function getNativeValue(value) {
     if (!value) {

package/dist/esm/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';\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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n {...DOMProps}\n ref={setAnchor}\n {...focusWithinProps}\n onKeyDown={(e) => {\n if (\n open &&\n e.key === 'Escape' &&\n (e.currentTarget as HTMLElement).contains(e.target as Node)\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(false);\n dialogClosing.current = true;\n }\n }}\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 // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n {...DOMProps}\n ref={setAnchor}\n {...focusWithinProps}\n onKeyDown={(e) => {\n if (\n open &&\n e.key === 'Escape' &&\n (e.currentTarget as HTMLElement).contains(e.target as Node)\n ) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(false);\n dialogClosing.current = true;\n }\n }}\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 calendarPopupPlacement={props.calendarPopupPlacement}\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/esm/components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { TextInputSize } from '@gravity-ui/uikit';
+import type { RelativeDatePickerProps } from "../../../RelativeDatePicker/index.js";
 import type { DomProps, StyleProps } from "../../../types/index.js";
 import type { RelativeRangeDatePickerStateOptions } from "../../hooks/useRelativeRangeDatePickerState.js";
 import type { Preset } from "../Presets/defaultPresets.js";
@@ -16,6 +17,8 @@ export interface PickerFormProps extends RelativeRangeDatePickerStateOptions, Do
     readOnly?: boolean;
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
     /** Apply changes with button */

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

@@ -35,6 +35,7 @@ export function PickerForm(props) {
         readOnly: props.readOnly,
         size: props.size,
         errorPlacement: 'inside',
+        popupPlacement: props.calendarPopupPlacement,
     };
     const { isDateUnavailable, withHeader = false } = props;
     const { t } = i18n.useTranslation();

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,kBAAkB,EAAC,6CAAoC;AAI/D,OAAO,EAAC,OAAO,EAAC,8BAA2B;AAE3C,OAAO,EAAC,gBAAgB,EAAC,4BAAyB;AAElD,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,EAAC,SAAS,EAAC,uBAAoB;AACtC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAC5B,OAAO,EAAC,qCAAqC,EAAC,mDAAgD;AAE9F,0BAA2B;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC;AA8BnD,MAAM,UAAU,UAAU,CACtB,KAEC;IAED,MAAM,KAAK,GAAG,qCAAqC,CAAC,KAAK,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CACD,KAAK,CAAC,IAAI;QACN,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;YACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;SACjD,CAAC;QACJ,CAAC,CAAC,KAAK,CAAC,IAAI,EACpB,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAC1D,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC/C,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAmB,EAAE,KAAK,EAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,mBAAmB;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,cAAc,EAAE,QAAQ;KAC3B,CAAC;IACF,MAAM,EAAC,iBAAiB,EAAE,UAAU,GAAG,KAAK,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,CAAC,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAClC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACrE,UAAU,IAAI,CACX,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,YAC7D,CAAC,CAAC,qBAAqB,CAAC,GACtB,EACP,KAAC,SAAS,IACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gCAC1B,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;4BAC9B,CAAC;wBACL,CAAC,EACD,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE;4BACjB,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;4BAC1B,CAAC;wBACL,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;4BAC1B,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,SAAS,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACnD,KAAK,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;4BACvC,CAAC;wBACL,CAAC,GACH,IACA,CACT,EAED,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAC,kBAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAE9E,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzE,YAAY,EACR,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEzE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,EACxD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,KAAC,kBAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAE5E,eAAe,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EACR,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEvE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EACd,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,EACtB,OAAO,SACT,IACA,EACL,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACxC,KAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,UAAU,EAAE,CAAC;oBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,KAAK,YAEV,CAAC,CAAC,OAAO,CAAC,GACN,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3B,KAAK,CAAC,QAAQ,CACV,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,EACxD,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,EACpD,KAAK,CAAC,uBAAuB,CAChC,CAAC;oBACF,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;wBAC1D,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC;gBACL,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,GACA,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {filterPresetList} from '../Presets/utils';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element /\n size?: TextInputSize;\n /\n Whether the values is immutable.\n * @default false\n /\n readOnly?: boolean;\n /* Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n const docs = React.useMemo(\n () =>\n props.docs\n ? filterPresetList(props.docs, {\n minValue: props.minValue,\n allowNullableValues: props.allowNullableValues,\n })\n : props.docs,\n [props.allowNullableValues, props.docs, props.minValue],\n );\n\n const toRelativeValue = (value: string \| null) => {\n if (value === null && !props.allowNullableValues) {\n return undefined;\n }\n\n return value === null ? null : {type: 'relative' as const, value};\n };\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n };\n const {isDateUnavailable, withHeader = false} = props;\n const {t} = i18n.useTranslation();\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n {withHeader && (\n <div className={b('header')}>\n <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n {t('Select the interval')}\n </Text>\n <PickerDoc\n size={props.size}\n docs={docs}\n onStartUpdate={(start) => {\n const nextStart = toRelativeValue(start);\n if (nextStart !== undefined) {\n state.setStart(nextStart);\n }\n }}\n onEndUpdate={(end) => {\n const nextEnd = toRelativeValue(end);\n if (nextEnd !== undefined) {\n state.setEnd(nextEnd);\n }\n }}\n onRangeUpdate={(start, end) => {\n const nextStart = toRelativeValue(start);\n const nextEnd = toRelativeValue(end);\n if (nextStart !== undefined && nextEnd !== undefined) {\n state.setRange(nextStart, nextEnd);\n }\n }}\n />\n </div>\n )}\n\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={t('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={t('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {t('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n start === null ? null : {type: 'relative', value: start},\n end === null ? null : {type: 'relative', value: end},\n props.applyPresetsImmediately,\n );\n if (!props.withApplyButton \|\| props.applyPresetsImmediately) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n allowNullableValues={props.allowNullableValues}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"PickerForm.js","sourceRoot":"../../../../../../src","sources":["components/RelativeRangeDatePicker/components/PickerDialog/PickerForm.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAG/C,OAAO,EAAC,KAAK,EAAC,gCAA6B;AAC3C,OAAO,EAAC,kBAAkB,EAAC,6CAAoC;AAI/D,OAAO,EAAC,OAAO,EAAC,8BAA2B;AAE3C,OAAO,EAAC,gBAAgB,EAAC,4BAAyB;AAElD,OAAO,EAAC,KAAK,EAAC,0BAAuB;AAErC,OAAO,EAAC,SAAS,EAAC,uBAAoB;AACtC,OAAO,EAAC,IAAI,EAAC,wBAAe;AAC5B,OAAO,EAAC,qCAAqC,EAAC,mDAAgD;AAE9F,0BAA2B;AAE3B,MAAM,CAAC,GAAG,KAAK,CAAC,iCAAiC,CAAC,CAAC;AAgCnD,MAAM,UAAU,UAAU,CACtB,KAEC;IAED,MAAM,KAAK,GAAG,qCAAqC,CAAC,KAAK,CAAC,CAAC;IAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,CACtB,GAAG,EAAE,CACD,KAAK,CAAC,IAAI;QACN,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE;YACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB;SACjD,CAAC;QACJ,CAAC,CAAC,KAAK,CAAC,IAAI,EACpB,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,CAC1D,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC/C,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,OAAO,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAmB,EAAE,KAAK,EAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,UAAU,GAA4B;QACxC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,MAAM,EAAE,KAAK,CAAC,MAAM;QACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,mBAAmB;QACnC,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,cAAc,EAAE,QAAQ;QACxB,cAAc,EAAE,KAAK,CAAC,sBAAsB;KAC/C,CAAC;IACF,MAAM,EAAC,iBAAiB,EAAE,UAAU,GAAG,KAAK,EAAC,GAAG,KAAK,CAAC;IACtD,MAAM,EAAC,CAAC,EAAC,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;IAClC,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAC,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aACrE,UAAU,IAAI,CACX,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,KAAC,IAAI,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,YAC7D,CAAC,CAAC,qBAAqB,CAAC,GACtB,EACP,KAAC,SAAS,IACN,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;gCAC1B,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;4BAC9B,CAAC;wBACL,CAAC,EACD,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE;4BACjB,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACxB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;4BAC1B,CAAC;wBACL,CAAC,EACD,aAAa,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;4BAC1B,MAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;4BACzC,MAAM,OAAO,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;4BACrC,IAAI,SAAS,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;gCACnD,KAAK,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;4BACvC,CAAC;wBACL,CAAC,GACH,IACA,CACT,EAED,eAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,aACxB,KAAC,kBAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,EAE9E,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACzE,YAAY,EACR,KAAK,CAAC,eAAe,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEzE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,OAAO,CAAC,KAAK,CAAC,EACxD,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,KAAC,kBAAkB,OACX,UAAU,EACd,iBAAiB,EACb,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAE5E,eAAe,EAAE,KAAK,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvE,YAAY,EACR,KAAK,CAAC,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,EAEvE,gBAAgB,EAAE,KAAK,CAAC,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,EACtD,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EACd,KAAK,EAAE,KAAK,CAAC,GAAG,EAChB,QAAQ,EAAE,KAAK,CAAC,MAAM,EACtB,OAAO,SACT,IACA,EACL,KAAK,CAAC,eAAe,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACxC,KAAC,MAAM,IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,EACzB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE;oBACV,KAAK,CAAC,UAAU,EAAE,CAAC;oBACnB,KAAK,CAAC,OAAO,EAAE,CAAC;gBACpB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,KAAK,EAAC,KAAK,YAEV,CAAC,CAAC,OAAO,CAAC,GACN,CACZ,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CACpC,KAAC,OAAO,IACJ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,cAAc,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;oBAC3B,KAAK,CAAC,QAAQ,CACV,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAC,EACxD,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAC,EACpD,KAAK,CAAC,uBAAuB,CAChC,CAAC;oBACF,IAAI,CAAC,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC;wBAC1D,KAAK,CAAC,OAAO,EAAE,CAAC;oBACpB,CAAC;gBACL,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,mBAAmB,EAAE,KAAK,CAAC,mBAAmB,EAC9C,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,GACzB,CACL,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,cAAK,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,YACrB,KAAC,KAAK,IACF,KAAK,EAAE,KAAK,CAAC,QAAQ,EACrB,QAAQ,EAAE,KAAK,CAAC,WAAW,EAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAE,KAAK,CAAC,IAAI,GAClB,GACA,CACT,CAAC,CAAC,CAAC,IAAI,IACN,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Button, Text} from '@gravity-ui/uikit';\nimport type {TextInputSize} from '@gravity-ui/uikit';\n\nimport {block} from '../../../../utils/cn';\nimport {RelativeDatePicker} from '../../../RelativeDatePicker';\nimport type {RelativeDatePickerProps} from '../../../RelativeDatePicker';\nimport type {DomProps, StyleProps} from '../../../types';\nimport type {RelativeRangeDatePickerStateOptions} from '../../hooks/useRelativeRangeDatePickerState';\nimport {Presets} from '../Presets/Presets';\nimport type {Preset} from '../Presets/defaultPresets';\nimport {filterPresetList} from '../Presets/utils';\nimport type {PresetTab} from '../Presets/utils';\nimport {Zones} from '../Zones/Zones';\n\nimport {PickerDoc} from './PickerDoc';\nimport {i18n} from './i18n';\nimport {useRelativeRangeDatePickerDialogState} from './useRelativeRangeDatePickerDialogState';\n\nimport './PickerForm.scss';\n\nconst b = block('relative-range-date-picker-form');\n\nexport interface PickerFormProps extends RelativeRangeDatePickerStateOptions, DomProps, StyleProps {\n /** The size of the element /\n size?: TextInputSize;\n /\n Whether the values is immutable.\n * @default false\n /\n readOnly?: boolean;\n /* Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* Placement of calendar popups inside the range picker dialog. /\n calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden */\n docs?: Preset[];\n}\n\nexport function PickerForm(\n props: PickerFormProps & {\n onApply: () => void;\n },\n) {\n const state = useRelativeRangeDatePickerDialogState(props);\n const docs = React.useMemo(\n () =>\n props.docs\n ? filterPresetList(props.docs, {\n minValue: props.minValue,\n allowNullableValues: props.allowNullableValues,\n })\n : props.docs,\n [props.allowNullableValues, props.docs, props.minValue],\n );\n\n const toRelativeValue = (value: string \| null) => {\n if (value === null && !props.allowNullableValues) {\n return undefined;\n }\n\n return value === null ? null : {type: 'relative' as const, value};\n };\n\n const fieldProps: RelativeDatePickerProps = {\n timeZone: state.timeZone,\n format: props.format,\n minValue: props.minValue,\n maxValue: props.maxValue,\n hasClear: props.allowNullableValues,\n readOnly: props.readOnly,\n size: props.size,\n errorPlacement: 'inside',\n popupPlacement: props.calendarPopupPlacement,\n };\n const {isDateUnavailable, withHeader = false} = props;\n const {t} = i18n.useTranslation();\n return (\n <div className={b({size: props.size}, props.className)} style={props.style}>\n {withHeader && (\n <div className={b('header')}>\n <Text variant={props.size === 'xl' ? 'subheader-3' : 'subheader-2'}>\n {t('Select the interval')}\n </Text>\n <PickerDoc\n size={props.size}\n docs={docs}\n onStartUpdate={(start) => {\n const nextStart = toRelativeValue(start);\n if (nextStart !== undefined) {\n state.setStart(nextStart);\n }\n }}\n onEndUpdate={(end) => {\n const nextEnd = toRelativeValue(end);\n if (nextEnd !== undefined) {\n state.setEnd(nextEnd);\n }\n }}\n onRangeUpdate={(start, end) => {\n const nextStart = toRelativeValue(start);\n const nextEnd = toRelativeValue(end);\n if (nextStart !== undefined && nextEnd !== undefined) {\n state.setRange(nextStart, nextEnd);\n }\n }}\n />\n </div>\n )}\n\n <div className={b('pickers')}>\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'start') : undefined\n }\n validationState={state.startValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.startValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.startOf('day')}\n label={t('From')}\n value={state.start}\n onUpdate={state.setStart}\n />\n <RelativeDatePicker\n {...fieldProps}\n isDateUnavailable={\n isDateUnavailable ? (date) => isDateUnavailable(date, 'end') : undefined\n }\n validationState={state.endValidation?.isInvalid ? 'invalid' : undefined}\n errorMessage={\n state.endValidation?.errors?.join('\\n') \|\| t('Value is incorrect.')\n }\n placeholderValue={props.placeholderValue?.endOf('day')}\n label={t('To')}\n value={state.end}\n onUpdate={state.setEnd}\n roundUp\n />\n </div>\n {props.withApplyButton && !props.readOnly ? (\n <Button\n disabled={state.isInvalid}\n size={props.size}\n onClick={() => {\n state.applyValue();\n props.onApply();\n }}\n className={b('apply')}\n width=\"max\"\n >\n {t('Apply')}\n </Button>\n ) : null}\n {props.withPresets && !props.readOnly ? (\n <Presets\n size={props.size}\n presetTabs={props.presetTabs}\n onChoosePreset={(start, end) => {\n state.setRange(\n start === null ? null : {type: 'relative', value: start},\n end === null ? null : {type: 'relative', value: end},\n props.applyPresetsImmediately,\n );\n if (!props.withApplyButton \|\| props.applyPresetsImmediately) {\n props.onApply();\n }\n }}\n minValue={props.minValue}\n allowNullableValues={props.allowNullableValues}\n className={b('presets')}\n />\n ) : null}\n {props.withZonesList ? (\n <div className={b('zone')}>\n <Zones\n value={state.timeZone}\n onUpdate={state.setTimeZone}\n disabled={props.readOnly}\n size={props.size}\n />\n </div>\n ) : null}\n </div>\n );\n}\n"]}

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

@@ -1,5 +1,5 @@
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { Value } from "../RelativeDatePicker/index.js";
+import type { RelativeDatePickerProps, Value } from "../RelativeDatePicker/index.js";
 import type { AccessibilityProps, DomProps, FocusableProps, InputBase, InputDOMProps, PopupStyleProps, RangeValue, StyleProps, TextInputProps, Validation } from "../types/index.js";
 import type { Preset } from "./components/Presets/defaultPresets.js";
 import type { PresetTab } from "./components/Presets/utils.js";
@@ -18,6 +18,8 @@ export interface RelativeRangeDatePickerRenderControlProps {
 export interface RelativeRangeDatePickerProps extends RelativeRangeDatePickerStateOptions, DomProps, AccessibilityProps, InputBase, InputDOMProps, TextInputProps, Validation, FocusableProps, StyleProps, PopupStyleProps {
     /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) */
     format?: string;
+    /** Placement of calendar popups inside the range picker dialog. */
+    calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];
     /** A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. */
     placeholderValue?: DateTime;
     /** Apply changes with button */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'id'\n \| 'role'\n \| 'aria-controls'\n \| 'aria-haspopup'\n \| 'aria-expanded'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'aria-details'\n \| 'onClick'\n \| 'onKeyDown'\n \| 'disabled'\n \| 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue \| null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends\n RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden /\n docs?: Preset[];\n /* Show selected relative values as absolute dates /\n alwaysShowAsAbsolute?: boolean;\n /* /\n getRangeTitle?: (value: RangeValue<Value \| null> \| null, timeZone: string) => string;\n /* Handler that is called when the popup's open state changes. /\n onOpenChange?: (open: boolean) => void;\n /* Used to render control. */\n renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"../../../../src","sources":["components/RelativeRangeDatePicker/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {RelativeDatePickerProps, Value} from '../RelativeDatePicker';\nimport type {\n AccessibilityProps,\n DomProps,\n FocusableProps,\n InputBase,\n InputDOMProps,\n PopupStyleProps,\n RangeValue,\n StyleProps,\n TextInputProps,\n Validation,\n} from '../types';\n\nimport type {Preset} from './components/Presets/defaultPresets';\nimport type {PresetTab} from './components/Presets/utils';\nimport type {\n RelativeRangeDatePickerStateOptions,\n RelativeRangeDatePickerValue,\n} from './hooks/useRelativeRangeDatePickerState';\n\nexport type RelativeRangeDatePickerTriggerProps = Pick<\n React.AllHTMLAttributes<HTMLElement>,\n \| 'id'\n \| 'role'\n \| 'aria-controls'\n \| 'aria-haspopup'\n \| 'aria-expanded'\n \| 'aria-label'\n \| 'aria-labelledby'\n \| 'aria-describedby'\n \| 'aria-details'\n \| 'onClick'\n \| 'onKeyDown'\n \| 'disabled'\n \| 'readOnly'\n>;\n\nexport interface RelativeRangeDatePickerRenderControlProps {\n ref: React.Ref<HTMLElement>;\n value: RelativeRangeDatePickerValue \| null;\n title: string;\n errorMessage?: React.ReactNode;\n validationState?: 'invalid';\n open: boolean;\n setOpen: (open: boolean) => void;\n triggerProps: RelativeRangeDatePickerTriggerProps;\n}\n\nexport interface RelativeRangeDatePickerProps\n extends\n RelativeRangeDatePickerStateOptions,\n DomProps,\n AccessibilityProps,\n InputBase,\n InputDOMProps,\n TextInputProps,\n Validation,\n FocusableProps,\n StyleProps,\n PopupStyleProps {\n /** Format of the date when rendered in the input. [Available formats](https://day.js.org/docs/en/display/format) /\n format?: string;\n /* Placement of calendar popups inside the range picker dialog. /\n calendarPopupPlacement?: RelativeDatePickerProps['popupPlacement'];\n /* A placeholder date that controls the default values of each segment when the user first interacts with them. Defaults to today's date at midnight. /\n placeholderValue?: DateTime;\n /* Apply changes with button /\n withApplyButton?: boolean;\n /* Show time zone selector /\n withZonesList?: boolean;\n /* Show relative range presets /\n withPresets?: boolean;\n /* Apply presets immediately /\n applyPresetsImmediately?: boolean;\n /* Show header with docs tooltip /\n withHeader?: boolean;\n /* Custom preset tabs /\n presetTabs?: PresetTab[];\n /* Custom docs for picker, if empty array docs will be hidden /\n docs?: Preset[];\n /* Show selected relative values as absolute dates /\n alwaysShowAsAbsolute?: boolean;\n /* /\n getRangeTitle?: (value: RangeValue<Value \| null> \| null, timeZone: string) => string;\n /* Handler that is called when the popup's open state changes. /\n onOpenChange?: (open: boolean) => void;\n /* Used to render control. */\n renderControl?: (props: RelativeRangeDatePickerRenderControlProps) => React.ReactElement;\n}\n"]}

package/dist/esm/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"type":"module","version":"4.0.0","sideEffects":[".css",".scss"]}
1	+ {"type":"module","version":"4.1.0","sideEffects":[".css",".scss"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/date-components",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "",
   "license": "MIT",
   "type": "module",