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

@gravity-ui/date-components 3.4.2 → 4.0.0

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

Files changed (401) hide show

package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js CHANGED Viewed

@@ -11,9 +11,7 @@ const getButtonSizeForInput_1 = require("../../utils/getButtonSizeForInput.js");
 const mergeProps_1 = require("../../utils/mergeProps.js");
 const i18n_1 = require("../i18n/index.js");
 const utils_1 = require("../utils/index.js");
-function useDatePickerProps(state, _a) {
-    var { onFocus, onBlur } = _a, props = tslib_1.__rest(_a, ["onFocus", "onBlur"]);
-    const [isActive, setActive] = react_1.default.useState(false);
+function useDatePickerProps(state, { onFocus, onBlur, ...props }) {
     const [focusedDate, setFocusedDate] = react_1.default.useState((0, date_utils_1.isDateTime)(state.dateFieldState.displayValue)
         ? state.dateFieldState.displayValue
         : state.dateFieldState.displayValue.start);
@@ -35,17 +33,18 @@ function useDatePickerProps(state, _a) {
             setFocusedDate(state.dateFieldState.displayValue.end);
         }
     }
+    const { inputProps } = (0, DateField_1.useDateFieldProps)(state.dateFieldState, props);
     const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
         onFocusWithin: onFocus,
         onBlurWithin: onBlur,
         onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
+            state.dateFieldState.setActive(isFocusWithin);
             if (!isFocusWithin) {
                 state.setOpen(false, 'FocusOut');
+                state.dateFieldState.confirmPlaceholder();
             }
         },
     });
-    const { inputProps } = (0, DateField_1.useDateFieldProps)(state.dateFieldState, props);
     const inputRef = react_1.default.useRef(null);
     const handleRef = (0, uikit_1.useForkRef)(inputRef, inputProps.controlRef);
     const calendarRef = react_1.default.useRef(null);
