@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/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","selectFilterFn","hours","i","push","value","label","String","padStart","minutes","validateValue","validValues","numValue","Number","isNaN","some","v","CalendarTime","onChange","onDoneButtonClick","changeHoursLabel","changeMinutesLabel","isDayDisabled","doneButtonText","doneButtonDisabled","doneButtonShow","minutesTestId","hoursTestId","doneButtonTestId","DoneButton","hoursInputRef","minutesInputRef","doneButtonRef","localHours","map","hour","disabled","localMinutes","minute","onPickerValueChange","e","validate","setter","numericValue","target","replace","onHoursInputChange","onMinutesInputChange","onHoursChange","useCallback","_","newValue","onMinutesChange","onPickerKeyDown","key","ENTER","TAB","nextStep","steps","currentStepIndex","findIndex","step","current","diff","shiftKey","nextStepIndex","length","preventDefault","focus","renderDoneButton","ButtonComponent","mode","onClick","size","getRootRef","onKeyDown","data-testid","div","className","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","getMinutes"],"mappings":"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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","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","sizeY","getHours","options","forceDropdownPortal","searchable","filterFn","onInputChange","onInputKeyDown","getSelectInputRef","aria-label","getMinutes"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,YAAY;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC;CACjE;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,sCAId,SAAS,KAAG,KAAK,CAAC,SAepB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,WAAW,SAAU,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,YAAY;IACxF,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,cAAc,GAAG,OAAO,CAAC;CACjE;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,mCAIlB,SAAS,KAAG,KAAK,CAAC,SAepB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../src/components/CardGrid/CardGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAe3E,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,YAAY;IAC5F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,+CAKlB,aAAa,KAAG,KAAK,CAAC,SAgBxB,CAAC"}
+{"version":3,"file":"CardGrid.d.ts","sourceRoot":"","sources":["../../../src/components/CardGrid/CardGrid.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAe3E,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,YAAY;IAC5F,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,4CAKtB,aAAa,KAAG,KAAK,CAAC,SAgBxB,CAAC"}

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

@@ -10,9 +10,13 @@ export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElemen
      * Добавляет отступы по краям слева и справа
      */
     padding?: boolean;
+    /**
+     * Позволяет поменять тег используемый для обертки над карточками
+     */
+    CardsListComponent?: React.ElementType;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */
-export declare const CardScroll: ({ children, size, showArrows, padding, Component, prevButtonTestId, nextButtonTestId, ...restProps }: CardScrollProps) => React.ReactNode;
+export declare const CardScroll: ({ children, size, showArrows, padding, CardsListComponent, prevButtonTestId, nextButtonTestId, ...restProps }: CardScrollProps) => React.ReactNode;
 //# sourceMappingURL=CardScroll.d.ts.map

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

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

package/dist/components/CardScroll/CardScroll.js

@@ -2,9 +2,10 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-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";
@@ -16,52 +17,64 @@ const stylesSize = {
 /**
  * @see https://vkcom.github.io/VKUI/#/CardScroll
  */ export const CardScroll = (_param)=>{
-    var { children, size = 's', showArrows = true, padding = false, Component = 'ul', prevButtonTestId, nextButtonTestId } = _param, restProps = _object_without_properties(_param, [
+    var { children, size = 's', showArrows = true, padding = false, CardsListComponent = 'ul', prevButtonTestId, nextButtonTestId } = _param, restProps = _object_without_properties(_param, [
         "children",
         "size",
         "showArrows",
         "padding",
-        "Component",
+        "CardsListComponent",
         "prevButtonTestId",
         "nextButtonTestId"
     ]);
     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)=>{
+        var _refContainer_current;
+        const containerWidth = ((_refContainer_current = refContainer.current) === null || _refContainer_current === void 0 ? void 0 : _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, _object_spread_props(_object_spread({}, restProps), {
-        Component: Component,
         baseClassName: classNames("vkuiCardScroll__host", 'vkuiInternalCardScroll', size !== false && stylesSize[size], padding && "vkuiCardScroll__withPaddings"),
         children: /*#__PURE__*/ _jsx(HorizontalScroll, {
             getScrollToLeft: getScrollToLeft,
@@ -69,20 +82,10 @@ const stylesSize = {
             showArrows: showArrows,
             prevButtonTestId: prevButtonTestId,
             nextButtonTestId: nextButtonTestId,
-            children: /*#__PURE__*/ _jsxs("div", {
-                className: "vkuiCardScroll__in",
-                ref: refContainer,
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "vkuiCardScroll__gap",
-                        ref: gapRef
-                    }),
-                    children,
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "vkuiCardScroll__gap"
-                    })
-                ]
-            })
+            ContentWrapperComponent: CardsListComponent,
+            contentWrapperRef: refContainer,
+            contentWrapperClassName: "vkuiCardScroll__in",
+            children: children
         })
     }));
 };

