@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/cssm/components/CalendarRange/CalendarRange.js

@@ -2,10 +2,8 @@
 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 { useCustomEnsuredControl } from "../../hooks/useEnsuredControl.js";
 import { isFirstDay, isLastDay, navigateDate } from "../../lib/calendar.js";
 import { CalendarDays } from "../CalendarDays/CalendarDays.js";
 import { CalendarHeader } from "../CalendarHeader/CalendarHeader.js";
@@ -22,15 +20,21 @@ const getIsDaySelected = (day, value)=>{
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CalendarRange
- */ export const CalendarRange = ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props })=>{
+ */ export const CalendarRange = ({ value: valueProp, defaultValue, onChange, disablePast, disableFuture, shouldDisableDate, onClose, weekStartsOn = 1, disablePickers, prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', changeDayLabel = 'Изменить день', prevMonthIcon, nextMonthIcon, listenDayChangesForUpdate, renderDayContent, dayTestId, leftPartHeaderTestsData, rightPartHeaderTestsData, getRootRef, ...props })=>{
+    const _onChange = React.useCallback((newValue)=>onChange?.(newValue || undefined), [
+        onChange
+    ]);
+    const [value, updateValue] = useCustomEnsuredControl({
+        value: valueProp,
+        defaultValue,
+        onChange: _onChange
+    });
     const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = useCalendar({
         value,
         disableFuture,
         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)=>{
@@ -85,10 +89,10 @@ const getIsDaySelected = (day, value)=>{
         value
     ]);
     const onDayChange = React.useCallback((date)=>{
-        onChange?.(getNewValue(date));
+        updateValue(getNewValue(date));
         setHintedDate(undefined);
     }, [
-        onChange,
+        updateValue,
         getNewValue
     ]);
     const isDaySelected = React.useCallback((day)=>getIsDaySelected(day, value), [
@@ -122,108 +126,100 @@ const getIsDaySelected = (day, value)=>{
     const onRightPartViewDateChange = React.useCallback((newDate)=>setViewDate(subMonths(newDate, 1)), [
         setViewDate
     ]);
-    const directionContextValue = React.useMemo(()=>({
-            direction: textDirection
-        }), [
-        textDirection
-    ]);
-    return /*#__PURE__*/ _jsx(CalendarDirectionContext.Provider, {
-        value: directionContextValue,
-        children: /*#__PURE__*/ _jsxs(RootComponent, {
-            ...props,
-            baseClassName: styles.host,
-            getRootRef: rootRef,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: styles.inner,
-                    children: [
-                        /*#__PURE__*/ _jsx(CalendarHeader, {
-                            viewDate: viewDate,
-                            onChange: setViewDate,
-                            nextMonthHidden: true,
-                            onPrevMonth: setPrevMonth,
-                            disablePickers: disablePickers,
-                            className: styles.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: styles.inner,
-                    children: [
-                        /*#__PURE__*/ _jsx(CalendarHeader, {
-                            viewDate: secondViewDate,
-                            onChange: onRightPartViewDateChange,
-                            prevMonthHidden: true,
-                            onNextMonth: setNextMonth,
-                            disablePickers: disablePickers,
-                            className: styles.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
-                        })
-                    ]
-                })
-            ]
-        })
+    return /*#__PURE__*/ _jsxs(RootComponent, {
+        ...props,
+        baseClassName: styles.host,
+        getRootRef: getRootRef,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.inner,
+                children: [
+                    /*#__PURE__*/ _jsx(CalendarHeader, {
+                        viewDate: viewDate,
+                        onChange: setViewDate,
+                        nextMonthHidden: true,
+                        onPrevMonth: setPrevMonth,
+                        disablePickers: disablePickers,
+                        className: styles.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: styles.inner,
+                children: [
+                    /*#__PURE__*/ _jsx(CalendarHeader, {
+                        viewDate: secondViewDate,
+                        onChange: onRightPartViewDateChange,
+                        prevMonthHidden: true,
+                        onNextMonth: setNextMonth,
+                        disablePickers: disablePickers,
+                        className: styles.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
+                    })
+                ]
+            })
+        ]
     });
 };
 

package/dist/cssm/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 {\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","styles","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","host","div","className","inner","nextMonthHidden","onPrevMonth","header","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 { useCalendar } from '../../hooks/useCalendar';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\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' | 'defaultValue'>,\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 | null;\n  defaultValue?: DateRangeType | null;\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; // TODO [>=8]: поменять тип на `(value?: DateRangeType | null) => void`\n  shouldDisableDate?: (value: Date) => boolean;\n  onClose?: () => void;\n}\n\nconst getIsDaySelected = (day: Date, value?: DateRangeType | null) => {\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: valueProp,\n  defaultValue,\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 _onChange = React.useCallback(\n    (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),\n    [onChange],\n  );\n\n  const [value, updateValue] = useCustomEnsuredControl<DateRangeType | null | undefined>({\n    value: valueProp,\n    defaultValue,\n    onChange: _onChange,\n  });\n\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 [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      updateValue(getNewValue(date));\n      setHintedDate(undefined);\n    },\n    [updateValue, 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} getRootRef={getRootRef}>\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","useCustomEnsuredControl","isFirstDay","isLastDay","navigateDate","CalendarDays","CalendarHeader","RootComponent","styles","getIsDaySelected","day","value","start","end","CalendarRange","valueProp","defaultValue","onChange","disablePast","disableFuture","shouldDisableDate","onClose","weekStartsOn","disablePickers","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","changeDayLabel","prevMonthIcon","nextMonthIcon","listenDayChangesForUpdate","renderDayContent","dayTestId","leftPartHeaderTestsData","rightPartHeaderTestsData","getRootRef","props","_onChange","useCallback","newValue","undefined","updateValue","viewDate","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","hintedDate","setHintedDate","useState","secondViewDate","handleKeyDown","event","includes","key","preventDefault","newFocusedDay","getNewValue","date","isValueEmpty","isRangeSelected","onDayChange","isDaySelected","isDayActive","Boolean","isDaySelectionEnd","dayOfWeek","isHintedDaySelectionEnd","isDaySelectionStart","isHintedDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","onRightPartViewDateChange","newDate","baseClassName","host","div","className","inner","nextMonthHidden","onPrevMonth","header","onKeyDown","aria-label","prevMonthHidden","onNextMonth","tabIndex","onBlur"],"mappings":"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"}

package/dist/cssm/components/CalendarRange/CalendarRange.module.css

@@ -1,20 +1,20 @@
 .host {
+  box-sizing: border-box;
   display: flex;
-  justify-content: space-around;
   flex-wrap: wrap;
+  justify-content: space-around;
   inline-size: 610px;
+  padding: 12px;
   background: var(--vkui--color_background_contrast_themed);
   border: 0.5px solid var(--vkui--color_separator_primary);
-  box-sizing: border-box;
-  box-shadow: var(--vkui--elevation1);
   border-radius: 8px;
-  padding: 12px;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .inner {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .inner:not(:last-child) {

package/dist/cssm/components/CalendarTime/CalendarTime.js

@@ -67,20 +67,23 @@ export const CalendarTime = ({ value, onChange, onDoneButtonClick, changeHoursLa
     ]);
     const onPickerKeyDown = (e)=>{
         const key = pressedKey(e);
-        if (key === Keys.ENTER || key === Keys.TAB) {
-            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;
-            }
+        /* Мы хотим иметь возможность быстро, по Enter перемещаться между
+     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */ if (key !== Keys.ENTER) {
+            return;
+        }
+        const steps = [
+            hoursInputRef,
+            minutesInputRef,
+            doneButtonRef
+        ].filter((ref)=>Boolean(ref.current));
+        const currentStepIndex = steps.findIndex((step)=>step.current === e.target);
+        const nextStepIndex = currentStepIndex + 1;
+        if (nextStepIndex >= steps.length) {
+            return;
+        }
+        const nextStep = steps[nextStepIndex];
+        if (nextStep.current) {
             e.preventDefault();
-            const nextStep = steps[nextStepIndex];
             nextStep.current?.focus();
         }
     };

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

@@ -1 +1 @@
-{"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","styles","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","steps","currentStepIndex","findIndex","step","current","diff","shiftKey","nextStepIndex","length","preventDefault","nextStep","focus","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","picker","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","divider","getMinutes","button"],"mappings":"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"}
+{"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    /* Мы хотим иметь возможность быстро, по Enter перемещаться между\n     * селектами с часами и минутами, также как мы это делаем по нажатию на Tab */\n    if (key !== Keys.ENTER) {\n      return;\n    }\n\n    const steps = [hoursInputRef, minutesInputRef, doneButtonRef].filter((ref) =>\n      Boolean(ref.current),\n    );\n    const currentStepIndex = steps.findIndex((step) => step.current === e.target);\n    const nextStepIndex = currentStepIndex + 1;\n    if (nextStepIndex >= steps.length) {\n      return;\n    }\n    const nextStep = steps[nextStepIndex];\n\n    if (nextStep.current) {\n      e.preventDefault();\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","styles","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","steps","filter","ref","Boolean","current","currentStepIndex","findIndex","step","nextStepIndex","length","nextStep","preventDefault","focus","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","host","host__withoutDone","picker","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","divider","getMinutes","button"],"mappings":"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"}

package/dist/cssm/components/CalendarTime/CalendarTime.module.css

@@ -13,8 +13,8 @@
 
 .divider {
   margin-inline: 6px;
-  color: var(--vkui--color_text_primary);
   font-family: var(--vkui--font_family_base);
+  color: var(--vkui--color_text_primary);
 }
 
 .button {

package/dist/cssm/components/Card/Card.module.css

@@ -1,9 +1,9 @@
 .host {
   position: relative;
+  display: block;
+  list-style-type: none;
   background: var(--vkui--color_background_secondary);
   border-radius: var(--vkui--size_card_border_radius--regular);
-  list-style-type: none;
-  display: block;
 }
 
 .modeShadow {
@@ -22,15 +22,15 @@
 
 .withBorder::after {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  box-sizing: border-box;
+  display: block;
   inline-size: 100%;
   block-size: 100%;
+  pointer-events: none;
   content: '';
-  display: block;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
-  pointer-events: none;
-  box-sizing: border-box;
   border-radius: inherit;
 }
 
@@ -42,9 +42,9 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalCardScroll) .host {
+  flex-shrink: 0;
   -webkit-margin-end: var(--vkui--size_cardgrid_padding--regular);
           margin-inline-end: var(--vkui--size_cardgrid_padding--regular);
-  flex-shrink: 0;
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */

package/dist/cssm/components/CardGrid/CardGrid.module.css

@@ -1,11 +1,11 @@
 .host {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   justify-content: flex-start;
-  flex-wrap: wrap;
-  list-style-type: none;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style-type: none;
 }
 
 .padding {