@@ -53,8 +52,7 @@ function useDatePickerProps(state, _a) {
     const groupRef = react_1.default.useRef(null);
     function focusInput() {
         setTimeout(() => {
-            var _a;
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+            inputRef.current?.focus({ preventScroll: true });
         });
     }
     const onlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;
@@ -63,16 +61,33 @@ function useDatePickerProps(state, _a) {
     const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
     delete DOMProps.id;
     return {
-        groupProps: Object.assign(Object.assign(Object.assign(Object.assign({}, DOMProps), { ref: groupRef, tabIndex: -1, role: 'group' }), focusWithinProps), { style: props.style, 'aria-disabled': state.disabled || undefined, onKeyDown: (e) => {
-                if (!onlyTime && e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+        groupProps: {
+            ...DOMProps,
+            ref: groupRef,
+            tabIndex: -1,
+            role: 'group',
+            ...focusWithinProps,
+            style: props.style,
+            'aria-disabled': state.disabled || undefined,
+            onKeyDown: (e) => {
+                const isTargetInsideGroup = e.currentTarget.contains(e.target);
+                if (state.isOpen && e.key === 'Escape' && isTargetInsideGroup) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    state.setOpen(false, 'EscapeKeyDown');
+                    return;
+                }
+                if (!onlyTime &&
+                    e.altKey &&
+                    (e.key === 'ArrowDown' || e.key === 'ArrowUp') &&
+                    isTargetInsideGroup) {
                     e.preventDefault();
                     e.stopPropagation();
                     state.setOpen(true, 'ShortcutKeyDown');
                 }
-            } }),
-        fieldProps: (0, mergeProps_1.mergeProps)(inputProps, state.dateFieldState.isEmpty && !isActive && props.placeholder
-            ? { value: '' }
-            : undefined, {
+            },
+        },
+        fieldProps: (0, mergeProps_1.mergeProps)(inputProps, {
             controlRef: handleRef,
             controlProps: { role: 'combobox', 'aria-expanded': state.isOpen },
         }),
@@ -85,24 +100,22 @@ function useDatePickerProps(state, _a) {
             'aria-expanded': state.isOpen,
             view: 'flat-secondary',
             onClick: () => {
-                setActive(true);
                 state.setOpen(!state.isOpen, 'TriggerButtonClick');
             },
         },
         popupProps: {
             open: state.isOpen,
             onOpenChange: (open, e, reason) => {
-                var _a, _b;
                 if (!open) {
                     if (reason === 'escape-key') {
                         state.setOpen(false, 'EscapeKeyDown');
                         focusInput();
                     }
                     else if (reason === 'outside-press') {
-                        if (!(e === null || e === void 0 ? void 0 : e.target) || !((_a = calendarButtonRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                        if (!e?.target || !calendarButtonRef.current?.contains(e.target)) {
                             state.setOpen(false, 'ClickOutside');
                         }
-                        if ((e === null || e === void 0 ? void 0 : e.target) && ((_b = groupRef.current) === null || _b === void 0 ? void 0 : _b.contains(e.target))) {
+                        if (e?.target && groupRef.current?.contains(e.target)) {
                             focusInput();
                         }
                     }

package/dist/cjs/components/DatePicker/hooks/useDatePickerProps.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/DatePicker/hooks/useDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {isDateTime} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarInstance, CalendarProps} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport type {RangeValue} from '../../types';\nimport {filterDOMProps} from '../../utils/filterDOMProps';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {DatePickerProps} from '../DatePicker';\nimport {i18n} from '../i18n';\nimport {getCalendarModes, getDateTimeValue} from '../utils';\n\nimport type {DatePickerState} from './useDatePickerState';\n\ninterface InnerDatePickerProps<T = DateTime> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<any>};\n fieldProps: TextInputProps;\n calendarButtonProps: ButtonButtonProps & {ref: React.Ref<HTMLButtonElement>};\n popupProps: PopupProps;\n calendarProps: CalendarProps<T> & {ref: React.Ref<CalendarInstance>};\n timeInputProps: DateFieldProps<T>;\n}\n\nexport function useDatePickerProps<T extends DateTime \| RangeValue<DateTime>>(\n state: DatePickerState<T>,\n {onFocus, onBlur, ...props}: DatePickerProps<T>,\n): InnerDatePickerProps<T> {\n const [isActive, setActive] = React.useState(false);\n\n const [focusedDate, setFocusedDate] = React.useState(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n const [prevDateValue, setPrevDateValue] = React.useState(state.dateFieldState.displayValue);\n\n if (isDateTime(prevDateValue)) {\n if (\n isDateTime(state.dateFieldState.displayValue) &&\n !state.dateFieldState.displayValue.isSame(prevDateValue, 'day')\n ) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue);\n }\n } else if (!isDateTime(state.dateFieldState.displayValue)) {\n if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.start);\n } else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.end);\n }\n }\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n if (!isFocusWithin) {\n state.setOpen(false, 'FocusOut');\n }\n },\n });\n\n const {inputProps} = useDateFieldProps(state.dateFieldState, props);\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(inputRef, inputProps.controlRef);\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n const calendarButtonRef = React.useRef<HTMLButtonElement>(null);\n const groupRef = React.useRef<HTMLElement>(null);\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n\n const onlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n const calendarModes = getCalendarModes(state.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 style: props.style,\n 'aria-disabled': state.disabled \|\| undefined,\n onKeyDown: (e) => {\n if (!onlyTime && e.altKey && (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp')) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true, 'ShortcutKeyDown');\n }\n },\n },\n fieldProps: mergeProps(\n inputProps,\n state.dateFieldState.isEmpty && !isActive && props.placeholder\n ? {value: ''}\n : undefined,\n {\n controlRef: handleRef,\n controlProps: {role: 'combobox', 'aria-expanded': state.isOpen},\n },\n ),\n calendarButtonProps: {\n ref: calendarButtonRef,\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n 'aria-label': t('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': state.isOpen,\n view: 'flat-secondary',\n onClick: () => {\n setActive(true);\n state.setOpen(!state.isOpen, 'TriggerButtonClick');\n },\n },\n popupProps: {\n open: state.isOpen,\n onOpenChange: (open, e, reason) => {\n if (!open) {\n if (reason === 'escape-key') {\n state.setOpen(false, 'EscapeKeyDown');\n focusInput();\n } else if (reason === 'outside-press') {\n if (!e?.target \|\| !calendarButtonRef.current?.contains(e.target as Node)) {\n state.setOpen(false, 'ClickOutside');\n }\n\n if (e?.target && groupRef.current?.contains(e.target as Node)) {\n focusInput();\n }\n }\n }\n },\n onTransitionOutComplete: () => {\n setFocusedDate(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n },\n modal: !props.disableFocusTrap,\n returnFocus: !props.disableFocusTrap,\n disablePortal: props.disablePortal,\n placement: props.popupPlacement,\n offset: props.popupOffset,\n className: props.popupClassName,\n style: props.popupStyle,\n },\n calendarProps: {\n ref: calendarRef,\n autoFocus: true,\n size: props.size === 's' ? 'm' : props.size,\n disabled: props.disabled,\n readOnly: props.readOnly,\n onUpdate: (d) => {\n state.setDateValue(d);\n if (!state.formatInfo.hasTime) {\n focusInput();\n }\n },\n value: state.dateFieldState.displayValue,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDateUnavailable: props.isDateUnavailable,\n timeZone: state.timeZone,\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n modes: calendarModes,\n },\n timeInputProps: {\n value: state.timeValue,\n placeholderValue: getDateTimeValue(state.dateFieldState.displayValue),\n onUpdate: state.setTimeValue,\n format: state.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: state.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}
1	+ {"version":3,"file":"useDatePickerProps.js","sourceRoot":"../../../../../src","sources":["components/DatePicker/hooks/useDatePickerProps.ts"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {isDateTime} from '@gravity-ui/date-utils';\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {useFocusWithin, useForkRef} from '@gravity-ui/uikit';\nimport type {ButtonButtonProps, PopupProps, TextInputProps} from '@gravity-ui/uikit';\n\nimport type {CalendarCommonProps, CalendarInstance} from '../../Calendar';\nimport {useDateFieldProps} from '../../DateField';\nimport type {DateFieldProps} from '../../DateField';\nimport type {RangeValue} from '../../types';\nimport {filterDOMProps} from '../../utils/filterDOMProps';\nimport {getButtonSizeForInput} from '../../utils/getButtonSizeForInput';\nimport {mergeProps} from '../../utils/mergeProps';\nimport type {DatePickerProps} from '../DatePicker';\nimport {i18n} from '../i18n';\nimport {getCalendarModes, getDateTimeValue} from '../utils';\n\nimport type {DatePickerState} from './useDatePickerState';\n\ninterface InnerDatePickerProps<T = DateTime> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupProps: React.HTMLAttributes<unknown> & {ref: React.Ref<any>};\n fieldProps: TextInputProps;\n calendarButtonProps: ButtonButtonProps & {ref: React.Ref<HTMLButtonElement>};\n popupProps: PopupProps;\n calendarProps: CalendarCommonProps<T> & {ref: React.Ref<CalendarInstance>};\n timeInputProps: DateFieldProps<T>;\n}\n\nexport function useDatePickerProps<T extends DateTime \| RangeValue<DateTime>>(\n state: DatePickerState<T>,\n {onFocus, onBlur, ...props}: DatePickerProps<T>,\n): InnerDatePickerProps<T> {\n const [focusedDate, setFocusedDate] = React.useState(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n const [prevDateValue, setPrevDateValue] = React.useState(state.dateFieldState.displayValue);\n\n if (isDateTime(prevDateValue)) {\n if (\n isDateTime(state.dateFieldState.displayValue) &&\n !state.dateFieldState.displayValue.isSame(prevDateValue, 'day')\n ) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue);\n }\n } else if (!isDateTime(state.dateFieldState.displayValue)) {\n if (!state.dateFieldState.displayValue.start.isSame(prevDateValue.start, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.start);\n } else if (!state.dateFieldState.displayValue.end.isSame(prevDateValue.end, 'day')) {\n setPrevDateValue(state.dateFieldState.displayValue);\n setFocusedDate(state.dateFieldState.displayValue.end);\n }\n }\n\n const {inputProps} = useDateFieldProps(state.dateFieldState, props);\n\n const {focusWithinProps} = useFocusWithin({\n onFocusWithin: onFocus,\n onBlurWithin: onBlur,\n onFocusWithinChange(isFocusWithin) {\n state.dateFieldState.setActive(isFocusWithin);\n if (!isFocusWithin) {\n state.setOpen(false, 'FocusOut');\n state.dateFieldState.confirmPlaceholder();\n }\n },\n });\n\n const inputRef = React.useRef<HTMLInputElement>(null);\n\n const handleRef = useForkRef(inputRef, inputProps.controlRef);\n\n const calendarRef = React.useRef<CalendarInstance>(null);\n const calendarButtonRef = React.useRef<HTMLButtonElement>(null);\n const groupRef = React.useRef<HTMLElement>(null);\n\n function focusInput() {\n setTimeout(() => {\n inputRef.current?.focus({preventScroll: true});\n });\n }\n\n const onlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n const calendarModes = getCalendarModes(state.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 style: props.style,\n 'aria-disabled': state.disabled \|\| undefined,\n onKeyDown: (e) => {\n const isTargetInsideGroup = (e.currentTarget as HTMLElement).contains(\n e.target as Node,\n );\n\n if (state.isOpen && e.key === 'Escape' && isTargetInsideGroup) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(false, 'EscapeKeyDown');\n return;\n }\n\n if (\n !onlyTime &&\n e.altKey &&\n (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp') &&\n isTargetInsideGroup\n ) {\n e.preventDefault();\n e.stopPropagation();\n state.setOpen(true, 'ShortcutKeyDown');\n }\n },\n },\n fieldProps: mergeProps(inputProps, {\n controlRef: handleRef,\n controlProps: {role: 'combobox', 'aria-expanded': state.isOpen},\n }),\n calendarButtonProps: {\n ref: calendarButtonRef,\n size: getButtonSizeForInput(props.size),\n disabled: state.disabled,\n 'aria-label': t('Calendar'),\n 'aria-haspopup': 'dialog',\n 'aria-expanded': state.isOpen,\n view: 'flat-secondary',\n onClick: () => {\n state.setOpen(!state.isOpen, 'TriggerButtonClick');\n },\n },\n popupProps: {\n open: state.isOpen,\n onOpenChange: (open, e, reason) => {\n if (!open) {\n if (reason === 'escape-key') {\n state.setOpen(false, 'EscapeKeyDown');\n focusInput();\n } else if (reason === 'outside-press') {\n if (!e?.target \|\| !calendarButtonRef.current?.contains(e.target as Node)) {\n state.setOpen(false, 'ClickOutside');\n }\n\n if (e?.target && groupRef.current?.contains(e.target as Node)) {\n focusInput();\n }\n }\n }\n },\n onTransitionOutComplete: () => {\n setFocusedDate(\n isDateTime(state.dateFieldState.displayValue)\n ? state.dateFieldState.displayValue\n : state.dateFieldState.displayValue.start,\n );\n },\n modal: !props.disableFocusTrap,\n returnFocus: !props.disableFocusTrap,\n disablePortal: props.disablePortal,\n placement: props.popupPlacement,\n offset: props.popupOffset,\n className: props.popupClassName,\n style: props.popupStyle,\n },\n calendarProps: {\n ref: calendarRef,\n autoFocus: true,\n size: props.size === 's' ? 'm' : props.size,\n disabled: props.disabled,\n readOnly: props.readOnly,\n onUpdate: (d) => {\n state.setDateValue(d);\n if (!state.formatInfo.hasTime) {\n focusInput();\n }\n },\n value: state.dateFieldState.displayValue,\n minValue: props.minValue,\n maxValue: props.maxValue,\n isDateUnavailable: props.isDateUnavailable,\n timeZone: state.timeZone,\n focusedValue: focusedDate,\n onFocusUpdate: setFocusedDate,\n modes: calendarModes,\n },\n timeInputProps: {\n value: state.timeValue,\n placeholderValue: getDateTimeValue(state.dateFieldState.displayValue),\n onUpdate: state.setTimeValue,\n format: state.timeFormat,\n readOnly: state.readOnly,\n disabled: state.disabled,\n timeZone: state.timeZone,\n hasClear: props.hasClear,\n size: props.size,\n },\n };\n}\n"]}

package/dist/cjs/components/HiddenInput/HiddenInput.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+import React from 'react';
 interface HiddenInputProps<T> {
     value: T;
     onReset?: (value: T) => void;
@@ -6,9 +7,5 @@ interface HiddenInputProps<T> {
     disabled?: boolean;
     form?: string;
 }
-export declare function HiddenInput<T>({ name, value, onReset, form, disabled, toStringValue, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element | null;
-export declare function useFormResetHandler<T>({ initialValue, onReset, }: {
-    initialValue: T;
-    onReset?: (value: T) => void;
-}): (node: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null) => void;
+export declare function HiddenInput<T>({ name, value, onReset, form, disabled, toStringValue, }: HiddenInputProps<T>): React.JSX.Element | null;
 export {};

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HiddenInput = HiddenInput;
-exports.useFormResetHandler = useFormResetHandler;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
@@ -10,7 +9,7 @@ function HiddenInput({ name, value, onReset, form, disabled, toStringValue, }) {
     if (!name) {
         return null;
     }
-    const v = toStringValue ? toStringValue(value) : `${value !== null && value !== void 0 ? value : ''}`;
+    const v = toStringValue ? toStringValue(value) : `${value ?? ''}`;
     return (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", name: name, value: v, disabled: disabled, form: form });
 }
 function useFormResetHandler({ initialValue, onReset, }) {
@@ -29,8 +28,7 @@ function useFormResetHandler({ initialValue, onReset, }) {
         };
     }, [formElement, onReset]);
     const ref = react_1.default.useCallback((node) => {
-        var _a;
-        setFormElement((_a = node === null || node === void 0 ? void 0 : node.form) !== null && _a !== void 0 ? _a : null);
+        setFormElement(node?.form ?? null);
     }, []);
     return ref;
 }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"HiddenInput.js","sourceRoot":"../../../../src","sources":["components/HiddenInput/HiddenInput.tsx"],"names":[],"mappings":";;AAUA,kCAgBC~~;AAED,kDAkCC~~;;;~~AA9DD~~,0DAA0B;AAU1B,SAAgB,WAAW,CAAI,EAC3B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,aAAa,GACK;IAClB,MAAM,GAAG,GAAG,mBAAmB,CAAI,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC,CAAC;IAEnE,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,~~aAAL~~,~~KAAK,cAAL,KAAK,GAAI,~~EAAE,EAAE,CAAC;IAClE,OAAO,kCAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACnG,CAAC;AAED,~~SAAgB~~,mBAAmB,CAAI,~~EACnC~~,YAAY,EACZ,OAAO,GAIV;IACG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IAEnF,MAAM,UAAU,GAAG,eAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE9C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACR,WAAW,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC1D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3B,MAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CACzB,CAAC,IAAuE,EAAE,EAAE;;QACxE,cAAc,CAAC,~~MAAA,~~IAAI,~~aAAJ~~,IAAI,~~uBAAJ,~~IAAI,~~CAAE,~~IAAI,~~mCAAI,IAAI,~~CAAC,CAAC;IACvC,CAAC,EACD,EAAE,CACL,CAAC;IAEF,OAAO,GAAG,CAAC;AACf,CAAC","sourcesContent":["import React from 'react';\n\ninterface HiddenInputProps<T> {\n value: T;\n onReset?: (value: T) => void;\n toStringValue?: (value: T) => string;\n name?: string;\n disabled?: boolean;\n form?: string;\n}\nexport function HiddenInput<T>({\n name,\n value,\n onReset,\n form,\n disabled,\n toStringValue,\n}: HiddenInputProps<T>) {\n const ref = useFormResetHandler<T>({initialValue: value, onReset});\n\n if (!name) {\n return null;\n }\n\n const v = toStringValue ? toStringValue(value) : `${value ?? ''}`;\n return <input ref={ref} type=\"hidden\" name={name} value={v} disabled={disabled} form={form} />;\n}\n\~~nexport~~ ~~function~~ useFormResetHandler<T>({\n initialValue,\n onReset,\n}: {\n initialValue: T;\n onReset?: (value: T) => void;\n}) {\n const [formElement, setFormElement] = React.useState<HTMLFormElement \| null>(null);\n\n const resetValue = React.useRef(initialValue);\n\n React.useEffect(() => {\n if (!formElement \|\| !onReset) {\n return undefined;\n }\n\n const handleReset = () => {\n onReset(resetValue.current);\n };\n\n formElement.addEventListener('reset', handleReset);\n return () => {\n formElement.removeEventListener('reset', handleReset);\n };\n }, [formElement, onReset]);\n\n const ref = React.useCallback(\n (node: HTMLInputElement \| HTMLTextAreaElement \| HTMLSelectElement \| null) => {\n setFormElement(node?.form ?? null);\n },\n [],\n );\n\n return ref;\n}\n"]}
1	+ {"version":3,"file":"HiddenInput.js","sourceRoot":"../../../../src","sources":["components/HiddenInput/HiddenInput.tsx"],"names":[],"mappings":";;AAUA,kCAgBC;;;AA1BD,0DAA0B;AAU1B,SAAgB,WAAW,CAAI,EAC3B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,aAAa,GACK;IAClB,MAAM,GAAG,GAAG,mBAAmB,CAAI,EAAC,YAAY,EAAE,KAAK,EAAE,OAAO,EAAC,CAAC,CAAC;IAEnE,IAAI,CAAC,IAAI,EAAE,CAAC;QACR,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,EAAE,EAAE,CAAC;IAClE,OAAO,kCAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACnG,CAAC;AAED,SAAS,mBAAmB,CAAI,EAC5B,YAAY,EACZ,OAAO,GAIV;IACG,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAyB,IAAI,CAAC,CAAC;IAEnF,MAAM,UAAU,GAAG,eAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IAE9C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,IAAI,CAAC,WAAW,IAAI,CAAC,OAAO,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC;QACrB,CAAC;QAED,MAAM,WAAW,GAAG,GAAG,EAAE;YACrB,OAAO,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC,CAAC;QAEF,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACR,WAAW,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAC1D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;IAE3B,MAAM,GAAG,GAAG,eAAK,CAAC,WAAW,CACzB,CAAC,IAAuE,EAAE,EAAE;QACxE,cAAc,CAAC,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC;IACvC,CAAC,EACD,EAAE,CACL,CAAC;IAEF,OAAO,GAAG,CAAC;AACf,CAAC","sourcesContent":["import React from 'react';\n\ninterface HiddenInputProps<T> {\n value: T;\n onReset?: (value: T) => void;\n toStringValue?: (value: T) => string;\n name?: string;\n disabled?: boolean;\n form?: string;\n}\nexport function HiddenInput<T>({\n name,\n value,\n onReset,\n form,\n disabled,\n toStringValue,\n}: HiddenInputProps<T>) {\n const ref = useFormResetHandler<T>({initialValue: value, onReset});\n\n if (!name) {\n return null;\n }\n\n const v = toStringValue ? toStringValue(value) : `${value ?? ''}`;\n return <input ref={ref} type=\"hidden\" name={name} value={v} disabled={disabled} form={form} />;\n}\n\nfunction useFormResetHandler<T>({\n initialValue,\n onReset,\n}: {\n initialValue: T;\n onReset?: (value: T) => void;\n}) {\n const [formElement, setFormElement] = React.useState<HTMLFormElement \| null>(null);\n\n const resetValue = React.useRef(initialValue);\n\n React.useEffect(() => {\n if (!formElement \|\| !onReset) {\n return undefined;\n }\n\n const handleReset = () => {\n onReset(resetValue.current);\n };\n\n formElement.addEventListener('reset', handleReset);\n return () => {\n formElement.removeEventListener('reset', handleReset);\n };\n }, [formElement, onReset]);\n\n const ref = React.useCallback(\n (node: HTMLInputElement \| HTMLTextAreaElement \| HTMLSelectElement \| null) => {\n setFormElement(node?.form ?? null);\n },\n [],\n );\n\n return ref;\n}\n"]}

package/dist/cjs/components/RangeCalendar/RangeCalendar.d.ts CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
-import type { CalendarProps } from "../Calendar/Calendar.js";
+import type { CalendarCommonProps } from "../Calendar/Calendar.js";
 import type { CalendarInstance } from "../CalendarView/CalendarView.js";
 import type { RangeValue } from "../types/index.js";
 import "../CalendarView/Calendar.css";
-export type RangeCalendarProps = CalendarProps<RangeValue<DateTime>>;
+export type RangeCalendarProps = CalendarCommonProps<RangeValue<DateTime>>;
 export declare const RangeCalendar: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<CalendarInstance>>;

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

@@ -11,12 +11,11 @@ require("../CalendarView/Calendar.css");
 exports.RangeCalendar = react_1.default.forwardRef(function Calendar(props, ref) {
     const state = (0, useRangeCalendarState_1.useRangeCalendarState)(props);
     const handleBlur = (e) => {
-        var _a;
         if (state.anchorDate) {
             state.selectFocusedDate();
         }
-        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        props.onBlur?.(e);
     };
-    return (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, Object.assign({ ref: ref }, props, { state: state, onBlur: handleBlur }));
+    return (0, jsx_runtime_1.jsx)(CalendarView_1.CalendarView, { ref: ref, ...props, state: state, onBlur: handleBlur });
 });
 //# sourceMappingURL=RangeCalendar.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeCalendar.js","sourceRoot":"../../../../src","sources":["components/RangeCalendar/RangeCalendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAEb,0DAA0B;AAK1B,kEAA0D;AAE1D,0FAAkF;AAGlF,wCAAuC;AAI1B,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CACzC,SAAS,QAAQ,CAAC,KAAyB,EAAE,GAAG;IAC5C,MAAM,KAAK,GAAG,IAAA,6CAAqB,EAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,CAAmB,EAAE,EAAE;;QACvC,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC9B,CAAC;QACD,~~MAAA,~~KAAK,CAAC,MAAM,~~sDAAG~~,CAAC,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,OAAO,uBAAC,2BAAY,~~kBAAC~~,GAAG,EAAE,GAAG,~~IAAM~~,KAAK,~~IAAE~~,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,~~IAAI~~,CAAC;AACnF,CAAC,CACJ,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {~~CalendarProps~~} from '../Calendar/Calendar';\nimport {CalendarView} from '../CalendarView/CalendarView';\nimport type {CalendarInstance} from '../CalendarView/CalendarView';\nimport {useRangeCalendarState} from '../CalendarView/hooks/useRangeCalendarState';\nimport type {RangeValue} from '../types';\n\nimport '../CalendarView/Calendar.scss';\n\nexport type RangeCalendarProps = ~~CalendarProps~~<RangeValue<DateTime>>;\n\nexport const RangeCalendar = React.forwardRef<CalendarInstance, RangeCalendarProps>(\n function Calendar(props: RangeCalendarProps, ref) {\n const state = useRangeCalendarState(props);\n\n const handleBlur = (e: React.FocusEvent) => {\n if (state.anchorDate) {\n state.selectFocusedDate();\n }\n props.onBlur?.(e);\n };\n return <CalendarView ref={ref} {...props} state={state} onBlur={handleBlur} />;\n },\n);\n"]}
1	+ {"version":3,"file":"RangeCalendar.js","sourceRoot":"../../../../src","sources":["components/RangeCalendar/RangeCalendar.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAEb,0DAA0B;AAK1B,kEAA0D;AAE1D,0FAAkF;AAGlF,wCAAuC;AAI1B,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CACzC,SAAS,QAAQ,CAAC,KAAyB,EAAE,GAAG;IAC5C,MAAM,KAAK,GAAG,IAAA,6CAAqB,EAAC,KAAK,CAAC,CAAC;IAE3C,MAAM,UAAU,GAAG,CAAC,CAAmB,EAAE,EAAE;QACvC,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;YACnB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC9B,CAAC;QACD,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,OAAO,uBAAC,2BAAY,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;AACnF,CAAC,CACJ,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\n\nimport type {CalendarCommonProps} from '../Calendar/Calendar';\nimport {CalendarView} from '../CalendarView/CalendarView';\nimport type {CalendarInstance} from '../CalendarView/CalendarView';\nimport {useRangeCalendarState} from '../CalendarView/hooks/useRangeCalendarState';\nimport type {RangeValue} from '../types';\n\nimport '../CalendarView/Calendar.scss';\n\nexport type RangeCalendarProps = CalendarCommonProps<RangeValue<DateTime>>;\n\nexport const RangeCalendar = React.forwardRef<CalendarInstance, RangeCalendarProps>(\n function Calendar(props: RangeCalendarProps, ref) {\n const state = useRangeCalendarState(props);\n\n const handleBlur = (e: React.FocusEvent) => {\n if (state.anchorDate) {\n state.selectFocusedDate();\n }\n props.onBlur?.(e);\n };\n return <CalendarView ref={ref} {...props} state={state} onBlur={handleBlur} />;\n },\n);\n"]}

package/dist/cjs/components/RangeDateField/RangeDateField.d.ts CHANGED Viewed

@@ -9,4 +9,4 @@ export type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {
      */
     delimiter?: string;
 };
-export declare function RangeDateField({ className, ...props }: RangeDateFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeDateField({ className, ...props }: RangeDateFieldProps): import("react").JSX.Element;

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

@@ -2,32 +2,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RangeDateField = RangeDateField;
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const cn_1 = require("../../utils/cn.js");
 const useDateFieldProps_1 = require("../DateField/hooks/useDateFieldProps.js");
+const useRangeDateFieldState_1 = require("../DateField/hooks/useRangeDateFieldState.js");
 const HiddenInput_1 = require("../HiddenInput/HiddenInput.js");
-const filterDOMProps_1 = require("../utils/filterDOMProps.js");
-const useRangeDateFieldState_1 = require("./hooks/useRangeDateFieldState.js");
 require("./RangeDateField.css");
 const b = (0, cn_1.block)('range-date-field');
-function RangeDateField(_a) {
-    var _b, _c;
-    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+function RangeDateField({ className, ...props }) {
     const state = (0, useRangeDateFieldState_1.useRangeDateFieldState)(props);
-    const { inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
-    const [isActive, setActive] = react_1.default.useState(false);
-    const { focusWithinProps } = (0, uikit_1.useFocusWithin)({
-        onFocusWithinChange(isFocusWithin) {
-            setActive(isFocusWithin);
-        },
-    });
-    const DOMProps = (0, filterDOMProps_1.filterDOMProps)(props);
-    delete DOMProps.id;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, DOMProps, { className: b(null, className), style: props.style }, focusWithinProps, { children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, inputProps, { value: state.isEmpty && !isActive && props.placeholder ? '' : inputProps.value })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
-                    state.setDate(v);
-                }, value: (_b = state.value) !== null && _b !== void 0 ? _b : null, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: (_c = state.value) !== null && _c !== void 0 ? _c : null, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
+    const { groupProps, inputProps } = (0, useDateFieldProps_1.useDateFieldProps)(state, props);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...groupProps, className: b(null, className), style: props.style, children: [(0, jsx_runtime_1.jsx)(uikit_1.TextInput, { ...inputProps }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.setValue(v);
+                }, value: state.value ?? null, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value ?? null, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] }));
 }
 //# sourceMappingURL=RangeDateField.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeDateField.js","sourceRoot":"../../../../src","sources":["components/RangeDateField/RangeDateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;~~AA4Bb~~,~~wCAwCC;;;AAlED~~,~~0DAA0B~~;~~AAG1B~~,~~6CAA4D;AAE5D,~~0CAAqC;AACrC,+EAAuE;AAEvE~~,+DAAuD~~;~~AAEvD~~,+DAAuD;~~AAEvD~~,~~8EAAsE;AAEtE,~~gCAA+B;AAE/B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,kBAAkB,CAAC,CAAC;AAUpC,SAAgB,cAAc,CAAC,~~EAA0C;;QAA1C,~~EAAC,SAAS,~~OAAgC~~,~~EAA3B~~,KAAK,~~sBAApB,aAAqB,CAAD~~;~~IAC/C~~,MAAM,KAAK,GAAG,IAAA,+CAAsB,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,EAAC,UAAU,EAAC,GAAG,IAAA,qCAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;~~IAErD~~,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,EAAC,gBAAgB,EAAC,GAAG,IAAA,sBAAc,EAAC;QACtC,mBAAmB,CAAC,aAAa;YAC7B,SAAS,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;KACJ,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,IAAA,+BAAc,EAAC,KAAK,CAAC,CAAC;IACvC,OAAO,~~QAAQ,CAAC,EAAE,CAAC;IAEnB,OAAO,~~CACH,~~iDAAS~~,~~QAAQ~~,~~IAAE~~,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,~~IAAM~~,~~gBAAgB,eACtF,~~uBAAC,iBAAS,~~oBACF~~,UAAU,~~IACd~~,~~KAAK~~,~~EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,IAChF,EACF,~~uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,KAAK,CAAC,~~OAAO~~,CAAC,CAAC,CAAC,CAAC;~~gBACrB~~,CAAC,EACD,KAAK,EAAE,~~MAAA,~~KAAK,CAAC,KAAK,~~mCAAI~~,IAAI,EAC1B,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACtD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,~~MAAA,~~KAAK,CAAC,KAAK,~~mCAAI~~,IAAI,EAC1B,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,~~KACA~~,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport ~~React from 'react';\n\nimport~~ type {DateTime} from '@gravity-ui/date-utils';\nimport {TextInput~~, useFocusWithin~~} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {useDateFieldProps} from '../DateField/hooks/useDateFieldProps';\nimport type {DateFieldProps} from '../DateField/hooks/useDateFieldProps';\nimport {~~HiddenInput~~} from '../~~HiddenInput~~/~~HiddenInput~~';\nimport ~~type~~ {~~RangeValue~~} from '../~~types~~';\nimport {~~filterDOMProps~~} from '../~~utils/filterDOMProps~~';\n\nimport ~~{useRangeDateFieldState} from~~ './~~hooks/useRangeDateFieldState';\n\nimport './~~RangeDateField.scss';\n\nconst b = block('range-date-field');\n\nexport type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {\n /*\n Delimiter separating the start and end parts of the range.\n * @default ' — '\n */\n delimiter?: string;\n};\n\nexport function RangeDateField({className, ...props}: RangeDateFieldProps) {\n const state = useRangeDateFieldState(props);\n\n const {inputProps} = useDateFieldProps(state, props);\n\n const [isActive, setActive] = React.useState(false);\n const {focusWithinProps} = useFocusWithin({\n onFocusWithinChange(isFocusWithin) {\n setActive(isFocusWithin);\n },\n });\n\n const DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <div {...~~DOMProps~~} className={b(null, className)} style={props.style} ~~{...focusWithinProps}~~>\n <TextInput\n {...inputProps}~~\n value={state.isEmpty~~ ~~&& !isActive && props.placeholder ? '' : inputProps.value}\n~~ />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.~~setDate~~(v);\n }}\n value={state.value ?? null}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value ?? null}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RangeDateField.js","sourceRoot":"../../../../src","sources":["components/RangeDateField/RangeDateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAwBb,wCA2BC;;AAhDD,6CAA4C;AAE5C,0CAAqC;AACrC,+EAAuE;AAEvE,yFAAiF;AACjF,+DAAuD;AAGvD,gCAA+B;AAE/B,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,kBAAkB,CAAC,CAAC;AAUpC,SAAgB,cAAc,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAsB;IACrE,MAAM,KAAK,GAAG,IAAA,+CAAsB,EAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,EAAC,UAAU,EAAE,UAAU,EAAC,GAAG,IAAA,qCAAiB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEjE,OAAO,CACH,oCAAS,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,aAClE,uBAAC,iBAAS,OAAK,UAAU,GAAI,EAC7B,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gBACtB,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACtD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,IACA,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {useDateFieldProps} from '../DateField/hooks/useDateFieldProps';\nimport type {DateFieldProps} from '../DateField/hooks/useDateFieldProps';\nimport {useRangeDateFieldState} from '../DateField/hooks/useRangeDateFieldState';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport type {RangeValue} from '../types';\n\nimport './RangeDateField.scss';\n\nconst b = block('range-date-field');\n\nexport type RangeDateFieldProps = DateFieldProps<RangeValue<DateTime>> & {\n /*\n Delimiter separating the start and end parts of the range.\n * @default ' — '\n */\n delimiter?: string;\n};\n\nexport function RangeDateField({className, ...props}: RangeDateFieldProps) {\n const state = useRangeDateFieldState(props);\n\n const {groupProps, inputProps} = useDateFieldProps(state, props);\n\n return (\n <div {...groupProps} className={b(null, className)} style={props.style}>\n <TextInput {...inputProps} />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.setValue(v);\n }}\n value={state.value ?? null}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value ?? null}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}

package/dist/cjs/components/RangeDateField/index.d.ts CHANGED Viewed

	@@ -1,2 +1 @@
1 1	export * from "./RangeDateField.js";
2	- export * from "./hooks/useRangeDateFieldState.js";

package/dist/cjs/components/RangeDateField/index.js CHANGED Viewed

@@ -2,5 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./RangeDateField.js"), exports);
-tslib_1.__exportStar(require("./hooks/useRangeDateFieldState.js"), exports);
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/RangeDateField/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RangeDateField/index.ts"],"names":[],"mappings":";;;AAAA,8DAAiC~~;AAEjC,4EAA+C~~","sourcesContent":["export * from './RangeDateField';\n~~\nexport * from './hooks/useRangeDateFieldState';\n~~"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../src","sources":["components/RangeDateField/index.ts"],"names":[],"mappings":";;;AAAA,8DAAiC","sourcesContent":["export * from './RangeDateField';\n"]}

package/dist/cjs/components/RangeDatePicker/RangeDatePicker.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+import React from 'react';
 import type { DateTime } from '@gravity-ui/date-utils';
 import type { DatePickerProps } from "../DatePicker/index.js";
 import type { RangeValue } from "../types/index.js";
 import "./RangeDatePicker.css";
 export type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;
-export declare function RangeDatePicker({ className, ...props }: RangeDatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeDatePicker({ className, ...props }: RangeDatePickerProps): React.JSX.Element;

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

@@ -16,14 +16,13 @@ const RangeDateField_1 = require("../RangeDateField/index.js");
 const useRangeDatePickerState_1 = require("./hooks/useRangeDatePickerState.js");
 require("./RangeDatePicker.css");
 const b = (0, cn_1.block)('range-date-picker');
-function RangeDatePicker(_a) {
-    var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
+function RangeDatePicker({ className, ...props }) {
     const [anchor, setAnchor] = react_1.default.useState(null);
     const state = (0, useRangeDatePickerState_1.useRangeDatePickerState)(props);
     const { groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps } = (0, DatePicker_1.useDatePickerProps)(state, props);
     const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: b(null, className) }, groupProps, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: setAnchor, className: b('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, Object.assign({ anchorElement: anchor }, popupProps, { children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children(Object.assign(Object.assign({}, calendarProps), { value: state.value }))) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, Object.assign({}, calendarProps, { value: state.value }))), state.formatInfo.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, Object.assign({}, timeInputProps)) }))] }) })) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, Object.assign({}, fieldProps, { className: b('field'), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, Object.assign({}, calendarButtonProps, { children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) }))), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) })), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
-                    state.dateFieldState.setDate(v);
-                }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: b(null, className), ...groupProps, children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)("div", { ref: setAnchor, className: b('popup-anchor'), children: (0, jsx_runtime_1.jsx)(uikit_1.Popup, { anchorElement: anchor, ...popupProps, children: (0, jsx_runtime_1.jsxs)("div", { className: b('popup-content'), children: [typeof props.children === 'function' ? (props.children({ ...calendarProps, value: state.value })) : ((0, jsx_runtime_1.jsx)(Calendar_1.RangeCalendar, { ...calendarProps, value: state.value })), state.formatInfo.hasTime && ((0, jsx_runtime_1.jsx)("div", { className: b('time-field-wrapper'), children: (0, jsx_runtime_1.jsx)(RangeDateField_1.RangeDateField, { ...timeInputProps }) }))] }) }) })), (0, jsx_runtime_1.jsx)(uikit_1.TextInput, { ...fieldProps, className: b('field'), endContent: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [!isOnlyTime && ((0, jsx_runtime_1.jsx)(uikit_1.Button, { ...calendarButtonProps, children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Calendar }) })), isOnlyTime && ((0, jsx_runtime_1.jsx)(StubButton_1.StubButton, { size: calendarButtonProps.size, icon: icons_1.Clock }))] }) }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, onReset: (v) => {
+                    state.dateFieldState.setValue(v);
+                }, value: state.value, toStringValue: (v) => (v ? v.start.toISOString() : ''), disabled: state.disabled }), (0, jsx_runtime_1.jsx)(HiddenInput_1.HiddenInput, { name: props.name, form: props.form, value: state.value, toStringValue: (v) => (v ? v.end.toISOString() : ''), disabled: state.disabled })] }));
 }
 //# sourceMappingURL=RangeDatePicker.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/RangeDatePicker.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AAyBb,0CAiEC;;;AAxFD,0DAA0B;AAG1B,6CAA+E;AAC/E,6CAAiE;AAEjE,0CAAqC;AACrC,mDAA0C;AAC1C,uDAAiD;AAEjD,4DAAoD;AACpD,+DAAuD;AACvD,+DAAiD;AAGjD,gFAAwE;AAExE,iCAAgC;AAEhC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,mBAAmB,CAAC,CAAC;AAIrC,SAAgB,eAAe,CAAC,~~EAA2C;QAA3C,~~EAAC,SAAS,~~OAAiC~~,~~EAA5B~~,KAAK,~~sBAApB,aAAqB,CAAD~~;~~IAChD~~,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAwB,IAAI,CAAC,CAAC;IAExE,MAAM,KAAK,GAAG,IAAA,iDAAuB,EAAC,KAAK,CAAC,CAAC;IAE7C,MAAM,EAAC,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAC,GAC1F,IAAA,+BAAkB,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;IAEzE,OAAO,CACH~~,+CAAK~~,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,~~IAAM~~,UAAU,~~eAC7C~~,CAAC,UAAU,IAAI,CACZ,gCAAK,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,YAC7C,uBAAC,aAAK,~~kBAAC~~,aAAa,EAAE,MAAM,~~IAAM~~,UAAU,~~cACxC~~,iCAAK,SAAS,EAAE,CAAC,CAAC,eAAe,CAAC,aAC7B,OAAO,KAAK,CAAC,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CACpC,KAAK,CAAC,QAAQ,~~iCAAK~~,aAAa,~~KAAE~~,KAAK,EAAE,KAAK,CAAC,KAAK,~~IAAE~~,CACzD,CAAC,CAAC,CAAC,CACA,uBAAC,wBAAa,~~oBAAK~~,aAAa,~~IAAE~~,KAAK,EAAE,KAAK,CAAC,KAAK,~~IAAI~~,CAC3D,EACA,KAAK,CAAC,UAAU,CAAC,OAAO,IAAI,CACzB,gCAAK,SAAS,EAAE,CAAC,CAAC,oBAAoB,CAAC,YACnC,uBAAC,+BAAc,~~oBAAK~~,cAAc,~~EAAI~~,GACpC,CACT,IACC,~~IACF~~,GACN,CACT,EACD,uBAAC,iBAAS,~~oBACF~~,UAAU,~~IACd~~,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,EACrB,UAAU,EACN,wBAAC,eAAK,CAAC,QAAQ,eACV,CAAC,UAAU,IAAI,CACZ,uBAAC,cAAM,~~oBAAK~~,mBAAmB,~~cAC3B~~,uBAAC,YAAI,IAAC,IAAI,EAAE,gBAAY,GAAI,~~IACvB~~,CACZ,EACA,UAAU,IAAI,CACX,uBAAC,uBAAU,IAAC,IAAI,EAAE,mBAAmB,CAAC,IAAI,EAAE,IAAI,EAAE,aAAS,GAAI,CAClE,IACY,~~IAEvB~~,EACF,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACX,KAAK,CAAC,cAAc,CAAC,~~OAAO~~,CAAC,CAAC,CAAC,CAAC;~~gBACpC~~,CAAC,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACtD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,EACF,uBAAC,yBAAW,IACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpD,QAAQ,EAAE,KAAK,CAAC,QAAQ,GAC1B,~~KACA~~,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {RangeCalendar} from '../Calendar';\nimport {useDatePickerProps} from '../DatePicker';\nimport type {DatePickerProps} from '../DatePicker';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {RangeDateField} from '../RangeDateField';\nimport type {RangeValue} from '../types';\n\nimport {useRangeDatePickerState} from './hooks/useRangeDatePickerState';\n\nimport './RangeDatePicker.scss';\n\nconst b = block('range-date-picker');\n\nexport type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;\n\nexport function RangeDatePicker({className, ...props}: RangeDatePickerProps) {\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n\n const state = useRangeDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {!isOnlyTime && (\n <div ref={setAnchor} className={b('popup-anchor')}>\n <Popup anchorElement={anchor} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children({...calendarProps, value: state.value})\n ) : (\n <RangeCalendar {...calendarProps} value={state.value} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <RangeDateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )}\n <TextInput\n {...fieldProps}\n className={b('field')}\n endContent={\n <React.Fragment>\n {!isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {isOnlyTime && (\n <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.dateFieldState.~~setDate~~(v);\n }}\n value={state.value}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RangeDatePicker.js","sourceRoot":"../../../../src","sources":["components/RangeDatePicker/RangeDatePicker.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 {Calendar as CalendarIcon, Clock as ClockIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Popup, TextInput} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport {RangeCalendar} from '../Calendar';\nimport {useDatePickerProps} from '../DatePicker';\nimport type {DatePickerProps} from '../DatePicker';\nimport {StubButton} from '../DatePicker/StubButton';\nimport {HiddenInput} from '../HiddenInput/HiddenInput';\nimport {RangeDateField} from '../RangeDateField';\nimport type {RangeValue} from '../types';\n\nimport {useRangeDatePickerState} from './hooks/useRangeDatePickerState';\n\nimport './RangeDatePicker.scss';\n\nconst b = block('range-date-picker');\n\nexport type RangeDatePickerProps = DatePickerProps<RangeValue<DateTime>>;\n\nexport function RangeDatePicker({className, ...props}: RangeDatePickerProps) {\n const [anchor, setAnchor] = React.useState<HTMLDivElement \| null>(null);\n\n const state = useRangeDatePickerState(props);\n\n const {groupProps, fieldProps, calendarButtonProps, popupProps, calendarProps, timeInputProps} =\n useDatePickerProps(state, props);\n\n const isOnlyTime = state.formatInfo.hasTime && !state.formatInfo.hasDate;\n\n return (\n <div className={b(null, className)} {...groupProps}>\n {!isOnlyTime && (\n <div ref={setAnchor} className={b('popup-anchor')}>\n <Popup anchorElement={anchor} {...popupProps}>\n <div className={b('popup-content')}>\n {typeof props.children === 'function' ? (\n props.children({...calendarProps, value: state.value})\n ) : (\n <RangeCalendar {...calendarProps} value={state.value} />\n )}\n {state.formatInfo.hasTime && (\n <div className={b('time-field-wrapper')}>\n <RangeDateField {...timeInputProps} />\n </div>\n )}\n </div>\n </Popup>\n </div>\n )}\n <TextInput\n {...fieldProps}\n className={b('field')}\n endContent={\n <React.Fragment>\n {!isOnlyTime && (\n <Button {...calendarButtonProps}>\n <Icon data={CalendarIcon} />\n </Button>\n )}\n {isOnlyTime && (\n <StubButton size={calendarButtonProps.size} icon={ClockIcon} />\n )}\n </React.Fragment>\n }\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n onReset={(v) => {\n state.dateFieldState.setValue(v);\n }}\n value={state.value}\n toStringValue={(v) => (v ? v.start.toISOString() : '')}\n disabled={state.disabled}\n />\n <HiddenInput\n name={props.name}\n form={props.form}\n value={state.value}\n toStringValue={(v) => (v ? v.end.toISOString() : '')}\n disabled={state.disabled}\n />\n </div>\n );\n}\n"]}