package/dist/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","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","div","className","ref","span"],"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;AAG/D,MAAMC,aAAa;IACjBC,GAAG;IACHC,GAAG;IACHC,GAAG;AACL;AAgBA;;CAEC,GACD,OAAO,MAAMC,aAAa;QAAC,EACzBC,QAAQ,EACRC,OAAO,GAAG,EACVC,aAAa,IAAI,EACjBC,UAAU,KAAK,EACfC,YAAY,IAAI,EAChBC,gBAAgB,EAChBC,gBAAgB,EAEA,WADbC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAelB,MAAMmB,MAAM,CAAiB;IAClD,MAAMC,SAASpB,MAAMmB,MAAM,CAAiB;IAE5C,MAAM,EAAEE,MAAM,EAAE,GAAGnB;IAEnB,SAASoB,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,KAACtB,uDACKa;QACJH,WAAWA;QACX2B,eAAexC,mCAEb,0BACAU,SAAS,SAASN,UAAU,CAACM,KAAK,EAClCE;kBAGF,cAAA,KAACV;YACCmB,iBAAiBA;YACjBc,kBAAkBA;YAClBxB,YAAYA;YACZG,kBAAkBA;YAClBC,kBAAkBA;sBAElB,cAAA,MAAC0B;gBAAIC,SAAS;gBAAaC,KAAK1B;;kCAC9B,KAAC2B;wBAAKF,SAAS;wBAAcC,KAAKxB;;oBACjCV;kCACD,KAACmC;wBAAKF,SAAS;;;;;;AAKzB,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","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","ContentWrapperComponent","contentWrapperRef","contentWrapperClassName"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,gSAwBtB,gBAAgB,KAAG,KAAK,CAAC,SA6b3B,CAAC"}
+{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkC/B,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,GAAI,6RAwB1B,gBAAgB,KAAG,KAAK,CAAC,SAgf3B,CAAC"}

package/dist/components/CarouselBase/CarouselBase.js

@@ -6,6 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer.js";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { useMutationObserver } from "../../hooks/useMutationObserver.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
@@ -17,7 +18,7 @@ import { Bullets } from "./Bullets.js";
 import { CarouselViewPort } from "./CarouselViewPort.js";
 import { ScrollArrows } from "./ScrollArrows.js";
 import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDE_THRESHOLD, SLIDES_MANAGER_STATE } from "./constants.js";
-import { calcMax, calcMin, calculateIndent, getLoopPoints, getTargetIndex } from "./helpers.js";
+import { calcMax, calcMin, calculateIndent, getLoopPoints, getTargetIndex, isBigger, isBiggerOrEqual, isLowerOrEqual, revertRtlValue, validateIndent } from "./helpers.js";
 import { useSlideAnimation } from "./hooks.js";
 const warn = warnOnce('Gallery');
 export const CarouselBase = (_param)=>{
@@ -47,6 +48,8 @@ export const CarouselBase = (_param)=>{
     ]);
     const slidesStore = React.useRef({});
     const slidesManager = React.useRef(SLIDES_MANAGER_STATE);
+    const textDirection = useConfigDirection();
+    const isRtl = textDirection === 'rtl';
     const rootRef = useExternRef(getRootRef);
     const viewportRef = useExternRef(getRef);
     const layerRef = React.useRef(null);
