@vkontakte/vkui 7.1.3 → 7.2.0

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,18 @@ 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 [value, updateValue] = useCustomEnsuredControl({
+        value: valueProp,
+        defaultValue,
+        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 +86,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 +123,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;\n  defaultValue?: 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: 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 [value, updateValue] = useCustomEnsuredControl<DateRangeType | undefined>({\n    value: valueProp,\n    defaultValue,\n    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","updateValue","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","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.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 {

package/dist/cssm/components/CardScroll/CardScroll.js

@@ -1,7 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useDOM } from "../../lib/dom.js";
 import { HorizontalScroll } from "../HorizontalScroll/HorizontalScroll.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -13,45 +14,56 @@ const stylesSize = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
- */ export const CardScroll = ({ children, size = 's', showArrows = true, padding = false, Component = 'ul', prevButtonTestId, nextButtonTestId, ...restProps })=>{
+ */ export const CardScroll = ({ children, size = 's', showArrows = true, padding = false, CardsListComponent = 'ul', prevButtonTestId, nextButtonTestId, ...restProps })=>{
     const refContainer = React.useRef(null);
-    const gapRef = React.useRef(null);
+    const direction = useConfigDirection();
     const { window } = useDOM();
+    const getPadding = (container)=>{
+        return parseFloat(window.getComputedStyle(container).getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'));
+    };
+    const slideOffsetFromStart = (slide)=>{
+        const containerWidth = refContainer.current?.offsetWidth || 0;
+        return direction === 'rtl' ? containerWidth - slide.offsetLeft - slide.offsetWidth : slide.offsetLeft;
+    };
     function getScrollToLeft(offset) {
-        if (!refContainer.current || !gapRef.current) {
+        if (!refContainer.current) {
             return offset;
         }
         const containerWidth = refContainer.current.offsetWidth;
+        const getMarginEnd = (el)=>{
+            const computedStyles = window.getComputedStyle(el);
+            return parseInt(computedStyles.marginInlineEnd) || (direction === 'rtl' ? parseInt(computedStyles.marginLeft) : parseInt(computedStyles.marginRight)) || 0;
+        };
         const slideIndex = [
             ...refContainer.current.children
-        ].findIndex((el)=>el.offsetLeft + el.offsetWidth + parseInt(window.getComputedStyle(el).marginRight) - offset >= 0);
+        ].findIndex((el)=>slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0);
         if (slideIndex === -1) {
             return offset;
         }
-        if (slideIndex === 0) {
-            return 0;
-        }
         const slide = refContainer.current.children[slideIndex];
-        const scrollTo = slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;
-        if (scrollTo <= 2 * gapRef.current.offsetWidth) {
+        const padding = getPadding(refContainer.current);
+        const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;
+        if (scrollTo <= 2 * padding) {
             return 0;
         }
         return scrollTo;
     }
     function getScrollToRight(offset) {
-        if (!refContainer.current || !gapRef.current) {
+        if (!refContainer.current) {
             return offset;
         }
         const containerWidth = refContainer.current.offsetWidth;
-        const slide = Array.prototype.find.call(refContainer.current.children, (el)=>el.offsetLeft + el.offsetWidth - offset > containerWidth);
+        const slide = Array.prototype.find.call(refContainer.current.children, (el)=>{
+            return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;
+        });
         if (!slide) {
             return offset;
         }
-        return slide.offsetLeft - gapRef.current.offsetWidth;
+        const padding = getPadding(refContainer.current);
+        return slideOffsetFromStart(slide) - padding;
     }
     return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
-        Component: Component,
         baseClassName: classNames(styles.host, 'vkuiInternalCardScroll', size !== false && stylesSize[size], padding && styles.withPaddings),
         children: /*#__PURE__*/ _jsx(HorizontalScroll, {
             getScrollToLeft: getScrollToLeft,
@@ -59,20 +71,10 @@ const stylesSize = {
             showArrows: showArrows,
             prevButtonTestId: prevButtonTestId,
             nextButtonTestId: nextButtonTestId,
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: styles.in,
-                ref: refContainer,
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: styles.gap,
-                        ref: gapRef
-                    }),
-                    children,
-                    /*#__PURE__*/ _jsx("span", {
-                        className: styles.gap
-                    })
-                ]
-            })
+            ContentWrapperComponent: CardsListComponent,
+            contentWrapperRef: refContainer,
+            contentWrapperClassName: styles.in,
+            children: children
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useDOM } from '../../lib/dom';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  /**\n   * Добавляет отступы по краям слева и справа\n   */\n  padding?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  Component = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const gapRef = React.useRef<HTMLDivElement>(null);\n\n  const { window } = useDOM();\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        el.offsetLeft +\n          el.offsetWidth +\n          parseInt(window!.getComputedStyle(el).marginRight) -\n          offset >=\n        0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    if (slideIndex === 0) {\n      return 0;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n\n    const scrollTo =\n      slide.offsetLeft - (containerWidth - slide.offsetWidth) + gapRef.current.offsetWidth;\n\n    if (scrollTo <= 2 * gapRef.current.offsetWidth) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current || !gapRef.current) {\n      return offset;\n    }\n\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(\n      refContainer.current.children,\n      (el: HTMLElement) => el.offsetLeft + el.offsetWidth - offset > containerWidth,\n    ) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    return slide.offsetLeft - gapRef.current.offsetWidth;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n      >\n        <div className={styles.in} ref={refContainer}>\n          <span className={styles.gap} ref={gapRef} />\n          {children}\n          <span className={styles.gap} />\n        </div>\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useDOM","HorizontalScroll","RootComponent","styles","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","Component","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","gapRef","window","getScrollToLeft","offset","current","containerWidth","offsetWidth","slideIndex","findIndex","el","offsetLeft","parseInt","getComputedStyle","marginRight","slide","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","host","withPaddings","div","className","in","ref","span","gap"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,MAAM,QAAQ,mBAAgB;AAEvC,SAASC,gBAAgB,QAAoC,0CAAuC;AACpG,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAgBA;;CAEC,GACD,OAAO,MAAMC,aAAa,CAAC,EACzBC,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,UAAU,KAAK,EACfC,YAAY,IAAI,EAChBC,gBAAgB,EAChBC,gBAAgB,EAChB,GAAGC,WACa;IAChB,MAAMC,eAAenB,MAAMoB,MAAM,CAAiB;IAClD,MAAMC,SAASrB,MAAMoB,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGpB;IAEnB,SAASqB,gBAAgBC,MAAc;QACrC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QACA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMC,aAAa,AAAC;eAAIT,aAAaM,OAAO,CAACd,QAAQ;SAAC,CAAmBkB,SAAS,CAChF,CAACC,KACCA,GAAGC,UAAU,GACXD,GAAGH,WAAW,GACdK,SAASV,OAAQW,gBAAgB,CAACH,IAAII,WAAW,IACjDV,UACF;QAGJ,IAAII,eAAe,CAAC,GAAG;YACrB,OAAOJ;QACT;QAEA,IAAII,eAAe,GAAG;YACpB,OAAO;QACT;QAEA,MAAMO,QAAQhB,aAAaM,OAAO,CAACd,QAAQ,CAACiB,WAAW;QAEvD,MAAMQ,WACJD,MAAMJ,UAAU,GAAIL,CAAAA,iBAAiBS,MAAMR,WAAW,AAAD,IAAKN,OAAOI,OAAO,CAACE,WAAW;QAEtF,IAAIS,YAAY,IAAIf,OAAOI,OAAO,CAACE,WAAW,EAAE;YAC9C,OAAO;QACT;QAEA,OAAOS;IACT;IAEA,SAASC,iBAAiBb,MAAc;QACtC,IAAI,CAACL,aAAaM,OAAO,IAAI,CAACJ,OAAOI,OAAO,EAAE;YAC5C,OAAOD;QACT;QAEA,MAAME,iBAAiBP,aAAaM,OAAO,CAACE,WAAW;QACvD,MAAMQ,QAAQG,MAAMC,SAAS,CAACC,IAAI,CAACC,IAAI,CACrCtB,aAAaM,OAAO,CAACd,QAAQ,EAC7B,CAACmB,KAAoBA,GAAGC,UAAU,GAAGD,GAAGH,WAAW,GAAGH,SAASE;QAGjE,IAAI,CAACS,OAAO;YACV,OAAOX;QACT;QAEA,OAAOW,MAAMJ,UAAU,GAAGV,OAAOI,OAAO,CAACE,WAAW;IACtD;IAEA,qBACE,KAACvB;QACE,GAAGc,SAAS;QACbH,WAAWA;QACX2B,eAAezC,WACbI,OAAOsC,IAAI,EACX,0BACA/B,SAAS,SAASN,UAAU,CAACM,KAAK,EAClCE,WAAWT,OAAOuC,YAAY;kBAGhC,cAAA,KAACzC;YACCoB,iBAAiBA;YACjBc,kBAAkBA;YAClBxB,YAAYA;YACZG,kBAAkBA;YAClBC,kBAAkBA;sBAElB,cAAA,MAAC4B;gBAAIC,WAAWzC,OAAO0C,EAAE;gBAAEC,KAAK7B;;kCAC9B,KAAC8B;wBAAKH,WAAWzC,OAAO6C,GAAG;wBAAEF,KAAK3B;;oBACjCV;kCACD,KAACsC;wBAAKH,WAAWzC,OAAO6C,GAAG;;;;;;AAKrC,EAAE"}
+{"version":3,"sources":["../../../../src/components/CardScroll/CardScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useDOM } from '../../lib/dom';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { HorizontalScroll, type HorizontalScrollProps } from '../HorizontalScroll/HorizontalScroll';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './CardScroll.module.css';\n\nconst stylesSize = {\n  s: 'vkuiInternalCardScroll--size-s',\n  m: 'vkuiInternalCardScroll--size-m',\n  l: 'vkuiInternalCardScroll--size-l',\n};\n\nexport interface CardScrollProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasComponent,\n    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {\n  /**\n   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.\n   */\n  size?: 's' | 'm' | 'l' | false;\n  /**\n   * Добавляет отступы по краям слева и справа\n   */\n  padding?: boolean;\n  /**\n   * Позволяет поменять тег используемый для обертки над карточками\n   */\n  CardsListComponent?: React.ElementType;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CardScroll\n */\nexport const CardScroll = ({\n  children,\n  size = 's',\n  showArrows = true,\n  padding = false,\n  CardsListComponent = 'ul',\n  prevButtonTestId,\n  nextButtonTestId,\n  ...restProps\n}: CardScrollProps): React.ReactNode => {\n  const refContainer = React.useRef<HTMLDivElement>(null);\n  const direction = useConfigDirection();\n\n  const { window } = useDOM();\n\n  const getPadding = (container: HTMLElement) => {\n    return parseFloat(\n      window!\n        .getComputedStyle(container)\n        .getPropertyValue('--vkui_internal--CardScroll_horizontal_padding'),\n    );\n  };\n\n  const slideOffsetFromStart = (slide: HTMLElement) => {\n    const containerWidth = refContainer.current?.offsetWidth || 0;\n    return direction === 'rtl'\n      ? containerWidth - slide.offsetLeft - slide.offsetWidth\n      : slide.offsetLeft;\n  };\n\n  function getScrollToLeft(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n\n    const getMarginEnd = (el: HTMLElement) => {\n      const computedStyles = window!.getComputedStyle(el);\n      return (\n        parseInt(computedStyles.marginInlineEnd) ||\n        (direction === 'rtl'\n          ? parseInt(computedStyles.marginLeft)\n          : parseInt(computedStyles.marginRight)) ||\n        0\n      );\n    };\n\n    const slideIndex = ([...refContainer.current.children] as HTMLElement[]).findIndex(\n      (el: HTMLElement) =>\n        slideOffsetFromStart(el) + el.offsetWidth + getMarginEnd(el) - offset >= 0,\n    );\n\n    if (slideIndex === -1) {\n      return offset;\n    }\n\n    const slide = refContainer.current.children[slideIndex] as HTMLElement;\n    const padding = getPadding(refContainer.current);\n    const scrollTo = slideOffsetFromStart(slide) - (containerWidth - slide.offsetWidth) + padding;\n\n    if (scrollTo <= 2 * padding) {\n      return 0;\n    }\n\n    return scrollTo;\n  }\n\n  function getScrollToRight(offset: number): number {\n    if (!refContainer.current) {\n      return offset;\n    }\n    const containerWidth = refContainer.current.offsetWidth;\n    const slide = Array.prototype.find.call(refContainer.current.children, (el: HTMLElement) => {\n      return slideOffsetFromStart(el) + el.offsetWidth - offset > containerWidth;\n    }) as HTMLElement;\n\n    if (!slide) {\n      return offset;\n    }\n\n    const padding = getPadding(refContainer.current);\n    return slideOffsetFromStart(slide) - padding;\n  }\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalCardScroll',\n        size !== false && stylesSize[size],\n        padding && styles.withPaddings,\n      )}\n    >\n      <HorizontalScroll\n        getScrollToLeft={getScrollToLeft}\n        getScrollToRight={getScrollToRight}\n        showArrows={showArrows}\n        prevButtonTestId={prevButtonTestId}\n        nextButtonTestId={nextButtonTestId}\n        ContentWrapperComponent={CardsListComponent}\n        contentWrapperRef={refContainer}\n        contentWrapperClassName={styles.in}\n      >\n        {children}\n      </HorizontalScroll>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useConfigDirection","useDOM","HorizontalScroll","RootComponent","styles","stylesSize","s","m","l","CardScroll","children","size","showArrows","padding","CardsListComponent","prevButtonTestId","nextButtonTestId","restProps","refContainer","useRef","direction","window","getPadding","container","parseFloat","getComputedStyle","getPropertyValue","slideOffsetFromStart","slide","containerWidth","current","offsetWidth","offsetLeft","getScrollToLeft","offset","getMarginEnd","el","computedStyles","parseInt","marginInlineEnd","marginLeft","marginRight","slideIndex","findIndex","scrollTo","getScrollToRight","Array","prototype","find","call","baseClassName","host","withPaddings","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName","in"],"mappings":"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"}