package/dist/cjs/components/RangeDatePicker/hooks/useRangeDatePickerState.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import type { DateTime } from '@gravity-ui/date-utils';
+import type { RangeDateFieldStateOptions } from "../../DateField/index.js";
 import type { DatePickerState } from "../../DatePicker/index.js";
-import type { RangeDateFieldStateOptions } from "../../RangeDateField/index.js";
 import type { RangeValue } from "../../types/index.js";
 export type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;
 export type RangeDatePickerStateOptions = RangeDateFieldStateOptions;

package/dist/cjs/components/RangeDatePicker/hooks/useRangeDatePickerState.js CHANGED Viewed

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRangeDatePickerState = void 0;
+const DateField_1 = require("../../DateField/index.js");
 const utils_1 = require("../../DateField/utils.js");
 const datePickerStateFactory_1 = require("../../DatePicker/hooks/datePickerStateFactory.js");
 const utils_2 = require("../../DatePicker/utils/index.js");
-const RangeDateField_1 = require("../../RangeDateField/index.js");
-const utils_3 = require("../../RangeDateField/utils/index.js");
 const dates_1 = require("../../utils/dates.js");
 exports.useRangeDatePickerState = (0, datePickerStateFactory_1.datePickerStateFactory)({
     getPlaceholderTime,
     mergeDateTime: mergeRangeDateTime,
     setTimezone,
     getDateTime: utils_2.getDateTimeValue,
-    useDateFieldState: RangeDateField_1.useRangeDateFieldState,
+    useDateFieldState: DateField_1.useRangeDateFieldState,
     adjustDateToFormat: adjustRangeToFormat,
 });
 function getPlaceholderTime(placeholderValue, timeZone) {
-    return (0, utils_3.createPlaceholderRangeValue)({ placeholderValue, timeZone });
+    return (0, dates_1.createPlaceholderRangeValue)({ placeholderValue, timeZone });
 }
 function mergeRangeDateTime(date, time) {
     const start = (0, dates_1.mergeDateTime)(date.start, time.start);

package/dist/cjs/components/RangeDatePicker/hooks/useRangeDatePickerState.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useRangeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RangeDatePicker/hooks/useRangeDatePickerState.ts"],"names":[],"mappings":";;;~~AAGA~~,oDAAyD;AAEzD,6FAAqF;AACrF,2DAAwD;~~AACxD~~,~~kEAA4D~~;~~AAE5D,+DAAuE;AAEvE~~,~~gDAAgD;AAMnC,~~QAAA,uBAAuB,GAAG,IAAA,+CAAsB,EAAC;IAC1D,kBAAkB;IAClB,aAAa,EAAE,kBAAkB;IACjC,WAAW;IACX,WAAW,EAAE,wBAAgB;IAC7B,iBAAiB,EAAE,~~uCAAsB~~;IACzC,kBAAkB,EAAE,mBAAmB;CAC1C,CAAC,CAAC;AAEH,SAAS,kBAAkB,CACvB,gBAAsC,EACtC,QAAiB;IAEjB,OAAO,IAAA,mCAA2B,EAAC,EAAC,gBAAgB,EAAE,QAAQ,EAAC,CAAC,CAAC;AACrE,CAAC;AAED,SAAS,kBAAkB,CACvB,IAA0B,EAC1B,IAA0B;IAE1B,MAAM,KAAK,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,GAAG,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,WAAW,CAAC,IAA0B,EAAE,QAAgB;IAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACxC,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,mBAAmB,CAAC,IAA0B,EAAE,YAAwB;IAC7E,MAAM,KAAK,GAAG,IAAA,0BAAkB,EAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,GAAG,GAAG,IAAA,0BAAkB,EAAC,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAChE,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport ~~type~~ {~~FormatInfo~~} from '../../DateField~~/types~~';\nimport {~~adjustDateToFormat~~} from '../../DateField~~/utils~~';\nimport type {~~DatePickerState~~} from '../../~~DatePicker';\nimport {datePickerStateFactory} from '../../DatePicker~~/~~hooks/datePickerStateFactory~~';\nimport {~~getDateTimeValue~~} from '../../~~DatePicker~~/utils';\nimport {~~useRangeDateFieldState~~} from '../../~~RangeDateField~~';\nimport ~~type~~ {~~RangeDateFieldStateOptions~~} from '../../~~RangeDateField~~';\nimport {~~createPlaceholderRangeValue~~} from '../../~~RangeDateField~~/utils';\nimport type {RangeValue} from '../../types';\nimport {mergeDateTime} from '../../utils/dates';\n\nexport type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;\n\nexport type RangeDatePickerStateOptions = RangeDateFieldStateOptions;\n\nexport const useRangeDatePickerState = datePickerStateFactory({\n getPlaceholderTime,\n mergeDateTime: mergeRangeDateTime,\n setTimezone,\n getDateTime: getDateTimeValue,\n useDateFieldState: useRangeDateFieldState,\n adjustDateToFormat: adjustRangeToFormat,\n});\n\nfunction getPlaceholderTime(\n placeholderValue: DateTime \| undefined,\n timeZone?: string,\n): RangeValue<DateTime> {\n return createPlaceholderRangeValue({placeholderValue, timeZone});\n}\n\nfunction mergeRangeDateTime(\n date: RangeValue<DateTime>,\n time: RangeValue<DateTime>,\n): RangeValue<DateTime> {\n const start = mergeDateTime(date.start, time.start);\n const end = mergeDateTime(date.end, time.end);\n return {start, end};\n}\n\nfunction setTimezone(date: RangeValue<DateTime>, timeZone: string): RangeValue<DateTime> {\n const start = date.start.timeZone(timeZone);\n const end = date.end.timeZone(timeZone);\n return {start, end};\n}\n\nfunction adjustRangeToFormat(date: RangeValue<DateTime>, sectionsInfo: FormatInfo) {\n const start = adjustDateToFormat(date.start, sectionsInfo, 'startOf');\n const end = adjustDateToFormat(date.end, sectionsInfo, 'endOf');\n return {start, end};\n}\n"]}
1	+ {"version":3,"file":"useRangeDatePickerState.js","sourceRoot":"../../../../../src","sources":["components/RangeDatePicker/hooks/useRangeDatePickerState.ts"],"names":[],"mappings":";;;AAEA,wDAAuD;AAGvD,oDAAyD;AAEzD,6FAAqF;AACrF,2DAAwD;AAExD,gDAA6E;AAMhE,QAAA,uBAAuB,GAAG,IAAA,+CAAsB,EAAC;IAC1D,kBAAkB;IAClB,aAAa,EAAE,kBAAkB;IACjC,WAAW;IACX,WAAW,EAAE,wBAAgB;IAC7B,iBAAiB,EAAE,kCAAsB;IACzC,kBAAkB,EAAE,mBAAmB;CAC1C,CAAC,CAAC;AAEH,SAAS,kBAAkB,CACvB,gBAAsC,EACtC,QAAiB;IAEjB,OAAO,IAAA,mCAA2B,EAAC,EAAC,gBAAgB,EAAE,QAAQ,EAAC,CAAC,CAAC;AACrE,CAAC;AAED,SAAS,kBAAkB,CACvB,IAA0B,EAC1B,IAA0B;IAE1B,MAAM,KAAK,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,GAAG,GAAG,IAAA,qBAAa,EAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;IAC9C,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,WAAW,CAAC,IAA0B,EAAE,QAAgB;IAC7D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5C,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACxC,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC;AAED,SAAS,mBAAmB,CAAC,IAA0B,EAAE,YAAwB;IAC7E,MAAM,KAAK,GAAG,IAAA,0BAAkB,EAAC,IAAI,CAAC,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,GAAG,GAAG,IAAA,0BAAkB,EAAC,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC;IAChE,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,CAAC;AACxB,CAAC","sourcesContent":["import type {DateTime} from '@gravity-ui/date-utils';\n\nimport {useRangeDateFieldState} from '../../DateField';\nimport type {RangeDateFieldStateOptions} from '../../DateField';\nimport type {FormatInfo} from '../../DateField/types';\nimport {adjustDateToFormat} from '../../DateField/utils';\nimport type {DatePickerState} from '../../DatePicker';\nimport {datePickerStateFactory} from '../../DatePicker/hooks/datePickerStateFactory';\nimport {getDateTimeValue} from '../../DatePicker/utils';\nimport type {RangeValue} from '../../types';\nimport {createPlaceholderRangeValue, mergeDateTime} from '../../utils/dates';\n\nexport type RangeDatePickerState = DatePickerState<RangeValue<DateTime>>;\n\nexport type RangeDatePickerStateOptions = RangeDateFieldStateOptions;\n\nexport const useRangeDatePickerState = datePickerStateFactory({\n getPlaceholderTime,\n mergeDateTime: mergeRangeDateTime,\n setTimezone,\n getDateTime: getDateTimeValue,\n useDateFieldState: useRangeDateFieldState,\n adjustDateToFormat: adjustRangeToFormat,\n});\n\nfunction getPlaceholderTime(\n placeholderValue: DateTime \| undefined,\n timeZone?: string,\n): RangeValue<DateTime> {\n return createPlaceholderRangeValue({placeholderValue, timeZone});\n}\n\nfunction mergeRangeDateTime(\n date: RangeValue<DateTime>,\n time: RangeValue<DateTime>,\n): RangeValue<DateTime> {\n const start = mergeDateTime(date.start, time.start);\n const end = mergeDateTime(date.end, time.end);\n return {start, end};\n}\n\nfunction setTimezone(date: RangeValue<DateTime>, timeZone: string): RangeValue<DateTime> {\n const start = date.start.timeZone(timeZone);\n const end = date.end.timeZone(timeZone);\n return {start, end};\n}\n\nfunction adjustRangeToFormat(date: RangeValue<DateTime>, sectionsInfo: FormatInfo) {\n const start = adjustDateToFormat(date.start, sectionsInfo, 'startOf');\n const end = adjustDateToFormat(date.end, sectionsInfo, 'endOf');\n return {start, end};\n}\n"]}

package/dist/cjs/components/RangeDateSelection/RangeDateSelection.d.ts CHANGED Viewed

@@ -21,4 +21,4 @@ export interface RangeDateSelectionProps extends RangeDateSelectionOptions, DomP
         dimensions: ViewportDimensions;
     }) => React.ReactNode;
 }