@@ -59,28 +62,12 @@ export const CarouselBase = (_param)=>{
     const [controlElementsState, setControlElementsState] = React.useState(CONTROL_ELEMENTS_STATE);
     const hasPointer = useAdaptivityHasPointer();
     const isCenterAlign = align === 'center';
-    /*
-   * Считает отступ слоя галереи во время драга
-   * Используется только для looped=false галереи
-   * так как только у нее есть пределы по краям
-   */ const calculateDragIndent = ()=>{
-        var _slidesManager_current_max;
-        const localMax = (_slidesManager_current_max = slidesManager.current.max) !== null && _slidesManager_current_max !== void 0 ? _slidesManager_current_max : 0;
-        var _slidesManager_current_min;
-        const localMin = (_slidesManager_current_min = slidesManager.current.min) !== null && _slidesManager_current_min !== void 0 ? _slidesManager_current_min : 0;
-        const indent = shiftXCurrentRef.current + shiftXDeltaRef.current;
-        if (indent > localMax) {
-            return localMax + Number((indent - localMax) / 3);
-        } else if (indent < localMin) {
-            return localMin + Number((indent - localMin) / 3);
-        }
-        return indent;
-    };
     const calculateCanSlideLeft = ()=>{
         if (looped) {
             return !slidesManager.current.isFullyVisible;
         }
-        return !slidesManager.current.isFullyVisible && shiftXCurrentRef.current < 0;
+        const isStartShiftX = isBiggerOrEqual(shiftXCurrentRef.current, 0, isRtl);
+        return !slidesManager.current.isFullyVisible && !isStartShiftX;
     };
     const calculateCanSlideRight = ()=>{
         if (looped) {
@@ -88,7 +75,7 @@ export const CarouselBase = (_param)=>{
         }
         var _slidesManager_current_layerWidth;
         return !slidesManager.current.isFullyVisible && // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
-        (align === 'left' && slidesManager.current.containerWidth - shiftXCurrentRef.current < ((_slidesManager_current_layerWidth = slidesManager.current.layerWidth) !== null && _slidesManager_current_layerWidth !== void 0 ? _slidesManager_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
+        (align === 'left' && slidesManager.current.containerWidth - revertRtlValue(shiftXCurrentRef.current, isRtl) < ((_slidesManager_current_layerWidth = slidesManager.current.layerWidth) !== null && _slidesManager_current_layerWidth !== void 0 ? _slidesManager_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
         align !== 'left' && slideIndex < slidesManager.current.slides.length - 1);
     };
     const transformCssStyles = (shiftX, animation = false)=>{
@@ -109,23 +96,38 @@ export const CarouselBase = (_param)=>{
             });
         }
         if (layerRef.current) {
-            const indent = isDragging.current && !looped ? calculateDragIndent() : shiftX;
+            const indent = isDragging.current && !looped ? validateIndent(slidesManager.current, shiftXCurrentRef.current + shiftXDeltaRef.current, isRtl, false) : shiftX;
             layerRef.current.style.transform = `translate3d(${indent}px, 0, 0)`;
             layerRef.current.style.transition = animation ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)` : '';
         }
     };
+    const checkShiftOutOfBoundsFromStart = (shiftX, snaps)=>isBigger(shiftX, snaps[0], isRtl);
+    const checkShiftOutOfBoundsFromEnd = (shiftX, slides)=>{
+        /**
+     * Поскольку при `align="center"` слайды сдвинуты, прежде чем рассчитать крайнюю правую точку,
+     * нужно вычесть сдвиг слайдов
+     */ const firstSlideShift = align === 'center' ? (slidesManager.current.containerWidth - slidesManager.current.slides[0].width) / 2 : 0;
+        const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX - firstSlideShift;
+        return isRtl ? shiftX >= lastPoint : shiftX <= -lastPoint;
+    };
     const requestTransform = (shiftX, animation = false)=>{
         const { snaps, contentSize, slides } = slidesManager.current;
         if (animationFrameRef.current !== null) {
             cancelAnimationFrame(animationFrameRef.current);
         }
         animationFrameRef.current = requestAnimationFrame(()=>{
-            if (looped && shiftX > snaps[0]) {
-                shiftXCurrentRef.current = -contentSize + snaps[0];
+            /**
+       * Для бесконечной галереи проверяем, что при dnd мы прокрутили левее, чем первый слайд,
+       * чтобы сбросить `shiftXCurrentRef`
+       */ if (looped && checkShiftOutOfBoundsFromStart(shiftX, snaps)) {
+                const firstSnap = revertRtlValue(snaps[0], isRtl);
+                shiftXCurrentRef.current = revertRtlValue(-contentSize + firstSnap, isRtl);
                 shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;
             }
-            const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;
-            if (looped && shiftX <= -lastPoint) {
+            /**
+       * Для бесконечной галереи проверяем, что при dnd мы прокрутили правее, чем последний слайд,
+       * чтобы правильно пересчитать `shiftXCurrentRef`
+       */ if (looped && checkShiftOutOfBoundsFromEnd(shiftX, slides)) {
                 shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
             }
             transformCssStyles(shiftX, animation);
@@ -133,16 +135,26 @@ export const CarouselBase = (_param)=>{
     };
     const initializeSlides = ()=>{
         var _localSlides_slideIndex;
-        if (!rootRef.current || !viewportRef.current) {
+        if (!rootRef.current || !viewportRef.current || !layerRef.current) {
             return;
         }
+        const layerOffsetWidth = layerRef.current.offsetWidth;
+        const calcRtlCoord = (element)=>{
+            const offsetLeft = element.offsetLeft;
+            const offsetWidth = element.offsetWidth;
+            return layerOffsetWidth - offsetLeft - offsetWidth;
+        };
         let localSlides = React.Children.map(children, (_item, i)=>{
-            const elem = slidesStore.current[i] || {
-                offsetLeft: 0,
-                offsetWidth: 0
-            };
+            const elem = slidesStore.current[i];
+            if (!elem) {
+                return {
+                    coordX: 0,
+                    width: 0
+                };
+            }
+            const coordX = isRtl ? calcRtlCoord(elem) : elem.offsetLeft;
             return {
-                coordX: elem.offsetLeft,
+                coordX,
                 width: elem.offsetWidth
             };
         }) || [];
@@ -177,7 +189,8 @@ export const CarouselBase = (_param)=>{
             max: looped || onlyOneSlide ? null : calcMax({
                 slides: localSlides,
                 containerWidth,
-                isCenterAlign
+                isCenterAlign,
+                isRtl
             }),
             min: looped || onlyOneSlide ? null : calcMin({
                 containerWidth,
@@ -185,19 +198,26 @@ export const CarouselBase = (_param)=>{
                 slides: localSlides,
                 viewportOffsetWidth,
                 isFullyVisible,
-                align
+                align,
+                isRtl
             })
         });
-        const snaps = localSlides.map((_, index)=>calculateIndent(index, slidesManager.current, isCenterAlign, looped));
-        let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;
+        const snaps = localSlides.map((_, index)=>calculateIndent({
+                targetIndex: index,
+                slidesManager: slidesManager.current,
+                isCenter: isCenterAlign,
+                looped,
+                isRtl
+            }));
+        let contentSize = Math.abs(snaps[snaps.length - 1]) + localSlides[localSlides.length - 1].width;
         if (align === 'center') {
-            contentSize += snaps[0];
+            contentSize += revertRtlValue(snaps[0], isRtl);
         }
         slidesManager.current.snaps = snaps;
         slidesManager.current.contentSize = contentSize;
         // Если галерея не зациклена и слайд всего один, то рассчитывать loopPoints тоже не надо
         if (looped && !onlyOneSlide && !isFullyVisible) {
-            slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);
+            slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth, isRtl);
         }
         shiftXCurrentRef.current = snaps[slideIndex];
         initialized.current = true;
@@ -219,12 +239,14 @@ export const CarouselBase = (_param)=>{
         const { snaps, slides } = slidesManager.current;
         const indent = snaps[slideIndex];
         let startPoint = shiftXCurrentRef.current;
+        const fromLastToFirst = isLowerOrEqual(shiftXCurrentRef.current, snaps[snaps.length - 1], isRtl);
         /**
      * Переключаемся с последнего элемента на первый
      * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) "вперед"
      * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения
-     */ if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {
-            const distance = Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;
+     */ if (indent === snaps[0] && fromLastToFirst) {
+            const endEdge = revertRtlValue(Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width, isRtl);
+            const distance = endEdge + startPoint;
             addToAnimationQueue(getAnimateFunction((progress)=>{
                 const shiftX = startPoint + progress * distance * -1;
                 transformCssStyles(shiftX);
@@ -240,13 +262,14 @@ export const CarouselBase = (_param)=>{
        * Для корректной анимации сначала задаем первым видимым слайдам смещение
        * В следующем кадре начинаем анимация прокрутки "назад"
        */ } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {
-            startPoint = indent - slides[slides.length - 1].width;
+            startPoint = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
             addToAnimationQueue(()=>{
                 requestAnimationFrame(()=>{
-                    const shiftX = indent - slides[slides.length - 1].width;
+                    const shiftX = indent - revertRtlValue(slides[slides.length - 1].width, isRtl);
                     transformCssStyles(shiftX);
                     getAnimateFunction((progress)=>{
-                        transformCssStyles(startPoint + progress * slides[slides.length - 1].width);
+                        const diff = revertRtlValue(progress * slides[slides.length - 1].width, isRtl);
+                        transformCssStyles(startPoint + diff);
                     })();
                 });
             });
@@ -298,21 +321,22 @@ export const CarouselBase = (_param)=>{
     useIsomorphicLayoutEffect(initializeSlides, [
         align,
         slideWidth,
-        looped
+        looped,
+        isRtl
     ]);
     const calculateMinDeltaXToSlide = ()=>{
         return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;
     };
     const slideLeft = (event)=>{
         if (slideIndex > 0) {
-            shiftXCurrentRef.current += calculateMinDeltaXToSlide();
+            shiftXCurrentRef.current += revertRtlValue(calculateMinDeltaXToSlide(), isRtl);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length);
         onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(event);
     };
     const slideRight = (event)=>{
         if (slideIndex < slidesManager.current.slides.length - 1) {
-            shiftXCurrentRef.current -= calculateMinDeltaXToSlide();
+            shiftXCurrentRef.current -= revertRtlValue(calculateMinDeltaXToSlide(), isRtl);
         }
         onChange === null || onChange === void 0 ? void 0 : onChange((slideIndex + 1) % slidesManager.current.slides.length);
         onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(event);
@@ -348,7 +372,8 @@ export const CarouselBase = (_param)=>{
                     currentShiftX: shiftXCurrentRef.current,
                     currentShiftXDelta: shiftXDeltaRef.current,
                     max: slidesManager.current.max,
-                    looped
+                    looped,
+                    isRtl
                 });
             }
             onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e, targetIndex);