@vkontakte/vkui 7.0.1 → 7.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAAG;IAC7D,uBAAuB,CAAC,EAAE,wBAAwB,CAAC;IACnD,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,GAAG,kBAAkB,CAAC,EACzE,uBAAuB;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,oVAsBvB,kBAAkB,KAAG,KAAK,CAAC,SAyM7B,CAAC"}
+{"version":3,"file":"CalendarRange.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAI1C,MAAM,MAAM,aAAa,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;AAEvD,MAAM,MAAM,uBAAuB,GAAG,sBAAsB,GAAG;IAC7D;;OAEG;IACH,uBAAuB,CAAC,EAAE,wBAAwB,CAAC;IACnD;;OAEG;IACH,wBAAwB,CAAC,EAAE,wBAAwB,CAAC;CACrD,CAAC;AAEF,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,eAAe,GACf,eAAe,CAClB,EACD,IAAI,CAAC,iBAAiB,EAAE,2BAA2B,GAAG,kBAAkB,CAAC,EACzE,uBAAuB;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACtD,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD;;GAEG;AACH,eAAO,MAAM,aAAa,gWAuBvB,kBAAkB,KAAG,KAAK,CAAC,SAsN7B,CAAC"}

package/dist/components/CalendarRange/CalendarRange.js

@@ -5,7 +5,10 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval, startOfDay, subMonths } from "date-fns";
+import { CalendarDirectionContext } from "../../context/CalendarDirectionContext.js";
 import { useCalendar } from "../../hooks/useCalendar.js";
+import { useDirection } from "../../hooks/useDirection.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
 import { isFirstDay, isLastDay, navigateDate } from "../../lib/calendar.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
