@vkontakte/vkui 7.2.1 → 7.3.0

package/dist/components/DateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAY,KAAK,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAQxE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EACzC,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,MAAM,CAC/C,EACD,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,cAAc,GACd,gBAAgB,GAChB,YAAY,GACZ,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,GACb,kBAAkB,CACrB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,wBAAwB;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,o0BAwDvB,cAAc,KAAG,KAAK,CAAC,SAgRzB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateInput/DateInput.js

@@ -10,10 +10,11 @@ import { startOfDay, startOfMinute } from "date-fns";
 import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useDateInput } from "../../hooks/useDateInput.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
-import { callMultiple } from "../../lib/callMultiple.js";
 import { format, isMatch, parse } from "../../lib/date.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { Calendar } from "../Calendar/Calendar.js";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
+import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { FormField } from "../FormField/FormField.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { InputLike } from "../InputLike/InputLike.js";
@@ -75,17 +76,17 @@ const getInternalValue = (value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */ export const DateInput = (_param)=>{
-    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value: valueProp, defaultValue, onChange, calendarPlacement: calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', showNeighboringMonth, size, changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone } = _param, props = _object_without_properties(_param, [
+    var { enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, 'value': valueProp, defaultValue, onChange, 'calendarPlacement': calendarPlacementProp = 'bottom-start', style, className, doneButtonText, DoneButton, closeOnChange = true, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, accessible, calendarLabel = 'Календарь', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeDayLabel = 'День', changeMonthLabel = 'Месяц', changeYearLabel = 'Год', changeHoursLabel = 'Час', changeMinutesLabel = 'Минута', clearFieldLabel = 'Очистить поле', showCalendarLabel = 'Показать календарь', showNeighboringMonth, size, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar = false, renderDayContent, onCalendarOpenChanged, calendarTestsProps, dayFieldTestId, monthFieldTestId, yearFieldTestId, hourFieldTestId, minuteFieldTestId, showCalendarButtonTestId, clearButtonTestId, id, onApply, renderCustomValue, timezone, restoreFocus, disableFocusTrap, 'aria-label': ariaLabel = '' } = _param, props = _object_without_properties(_param, [
         "enableTime",
         "shouldDisableDate",
         "disableFuture",
         "disablePast",
         "minDateTime",
         "maxDateTime",
-        "value",
+        'value',
         "defaultValue",
         "onChange",
-        "calendarPlacement",
+        'calendarPlacement',
         "style",
         "className",
         "doneButtonText",
@@ -98,17 +99,19 @@ const getInternalValue = (value)=>{
         "disabled",
         "onClick",
         "onFocus",
+        "accessible",
+        "calendarLabel",
         "prevMonthLabel",
         "nextMonthLabel",
-        "showNeighboringMonth",
-        "size",
+        "changeDayLabel",
         "changeMonthLabel",
         "changeYearLabel",
-        "changeDayLabel",
         "changeHoursLabel",
         "changeMinutesLabel",
         "clearFieldLabel",
         "showCalendarLabel",
+        "showNeighboringMonth",
+        "size",
         "viewDate",
         "onHeaderChange",
         "onNextMonth",
@@ -129,7 +132,10 @@ const getInternalValue = (value)=>{
         "id",
         "onApply",
         "renderCustomValue",
-        "timezone"
+        "timezone",
+        "restoreFocus",
+        "disableFocusTrap",
+        'aria-label'
     ]);
     const daysRef = React.useRef(null);
     const monthsRef = React.useRef(null);
@@ -178,7 +184,7 @@ const getInternalValue = (value)=>{
         hoursRef,
         minutesRef
     ]);
-    const { rootRef, calendarRef, open, openCalendar, internalValue, handleKeyDown, setFocusedElement, handleFieldEnter, clear, removeFocusFromField } = useDateInput({
+    const { rootRef, calendarRef, open, internalValue, handleKeyDown, setFocusedElement, handleFieldEnter, clear, removeFocusFromField, closeCalendar, toggleCalendar, openCalendar } = useDateInput({
         maxElement,
         refs,
         autoFocus,
@@ -188,7 +194,8 @@ const getInternalValue = (value)=>{
         onInternalValueChange,
         getInternalValue,
         value,
-        onCalendarOpenChanged
+        onCalendarOpenChanged,
+        accessible
     });
     const { sizeY = 'none' } = useAdaptivity();
     const handleRootRef = useExternRef(rootRef, getRootRef);
@@ -242,54 +249,97 @@ const getInternalValue = (value)=>{
     // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался
     // на ней, пока помещается.
     const [calendarPlacement, setCalendarPlacement] = React.useState(calendarPlacementProp);
+    const { locale } = useConfigProvider();
+    const currentDateLabel = value ? new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }).format(value) : null;
+    const currentDateLabelId = React.useId();
+    const ariaLabelId = React.useId();
+    const showCalendarOnInputAreaClick = React.useCallback(()=>{
+        handleFieldEnter();
+        if (accessible) {
+            openCalendar();
+        }
+    }, [
+        handleFieldEnter,
+        openCalendar,
+        accessible
+    ]);
     return /*#__PURE__*/ _jsxs(FormField, _object_spread_props(_object_spread({
         style: style,
         className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         getRootRef: handleRootRef,
-        after: value ? /*#__PURE__*/ _jsx(IconButton, {
-            hoverMode: "opacity",
-            label: clearFieldLabel,
-            onClick: clear,
-            "data-testid": clearButtonTestId,
-            children: /*#__PURE__*/ _jsx(Icon16Clear, {})
-        }) : /*#__PURE__*/ _jsx(IconButton, {
-            hoverMode: "opacity",
-            label: showCalendarLabel,
-            onClick: openCalendar,
-            "data-testid": showCalendarButtonTestId,
-            children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+        role: "group",
+        "aria-labelledby": `${ariaLabelId} ${currentDateLabelId}`,
+        after: /*#__PURE__*/ _jsxs(React.Fragment, {
+            children: [
+                !disableCalendar && (accessible || !accessible && !value) ? /*#__PURE__*/ _jsx(IconButton, {
+                    hoverMode: "opacity",
+                    label: showCalendarLabel,
+                    onClick: toggleCalendar,
+                    "data-testid": showCalendarButtonTestId,
+                    children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+                }) : null,
+                value ? /*#__PURE__*/ _jsx(IconButton, {
+                    hoverMode: "opacity",
+                    label: clearFieldLabel,
+                    onClick: clear,
+                    "data-testid": clearButtonTestId,
+                    children: /*#__PURE__*/ _jsx(Icon16Clear, {})
+                }) : null
+            ]
         }),
         disabled: disabled,
-        onClick: callMultiple(handleFieldEnter, onClick),
-        onFocus: callMultiple(handleFieldEnter, onFocus)
+        onClick: onClick
     }, props), {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: "vkuiDateInput__wrapper",
                 children: [
+                    ariaLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        id: ariaLabelId,
+                        children: ariaLabel
+                    }),
+                    currentDateLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        id: currentDateLabelId,
+                        children: currentDateLabel
+                    }),
                     /*#__PURE__*/ _jsx(VisuallyHidden, {
                         id: id,
                         Component: "input",
+                        readOnly: true,
+                        "aria-hidden": true,
+                        tabIndex: -1,
                         name: name,
-                        value: value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : ''
+                        value: value ? format(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : 'dd.MM.yyyy') : '',
+                        onFocus: handleFieldEnter
                     }),
                     /*#__PURE__*/ _jsxs(Text, {
                         className: classNames("vkuiDateInput__input", customValue && "vkuiDateInput__hidden"),
-                        onKeyDown: handleKeyDown,
                         // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
                         // из-за чего `.Typography--normalize` перебивает стили.
                         normalize: false,
                         Component: "span" // для <span> нормализация не нужна
                         ,
+                        onClick: showCalendarOnInputAreaClick,
                         children: [
                             /*#__PURE__*/ _jsx(InputLike, {
                                 length: 2,
                                 getRootRef: daysRef,
                                 index: 0,
+                                onKeyDown: handleKeyDown,
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[0],
                                 label: changeDayLabel,
-                                "data-testid": dayFieldTestId
+                                "data-testid": dayFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 31,
+                                "aria-valuetext": internalValue[0],
+                                "aria-label": changeDayLabel
                             }),
                             /*#__PURE__*/ _jsx(InputLikeDivider, {
                                 children: "."
@@ -299,9 +349,15 @@ const getInternalValue = (value)=>{
                                 getRootRef: monthsRef,
                                 index: 1,
                                 onElementSelect: setFocusedElement,
+                                onKeyDown: handleKeyDown,
                                 value: internalValue[1],
                                 label: changeMonthLabel,
-                                "data-testid": monthFieldTestId
+                                "data-testid": monthFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 12,
+                                "aria-valuetext": internalValue[1],
+                                "aria-label": changeMonthLabel
                             }),
                             /*#__PURE__*/ _jsx(InputLikeDivider, {
                                 children: "."
@@ -313,7 +369,13 @@ const getInternalValue = (value)=>{
                                 onElementSelect: setFocusedElement,
                                 value: internalValue[2],
                                 label: changeYearLabel,
-                                "data-testid": yearFieldTestId
+                                onKeyDown: handleKeyDown,
+                                "data-testid": yearFieldTestId,
+                                role: "spinbutton",
+                                "aria-valuemin": 1,
+                                "aria-valuemax": 275750,
+                                "aria-valuetext": internalValue[2],
+                                "aria-label": changeYearLabel
                             }),
                             enableTime && /*#__PURE__*/ _jsxs(React.Fragment, {
                                 children: [
@@ -328,7 +390,13 @@ const getInternalValue = (value)=>{
                                         onElementSelect: setFocusedElement,
                                         value: internalValue[3],
                                         label: changeHoursLabel,
-                                        "data-testid": hourFieldTestId
+                                        onKeyDown: handleKeyDown,
+                                        "data-testid": hourFieldTestId,
+                                        role: "spinbutton",
+                                        "aria-valuemin": 1,
+                                        "aria-valuemax": 24,
+                                        "aria-valuetext": internalValue[3],
+                                        "aria-label": changeHoursLabel
                                     }),
                                     /*#__PURE__*/ _jsx(InputLikeDivider, {
                                         children: ":"
@@ -340,7 +408,13 @@ const getInternalValue = (value)=>{
                                         onElementSelect: setFocusedElement,
                                         value: internalValue[4],
                                         label: changeMinutesLabel,
-                                        "data-testid": minuteFieldTestId
+                                        onKeyDown: handleKeyDown,
+                                        "data-testid": minuteFieldTestId,
+                                        role: "spinbutton",
+                                        "aria-valuemin": 1,
+                                        "aria-valuemax": 59,
+                                        "aria-valuetext": internalValue[4],
+                                        "aria-label": changeMinutesLabel
                                     })
                                 ]
                             })
@@ -359,37 +433,44 @@ const getInternalValue = (value)=>{
                 placement: calendarPlacement,
                 onPlacementChange: setCalendarPlacement,
                 autoUpdateOnTargetResize: true,
-                children: /*#__PURE__*/ _jsx(Calendar, _object_spread({
-                    value: value,
-                    onChange: onCalendarChange,
-                    enableTime: enableTime,
-                    disablePast: disablePast,
-                    disableFuture: disableFuture,
-                    shouldDisableDate: shouldDisableDate,
-                    onDoneButtonClick: onDoneButtonClick,
-                    getRootRef: calendarRef,
-                    doneButtonText: doneButtonText,
-                    DoneButton: DoneButton,
-                    disablePickers: disablePickers,
-                    changeHoursLabel: changeHoursLabel,
-                    changeMinutesLabel: changeMinutesLabel,
-                    prevMonthLabel: prevMonthLabel,
-                    nextMonthLabel: nextMonthLabel,
-                    changeMonthLabel: changeMonthLabel,
-                    changeYearLabel: changeYearLabel,
-                    changeDayLabel: changeDayLabel,
-                    showNeighboringMonth: showNeighboringMonth,
-                    renderDayContent: renderDayContent,
-                    size: size,
-                    viewDate: viewDate,
-                    onHeaderChange: onHeaderChange,
-                    onNextMonth: onNextMonth,
-                    onPrevMonth: onPrevMonth,
-                    prevMonthIcon: prevMonthIcon,
-                    nextMonthIcon: nextMonthIcon,
-                    minDateTime: minDateTime,
-                    maxDateTime: maxDateTime
-                }, calendarTestsProps))
+                children: /*#__PURE__*/ _jsx(FocusTrap, {
+                    onClose: closeCalendar,
+                    disabled: disableFocusTrap !== null && disableFocusTrap !== void 0 ? disableFocusTrap : !accessible,
+                    restoreFocus: restoreFocus !== null && restoreFocus !== void 0 ? restoreFocus : Boolean(accessible),
+                    captureEscapeKeyboardEvent: false,
+                    children: /*#__PURE__*/ _jsx(Calendar, _object_spread({
+                        "aria-label": calendarLabel,
+                        role: "dialog",
+                        value: value,
+                        onChange: onCalendarChange,
+                        enableTime: enableTime,
+                        disablePast: disablePast,
+                        disableFuture: disableFuture,
+                        shouldDisableDate: shouldDisableDate,
+                        onDoneButtonClick: onDoneButtonClick,
+                        getRootRef: calendarRef,
+                        doneButtonText: doneButtonText,
+                        DoneButton: DoneButton,
+                        disablePickers: disablePickers,
+                        changeHoursLabel: changeHoursLabel,
+                        changeMinutesLabel: changeMinutesLabel,
+                        prevMonthLabel: prevMonthLabel,
+                        nextMonthLabel: nextMonthLabel,
+                        changeMonthLabel: changeMonthLabel,
+                        changeYearLabel: changeYearLabel,
+                        showNeighboringMonth: showNeighboringMonth,
+                        renderDayContent: renderDayContent,
+                        size: size,
+                        viewDate: viewDate,
+                        onHeaderChange: onHeaderChange,
+                        onNextMonth: onNextMonth,
+                        onPrevMonth: onPrevMonth,
+                        prevMonthIcon: prevMonthIcon,
+                        nextMonthIcon: nextMonthIcon,
+                        minDateTime: minDateTime,
+                        maxDateTime: maxDateTime
+                    }, calendarTestsProps))
+                })
             })
         ]
     }));

package/dist/components/DateInput/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня\n   */\n  dayFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца\n   */\n  monthFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года\n   */\n  yearFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа\n   */\n  hourFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут\n   */\n  minuteFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре\n   */\n  calendarTestsProps?: CalendarTestsProps;\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  disableCalendar?: boolean;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  /**\n   * Колбэк срабатывающий при нажатии на кнопку \"Done\". Используется совместно с флагом `enableTime`.\n   */\n  onApply?: (value?: Date) => void;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n  /**\n   * Свойство для отображения времени в нужной таймзоне\n   */\n  timezone?: string;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  value: valueProp,\n  defaultValue,\n  onChange,\n  calendarPlacement: calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  showNeighboringMonth,\n  size,\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        updateValue(\n          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n        );\n      }\n    },\n    [enableTime, maxElement, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onClear: clearValue,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      if (!value) {\n        return;\n      }\n      if (enableTime) {\n        setInternalValue(value);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton\n            hoverMode=\"opacity\"\n            label={clearFieldLabel}\n            onClick={clear}\n            data-testid={clearButtonTestId}\n          >\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton\n            hoverMode=\"opacity\"\n            label={showCalendarLabel}\n            onClick={openCalendar}\n            data-testid={showCalendarButtonTestId}\n          >\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <div className={styles.wrapper}>\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          name={name}\n          value={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          onKeyDown={handleKeyDown}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n        >\n          <InputLike\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onElementSelect={setFocusedElement}\n            value={internalValue[0]}\n            label={changeDayLabel}\n            data-testid={dayFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            value={internalValue[1]}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            value={internalValue[2]}\n            label={changeYearLabel}\n            data-testid={yearFieldTestId}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <InputLike\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                value={internalValue[3]}\n                label={changeHoursLabel}\n                data-testid={hourFieldTestId}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <InputLike\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                value={internalValue[4]}\n                label={changeMinutesLabel}\n                data-testid={minuteFieldTestId}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onDoneButtonClick={onDoneButtonClick}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            DoneButton={DoneButton}\n            disablePickers={disablePickers}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            renderDayContent={renderDayContent}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            minDateTime={minDateTime}\n            maxDateTime={maxDateTime}\n            {...calendarTestsProps}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","useIsomorphicLayoutEffect","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacement","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","showNeighboringMonth","size","changeMonthLabel","changeYearLabel","changeDayLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","setCalendarPlacement","useState","after","hoverMode","label","data-testid","div","Component","onKeyDown","normalize","onElementSelect","Fragment","aria-hidden","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { startOfDay, startOfMinute } from 'date-fns';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRootRef } from '../../types';\nimport { Calendar, type CalendarProps, type CalendarTestsProps } from '../Calendar/Calendar';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { FormField, type FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { useDateInputValue } from './hooks';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport type DateInputPropsTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для поля ввода дня.\n   */\n  dayFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода месяца.\n   */\n  monthFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода года.\n   */\n  yearFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода часа.\n   */\n  hourFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для поля ввода минут.\n   */\n  minuteFieldTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки показа календаря.\n   */\n  showCalendarButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки очистки даты.\n   */\n  clearButtonTestId?: string;\n};\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      'value' | 'defaultValue' | 'onChange' | 'size'\n    >,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'defaultValue'\n      | 'doneButtonText'\n      | 'DoneButton'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n      | 'renderDayContent'\n    >,\n    Pick<UseFocusTrapProps, 'restoreFocus'>,\n    HasRootRef<HTMLDivElement>,\n    Omit<FormFieldProps, 'maxHeight'>,\n    DateInputPropsTestsProps {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в календаре.\n   */\n  calendarTestsProps?: CalendarTestsProps;\n  /**\n   * Расположение календаря относительно поля ввода.\n   */\n  calendarPlacement?: PlacementWithAuto;\n  /**\n   * Автоматически закрывать календарь при изменениях.\n   */\n  closeOnChange?: boolean;\n  /**\n   * `aria-label` для календаря.\n   */\n  calendarLabel?: string;\n  /**\n   * Label для кнопки очистки. Делает доступным для ассистивных технологий.\n   */\n  clearFieldLabel?: string;\n  /**\n   * Label для кнопки открытия календаря. Делает доступным для ассистивных технологий.\n   */\n  showCalendarLabel?: string;\n  /**\n   * Отключение открытия календаря.\n   */\n  disableCalendar?: boolean;\n  /**\n   * Обработчик изменения состояния открытия календаря.\n   */\n  onCalendarOpenChanged?: (opened: boolean) => void;\n  /**\n   * `aria-label` для поля изменения дня.\n   */\n  changeDayLabel?: string;\n  /**\n   * Обработчик нажатия на кнопку `\"Done\"`. Используется совместно с флагом `enableTime`.\n   */\n  onApply?: (value?: Date) => void;\n  /**\n   * Функция для кастомного форматирования отображаемого значения даты.\n   * Позволяет переопределить стандартное отображение даты и вернуть собственное представление.\n   */\n  renderCustomValue?: (date: Date | undefined) => React.ReactNode;\n  /**\n   * Часовой пояс для отображения даты.\n   */\n  timezone?: string;\n  /**\n   * Включает режим в котором DateInput доступен\n   * для ассистивных технологий.\n   * В этом режиме:\n   * - календарь больше не открывает при фокусе на DateInput;\n   * - иконка календаря видна всегда, чтобы пользователи\n   * ассистивных технологий могли открыть календарь по клику на иконку;\n   * - календарь при открытии получает фокус, клавиатурный\n   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт;\n   *\n   * TODO [>=8]: включить по умолчанию.\n   */\n  accessible?: boolean;\n  /**\n   * Позволяет отключить захват фокуса при появлении календаря.\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  'value': valueProp,\n  defaultValue,\n  onChange,\n  'calendarPlacement': calendarPlacementProp = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  DoneButton,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  accessible,\n  calendarLabel = 'Календарь',\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'День',\n  changeMonthLabel = 'Месяц',\n  changeYearLabel = 'Год',\n  changeHoursLabel = 'Час',\n  changeMinutesLabel = 'Минута',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  showNeighboringMonth,\n  size,\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  renderDayContent,\n  onCalendarOpenChanged,\n  calendarTestsProps,\n  dayFieldTestId,\n  monthFieldTestId,\n  yearFieldTestId,\n  hourFieldTestId,\n  minuteFieldTestId,\n  showCalendarButtonTestId,\n  clearButtonTestId,\n  id,\n  onApply,\n  renderCustomValue,\n  timezone,\n  restoreFocus,\n  disableFocusTrap,\n  'aria-label': ariaLabel = '',\n  ...props\n}: DateInputProps): React.ReactNode => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const { value, updateValue, setInternalValue, getLastUpdatedValue, clearValue } =\n    useDateInputValue({\n      value: valueProp,\n      defaultValue,\n      onChange,\n      timezone,\n    });\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'dd.MM.yyyy';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        const now = new Date();\n        updateValue(\n          parse(formattedValue, mask, value ?? (enableTime ? startOfMinute(now) : startOfDay(now))),\n        );\n      }\n    },\n    [enableTime, maxElement, updateValue, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n    closeCalendar,\n    toggleCalendar,\n    openCalendar,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onClear: clearValue,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n    onCalendarOpenChanged,\n    accessible,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  useIsomorphicLayoutEffect(\n    function resetValueOnCloseCalendar() {\n      if (!open) {\n        setInternalValue(getLastUpdatedValue());\n      }\n    },\n    [open, getLastUpdatedValue],\n  );\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      if (!value) {\n        return;\n      }\n      if (enableTime) {\n        setInternalValue(value);\n        return;\n      }\n      updateValue(value);\n      if (closeOnChange) {\n        removeFocusFromField();\n      }\n    },\n    [enableTime, updateValue, closeOnChange, setInternalValue, removeFocusFromField],\n  );\n\n  const onDoneButtonClick = React.useCallback(() => {\n    if (!value) {\n      return;\n    }\n    const newValue = updateValue(value);\n    onApply?.(newValue);\n    removeFocusFromField();\n  }, [onApply, removeFocusFromField, updateValue, value]);\n\n  const customValue = React.useMemo(\n    () => !open && renderCustomValue?.(value || undefined),\n    [open, renderCustomValue, value],\n  );\n\n  // при переключении месяцев высота календаря может меняться,\n  // чтобы календарь не прыгал при переключении месяцев каждый раз на\n  // лучшую позицию мы запоминаем последнюю удачную, чтобы календарь оставался\n  // на ней, пока помещается.\n  const [calendarPlacement, setCalendarPlacement] =\n    React.useState<PlacementWithAuto>(calendarPlacementProp);\n\n  const { locale } = useConfigProvider();\n  const currentDateLabel = value\n    ? new Intl.DateTimeFormat(locale, {\n        weekday: 'long',\n        year: 'numeric',\n        month: 'long',\n        day: 'numeric',\n      }).format(value)\n    : null;\n  const currentDateLabelId = React.useId();\n  const ariaLabelId = React.useId();\n\n  const showCalendarOnInputAreaClick = React.useCallback(() => {\n    handleFieldEnter();\n    if (accessible) {\n      openCalendar();\n    }\n  }, [handleFieldEnter, openCalendar, accessible]);\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      role=\"group\"\n      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}\n      after={\n        <React.Fragment>\n          {!disableCalendar && (accessible || (!accessible && !value)) ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={showCalendarLabel}\n              onClick={toggleCalendar}\n              data-testid={showCalendarButtonTestId}\n            >\n              <Icon20CalendarOutline />\n            </IconButton>\n          ) : null}\n          {value ? (\n            <IconButton\n              hoverMode=\"opacity\"\n              label={clearFieldLabel}\n              onClick={clear}\n              data-testid={clearButtonTestId}\n            >\n              <Icon16Clear />\n            </IconButton>\n          ) : null}\n        </React.Fragment>\n      }\n      disabled={disabled}\n      onClick={onClick}\n      {...props}\n    >\n      <div className={styles.wrapper}>\n        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}\n        {currentDateLabel && (\n          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>\n        )}\n        <VisuallyHidden\n          id={id}\n          Component=\"input\"\n          readOnly\n          aria-hidden\n          tabIndex={-1}\n          name={name}\n          value={value ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : 'dd.MM.yyyy') : ''}\n          onFocus={handleFieldEnter}\n        />\n        <Text\n          className={classNames(styles.input, customValue && styles.hidden)}\n          // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n          // из-за чего `.Typography--normalize` перебивает стили.\n          normalize={false}\n          Component=\"span\" // для <span> нормализация не нужна\n          onClick={showCalendarOnInputAreaClick}\n        >\n          <InputLike\n            length={2}\n            getRootRef={daysRef}\n            index={0}\n            onKeyDown={handleKeyDown}\n            onElementSelect={setFocusedElement}\n            value={internalValue[0]}\n            label={changeDayLabel}\n            data-testid={dayFieldTestId}\n            role=\"spinbutton\"\n            aria-valuemin={1}\n            aria-valuemax={31}\n            aria-valuetext={internalValue[0]}\n            aria-label={changeDayLabel}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={2}\n            getRootRef={monthsRef}\n            index={1}\n            onElementSelect={setFocusedElement}\n            onKeyDown={handleKeyDown}\n            value={internalValue[1]}\n            label={changeMonthLabel}\n            data-testid={monthFieldTestId}\n            role=\"spinbutton\"\n            aria-valuemin={1}\n            aria-valuemax={12}\n            aria-valuetext={internalValue[1]}\n            aria-label={changeMonthLabel}\n          />\n          <InputLikeDivider>.</InputLikeDivider>\n          <InputLike\n            length={4}\n            getRootRef={yearsRef}\n            index={2}\n            onElementSelect={setFocusedElement}\n            value={internalValue[2]}\n            label={changeYearLabel}\n            onKeyDown={handleKeyDown}\n            data-testid={yearFieldTestId}\n            role=\"spinbutton\"\n            aria-valuemin={1}\n            aria-valuemax={275750}\n            aria-valuetext={internalValue[2]}\n            aria-label={changeYearLabel}\n          />\n          {enableTime && (\n            <React.Fragment>\n              <InputLikeDivider className={styles.inputTimeDivider}> </InputLikeDivider>\n              <InputLike\n                length={2}\n                getRootRef={hoursRef}\n                index={3}\n                onElementSelect={setFocusedElement}\n                value={internalValue[3]}\n                label={changeHoursLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={hourFieldTestId}\n                role=\"spinbutton\"\n                aria-valuemin={1}\n                aria-valuemax={24}\n                aria-valuetext={internalValue[3]}\n                aria-label={changeHoursLabel}\n              />\n              <InputLikeDivider>:</InputLikeDivider>\n              <InputLike\n                length={2}\n                getRootRef={minutesRef}\n                index={4}\n                onElementSelect={setFocusedElement}\n                value={internalValue[4]}\n                label={changeMinutesLabel}\n                onKeyDown={handleKeyDown}\n                data-testid={minuteFieldTestId}\n                role=\"spinbutton\"\n                aria-valuemin={1}\n                aria-valuemax={59}\n                aria-valuetext={internalValue[4]}\n                aria-label={changeMinutesLabel}\n              />\n            </React.Fragment>\n          )}\n        </Text>\n        {customValue && (\n          <Text className={styles.customValue} aria-hidden>\n            {customValue}\n          </Text>\n        )}\n      </div>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          onPlacementChange={setCalendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <FocusTrap\n            onClose={closeCalendar}\n            disabled={disableFocusTrap ?? !accessible}\n            restoreFocus={restoreFocus ?? Boolean(accessible)}\n            captureEscapeKeyboardEvent={false}\n          >\n            <Calendar\n              aria-label={calendarLabel}\n              role=\"dialog\"\n              value={value}\n              onChange={onCalendarChange}\n              enableTime={enableTime}\n              disablePast={disablePast}\n              disableFuture={disableFuture}\n              shouldDisableDate={shouldDisableDate}\n              onDoneButtonClick={onDoneButtonClick}\n              getRootRef={calendarRef}\n              doneButtonText={doneButtonText}\n              DoneButton={DoneButton}\n              disablePickers={disablePickers}\n              changeHoursLabel={changeHoursLabel}\n              changeMinutesLabel={changeMinutesLabel}\n              prevMonthLabel={prevMonthLabel}\n              nextMonthLabel={nextMonthLabel}\n              changeMonthLabel={changeMonthLabel}\n              changeYearLabel={changeYearLabel}\n              showNeighboringMonth={showNeighboringMonth}\n              renderDayContent={renderDayContent}\n              size={size}\n              viewDate={viewDate}\n              onHeaderChange={onHeaderChange}\n              onNextMonth={onNextMonth}\n              onPrevMonth={onPrevMonth}\n              prevMonthIcon={prevMonthIcon}\n              nextMonthIcon={nextMonthIcon}\n              minDateTime={minDateTime}\n              maxDateTime={maxDateTime}\n              {...calendarTestsProps}\n            />\n          </FocusTrap>\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","startOfDay","startOfMinute","useAdaptivity","useDateInput","useExternRef","format","isMatch","parse","useIsomorphicLayoutEffect","Calendar","useConfigProvider","FocusTrap","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","useDateInputValue","sizeYClassNames","none","compact","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","valueProp","defaultValue","onChange","calendarPlacementProp","style","className","doneButtonText","DoneButton","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","accessible","calendarLabel","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeHoursLabel","changeMinutesLabel","clearFieldLabel","showCalendarLabel","showNeighboringMonth","size","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","renderDayContent","onCalendarOpenChanged","calendarTestsProps","dayFieldTestId","monthFieldTestId","yearFieldTestId","hourFieldTestId","minuteFieldTestId","showCalendarButtonTestId","clearButtonTestId","id","onApply","renderCustomValue","timezone","restoreFocus","disableFocusTrap","ariaLabel","props","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","updateValue","setInternalValue","getLastUpdatedValue","clearValue","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","now","Date","refs","useMemo","rootRef","calendarRef","open","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","closeCalendar","toggleCalendar","openCalendar","onClear","sizeY","handleRootRef","resetValueOnCloseCalendar","onCalendarChange","onDoneButtonClick","customValue","undefined","calendarPlacement","setCalendarPlacement","useState","locale","currentDateLabel","Intl","DateTimeFormat","weekday","year","month","day","currentDateLabelId","useId","ariaLabelId","showCalendarOnInputAreaClick","role","aria-labelledby","after","Fragment","hoverMode","label","data-testid","div","Component","readOnly","aria-hidden","tabIndex","normalize","onKeyDown","onElementSelect","aria-valuemin","aria-valuemax","aria-valuetext","aria-label","targetRef","offsetByMainAxis","placement","onPlacementChange","autoUpdateOnTargetResize","onClose","Boolean","captureEscapeKeyboardEvent"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,mBAAmB;AACtE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,UAAU,EAAEC,aAAa,QAAQ,WAAW;AACrD,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAASC,MAAM,EAAEC,OAAO,EAAEC,KAAK,QAAQ,oBAAiB;AAExD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,QAAQ,QAAqD,0BAAuB;AAC7F,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,cAAc,QAAQ,sCAAmC;AAClE,SAASC,iBAAiB,QAAQ,aAAU;AAI5C,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AA6IA,MAAMC,iBAAiB,CAACC;IACtB,IAAIC,SAAS;IACb,IAAIC,MAAM;IACV,IAAIC,MAAM;IAEV,OAAQH;QACN,KAAK;YACHG,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACND,MAAM;YACND,SAAS;YACT;QACF,KAAK;YACHE,MAAM;YACN;QACF,KAAK;YACHA,MAAM;YACN;IACJ;IAEA,OAAO;QAAEF;QAAQC;QAAKC;IAAI;AAC5B;AAEA,MAAMC,mBAAmB,CAACC;IACxB,MAAMC,WAAW;QAAC;QAAI;QAAI;QAAI;QAAI;KAAG;IACrC,IAAID,OAAO;QACTC,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMG,OAAO,IAAIC,QAAQ,CAAC,GAAG;QAClDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMK,QAAQ,KAAK,GAAGD,QAAQ,CAAC,GAAG;QACvDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMM,WAAW,IAAIF,QAAQ,CAAC,GAAG;QACtDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMO,QAAQ,IAAIH,QAAQ,CAAC,GAAG;QACnDH,QAAQ,CAAC,EAAE,GAAGC,OAAOF,MAAMQ,UAAU,IAAIJ,QAAQ,CAAC,GAAG;IACvD;IACA,OAAOH;AACT;AAEA;;CAEC,GACD,OAAO,MAAMQ,YAAY;QAAC,EACxBC,UAAU,EACVC,iBAAiB,EACjBC,aAAa,EACbC,WAAW,EACXC,WAAW,EACXC,WAAW,EACX,SAASC,SAAS,EAClBC,YAAY,EACZC,QAAQ,EACR,qBAAqBC,wBAAwB,cAAc,EAC3DC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,UAAU,EACVC,gBAAgB,IAAI,EACpBC,cAAc,EACdC,UAAU,EACVC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,UAAU,EACVC,gBAAgB,WAAW,EAC3BC,iBAAiB,kBAAkB,EACnCC,iBAAiB,iBAAiB,EAClCC,iBAAiB,MAAM,EACvBC,mBAAmB,OAAO,EAC1BC,kBAAkB,KAAK,EACvBC,mBAAmB,KAAK,EACxBC,qBAAqB,QAAQ,EAC7BC,kBAAkB,eAAe,EACjCC,oBAAoB,oBAAoB,EACxCC,oBAAoB,EACpBC,IAAI,EACJC,QAAQ,EACRC,cAAc,EACdC,WAAW,EACXC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,kBAAkB,KAAK,EACvBC,gBAAgB,EAChBC,qBAAqB,EACrBC,kBAAkB,EAClBC,cAAc,EACdC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EACjBC,EAAE,EACFC,OAAO,EACPC,iBAAiB,EACjBC,QAAQ,EACRC,YAAY,EACZC,gBAAgB,EAChB,cAAcC,YAAY,EAAE,EAEb,WADZC;QA3DH3D;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;QACAE;QACAC;QACA;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACA;;IAGA,MAAMG,UAAUvG,MAAMwG,MAAM,CAAkB;IAC9C,MAAMC,YAAYzG,MAAMwG,MAAM,CAAkB;IAChD,MAAME,WAAW1G,MAAMwG,MAAM,CAAkB;IAC/C,MAAMG,WAAW3G,MAAMwG,MAAM,CAAkB;IAC/C,MAAMI,aAAa5G,MAAMwG,MAAM,CAAkB;IAEjD,MAAM,EAAEvE,KAAK,EAAE4E,WAAW,EAAEC,gBAAgB,EAAEC,mBAAmB,EAAEC,UAAU,EAAE,GAC7EzF,kBAAkB;QAChBU,OAAOgB;QACPC;QACAC;QACA+C;IACF;IAEF,MAAMe,aAAatE,aAAa,IAAI;IAEpC,MAAMuE,wBAAwBlH,MAAMmH,WAAW,CAC7C,CAACC;QACC,IAAK,IAAIC,IAAI,GAAGA,KAAKJ,YAAYI,KAAK,EAAG;YACvC,IAAID,aAAa,CAACC,EAAE,CAACxF,MAAM,GAAGF,eAAe0F,GAAGxF,MAAM,EAAE;gBACtD;YACF;QACF;QAEA,IAAIyF,iBAAiB,GAAGF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,EAAE;QAClF,IAAIG,OAAO;QACX,IAAI5E,YAAY;YACd2E,kBAAkB,CAAC,CAAC,EAAEF,aAAa,CAAC,EAAE,CAAC,CAAC,EAAEA,aAAa,CAAC,EAAE,EAAE;YAC5DG,QAAQ;QACV;QAEA,IAAI7G,QAAQ4G,gBAAgBC,OAAO;YACjC,MAAMC,MAAM,IAAIC;YAChBZ,YACElG,MAAM2G,gBAAgBC,MAAMtF,kBAAAA,mBAAAA,QAAUU,aAAatC,cAAcmH,OAAOpH,WAAWoH;QAEvF;IACF,GACA;QAAC7E;QAAYsE;QAAYJ;QAAa5E;KAAM;IAG9C,MAAMyF,OAAO1H,MAAM2H,OAAO,CACxB,IAAM;YAACpB;YAASE;YAAWC;YAAUC;YAAUC;SAAW,EAC1D;QAACL;QAASE;QAAWC;QAAUC;QAAUC;KAAW;IAGtD,MAAM,EACJgB,OAAO,EACPC,WAAW,EACXC,IAAI,EACJV,aAAa,EACbW,aAAa,EACbC,iBAAiB,EACjBC,gBAAgB,EAChBC,KAAK,EACLC,oBAAoB,EACpBC,aAAa,EACbC,cAAc,EACdC,YAAY,EACb,GAAG/H,aAAa;QACf0G;QACAS;QACA7D;QACAC;QACAnC;QACA4G,SAASvB;QACTE;QACAlF;QACAC;QACAqD;QACArB;IACF;IAEA,MAAM,EAAEuE,QAAQ,MAAM,EAAE,GAAGlI;IAE3B,MAAMmI,gBAAgBjI,aAAaoH,SAASjE;IAE5C/C,0BACE,SAAS8H;QACP,IAAI,CAACZ,MAAM;YACThB,iBAAiBC;QACnB;IACF,GACA;QAACe;QAAMf;KAAoB;IAG7B,MAAM4B,mBAAmB3I,MAAMmH,WAAW,CACxC,CAAClF;QACC,IAAI,CAACA,OAAO;YACV;QACF;QACA,IAAIU,YAAY;YACdmE,iBAAiB7E;YACjB;QACF;QACA4E,YAAY5E;QACZ,IAAIwB,eAAe;YACjB0E;QACF;IACF,GACA;QAACxF;QAAYkE;QAAapD;QAAeqD;QAAkBqB;KAAqB;IAGlF,MAAMS,oBAAoB5I,MAAMmH,WAAW,CAAC;QAC1C,IAAI,CAAClF,OAAO;YACV;QACF;QACA,MAAMC,WAAW2E,YAAY5E;QAC7B+D,oBAAAA,8BAAAA,QAAU9D;QACViG;IACF,GAAG;QAACnC;QAASmC;QAAsBtB;QAAa5E;KAAM;IAEtD,MAAM4G,cAAc7I,MAAM2H,OAAO,CAC/B,IAAM,CAACG,SAAQ7B,8BAAAA,wCAAAA,kBAAoBhE,SAAS6G,aAC5C;QAAChB;QAAM7B;QAAmBhE;KAAM;IAGlC,4DAA4D;IAC5D,mEAAmE;IACnE,4EAA4E;IAC5E,2BAA2B;IAC3B,MAAM,CAAC8G,mBAAmBC,qBAAqB,GAC7ChJ,MAAMiJ,QAAQ,CAAoB7F;IAEpC,MAAM,EAAE8F,MAAM,EAAE,GAAGpI;IACnB,MAAMqI,mBAAmBlH,QACrB,IAAImH,KAAKC,cAAc,CAACH,QAAQ;QAC9BI,SAAS;QACTC,MAAM;QACNC,OAAO;QACPC,KAAK;IACP,GAAGhJ,MAAM,CAACwB,SACV;IACJ,MAAMyH,qBAAqB1J,MAAM2J,KAAK;IACtC,MAAMC,cAAc5J,MAAM2J,KAAK;IAE/B,MAAME,+BAA+B7J,MAAMmH,WAAW,CAAC;QACrDc;QACA,IAAIhE,YAAY;YACdqE;QACF;IACF,GAAG;QAACL;QAAkBK;QAAcrE;KAAW;IAE/C,qBACE,MAACjD;QACCqC,OAAOA;QACPC,WAAWnD,WAAWqI,UAAU,aAAahH,eAAe,CAACgH,MAAM,EAAElF;QACrEK,YAAY8E;QACZqB,MAAK;QACLC,mBAAiB,GAAGH,YAAY,CAAC,EAAEF,oBAAoB;QACvDM,qBACE,MAAChK,MAAMiK,QAAQ;;gBACZ,CAAC7E,mBAAoBnB,CAAAA,cAAe,CAACA,cAAc,CAAChC,KAAK,kBACxD,KAAChB;oBACCiJ,WAAU;oBACVC,OAAOxF;oBACPZ,SAASsE;oBACT+B,eAAavE;8BAEb,cAAA,KAAC3F;qBAED;gBACH+B,sBACC,KAAChB;oBACCiJ,WAAU;oBACVC,OAAOzF;oBACPX,SAASmE;oBACTkC,eAAatE;8BAEb,cAAA,KAAC7F;qBAED;;;QAGR6D,UAAUA;QACVC,SAASA;OACLuC;;0BAEJ,MAAC+D;gBAAI/G,SAAS;;oBACX+C,2BAAa,KAAC/E;wBAAeyE,IAAI6D;kCAAcvD;;oBAC/C8C,kCACC,KAAC7H;wBAAeyE,IAAI2D;kCAAqBP;;kCAE3C,KAAC7H;wBACCyE,IAAIA;wBACJuE,WAAU;wBACVC,QAAQ;wBACRC,aAAW;wBACXC,UAAU,CAAC;wBACX7G,MAAMA;wBACN3B,OAAOA,QAAQxB,OAAOwB,OAAOU,aAAa,uBAAuB,gBAAgB;wBACjFqB,SAASiE;;kCAEX,MAAC5G;wBACCiC,WAAWnD,mCAAyB0I;wBACpC,2FAA2F;wBAC3F,wDAAwD;wBACxD6B,WAAW;wBACXJ,WAAU,OAAO,mCAAmC;;wBACpDvG,SAAS8F;;0CAET,KAAC3I;gCACCW,QAAQ;gCACR8B,YAAY4C;gCACZ3E,OAAO;gCACP+I,WAAW5C;gCACX6C,iBAAiB5C;gCACjB/F,OAAOmF,aAAa,CAAC,EAAE;gCACvB+C,OAAO9F;gCACP+F,eAAa5E;gCACbsE,MAAK;gCACLe,iBAAe;gCACfC,iBAAe;gCACfC,kBAAgB3D,aAAa,CAAC,EAAE;gCAChC4D,cAAY3G;;0CAEd,KAAClD;0CAAiB;;0CAClB,KAACD;gCACCW,QAAQ;gCACR8B,YAAY8C;gCACZ7E,OAAO;gCACPgJ,iBAAiB5C;gCACjB2C,WAAW5C;gCACX9F,OAAOmF,aAAa,CAAC,EAAE;gCACvB+C,OAAO7F;gCACP8F,eAAa3E;gCACbqE,MAAK;gCACLe,iBAAe;gCACfC,iBAAe;gCACfC,kBAAgB3D,aAAa,CAAC,EAAE;gCAChC4D,cAAY1G;;0CAEd,KAACnD;0CAAiB;;0CAClB,KAACD;gCACCW,QAAQ;gCACR8B,YAAY+C;gCACZ9E,OAAO;gCACPgJ,iBAAiB5C;gCACjB/F,OAAOmF,aAAa,CAAC,EAAE;gCACvB+C,OAAO5F;gCACPoG,WAAW5C;gCACXqC,eAAa1E;gCACboE,MAAK;gCACLe,iBAAe;gCACfC,iBAAe;gCACfC,kBAAgB3D,aAAa,CAAC,EAAE;gCAChC4D,cAAYzG;;4BAEb5B,4BACC,MAAC3C,MAAMiK,QAAQ;;kDACb,KAAC9I;wCAAiBmC,SAAS;kDAA2B;;kDACtD,KAACpC;wCACCW,QAAQ;wCACR8B,YAAYgD;wCACZ/E,OAAO;wCACPgJ,iBAAiB5C;wCACjB/F,OAAOmF,aAAa,CAAC,EAAE;wCACvB+C,OAAO3F;wCACPmG,WAAW5C;wCACXqC,eAAazE;wCACbmE,MAAK;wCACLe,iBAAe;wCACfC,iBAAe;wCACfC,kBAAgB3D,aAAa,CAAC,EAAE;wCAChC4D,cAAYxG;;kDAEd,KAACrD;kDAAiB;;kDAClB,KAACD;wCACCW,QAAQ;wCACR8B,YAAYiD;wCACZhF,OAAO;wCACPgJ,iBAAiB5C;wCACjB/F,OAAOmF,aAAa,CAAC,EAAE;wCACvB+C,OAAO1F;wCACPkG,WAAW5C;wCACXqC,eAAaxE;wCACbkE,MAAK;wCACLe,iBAAe;wCACfC,iBAAe;wCACfC,kBAAgB3D,aAAa,CAAC,EAAE;wCAChC4D,cAAYvG;;;;;;oBAKnBoE,6BACC,KAACxH;wBAAKiC,SAAS;wBAAsBkH,aAAW;kCAC7C3B;;;;YAINf,QAAQ,CAAC1C,iCACR,KAAChE;gBACC6J,WAAWrD;gBACXsD,kBAAkB;gBAClBC,WAAWpC;gBACXqC,mBAAmBpC;gBACnBqC,wBAAwB;0BAExB,cAAA,KAACtK;oBACCuK,SAASlD;oBACTtE,UAAUsC,6BAAAA,8BAAAA,mBAAoB,CAACnC;oBAC/BkC,cAAcA,yBAAAA,0BAAAA,eAAgBoF,QAAQtH;oBACtCuH,4BAA4B;8BAE5B,cAAA,KAAC3K;wBACCmK,cAAY9G;wBACZ4F,MAAK;wBACL7H,OAAOA;wBACPkB,UAAUwF;wBACVhG,YAAYA;wBACZG,aAAaA;wBACbD,eAAeA;wBACfD,mBAAmBA;wBACnBgG,mBAAmBA;wBACnBjF,YAAYkE;wBACZtE,gBAAgBA;wBAChBC,YAAYA;wBACZE,gBAAgBA;wBAChBc,kBAAkBA;wBAClBC,oBAAoBA;wBACpBN,gBAAgBA;wBAChBC,gBAAgBA;wBAChBE,kBAAkBA;wBAClBC,iBAAiBA;wBACjBK,sBAAsBA;wBACtBS,kBAAkBA;wBAClBR,MAAMA;wBACNC,UAAUA;wBACVC,gBAAgBA;wBAChBC,aAAaA;wBACbC,aAAaA;wBACbC,eAAeA;wBACfC,eAAeA;wBACfpC,aAAaA;wBACbC,aAAaA;uBACTuC;;;;;AAOlB,EAAE"}

package/dist/components/DateInput/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/hooks.ts"],"names":[],"mappings":"AAGA,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAyBD,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,KAAG,uBA8C7B,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/hooks.ts"],"names":[],"mappings":"AAKA,UAAU,wBAAwB;IAChC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAC/B,gBAAgB,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,mBAAmB,EAAE,MAAM,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;IACnD,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAyBD,eAAO,MAAM,iBAAiB,GAAI,8CAK/B,wBAAwB,KAAG,uBA8C7B,CAAC"}

package/dist/components/DateInput/hooks.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+/* eslint-disable jsdoc/require-jsdoc */ import * as React from "react";
 import { convertDateFromTimeZone, convertDateToTimeZone } from "../../lib/date.js";
 const _convertDateToTimeZone = (date, timezone)=>{
     return convertDateToTimeZone(date, timezone) || null;

package/dist/components/DateInput/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DateInput/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\n\ninterface UseDateInputValueOptions {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  onChange?: (value?: Date) => void;\n  timezone?: string;\n}\n\nexport interface UseDateInputValueReturn {\n  value?: Date | null;\n  updateValue: (v: Date) => Date;\n  setInternalValue: (v?: Date | null) => void;\n  getLastUpdatedValue: () => Date | null | undefined;\n  clearValue: () => void;\n}\n\nconst _convertDateToTimeZone = (date: Date | null, timezone?: string): Date | null => {\n  return convertDateToTimeZone(date, timezone) || null;\n};\n\nconst _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {\n  return convertDateFromTimeZone(date, timezone) as Date;\n};\n\nconst getStateValue = (\n  defaultStateValue: Date | null,\n  value?: Date | null,\n  defaultValue?: Date | null,\n  timezone?: string,\n): Date | null => {\n  if (value !== undefined) {\n    return _convertDateToTimeZone(value, timezone);\n  }\n  if (defaultValue !== undefined) {\n    return _convertDateToTimeZone(defaultValue, timezone);\n  }\n  return _convertDateToTimeZone(defaultStateValue, timezone);\n};\n\nexport const useDateInputValue = ({\n  value,\n  defaultValue,\n  onChange,\n  timezone,\n}: UseDateInputValueOptions): UseDateInputValueReturn => {\n  const [internalValue, setInternalValue] = React.useState<Date | null | undefined>(\n    getStateValue(null, value, defaultValue, timezone),\n  );\n  const lastUpdatedValueRef = React.useRef<Date | null | undefined>(\n    getStateValue(null, value, defaultValue, timezone),\n  );\n\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (isControlled) {\n      const newInternalValue = _convertDateToTimeZone(value, timezone);\n      setInternalValue(newInternalValue);\n      lastUpdatedValueRef.current = newInternalValue;\n    }\n  }, [isControlled, timezone, value]);\n\n  const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);\n\n  const updateValue = React.useCallback(\n    (newValue: Date) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n        lastUpdatedValueRef.current = newValue;\n      }\n      const originalTimezoneValue = _convertDateFromTimeZone(newValue, timezone);\n      onChange?.(originalTimezoneValue);\n      return originalTimezoneValue;\n    },\n    [isControlled, onChange, timezone],\n  );\n\n  const clearValue = () => {\n    setInternalValue(null);\n    lastUpdatedValueRef.current = null;\n    onChange?.(undefined);\n  };\n\n  return {\n    value: internalValue,\n    updateValue,\n    setInternalValue,\n    getLastUpdatedValue,\n    clearValue,\n  };\n};\n"],"names":["React","convertDateFromTimeZone","convertDateToTimeZone","_convertDateToTimeZone","date","timezone","_convertDateFromTimeZone","getStateValue","defaultStateValue","value","defaultValue","undefined","useDateInputValue","onChange","internalValue","setInternalValue","useState","lastUpdatedValueRef","useRef","isControlled","useEffect","newInternalValue","current","getLastUpdatedValue","useCallback","updateValue","newValue","originalTimezoneValue","clearValue"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAiBhF,MAAMC,yBAAyB,CAACC,MAAmBC;IACjD,OAAOH,sBAAsBE,MAAMC,aAAa;AAClD;AAEA,MAAMC,2BAA2B,CAACF,MAAYC;IAC5C,OAAOJ,wBAAwBG,MAAMC;AACvC;AAEA,MAAME,gBAAgB,CACpBC,mBACAC,OACAC,cACAL;IAEA,IAAII,UAAUE,WAAW;QACvB,OAAOR,uBAAuBM,OAAOJ;IACvC;IACA,IAAIK,iBAAiBC,WAAW;QAC9B,OAAOR,uBAAuBO,cAAcL;IAC9C;IACA,OAAOF,uBAAuBK,mBAAmBH;AACnD;AAEA,OAAO,MAAMO,oBAAoB,CAAC,EAChCH,KAAK,EACLC,YAAY,EACZG,QAAQ,EACRR,QAAQ,EACiB;IACzB,MAAM,CAACS,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtDT,cAAc,MAAME,OAAOC,cAAcL;IAE3C,MAAMY,sBAAsBjB,MAAMkB,MAAM,CACtCX,cAAc,MAAME,OAAOC,cAAcL;IAG3C,MAAMc,eAAeV,UAAUE;IAE/BX,MAAMoB,SAAS,CAAC;QACd,IAAID,cAAc;YAChB,MAAME,mBAAmBlB,uBAAuBM,OAAOJ;YACvDU,iBAAiBM;YACjBJ,oBAAoBK,OAAO,GAAGD;QAChC;IACF,GAAG;QAACF;QAAcd;QAAUI;KAAM;IAElC,MAAMc,sBAAsBvB,MAAMwB,WAAW,CAAC,IAAMP,oBAAoBK,OAAO,EAAE,EAAE;IAEnF,MAAMG,cAAczB,MAAMwB,WAAW,CACnC,CAACE;QACC,IAAI,CAACP,cAAc;YACjBJ,iBAAiBW;YACjBT,oBAAoBK,OAAO,GAAGI;QAChC;QACA,MAAMC,wBAAwBrB,yBAAyBoB,UAAUrB;QACjEQ,qBAAAA,+BAAAA,SAAWc;QACX,OAAOA;IACT,GACA;QAACR;QAAcN;QAAUR;KAAS;IAGpC,MAAMuB,aAAa;QACjBb,iBAAiB;QACjBE,oBAAoBK,OAAO,GAAG;QAC9BT,qBAAAA,+BAAAA,SAAWF;IACb;IAEA,OAAO;QACLF,OAAOK;QACPW;QACAV;QACAQ;QACAK;IACF;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/DateInput/hooks.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\n\nimport * as React from 'react';\nimport { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';\n\ninterface UseDateInputValueOptions {\n  value?: Date | null;\n  defaultValue?: Date | null;\n  onChange?: (value?: Date) => void;\n  timezone?: string;\n}\n\nexport interface UseDateInputValueReturn {\n  value?: Date | null;\n  updateValue: (v: Date) => Date;\n  setInternalValue: (v?: Date | null) => void;\n  getLastUpdatedValue: () => Date | null | undefined;\n  clearValue: () => void;\n}\n\nconst _convertDateToTimeZone = (date: Date | null, timezone?: string): Date | null => {\n  return convertDateToTimeZone(date, timezone) || null;\n};\n\nconst _convertDateFromTimeZone = (date: Date, timezone?: string): Date => {\n  return convertDateFromTimeZone(date, timezone) as Date;\n};\n\nconst getStateValue = (\n  defaultStateValue: Date | null,\n  value?: Date | null,\n  defaultValue?: Date | null,\n  timezone?: string,\n): Date | null => {\n  if (value !== undefined) {\n    return _convertDateToTimeZone(value, timezone);\n  }\n  if (defaultValue !== undefined) {\n    return _convertDateToTimeZone(defaultValue, timezone);\n  }\n  return _convertDateToTimeZone(defaultStateValue, timezone);\n};\n\nexport const useDateInputValue = ({\n  value,\n  defaultValue,\n  onChange,\n  timezone,\n}: UseDateInputValueOptions): UseDateInputValueReturn => {\n  const [internalValue, setInternalValue] = React.useState<Date | null | undefined>(\n    getStateValue(null, value, defaultValue, timezone),\n  );\n  const lastUpdatedValueRef = React.useRef<Date | null | undefined>(\n    getStateValue(null, value, defaultValue, timezone),\n  );\n\n  const isControlled = value !== undefined;\n\n  React.useEffect(() => {\n    if (isControlled) {\n      const newInternalValue = _convertDateToTimeZone(value, timezone);\n      setInternalValue(newInternalValue);\n      lastUpdatedValueRef.current = newInternalValue;\n    }\n  }, [isControlled, timezone, value]);\n\n  const getLastUpdatedValue = React.useCallback(() => lastUpdatedValueRef.current, []);\n\n  const updateValue = React.useCallback(\n    (newValue: Date) => {\n      if (!isControlled) {\n        setInternalValue(newValue);\n        lastUpdatedValueRef.current = newValue;\n      }\n      const originalTimezoneValue = _convertDateFromTimeZone(newValue, timezone);\n      onChange?.(originalTimezoneValue);\n      return originalTimezoneValue;\n    },\n    [isControlled, onChange, timezone],\n  );\n\n  const clearValue = () => {\n    setInternalValue(null);\n    lastUpdatedValueRef.current = null;\n    onChange?.(undefined);\n  };\n\n  return {\n    value: internalValue,\n    updateValue,\n    setInternalValue,\n    getLastUpdatedValue,\n    clearValue,\n  };\n};\n"],"names":["React","convertDateFromTimeZone","convertDateToTimeZone","_convertDateToTimeZone","date","timezone","_convertDateFromTimeZone","getStateValue","defaultStateValue","value","defaultValue","undefined","useDateInputValue","onChange","internalValue","setInternalValue","useState","lastUpdatedValueRef","useRef","isControlled","useEffect","newInternalValue","current","getLastUpdatedValue","useCallback","updateValue","newValue","originalTimezoneValue","clearValue"],"mappings":"AAAA,sCAAsC,GAEtC,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,EAAEC,qBAAqB,QAAQ,oBAAiB;AAiBhF,MAAMC,yBAAyB,CAACC,MAAmBC;IACjD,OAAOH,sBAAsBE,MAAMC,aAAa;AAClD;AAEA,MAAMC,2BAA2B,CAACF,MAAYC;IAC5C,OAAOJ,wBAAwBG,MAAMC;AACvC;AAEA,MAAME,gBAAgB,CACpBC,mBACAC,OACAC,cACAL;IAEA,IAAII,UAAUE,WAAW;QACvB,OAAOR,uBAAuBM,OAAOJ;IACvC;IACA,IAAIK,iBAAiBC,WAAW;QAC9B,OAAOR,uBAAuBO,cAAcL;IAC9C;IACA,OAAOF,uBAAuBK,mBAAmBH;AACnD;AAEA,OAAO,MAAMO,oBAAoB,CAAC,EAChCH,KAAK,EACLC,YAAY,EACZG,QAAQ,EACRR,QAAQ,EACiB;IACzB,MAAM,CAACS,eAAeC,iBAAiB,GAAGf,MAAMgB,QAAQ,CACtDT,cAAc,MAAME,OAAOC,cAAcL;IAE3C,MAAMY,sBAAsBjB,MAAMkB,MAAM,CACtCX,cAAc,MAAME,OAAOC,cAAcL;IAG3C,MAAMc,eAAeV,UAAUE;IAE/BX,MAAMoB,SAAS,CAAC;QACd,IAAID,cAAc;YAChB,MAAME,mBAAmBlB,uBAAuBM,OAAOJ;YACvDU,iBAAiBM;YACjBJ,oBAAoBK,OAAO,GAAGD;QAChC;IACF,GAAG;QAACF;QAAcd;QAAUI;KAAM;IAElC,MAAMc,sBAAsBvB,MAAMwB,WAAW,CAAC,IAAMP,oBAAoBK,OAAO,EAAE,EAAE;IAEnF,MAAMG,cAAczB,MAAMwB,WAAW,CACnC,CAACE;QACC,IAAI,CAACP,cAAc;YACjBJ,iBAAiBW;YACjBT,oBAAoBK,OAAO,GAAGI;QAChC;QACA,MAAMC,wBAAwBrB,yBAAyBoB,UAAUrB;QACjEQ,qBAAAA,+BAAAA,SAAWc;QACX,OAAOA;IACT,GACA;QAACR;QAAcN;QAAUR;KAAS;IAGpC,MAAMuB,aAAa;QACjBb,iBAAiB;QACjBE,oBAAoBK,OAAO,GAAG;QAC9BT,qBAAAA,+BAAAA,SAAWF;IACb;IAEA,OAAO;QACLF,OAAOK;QACPW;QACAV;QACAQ;QACAK;IACF;AACF,EAAE"}