-export declare function RangeDateSelection(props: RangeDateSelectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangeDateSelection(props: RangeDateSelectionProps): React.JSX.Element;

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

@@ -16,7 +16,6 @@ const i18n_1 = require("./i18n/index.js");
 require("./RangeDateSelection.css");
 const b = (0, cn_1.block)('range-date-selection');
 function RangeDateSelection(props) {
-    var _a, _b;
     const state = (0, useRangeDateSelectionState_1.useRangeDateSelectionState)(props);
     const [isDraggingRuler, setDraggingRuler] = react_1.default.useState(false);
     const handleRulerMoveStart = () => {
@@ -33,10 +32,10 @@ function RangeDateSelection(props) {
         state.endDragging();
     };
     let id = react_1.default.useId();
-    id = (_a = props.id) !== null && _a !== void 0 ? _a : id;
+    id = props.id ?? id;
     const { t } = i18n_1.i18n.useTranslation();
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, (0, filterDOMProps_1.filterDOMProps)(props, { labelable: true }), { id: id, className: b(null, props.className), style: props.style, dir: "ltr" // TODO: RTL support
-        , children: [(0, jsx_runtime_1.jsx)(Ruler_1.DateTimeRuler, Object.assign({ className: b('ruler', { dragging: isDraggingRuler }) }, state.viewportInterval, { onMoveStart: handleRulerMoveStart, onMove: props.draggableRuler ? handleRulerMove : undefined, onMoveEnd: handleRulerMoveEnd, dragDisabled: state.isDragging, displayNow: props.displayNow, minValue: props.minValue, maxValue: props.maxValue, formatTime: props.formatTime, timeZone: state.timeZone, renderAdditionalRulerContent: props.renderAdditionalRulerContent, children: (0, jsx_runtime_1.jsx)(SelectionControl_1.SelectionControl, { className: b('selection'), state: state, "aria-labelledby": id }) })), props.hasScaleButtons ? ((0, jsx_runtime_1.jsxs)("div", { className: b('buttons', { position: (_b = props.scaleButtonsPosition) !== null && _b !== void 0 ? _b : 'start' }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: "xs", onClick: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...(0, filterDOMProps_1.filterDOMProps)(props, { labelable: true }), id: id, className: b(null, props.className), style: props.style, dir: "ltr" // TODO: RTL support
+        , children: [(0, jsx_runtime_1.jsx)(Ruler_1.DateTimeRuler, { className: b('ruler', { dragging: isDraggingRuler }), ...state.viewportInterval, onMoveStart: handleRulerMoveStart, onMove: props.draggableRuler ? handleRulerMove : undefined, onMoveEnd: handleRulerMoveEnd, dragDisabled: state.isDragging, displayNow: props.displayNow, minValue: props.minValue, maxValue: props.maxValue, formatTime: props.formatTime, timeZone: state.timeZone, renderAdditionalRulerContent: props.renderAdditionalRulerContent, children: (0, jsx_runtime_1.jsx)(SelectionControl_1.SelectionControl, { className: b('selection'), state: state, "aria-labelledby": id }) }), props.hasScaleButtons ? ((0, jsx_runtime_1.jsxs)("div", { className: b('buttons', { position: props.scaleButtonsPosition ?? 'start' }), children: [(0, jsx_runtime_1.jsx)(uikit_1.Button, { view: "flat-secondary", size: "xs", onClick: () => {
                             state.startDragging();
                             state.scale(0.5);
                             state.endDragging();
@@ -44,6 +43,6 @@ function RangeDateSelection(props) {
                             state.startDragging();
                             state.scale(1.5);
                             state.endDragging();
-                        }, "aria-label": t('Increase range'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] })) : null] })));
+                        }, "aria-label": t('Increase range'), children: (0, jsx_runtime_1.jsx)(uikit_1.Icon, { data: icons_1.Plus }) })] })) : null] }));
 }
 //# sourceMappingURL=RangeDateSelection.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;AA0Cb,gDA8EC;;;AAtHD,0DAA0B;AAG1B,6CAA8C;AAC9C,6CAA+C;AAE/C,0CAAqC;AAErC,+DAAuD;AAEvD,uDAAuD;AAEvD,wFAAgF;AAChF,sFAA8E;AAE9E,0CAA4B;AAE5B,oCAAmC;AAEnC,MAAM,CAAC,GAAG,IAAA,UAAK,EAAC,sBAAsB,CAAC,CAAC;AAqBxC,SAAgB,kBAAkB,CAAC,KAA8B;;IAC7D,MAAM,KAAK,GAAG,IAAA,uDAA0B,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,CAAC,eAAe,EAAE,gBAAgB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElE,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAC9B,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACpC,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC,CAAC;IACF,MAAM,eAAe,GAAG,CAAC,CAAS,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACpF,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,GAAG,GAAG,CAAC,CAAC;QACrD,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACtB,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,KAAK,CAAC,WAAW,EAAE,CAAC;IACxB,CAAC,CAAC;IAEF,IAAI,EAAE,GAAG,eAAK,CAAC,KAAK,EAAE,CAAC;IACvB,EAAE,GAAG,~~MAAA,~~KAAK,CAAC,EAAE,~~mCAAI~~,EAAE,CAAC;IAEpB,MAAM,EAAC,CAAC,EAAC,GAAG,WAAI,CAAC,cAAc,EAAE,CAAC;IAElC,OAAO,CACH,~~iDACQ~~,IAAA,+BAAc,EAAC,KAAK,EAAE,EAAC,SAAS,EAAE,IAAI,EAAC,CAAC,~~IAC5C~~,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,EACnC,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,GAAG,EAAC,KAAK,CAAC,oBAAoB;qBAE9B,uBAAC,qBAAa,~~kBACV~~,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,QAAQ,EAAE,eAAe,EAAC,CAAC,~~IAC9C~~,KAAK,CAAC,gBAAgB,~~IAC1B~~,WAAW,EAAE,oBAAoB,EACjC,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,EAC1D,SAAS,EAAE,kBAAkB,EAC7B,YAAY,EAAE,KAAK,CAAC,UAAU,EAC9B,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,4BAA4B,EAAE,KAAK,CAAC,4BAA4B,YAEhE,uBAAC,mCAAgB,IAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,KAAK,qBAAmB,EAAE,GAAI,~~IACtE~~,EACf,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CACrB,iCAAK,SAAS,EAAE,CAAC,CAAC,SAAS,EAAE,EAAC,QAAQ,EAAE,~~MAAA,~~KAAK,CAAC,oBAAoB,~~mCAAI~~,OAAO,EAAC,CAAC,aAC3E,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;4BACV,KAAK,CAAC,aAAa,EAAE,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACjB,KAAK,CAAC,WAAW,EAAE,CAAC;wBACxB,CAAC,gBACW,CAAC,CAAC,gBAAgB,CAAC,YAE/B,uBAAC,YAAI,IAAC,IAAI,EAAE,aAAK,GAAI,GAChB,EACT,uBAAC,cAAM,IACH,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;4BACV,KAAK,CAAC,aAAa,EAAE,CAAC;4BACtB,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;4BACjB,KAAK,CAAC,WAAW,EAAE,CAAC;wBACxB,CAAC,gBACW,CAAC,CAAC,gBAAgB,CAAC,YAE/B,uBAAC,YAAI,IAAC,IAAI,EAAE,YAAI,GAAI,GACf,IACP,CACT,CAAC,CAAC,CAAC,IAAI,~~KACN~~,CACT,CAAC;AACN,CAAC","sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport type {DateTime} from '@gravity-ui/date-utils';\nimport {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n extends RangeDateSelectionOptions, DomProps, StyleProps, AccessibilityProps {\n /** Formats time ticks /\n formatTime?: (time: DateTime) => string;\n /* Displays now line /\n displayNow?: boolean;\n /* Enables dragging ruler /\n draggableRuler?: boolean;\n /* Displays buttons to scale selection /\n hasScaleButtons?: boolean;\n /* Position of scale buttons /\n scaleButtonsPosition?: 'start' \| 'end';\n /* Renders additional svg content in the ruler /\n renderAdditionalRulerContent?: (props: {\n interval: ViewportInterval;\n dimensions: ViewportDimensions;\n }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n const state = useRangeDateSelectionState(props);\n\n const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n const handleRulerMoveStart = () => {\n state.setDraggingValue(state.value);\n setDraggingRuler(true);\n };\n const handleRulerMove = (d: number) => {\n const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n const delta = -Math.floor((d intervalWidth) / 100);\n state.move(delta);\n };\n const handleRulerMoveEnd = () => {\n setDraggingRuler(false);\n state.endDragging();\n };\n\n let id = React.useId();\n id = props.id ?? id;\n\n const {t} = i18n.useTranslation();\n\n return (\n <div\n {...filterDOMProps(props, {labelable: true})}\n id={id}\n className={b(null, props.className)}\n style={props.style}\n dir=\"ltr\" // TODO: RTL support\n >\n <DateTimeRuler\n className={b('ruler', {dragging: isDraggingRuler})}\n {...state.viewportInterval}\n onMoveStart={handleRulerMoveStart}\n onMove={props.draggableRuler ? handleRulerMove : undefined}\n onMoveEnd={handleRulerMoveEnd}\n dragDisabled={state.isDragging}\n displayNow={props.displayNow}\n minValue={props.minValue}\n maxValue={props.maxValue}\n formatTime={props.formatTime}\n timeZone={state.timeZone}\n renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n >\n <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n </DateTimeRuler>\n {props.hasScaleButtons ? (\n <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(0.5);\n state.endDragging();\n }}\n aria-label={t('Decrease range')}\n >\n <Icon data={Minus} />\n </Button>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(1.5);\n state.endDragging();\n }}\n aria-label={t('Increase range')}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n ) : null}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"RangeDateSelection.js","sourceRoot":"../../../../src","sources":["components/RangeDateSelection/RangeDateSelection.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 {Minus, Plus} from '@gravity-ui/icons';\nimport {Button, Icon} from '@gravity-ui/uikit';\n\nimport {block} from '../../utils/cn';\nimport type {AccessibilityProps, DomProps, StyleProps} from '../types';\nimport {filterDOMProps} from '../utils/filterDOMProps';\n\nimport {DateTimeRuler} from './components/Ruler/Ruler';\nimport type {ViewportDimensions, ViewportInterval} from './components/Ruler/Ruler';\nimport {SelectionControl} from './components/SelectionControl/SelectionControl';\nimport {useRangeDateSelectionState} from './hooks/useRangeDateSelectionState';\nimport type {RangeDateSelectionOptions} from './hooks/useRangeDateSelectionState';\nimport {i18n} from './i18n';\n\nimport './RangeDateSelection.scss';\n\nconst b = block('range-date-selection');\n\nexport interface RangeDateSelectionProps\n extends RangeDateSelectionOptions, DomProps, StyleProps, AccessibilityProps {\n /** Formats time ticks /\n formatTime?: (time: DateTime) => string;\n /* Displays now line /\n displayNow?: boolean;\n /* Enables dragging ruler /\n draggableRuler?: boolean;\n /* Displays buttons to scale selection /\n hasScaleButtons?: boolean;\n /* Position of scale buttons /\n scaleButtonsPosition?: 'start' \| 'end';\n /* Renders additional svg content in the ruler /\n renderAdditionalRulerContent?: (props: {\n interval: ViewportInterval;\n dimensions: ViewportDimensions;\n }) => React.ReactNode;\n}\n\nexport function RangeDateSelection(props: RangeDateSelectionProps) {\n const state = useRangeDateSelectionState(props);\n\n const [isDraggingRuler, setDraggingRuler] = React.useState(false);\n\n const handleRulerMoveStart = () => {\n state.setDraggingValue(state.value);\n setDraggingRuler(true);\n };\n const handleRulerMove = (d: number) => {\n const intervalWidth = state.viewportInterval.end.diff(state.viewportInterval.start);\n const delta = -Math.floor((d intervalWidth) / 100);\n state.move(delta);\n };\n const handleRulerMoveEnd = () => {\n setDraggingRuler(false);\n state.endDragging();\n };\n\n let id = React.useId();\n id = props.id ?? id;\n\n const {t} = i18n.useTranslation();\n\n return (\n <div\n {...filterDOMProps(props, {labelable: true})}\n id={id}\n className={b(null, props.className)}\n style={props.style}\n dir=\"ltr\" // TODO: RTL support\n >\n <DateTimeRuler\n className={b('ruler', {dragging: isDraggingRuler})}\n {...state.viewportInterval}\n onMoveStart={handleRulerMoveStart}\n onMove={props.draggableRuler ? handleRulerMove : undefined}\n onMoveEnd={handleRulerMoveEnd}\n dragDisabled={state.isDragging}\n displayNow={props.displayNow}\n minValue={props.minValue}\n maxValue={props.maxValue}\n formatTime={props.formatTime}\n timeZone={state.timeZone}\n renderAdditionalRulerContent={props.renderAdditionalRulerContent}\n >\n <SelectionControl className={b('selection')} state={state} aria-labelledby={id} />\n </DateTimeRuler>\n {props.hasScaleButtons ? (\n <div className={b('buttons', {position: props.scaleButtonsPosition ?? 'start'})}>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(0.5);\n state.endDragging();\n }}\n aria-label={t('Decrease range')}\n >\n <Icon data={Minus} />\n </Button>\n <Button\n view=\"flat-secondary\"\n size=\"xs\"\n onClick={() => {\n state.startDragging();\n state.scale(1.5);\n state.endDragging();\n }}\n aria-label={t('Increase range')}\n >\n <Icon data={Plus} />\n </Button>\n </div>\n ) : null}\n </div>\n );\n}\n"]}

package/dist/cjs/components/RangeDateSelection/components/NowLine/NowLine.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
+import React from 'react';
 import "./NowLine.css";
-export declare function NowLine(): import("react/jsx-runtime").JSX.Element | null;
+export declare function NowLine(): React.JSX.Element | null;