@@ -22,7 +25,7 @@ const getIsDaySelected = (day, value)=>{
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
  */ export const CalendarRange = (_param)=>{
-    var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData } = _param, props = _object_without_properties(_param, [
+    var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef } = _param, props = _object_without_properties(_param, [
         "value",
         "onChange",
         "disablePast",
@@ -42,7 +45,8 @@ const getIsDaySelected = (day, value)=>{
         "renderDayContent",
         "dayTestId",
         "leftPartHeaderTestsData",
-        "rightPartHeaderTestsData"
+        "rightPartHeaderTestsData",
+        "getRootRef"
     ]);
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
         value,
@@ -50,6 +54,8 @@ const getIsDaySelected = (day, value)=>{
         disablePast,
         shouldDisableDate
     });
+    const [directionRef, textDirection = 'ltr'] = useDirection();
+    const rootRef = useExternRef(directionRef, getRootRef);
     const [hintedDate, setHintedDate] = React.useState();
     const secondViewDate = addMonths(viewDate, 1);
     const handleKeyDown = React.useCallback((event)=>{
@@ -141,97 +147,106 @@ const getIsDaySelected = (day, value)=>{
     const onRightPartViewDateChange = React.useCallback((newDate)=>setViewDate(subMonths(newDate, 1)), [
         setViewDate
     ]);
-    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, props), {
-        baseClassName: "vkuiCalendarRange__host",
-        children: [
-            /*#__PURE__*/ _jsxs("div", {
-                className: "vkuiCalendarRange__inner",
-                children: [
-                    /*#__PURE__*/ _jsx(CalendarHeader, _object_spread({
-                        viewDate: viewDate,
-                        onChange: setViewDate,
-                        nextMonthHidden: true,
-                        onPrevMonth: setPrevMonth,
-                        disablePickers: disablePickers,
-                        className: "vkuiCalendarRange__header",
-                        prevMonthLabel: prevMonthLabel,
-                        nextMonthLabel: nextMonthLabel,
-                        changeMonthLabel: changeMonthLabel,
-                        changeYearLabel: changeYearLabel,
-                        prevMonthIcon: prevMonthIcon,
-                        isMonthDisabled: isMonthDisabled,
-                        isYearDisabled: isYearDisabled
-                    }, leftPartHeaderTestsData)),
-                    /*#__PURE__*/ _jsx(CalendarDays, {
-                        viewDate: viewDate,
-                        value: value,
-                        weekStartsOn: weekStartsOn,
-                        onKeyDown: handleKeyDown,
-                        isDayFocused: isDayFocused,
-                        onDayChange: onDayChange,
-                        isDaySelected: isDaySelected,
-                        isDayActive: isDayActive,
-                        isDaySelectionEnd: isDaySelectionEnd,
-                        isDaySelectionStart: isDaySelectionStart,
-                        isDayHinted: isDayHinted,
-                        onDayEnter: onDayEnter,
-                        onDayLeave: onDayLeave,
-                        isHintedDaySelectionEnd: isHintedDaySelectionEnd,
-                        isHintedDaySelectionStart: isHintedDaySelectionStart,
-                        isDayDisabled: isDayDisabled,
-                        listenDayChangesForUpdate: listenDayChangesForUpdate,
-                        renderDayContent: renderDayContent,
-                        "aria-label": changeDayLabel,
-                        dayTestId: dayTestId
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "vkuiCalendarRange__inner",
-                children: [
-                    /*#__PURE__*/ _jsx(CalendarHeader, _object_spread({
-                        viewDate: secondViewDate,
-                        onChange: onRightPartViewDateChange,
-                        prevMonthHidden: true,
-                        onNextMonth: setNextMonth,
-                        disablePickers: disablePickers,
-                        className: "vkuiCalendarRange__header",
-                        prevMonthLabel: prevMonthLabel,
-                        nextMonthLabel: nextMonthLabel,
-                        changeMonthLabel: changeMonthLabel,
-                        changeYearLabel: changeYearLabel,
-                        nextMonthIcon: nextMonthIcon,
-                        isMonthDisabled: isMonthDisabled,
-                        isYearDisabled: isYearDisabled
-                    }, rightPartHeaderTestsData)),
-                    /*#__PURE__*/ _jsx(CalendarDays, {
-                        viewDate: secondViewDate,
-                        value: value,
-                        weekStartsOn: weekStartsOn,
-                        "aria-label": changeDayLabel,
-                        onKeyDown: handleKeyDown,
-                        isDayFocused: isDayFocused,
-                        onDayChange: onDayChange,
-                        isDaySelected: isDaySelected,
-                        isDayActive: isDayActive,
-                        isDaySelectionEnd: isDaySelectionEnd,
-                        isDaySelectionStart: isDaySelectionStart,
-                        isDayHinted: isDayHinted,
-                        onDayEnter: onDayEnter,
-                        onDayLeave: onDayLeave,
-                        isHintedDaySelectionEnd: isHintedDaySelectionEnd,
-                        isHintedDaySelectionStart: isHintedDaySelectionStart,
-                        isDayDisabled: isDayDisabled,
-                        listenDayChangesForUpdate: listenDayChangesForUpdate,
-                        renderDayContent: renderDayContent,
-                        tabIndex: 0,
-                        onBlur: resetSelectedDay,
-                        dayTestId: dayTestId
-                    })
-                ]
-            })
-        ]
-    }));
+    const directionContextValue = React.useMemo(()=>({
+            direction: textDirection
+        }), [
+        textDirection
+    ]);
+    return /*#__PURE__*/ _jsx(CalendarDirectionContext.Provider, {
+        value: directionContextValue,
+        children: /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, props), {
+            baseClassName: "vkuiCalendarRange__host",
+            getRootRef: rootRef,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "vkuiCalendarRange__inner",
+                    children: [
+                        /*#__PURE__*/ _jsx(CalendarHeader, _object_spread({
+                            viewDate: viewDate,
+                            onChange: setViewDate,
+                            nextMonthHidden: true,
+                            onPrevMonth: setPrevMonth,
+                            disablePickers: disablePickers,
+                            className: "vkuiCalendarRange__header",
+                            prevMonthLabel: prevMonthLabel,
+                            nextMonthLabel: nextMonthLabel,
+                            changeMonthLabel: changeMonthLabel,
+                            changeYearLabel: changeYearLabel,
+                            prevMonthIcon: prevMonthIcon,
+                            isMonthDisabled: isMonthDisabled,
+                            isYearDisabled: isYearDisabled
+                        }, leftPartHeaderTestsData)),
+                        /*#__PURE__*/ _jsx(CalendarDays, {
+                            viewDate: viewDate,
+                            value: value,
+                            weekStartsOn: weekStartsOn,
+                            onKeyDown: handleKeyDown,
+                            isDayFocused: isDayFocused,
+                            onDayChange: onDayChange,
+                            isDaySelected: isDaySelected,
+                            isDayActive: isDayActive,
+                            isDaySelectionEnd: isDaySelectionEnd,
+                            isDaySelectionStart: isDaySelectionStart,
+                            isDayHinted: isDayHinted,
+                            onDayEnter: onDayEnter,
+                            onDayLeave: onDayLeave,
+                            isHintedDaySelectionEnd: isHintedDaySelectionEnd,
+                            isHintedDaySelectionStart: isHintedDaySelectionStart,
+                            isDayDisabled: isDayDisabled,
+                            listenDayChangesForUpdate: listenDayChangesForUpdate,
+                            renderDayContent: renderDayContent,
+                            "aria-label": changeDayLabel,
+                            dayTestId: dayTestId
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "vkuiCalendarRange__inner",
+                    children: [
+                        /*#__PURE__*/ _jsx(CalendarHeader, _object_spread({
+                            viewDate: secondViewDate,
+                            onChange: onRightPartViewDateChange,
+                            prevMonthHidden: true,
+                            onNextMonth: setNextMonth,
+                            disablePickers: disablePickers,
+                            className: "vkuiCalendarRange__header",
+                            prevMonthLabel: prevMonthLabel,
+                            nextMonthLabel: nextMonthLabel,
+                            changeMonthLabel: changeMonthLabel,
+                            changeYearLabel: changeYearLabel,
+                            nextMonthIcon: nextMonthIcon,
+                            isMonthDisabled: isMonthDisabled,
+                            isYearDisabled: isYearDisabled
+                        }, rightPartHeaderTestsData)),
+                        /*#__PURE__*/ _jsx(CalendarDays, {
+                            viewDate: secondViewDate,
+                            value: value,
+                            weekStartsOn: weekStartsOn,
+                            "aria-label": changeDayLabel,
+                            onKeyDown: handleKeyDown,
+                            isDayFocused: isDayFocused,
+                            onDayChange: onDayChange,
+                            isDaySelected: isDaySelected,
+                            isDayActive: isDayActive,
+                            isDaySelectionEnd: isDaySelectionEnd,
+                            isDaySelectionStart: isDaySelectionStart,
+                            isDayHinted: isDayHinted,
+                            onDayEnter: onDayEnter,
+                            onDayLeave: onDayLeave,
+                            isHintedDaySelectionEnd: isHintedDaySelectionEnd,
+                            isHintedDaySelectionStart: isHintedDaySelectionStart,
+                            isDayDisabled: isDayDisabled,
+                            listenDayChangesForUpdate: listenDayChangesForUpdate,
+                            renderDayContent: renderDayContent,
+                            tabIndex: 0,
+                            onBlur: resetSelectedDay,
+                            dayTestId: dayTestId
+                        })
+                    ]
+                })
+            ]
+        }))
+    });
 };
 
 //# sourceMappingURL=CalendarRange.js.map

package/dist/components/CalendarRange/CalendarRange.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n  subMonths,\n} from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void;\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDay(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && isBefore(date, start)) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && isAfter(date, start)) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  return (\n    <RootComponent {...props} baseClassName={styles.host}>\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={viewDate}\n          onChange={setViewDate}\n          nextMonthHidden\n          onPrevMonth={setPrevMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          prevMonthIcon={prevMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...leftPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={viewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          aria-label={changeDayLabel}\n          dayTestId={dayTestId}\n        />\n      </div>\n      <div className={styles.inner}>\n        <CalendarHeader\n          viewDate={secondViewDate}\n          onChange={onRightPartViewDateChange}\n          prevMonthHidden\n          onNextMonth={setNextMonth}\n          disablePickers={disablePickers}\n          className={styles.header}\n          prevMonthLabel={prevMonthLabel}\n          nextMonthLabel={nextMonthLabel}\n          changeMonthLabel={changeMonthLabel}\n          changeYearLabel={changeYearLabel}\n          nextMonthIcon={nextMonthIcon}\n          isMonthDisabled={isMonthDisabled}\n          isYearDisabled={isYearDisabled}\n          {...rightPartHeaderTestsData}\n        />\n        <CalendarDays\n          viewDate={secondViewDate}\n          value={value}\n          weekStartsOn={weekStartsOn}\n          aria-label={changeDayLabel}\n          onKeyDown={handleKeyDown}\n          isDayFocused={isDayFocused}\n          onDayChange={onDayChange}\n          isDaySelected={isDaySelected}\n          isDayActive={isDayActive}\n          isDaySelectionEnd={isDaySelectionEnd}\n          isDaySelectionStart={isDaySelectionStart}\n          isDayHinted={isDayHinted}\n          onDayEnter={onDayEnter}\n          onDayLeave={onDayLeave}\n          isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n          isHintedDaySelectionStart={isHintedDaySelectionStart}\n          isDayDisabled={isDayDisabled}\n          listenDayChangesForUpdate={listenDayChangesForUpdate}\n          renderDayContent={renderDayContent}\n          tabIndex={0}\n          onBlur={resetSelectedDay}\n          dayTestId={dayTestId}\n        />\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","subMonths","useCalendar","isFirstDay","isLastDay","navigateDate","CalendarDays","CalendarHeader","RootComponent","getIsDaySelected","day","value","start","end","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","undefined","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","baseClassName","div","className","nextMonthHidden","onPrevMonth","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/CalendarRange/CalendarRange.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  addMonths,\n  endOfDay,\n  isAfter,\n  isBefore,\n  isSameDay,\n  isSameMonth,\n  isWithinInterval,\n  startOfDay,\n  subMonths,\n} from 'date-fns';\nimport {\n  CalendarDirectionContext,\n  type CalendarDirectionContextProps,\n} from '../../context/CalendarDirectionContext';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n  CalendarDays,\n  type CalendarDaysProps,\n  type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n  CalendarHeader,\n  type CalendarHeaderProps,\n  type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CalendarRange.module.css';\n\nexport type DateRangeType = [Date | null, Date | null];\n\nexport type CalendarRangeTestsProps = CalendarDaysTestsProps & {\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части\n   */\n  leftPartHeaderTestsData?: CalendarHeaderTestsProps;\n  /**\n   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части\n   */\n  rightPartHeaderTestsData?: CalendarHeaderTestsProps;\n};\n\nexport interface CalendarRangeProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n    Pick<\n      CalendarHeaderProps,\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    Pick<CalendarDaysProps, 'listenDayChangesForUpdate' | 'renderDayContent'>,\n    CalendarRangeTestsProps {\n  value?: DateRangeType;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  disablePickers?: boolean;\n  changeDayLabel?: string;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  onChange?: (value: DateRangeType | undefined) => void;\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType) => {\n  if (!value?.[0] || !value[1]) {\n    return false;\n  }\n\n  return isWithinInterval(day, { start: startOfDay(value[0]), end: endOfDay(value[1]) });\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CalendarRange\n */\nexport const CalendarRange = ({\n  value,\n  onChange,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onClose,\n  weekStartsOn = 1,\n  disablePickers,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  prevMonthIcon,\n  nextMonthIcon,\n  listenDayChangesForUpdate,\n  renderDayContent,\n  dayTestId,\n  leftPartHeaderTestsData,\n  rightPartHeaderTestsData,\n  getRootRef,\n  ...props\n}: CalendarRangeProps): React.ReactNode => {\n  const {\n    viewDate,\n    setViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });\n\n  const [directionRef, textDirection = 'ltr'] = useDirection();\n  const rootRef = useExternRef(directionRef, getRootRef);\n\n  const [hintedDate, setHintedDate] = React.useState<DateRangeType>();\n  const secondViewDate = addMonths(viewDate, 1);\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n        event.preventDefault();\n      }\n\n      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);\n\n      if (\n        newFocusedDay &&\n        !isSameMonth(newFocusedDay, viewDate) &&\n        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))\n      ) {\n        setViewDate(newFocusedDay);\n      }\n      setFocusedDay(newFocusedDay);\n    },\n    [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n  );\n\n  const getNewValue = React.useCallback(\n    (date: Date): DateRangeType => {\n      const isValueEmpty = !value || (value[0] === null && value[1] === null);\n      const isRangeSelected = value && !!value[0] && !!value[1];\n      if (isValueEmpty || isRangeSelected) {\n        return [date, null];\n      }\n\n      const [start] = value;\n      if (start && isSameDay(date, start)) {\n        return [startOfDay(start), endOfDay(start)];\n      } else if (start && isBefore(date, start)) {\n        return [startOfDay(date), endOfDay(start)];\n      } else if (start && isAfter(date, start)) {\n        return [start, endOfDay(date)];\n      }\n      return value;\n    },\n    [value],\n  );\n\n  const onDayChange = React.useCallback(\n    (date: Date) => {\n      onChange?.(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [onChange, getNewValue],\n  );\n\n  const isDaySelected = React.useCallback((day: Date) => getIsDaySelected(day, value), [value]);\n\n  const isDayActive = React.useCallback(\n    (day: Date) =>\n      Boolean((value?.[0] && isSameDay(day, value[0])) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))),\n    [value],\n  );\n\n  const isHintedDaySelectionEnd = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isLastDay(day, dayOfWeek) || (hintedDate?.[1] && isSameDay(day, hintedDate[1]))),\n    [hintedDate],\n  );\n\n  const isDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))),\n    [value],\n  );\n\n  const isHintedDaySelectionStart = React.useCallback(\n    (day: Date, dayOfWeek: number) =>\n      Boolean(isFirstDay(day, dayOfWeek) || (hintedDate?.[0] && isSameDay(day, hintedDate[0]))),\n    [hintedDate],\n  );\n\n  const onDayEnter = React.useCallback(\n    (date: Date) => setHintedDate(getNewValue(date)),\n    [setHintedDate, getNewValue],\n  );\n\n  const onDayLeave = React.useCallback(() => setHintedDate(undefined), [setHintedDate]);\n\n  const isDayHinted = React.useCallback(\n    (day: Date) => getIsDaySelected(day, hintedDate),\n    [hintedDate],\n  );\n\n  const onRightPartViewDateChange = React.useCallback(\n    (newDate: Date) => setViewDate(subMonths(newDate, 1)),\n    [setViewDate],\n  );\n\n  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(\n    () => ({\n      direction: textDirection,\n    }),\n    [textDirection],\n  );\n\n  return (\n    <CalendarDirectionContext.Provider value={directionContextValue}>\n      <RootComponent {...props} baseClassName={styles.host} getRootRef={rootRef}>\n        <div className={styles.inner}>\n          <CalendarHeader\n            viewDate={viewDate}\n            onChange={setViewDate}\n            nextMonthHidden\n            onPrevMonth={setPrevMonth}\n            disablePickers={disablePickers}\n            className={styles.header}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            prevMonthIcon={prevMonthIcon}\n            isMonthDisabled={isMonthDisabled}\n            isYearDisabled={isYearDisabled}\n            {...leftPartHeaderTestsData}\n          />\n          <CalendarDays\n            viewDate={viewDate}\n            value={value}\n            weekStartsOn={weekStartsOn}\n            onKeyDown={handleKeyDown}\n            isDayFocused={isDayFocused}\n            onDayChange={onDayChange}\n            isDaySelected={isDaySelected}\n            isDayActive={isDayActive}\n            isDaySelectionEnd={isDaySelectionEnd}\n            isDaySelectionStart={isDaySelectionStart}\n            isDayHinted={isDayHinted}\n            onDayEnter={onDayEnter}\n            onDayLeave={onDayLeave}\n            isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n            isHintedDaySelectionStart={isHintedDaySelectionStart}\n            isDayDisabled={isDayDisabled}\n            listenDayChangesForUpdate={listenDayChangesForUpdate}\n            renderDayContent={renderDayContent}\n            aria-label={changeDayLabel}\n            dayTestId={dayTestId}\n          />\n        </div>\n        <div className={styles.inner}>\n          <CalendarHeader\n            viewDate={secondViewDate}\n            onChange={onRightPartViewDateChange}\n            prevMonthHidden\n            onNextMonth={setNextMonth}\n            disablePickers={disablePickers}\n            className={styles.header}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            nextMonthIcon={nextMonthIcon}\n            isMonthDisabled={isMonthDisabled}\n            isYearDisabled={isYearDisabled}\n            {...rightPartHeaderTestsData}\n          />\n          <CalendarDays\n            viewDate={secondViewDate}\n            value={value}\n            weekStartsOn={weekStartsOn}\n            aria-label={changeDayLabel}\n            onKeyDown={handleKeyDown}\n            isDayFocused={isDayFocused}\n            onDayChange={onDayChange}\n            isDaySelected={isDaySelected}\n            isDayActive={isDayActive}\n            isDaySelectionEnd={isDaySelectionEnd}\n            isDaySelectionStart={isDaySelectionStart}\n            isDayHinted={isDayHinted}\n            onDayEnter={onDayEnter}\n            onDayLeave={onDayLeave}\n            isHintedDaySelectionEnd={isHintedDaySelectionEnd}\n            isHintedDaySelectionStart={isHintedDaySelectionStart}\n            isDayDisabled={isDayDisabled}\n            listenDayChangesForUpdate={listenDayChangesForUpdate}\n            renderDayContent={renderDayContent}\n            tabIndex={0}\n            onBlur={resetSelectedDay}\n            dayTestId={dayTestId}\n          />\n        </div>\n      </RootComponent>\n    </CalendarDirectionContext.Provider>\n  );\n};\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","isSameMonth","isWithinInterval","startOfDay","subMonths","CalendarDirectionContext","useCalendar","useDirection","useExternRef","isFirstDay","isLastDay","navigateDate","CalendarDays","CalendarHeader","RootComponent","getIsDaySelected","day","value","start","end","CalendarRange","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","directionRef","textDirection","rootRef","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","useCallback","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","undefined","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","directionContextValue","useMemo","direction","Provider","baseClassName","div","className","nextMonthHidden","onPrevMonth","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/components/CalendarTime/CalendarTime.d.ts

@@ -1,19 +1,35 @@
 import * as React from 'react';
+import { type ButtonProps } from '../Button/Button';
 export type CalendarTimeTestsProps = {
+    /**
+     * Передает атрибут `data-testid` для дропдауна выбора часа в календаре
+     */
     hoursTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для дропдауна выбора минут в календаре
+     */
     minutesTestId?: string;
+    /**
+     * Передает атрибут `data-testid` для кнопки "Готово" в календаре
+     */
     doneButtonTestId?: string;
 };
-export interface CalendarTimeProps extends CalendarTimeTestsProps {
-    value: Date;
+export type CalendarDoneButtonProps = {
+    /**
+     * Кастомное отображение кнопки Done.
+     */
+    DoneButton?: React.ComponentType<ButtonProps>;
     doneButtonText?: string;
     doneButtonShow?: boolean;
     doneButtonDisabled?: boolean;
+    onDoneButtonClick?: () => void;
+};
+export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {
+    value: Date;
     changeHoursLabel?: string;
     changeMinutesLabel?: string;
     onChange?: (value: Date) => void;
-    onDoneButtonClick?: () => void;
     isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
-export declare const CalendarTime: ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, isDayDisabled, doneButtonText, doneButtonDisabled, doneButtonShow, minutesTestId, hoursTestId, doneButtonTestId, }: CalendarTimeProps) => React.ReactNode;
+export declare const CalendarTime: ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, isDayDisabled, doneButtonText, doneButtonDisabled, doneButtonShow, minutesTestId, hoursTestId, doneButtonTestId, DoneButton, }: CalendarTimeProps) => React.ReactNode;
 //# sourceMappingURL=CalendarTime.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CalendarTime.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;CAC5D;AAkBD,eAAO,MAAM,YAAY,mMAatB,iBAAiB,KAAG,KAAK,CAAC,SAoE5B,CAAC"}
+{"version":3,"file":"CalendarTime.d.ts","sourceRoot":"","sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAM5D,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,iBAAkB,SAAQ,sBAAsB,EAAE,uBAAuB;IACxF,KAAK,EAAE,IAAI,CAAC;IACZ,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC;CAC5D;AA6BD,eAAO,MAAM,YAAY,+MActB,iBAAiB,KAAG,KAAK,CAAC,SA6H5B,CAAC"}

package/dist/components/CalendarTime/CalendarTime.js

@@ -2,12 +2,15 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { setHours, setMinutes } from "date-fns";
+import { Keys, pressedKey } from "../../lib/accessibility.js";
 import { AdaptivityProvider } from "../AdaptivityProvider/AdaptivityProvider.js";
 import { Button } from "../Button/Button.js";
 import { CustomSelect } from "../CustomSelect/CustomSelect.js";
+const selectFilterFn = ()=>true;
 const hours = [];
 for(let i = 0; i < 24; i += 1){
     hours.push({
@@ -22,7 +25,14 @@ for(let i = 0; i < 60; i += 1){
         label: String(i).padStart(2, '0')
     });
 }
-export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, isDayDisabled, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId })=>{
+const validateValue = (value, validValues)=>{
+    const numValue = Number(value);
+    return !isNaN(numValue) && validValues.some((v)=>v.value === numValue);
+};
+export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLabel, changeMinutesLabel, isDayDisabled, doneButtonText = 'Готово', doneButtonDisabled = false, doneButtonShow = true, minutesTestId, hoursTestId, doneButtonTestId, DoneButton })=>{
+    const hoursInputRef = useRef(null);
+    const minutesInputRef = useRef(null);
+    const doneButtonRef = useRef(null);
     const localHours = isDayDisabled ? hours.map((hour)=>{
         return _object_spread_props(_object_spread({}, hour), {
             disabled: isDayDisabled(setHours(value, hour.value), true)
@@ -33,6 +43,19 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
             disabled: isDayDisabled(setMinutes(value, minute.value), true)
         });
     }) : minutes;
+    const onPickerValueChange = (e, validate, setter)=>{
+        const numericValue = e.target.value.replace(/\D/g, '');
+        e.target.value = numericValue;
+        if (validate(numericValue)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(setter(value, Number(numericValue)));
+        }
+    };
+    const onHoursInputChange = (e)=>{
+        onPickerValueChange(e, (numValue)=>validateValue(numValue, localHours), setHours);
+    };
+    const onMinutesInputChange = (e)=>{
+        onPickerValueChange(e, (numValue)=>validateValue(numValue, localMinutes), setMinutes);
+    };
     const onHoursChange = React.useCallback((_, newValue)=>onChange === null || onChange === void 0 ? void 0 : onChange(setHours(value, Number(newValue))), [
         onChange,
         value
@@ -41,6 +64,39 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
         onChange,
         value
     ]);
+    const onPickerKeyDown = (e)=>{
+        const key = pressedKey(e);
+        if (key === Keys.ENTER || key === Keys.TAB) {
+            var _nextStep_current;
+            const steps = [
+                hoursInputRef,
+                minutesInputRef,
+                doneButtonRef
+            ];
+            const currentStepIndex = steps.findIndex((step)=>step.current === e.target);
+            const diff = e.key === 'Tab' && e.shiftKey ? -1 : 1;
+            const nextStepIndex = currentStepIndex + diff;
+            if (nextStepIndex < 0 || nextStepIndex >= steps.length) {
+                return;
+            }
+            e.preventDefault();
+            const nextStep = steps[nextStepIndex];
+            (_nextStep_current = nextStep.current) === null || _nextStep_current === void 0 ? void 0 : _nextStep_current.focus();
+        }
+    };
+    const renderDoneButton = ()=>{
+        const ButtonComponent = DoneButton !== null && DoneButton !== void 0 ? DoneButton : Button;
+        return /*#__PURE__*/ _jsx(ButtonComponent, {
+            mode: "secondary",
+            onClick: onDoneButtonClick,
+            size: "l",
+            getRootRef: doneButtonRef,
+            onKeyDown: onPickerKeyDown,
+            disabled: doneButtonDisabled,
+            "data-testid": doneButtonTestId,
+            children: doneButtonText
+        });
+    };
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCalendarTime__host", !doneButtonShow && "vkuiCalendarTime__host__withoutDone"),
         children: [
@@ -53,6 +109,11 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
                         options: localHours,
                         onChange: onHoursChange,
                         forceDropdownPortal: false,
+                        searchable: true,
+                        filterFn: selectFilterFn,
+                        onInputChange: onHoursInputChange,
+                        onInputKeyDown: onPickerKeyDown,
+                        getSelectInputRef: hoursInputRef,
                         "aria-label": changeHoursLabel,
                         "data-testid": hoursTestId
                     })
@@ -71,6 +132,11 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
                         options: localMinutes,
                         onChange: onMinutesChange,
                         forceDropdownPortal: false,
+                        searchable: true,
+                        filterFn: selectFilterFn,
+                        onInputChange: onMinutesInputChange,
+                        getSelectInputRef: minutesInputRef,
+                        onInputKeyDown: onPickerKeyDown,
                         "aria-label": changeMinutesLabel,
                         "data-testid": minutesTestId
                     })
@@ -80,14 +146,7 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
                 className: "vkuiCalendarTime__button",
                 children: /*#__PURE__*/ _jsx(AdaptivityProvider, {
                     sizeY: "compact",
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        mode: "secondary",
-                        onClick: onDoneButtonClick,
-                        size: "l",
-                        disabled: doneButtonDisabled,
-                        "data-testid": doneButtonTestId,
-                        children: doneButtonText
-                    })
+                    children: renderDoneButton()
                 })
             })
         ]

package/dist/components/CalendarTime/CalendarTime.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { setHours, setMinutes } from 'date-fns';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button } from '../Button/Button';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nexport type CalendarTimeTestsProps = {\n  hoursTestId?: string;\n  minutesTestId?: string;\n  doneButtonTestId?: string;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps {\n  value: Date;\n  doneButtonText?: string;\n  doneButtonShow?: boolean;\n  doneButtonDisabled?: boolean;\n  changeHoursLabel?: string;\n  changeMinutesLabel?: string;\n  onChange?: (value: Date) => void;\n  onDoneButtonClick?: () => void;\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  isDayDisabled,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n}: CalendarTimeProps): React.ReactNode => {\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onHoursChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setHours(value, Number(newValue))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setMinutes(value, Number(newValue))),\n    [onChange, value],\n  );\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            aria-label={changeHoursLabel}\n            data-testid={hoursTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles.divider}>:</div>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            aria-label={changeMinutesLabel}\n            data-testid={minutesTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider sizeY=\"compact\">\n            <Button\n              mode=\"secondary\"\n              onClick={onDoneButtonClick}\n              size=\"l\"\n              disabled={doneButtonDisabled}\n              data-testid={doneButtonTestId}\n            >\n              {doneButtonText}\n            </Button>\n          </AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","setHours","setMinutes","AdaptivityProvider","Button","CustomSelect","hours","i","push","value","label","String","padStart","minutes","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","localHours","map","hour","disabled","localMinutes","minute","onHoursChange","useCallback","_","newValue","Number","onMinutesChange","div","className","sizeY","getHours","options","forceDropdownPortal","aria-label","data-testid","getMinutes","mode","onClick","size"],"mappings":"AAAA;;;;AAGA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,EAAEC,UAAU,QAAQ,WAAW;AAChD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,YAAY,QAA0B,kCAA+B;AAqB9E,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,OAAO,MAAME,eAAe,CAAC,EAC3BL,KAAK,EACLM,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,EAClBC,aAAa,EACbC,iBAAiB,QAAQ,EACzBC,qBAAqB,KAAK,EAC1BC,iBAAiB,IAAI,EACrBC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EACE;IAClB,MAAMC,aAAaP,gBACfb,MAAMqB,GAAG,CAAC,CAACC;QACT,OAAO,wCAAKA;YAAMC,UAAUV,cAAclB,SAASQ,OAAOmB,KAAKnB,KAAK,GAAG;;IACzE,KACAH;IAEJ,MAAMwB,eAAeX,gBACjBN,QAAQc,GAAG,CAAC,CAACI;QACX,OAAO,wCAAKA;YAAQF,UAAUV,cAAcjB,WAAWO,OAAOsB,OAAOtB,KAAK,GAAG;;IAC/E,KACAI;IAEJ,MAAMmB,gBAAgBjC,MAAMkC,WAAW,CACrC,CAACC,GAAmCC,WAClCpB,qBAAAA,+BAAAA,SAAWd,SAASQ,OAAO2B,OAAOD,aACpC;QAACpB;QAAUN;KAAM;IAEnB,MAAM4B,kBAAkBtC,MAAMkC,WAAW,CACvC,CAACC,GAAmCC,WAClCpB,qBAAAA,+BAAAA,SAAWb,WAAWO,OAAO2B,OAAOD,aACtC;QAACpB;QAAUN;KAAM;IAGnB,qBACE,MAAC6B;QAAIC,WAAWvC,qCAAwB,CAACsB;;0BACvC,KAACgB;gBAAIC,SAAS;0BACZ,cAAA,KAACpC;oBAAmBqC,OAAM;8BACxB,cAAA,KAACnC;wBACCI,OAAOA,MAAMgC,QAAQ;wBACrBC,SAAShB;wBACTX,UAAUiB;wBACVW,qBAAqB;wBACrBC,cAAY3B;wBACZ4B,eAAarB;;;;0BAInB,KAACc;gBAAIC,SAAS;0BAAkB;;0BAChC,KAACD;gBAAIC,SAAS;0BACZ,cAAA,KAACpC;oBAAmBqC,OAAM;8BACxB,cAAA,KAACnC;wBACCI,OAAOA,MAAMqC,UAAU;wBACvBJ,SAASZ;wBACTf,UAAUsB;wBACVM,qBAAqB;wBACrBC,cAAY1B;wBACZ2B,eAAatB;;;;YAIlBD,gCACC,KAACgB;gBAAIC,SAAS;0BACZ,cAAA,KAACpC;oBAAmBqC,OAAM;8BACxB,cAAA,KAACpC;wBACC2C,MAAK;wBACLC,SAAShC;wBACTiC,MAAK;wBACLpB,UAAUR;wBACVwB,eAAapB;kCAEZL;;;;;;AAOf,EAAE"}
+{"version":3,"sources":["../../../src/components/CalendarTime/CalendarTime.tsx"],"sourcesContent":["'use client';\n\nimport { type ChangeEvent, useRef } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { setHours, setMinutes } from 'date-fns';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';\nimport styles from './CalendarTime.module.css';\n\nconst selectFilterFn = () => true;\n\nexport type CalendarTimeTestsProps = {\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре\n   */\n  hoursTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре\n   */\n  minutesTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки \"Готово\" в календаре\n   */\n  doneButtonTestId?: string;\n};\n\nexport type CalendarDoneButtonProps = {\n  /**\n   * Кастомное отображение кнопки Done.\n   */\n  DoneButton?: React.ComponentType<ButtonProps>;\n  doneButtonText?: string;\n  doneButtonShow?: boolean;\n  doneButtonDisabled?: boolean;\n  onDoneButtonClick?: () => void;\n};\n\nexport interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {\n  value: Date;\n  changeHoursLabel?: string;\n  changeMinutesLabel?: string;\n  onChange?: (value: Date) => void;\n  isDayDisabled?: (day: Date, withTime?: boolean) => boolean;\n}\n\nconst hours: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 24; i += 1) {\n  hours.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst minutes: Array<{\n  value: number;\n  label: string;\n}> = [];\nfor (let i = 0; i < 60; i += 1) {\n  minutes.push({ value: i, label: String(i).padStart(2, '0') });\n}\n\nconst validateValue = (\n  value: string,\n  validValues: Array<{\n    value: number;\n    label: string;\n  }>,\n): boolean => {\n  const numValue = Number(value);\n  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);\n};\n\nexport const CalendarTime = ({\n  value,\n  onChange,\n  onDoneButtonClick,\n  changeHoursLabel,\n  changeMinutesLabel,\n  isDayDisabled,\n  doneButtonText = 'Готово',\n  doneButtonDisabled = false,\n  doneButtonShow = true,\n  minutesTestId,\n  hoursTestId,\n  doneButtonTestId,\n  DoneButton,\n}: CalendarTimeProps): React.ReactNode => {\n  const hoursInputRef = useRef<HTMLInputElement | null>(null);\n  const minutesInputRef = useRef<HTMLInputElement | null>(null);\n  const doneButtonRef = useRef<HTMLButtonElement | null>(null);\n\n  const localHours = isDayDisabled\n    ? hours.map((hour) => {\n        return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };\n      })\n    : hours;\n\n  const localMinutes = isDayDisabled\n    ? minutes.map((minute) => {\n        return { ...minute, disabled: isDayDisabled(setMinutes(value, minute.value), true) };\n      })\n    : minutes;\n\n  const onPickerValueChange = (\n    e: ChangeEvent<HTMLInputElement>,\n    validate: (numericValue: string) => boolean,\n    setter: (value: Date, numericValue: number) => Date,\n  ) => {\n    const numericValue = e.target.value.replace(/\\D/g, '');\n    e.target.value = numericValue;\n    if (validate(numericValue)) {\n      onChange?.(setter(value, Number(numericValue)));\n    }\n  };\n\n  const onHoursInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localHours), setHours);\n  };\n\n  const onMinutesInputChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onPickerValueChange(e, (numValue) => validateValue(numValue, localMinutes), setMinutes);\n  };\n\n  const onHoursChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setHours(value, Number(newValue))),\n    [onChange, value],\n  );\n  const onMinutesChange = React.useCallback(\n    (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>\n      onChange?.(setMinutes(value, Number(newValue))),\n    [onChange, value],\n  );\n\n  const onPickerKeyDown = (e: React.KeyboardEvent) => {\n    const key = pressedKey(e);\n    if (key === Keys.ENTER || key === Keys.TAB) {\n      const steps = [hoursInputRef, minutesInputRef, doneButtonRef];\n      const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n      const diff = e.key === 'Tab' && e.shiftKey ? -1 : 1;\n      const nextStepIndex = currentStepIndex + diff;\n      if (nextStepIndex < 0 || nextStepIndex >= steps.length) {\n        return;\n      }\n      e.preventDefault();\n      const nextStep = steps[nextStepIndex];\n      nextStep.current?.focus();\n    }\n  };\n\n  const renderDoneButton = () => {\n    const ButtonComponent = DoneButton ?? Button;\n    return (\n      <ButtonComponent\n        mode=\"secondary\"\n        onClick={onDoneButtonClick}\n        size=\"l\"\n        getRootRef={doneButtonRef}\n        onKeyDown={onPickerKeyDown}\n        disabled={doneButtonDisabled}\n        data-testid={doneButtonTestId}\n      >\n        {doneButtonText}\n      </ButtonComponent>\n    );\n  };\n\n  return (\n    <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getHours()}\n            options={localHours}\n            onChange={onHoursChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onHoursInputChange}\n            onInputKeyDown={onPickerKeyDown}\n            getSelectInputRef={hoursInputRef}\n            aria-label={changeHoursLabel}\n            data-testid={hoursTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      <div className={styles.divider}>:</div>\n      <div className={styles.picker}>\n        <AdaptivityProvider sizeY=\"compact\">\n          <CustomSelect\n            value={value.getMinutes()}\n            options={localMinutes}\n            onChange={onMinutesChange}\n            forceDropdownPortal={false}\n            searchable\n            filterFn={selectFilterFn}\n            onInputChange={onMinutesInputChange}\n            getSelectInputRef={minutesInputRef}\n            onInputKeyDown={onPickerKeyDown}\n            aria-label={changeMinutesLabel}\n            data-testid={minutesTestId}\n          />\n        </AdaptivityProvider>\n      </div>\n      {doneButtonShow && (\n        <div className={styles.button}>\n          <AdaptivityProvider sizeY=\"compact\">{renderDoneButton()}</AdaptivityProvider>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["useRef","React","classNames","setHours","setMinutes","Keys","pressedKey","AdaptivityProvider","Button","CustomSelect","selectFilterFn","hours","i","push","value","label","String","padStart","minutes","validateValue","validValues","numValue","Number","isNaN","some","v","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerValueChange","e","validate","setter","numericValue","target","replace","onHoursInputChange","onMinutesInputChange","onHoursChange","useCallback","_","newValue","onMinutesChange","onPickerKeyDown","key","ENTER","TAB","nextStep","steps","currentStepIndex","findIndex","step","current","diff","shiftKey","nextStepIndex","length","preventDefault","focus","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","getMinutes"],"mappings":"AAAA;;;;AAEA,SAA2BA,MAAM,QAAQ,QAAQ;AACjD,YAAYC,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,EAAEC,UAAU,QAAQ,WAAW;AAChD,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,MAAM,QAA0B,sBAAmB;AAC5D,SAASC,YAAY,QAA0B,kCAA+B;AAG9E,MAAMC,iBAAiB,IAAM;AAoC7B,MAAMC,QAGD,EAAE;AACP,IAAK,IAAIC,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BD,MAAME,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC3D;AAEA,MAAMC,UAGD,EAAE;AACP,IAAK,IAAIN,IAAI,GAAGA,IAAI,IAAIA,KAAK,EAAG;IAC9BM,QAAQL,IAAI,CAAC;QAAEC,OAAOF;QAAGG,OAAOC,OAAOJ,GAAGK,QAAQ,CAAC,GAAG;IAAK;AAC7D;AAEA,MAAME,gBAAgB,CACpBL,OACAM;IAKA,MAAMC,WAAWC,OAAOR;IACxB,OAAO,CAACS,MAAMF,aAAaD,YAAYI,IAAI,CAAC,CAACC,IAAMA,EAAEX,KAAK,KAAKO;AACjE;AAEA,OAAO,MAAMK,eAAe,CAAC,EAC3BZ,KAAK,EACLa,QAAQ,EACRC,iBAAiB,EACjBC,gBAAgB,EAChBC,kBAAkB,EAClBC,aAAa,EACbC,iBAAiB,QAAQ,EACzBC,qBAAqB,KAAK,EAC1BC,iBAAiB,IAAI,EACrBC,aAAa,EACbC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACQ;IAClB,MAAMC,gBAAgBvC,OAAgC;IACtD,MAAMwC,kBAAkBxC,OAAgC;IACxD,MAAMyC,gBAAgBzC,OAAiC;IAEvD,MAAM0C,aAAaX,gBACfpB,MAAMgC,GAAG,CAAC,CAACC;QACT,OAAO,wCAAKA;YAAMC,UAAUd,cAAc5B,SAASW,OAAO8B,KAAK9B,KAAK,GAAG;;IACzE,KACAH;IAEJ,MAAMmC,eAAef,gBACjBb,QAAQyB,GAAG,CAAC,CAACI;QACX,OAAO,wCAAKA;YAAQF,UAAUd,cAAc3B,WAAWU,OAAOiC,OAAOjC,KAAK,GAAG;;IAC/E,KACAI;IAEJ,MAAM8B,sBAAsB,CAC1BC,GACAC,UACAC;QAEA,MAAMC,eAAeH,EAAEI,MAAM,CAACvC,KAAK,CAACwC,OAAO,CAAC,OAAO;QACnDL,EAAEI,MAAM,CAACvC,KAAK,GAAGsC;QACjB,IAAIF,SAASE,eAAe;YAC1BzB,qBAAAA,+BAAAA,SAAWwB,OAAOrC,OAAOQ,OAAO8B;QAClC;IACF;IAEA,MAAMG,qBAAqB,CAACN;QAC1BD,oBAAoBC,GAAG,CAAC5B,WAAaF,cAAcE,UAAUqB,aAAavC;IAC5E;IAEA,MAAMqD,uBAAuB,CAACP;QAC5BD,oBAAoBC,GAAG,CAAC5B,WAAaF,cAAcE,UAAUyB,eAAe1C;IAC9E;IAEA,MAAMqD,gBAAgBxD,MAAMyD,WAAW,CACrC,CAACC,GAAmCC,WAClCjC,qBAAAA,+BAAAA,SAAWxB,SAASW,OAAOQ,OAAOsC,aACpC;QAACjC;QAAUb;KAAM;IAEnB,MAAM+C,kBAAkB5D,MAAMyD,WAAW,CACvC,CAACC,GAAmCC,WAClCjC,qBAAAA,+BAAAA,SAAWvB,WAAWU,OAAOQ,OAAOsC,aACtC;QAACjC;QAAUb;KAAM;IAGnB,MAAMgD,kBAAkB,CAACb;QACvB,MAAMc,MAAMzD,WAAW2C;QACvB,IAAIc,QAAQ1D,KAAK2D,KAAK,IAAID,QAAQ1D,KAAK4D,GAAG,EAAE;gBAU1CC;YATA,MAAMC,QAAQ;gBAAC5B;gBAAeC;gBAAiBC;aAAc;YAC7D,MAAM2B,mBAAmBD,MAAME,SAAS,CAAC,CAACC,OAASA,KAAKC,OAAO,KAAKtB,EAAEI,MAAM;YAC5E,MAAMmB,OAAOvB,EAAEc,GAAG,KAAK,SAASd,EAAEwB,QAAQ,GAAG,CAAC,IAAI;YAClD,MAAMC,gBAAgBN,mBAAmBI;YACzC,IAAIE,gBAAgB,KAAKA,iBAAiBP,MAAMQ,MAAM,EAAE;gBACtD;YACF;YACA1B,EAAE2B,cAAc;YAChB,MAAMV,WAAWC,KAAK,CAACO,cAAc;aACrCR,oBAAAA,SAASK,OAAO,cAAhBL,wCAAAA,kBAAkBW,KAAK;QACzB;IACF;IAEA,MAAMC,mBAAmB;QACvB,MAAMC,kBAAkBzC,uBAAAA,wBAAAA,aAAc9B;QACtC,qBACE,KAACuE;YACCC,MAAK;YACLC,SAASrD;YACTsD,MAAK;YACLC,YAAY1C;YACZ2C,WAAWtB;YACXjB,UAAUZ;YACVoD,eAAahD;sBAEZL;;IAGP;IAEA,qBACE,MAACsD;QAAIC,WAAWrF,qCAAwB,CAACgC;;0BACvC,KAACoD;gBAAIC,SAAS;0BACZ,cAAA,KAAChF;oBAAmBiF,OAAM;8BACxB,cAAA,KAAC/E;wBACCK,OAAOA,MAAM2E,QAAQ;wBACrBC,SAAShD;wBACTf,UAAU8B;wBACVkC,qBAAqB;wBACrBC,UAAU;wBACVC,UAAUnF;wBACVoF,eAAevC;wBACfwC,gBAAgBjC;wBAChBkC,mBAAmBzD;wBACnB0D,cAAYpE;wBACZwD,eAAajD;;;;0BAInB,KAACkD;gBAAIC,SAAS;0BAAkB;;0BAChC,KAACD;gBAAIC,SAAS;0BACZ,cAAA,KAAChF;oBAAmBiF,OAAM;8BACxB,cAAA,KAAC/E;wBACCK,OAAOA,MAAMoF,UAAU;wBACvBR,SAAS5C;wBACTnB,UAAUkC;wBACV8B,qBAAqB;wBACrBC,UAAU;wBACVC,UAAUnF;wBACVoF,eAAetC;wBACfwC,mBAAmBxD;wBACnBuD,gBAAgBjC;wBAChBmC,cAAYnE;wBACZuD,eAAalD;;;;YAIlBD,gCACC,KAACoD;gBAAIC,SAAS;0BACZ,cAAA,KAAChF;oBAAmBiF,OAAM;8BAAWV;;;;;AAK/C,EAAE"}

package/dist/components/CardScroll/CardScroll.d.ts

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';
-export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {
+export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent, Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {
     /**
      * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
      */
     size?: 's' | 'm' | 'l' | false;
-    showArrows?: HorizontalScrollProps['showArrows'];
     /**
      * Добавляет отступы по краям слева и справа
      */
@@ -15,5 +14,5 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElemen
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, padding, Component, ...restProps }: CardScrollProps) => React.ReactNode;
+export declare const CardScroll: ({ children, size, showArrows, padding, Component, prevButtonTestId, nextButtonTestId, ...restProps }: CardScrollProps) => React.ReactNode;
 //# sourceMappingURL=CardScroll.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAUpG,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,YAAY;IAC9F;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAC/B,UAAU,CAAC,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IACjD;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,qEAOpB,eAAe,KAAG,KAAK,CAAC,SAkF1B,CAAC"}
+{"version":3,"file":"CardScroll.d.ts","sourceRoot":"","sources":["../../../src/components/CardScroll/CardScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC3E,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAUpG,MAAM,WAAW,eACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,YAAY,EACZ,IAAI,CAAC,qBAAqB,EAAE,YAAY,GAAG,kBAAkB,GAAG,kBAAkB,CAAC;IACrF;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,CAAC;IAC/B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,yGASpB,eAAe,KAAG,KAAK,CAAC,SAoF1B,CAAC"}

package/dist/components/CardScroll/CardScroll.js

@@ -16,12 +16,14 @@ const stylesSize = {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */ export const CardScroll = (_param)=>{
-    var { children, size = 's', showArrows = true, padding = false, Component = 'ul' } = _param, restProps = _object_without_properties(_param, [
+    var { children, size = 's', showArrows = true, padding = false, Component = 'ul', prevButtonTestId, nextButtonTestId } = _param, restProps = _object_without_properties(_param, [
         "children",
         "size",
         "showArrows",
         "padding",
-        "Component"
+        "Component",
+        "prevButtonTestId",
+        "nextButtonTestId"
     ]);
     const refContainer = React.useRef(null);
     const gapRef = React.useRef(null);
@@ -65,6 +67,8 @@ const stylesSize = {
             getScrollToLeft: getScrollToLeft,
             getScrollToRight: getScrollToRight,
             showArrows: showArrows,
+            prevButtonTestId: prevButtonTestId,
+            nextButtonTestId: nextButtonTestId,
             children: /*#__PURE__*/ _jsxs("div", {
                 className: "vkuiCardScroll__in",
                 ref: refContainer,