@vkontakte/vkui 7.0.1 → 7.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ActionSheet/types.d.ts +1 -1
- package/dist/components/ActionSheet/types.d.ts.map +1 -1
- package/dist/components/ActionSheet/types.js.map +1 -1
- package/dist/components/Alert/Alert.d.ts +1 -1
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/AppRoot/AppRoot.d.ts +1 -1
- package/dist/components/AppRoot/AppRoot.d.ts.map +1 -1
- package/dist/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/components/AppRoot/AppRootContext.d.ts +2 -2
- package/dist/components/AppRoot/AppRootContext.d.ts.map +1 -1
- package/dist/components/AppRoot/AppRootContext.js.map +1 -1
- package/dist/components/AppRoot/AppRootPortal.d.ts +1 -1
- package/dist/components/AppRoot/AppRootPortal.d.ts.map +1 -1
- package/dist/components/AppRoot/AppRootPortal.js.map +1 -1
- package/dist/components/AppRoot/ScrollContext.d.ts +1 -1
- package/dist/components/AppRoot/ScrollContext.d.ts.map +1 -1
- package/dist/components/AppRoot/ScrollContext.js.map +1 -1
- package/dist/components/AspectRatio/AspectRatio.d.ts +7 -3
- package/dist/components/AspectRatio/AspectRatio.d.ts.map +1 -1
- package/dist/components/AspectRatio/AspectRatio.js +1 -1
- package/dist/components/AspectRatio/AspectRatio.js.map +1 -1
- package/dist/components/Calendar/Calendar.d.ts +3 -4
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +81 -64
- package/dist/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/CalendarDay/CalendarDay.d.ts +3 -0
- package/dist/components/CalendarDay/CalendarDay.d.ts.map +1 -1
- package/dist/components/CalendarDay/CalendarDay.js +3 -1
- package/dist/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/components/CalendarDays/CalendarDays.d.ts +3 -0
- package/dist/components/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/dist/components/CalendarDays/CalendarDays.js.map +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.d.ts +12 -0
- package/dist/components/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.js +4 -2
- package/dist/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts +7 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.js +108 -93
- package/dist/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/components/CalendarTime/CalendarTime.d.ts +20 -4
- package/dist/components/CalendarTime/CalendarTime.d.ts.map +1 -1
- package/dist/components/CalendarTime/CalendarTime.js +68 -9
- package/dist/components/CalendarTime/CalendarTime.js.map +1 -1
- package/dist/components/CardScroll/CardScroll.d.ts +2 -3
- package/dist/components/CardScroll/CardScroll.d.ts.map +1 -1
- package/dist/components/CardScroll/CardScroll.js +6 -2
- package/dist/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/components/CarouselBase/Bullets.d.ts +16 -0
- package/dist/components/CarouselBase/Bullets.d.ts.map +1 -0
- package/dist/components/CarouselBase/Bullets.js +21 -0
- package/dist/components/CarouselBase/Bullets.js.map +1 -0
- package/dist/components/CarouselBase/CarouselBase.d.ts +4 -0
- package/dist/components/CarouselBase/CarouselBase.d.ts.map +1 -0
- package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/CarouselBase.js +175 -98
- package/dist/components/CarouselBase/CarouselBase.js.map +1 -0
- package/dist/components/CarouselBase/CarouselViewPort.d.ts +14 -0
- package/dist/components/CarouselBase/CarouselViewPort.d.ts.map +1 -0
- package/dist/components/CarouselBase/CarouselViewPort.js +29 -0
- package/dist/components/CarouselBase/CarouselViewPort.js.map +1 -0
- package/dist/components/CarouselBase/ScrollArrows.d.ts +23 -0
- package/dist/components/CarouselBase/ScrollArrows.d.ts.map +1 -0
- package/dist/components/CarouselBase/ScrollArrows.js +34 -0
- package/dist/components/CarouselBase/ScrollArrows.js.map +1 -0
- package/dist/components/CarouselBase/constants.d.ts.map +1 -0
- package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/constants.js +5 -1
- package/dist/components/CarouselBase/constants.js.map +1 -0
- package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/helpers.d.ts +13 -4
- package/dist/components/CarouselBase/helpers.d.ts.map +1 -0
- package/dist/{cssm/components/BaseGallery → components}/CarouselBase/helpers.js +41 -5
- package/dist/components/CarouselBase/helpers.js.map +1 -0
- package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/hooks.d.ts +1 -1
- package/dist/components/CarouselBase/hooks.d.ts.map +1 -0
- package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/hooks.js +2 -2
- package/dist/components/CarouselBase/hooks.js.map +1 -0
- package/dist/components/CarouselBase/types.d.ts +125 -0
- package/dist/components/CarouselBase/types.d.ts.map +1 -0
- package/dist/components/CarouselBase/types.js.map +1 -0
- package/dist/components/ChipsInput/ChipsInput.d.ts +1 -1
- package/dist/components/ChipsInput/ChipsInput.d.ts.map +1 -1
- package/dist/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/components/ChipsInput/useChipsInput.d.ts +1 -1
- package/dist/components/ChipsInput/useChipsInput.d.ts.map +1 -1
- package/dist/components/ChipsInput/useChipsInput.js.map +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.d.ts +1 -1
- package/dist/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/components/ChipsSelect/useChipsSelect.d.ts +1 -1
- package/dist/components/ChipsSelect/useChipsSelect.d.ts.map +1 -1
- package/dist/components/ChipsSelect/useChipsSelect.js.map +1 -1
- package/dist/components/Clickable/useState.js.map +1 -1
- package/dist/components/Clickable/useStateWithDelay.js +1 -1
- package/dist/components/Clickable/useStateWithDelay.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProvider.d.ts.map +1 -1
- package/dist/components/ConfigProvider/ConfigProvider.js +8 -23
- package/dist/components/ConfigProvider/ConfigProvider.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderContext.d.ts +1 -0
- package/dist/components/ConfigProvider/ConfigProviderContext.d.ts.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderContext.js +22 -0
- package/dist/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderOverride.d.ts.map +1 -1
- package/dist/components/ConfigProvider/ConfigProviderOverride.js +2 -3
- package/dist/components/ConfigProvider/ConfigProviderOverride.js.map +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.d.ts +5 -1
- package/dist/components/CustomScrollView/CustomScrollView.d.ts.map +1 -1
- package/dist/components/CustomScrollView/CustomScrollView.js +9 -4
- package/dist/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.d.ts +6 -2
- package/dist/components/CustomSelect/CustomSelect.d.ts.map +1 -1
- package/dist/components/CustomSelect/CustomSelect.js +8 -4
- package/dist/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map +1 -1
- package/dist/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +24 -2
- package/dist/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput.js +41 -6
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +19 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.js +6 -4
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/Epic/Epic.d.ts.map +1 -1
- package/dist/components/Epic/Epic.js.map +1 -1
- package/dist/components/FixedLayout/FixedLayout.d.ts.map +1 -1
- package/dist/components/FixedLayout/FixedLayout.js +1 -2
- package/dist/components/FixedLayout/FixedLayout.js.map +1 -1
- package/dist/components/Gallery/Gallery.d.ts +2 -3
- package/dist/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/components/Gallery/Gallery.js +3 -6
- package/dist/components/Gallery/Gallery.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts +9 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +6 -4
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/Image/Image.d.ts +1 -0
- package/dist/components/Image/Image.d.ts.map +1 -1
- package/dist/components/Image/Image.js +2 -0
- package/dist/components/Image/Image.js.map +1 -1
- package/dist/components/ImageBase/ImageBase.d.ts +8 -1
- package/dist/components/ImageBase/ImageBase.d.ts.map +1 -1
- package/dist/components/ImageBase/ImageBase.js +39 -11
- package/dist/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts +29 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.d.ts.map +1 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js +96 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js.map +1 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/helpers.d.ts +4 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/helpers.d.ts.map +1 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/helpers.js +35 -0
- package/dist/components/ImageBase/ImageBaseFloatElement/helpers.js.map +1 -0
- package/dist/components/ImageBase/ImageBaseOverlay/hooks.d.ts +1 -1
- package/dist/components/ImageBase/ImageBaseOverlay/hooks.d.ts.map +1 -1
- package/dist/components/ImageBase/ImageBaseOverlay/hooks.js.map +1 -1
- package/dist/components/ImageBase/context.d.ts.map +1 -1
- package/dist/components/ImageBase/context.js +3 -1
- package/dist/components/ImageBase/context.js.map +1 -1
- package/dist/components/ImageBase/types.d.ts +2 -0
- package/dist/components/ImageBase/types.d.ts.map +1 -1
- package/dist/components/ImageBase/types.js.map +1 -1
- package/dist/components/ImageBase/validators.d.ts +2 -1
- package/dist/components/ImageBase/validators.d.ts.map +1 -1
- package/dist/components/ImageBase/validators.js.map +1 -1
- package/dist/components/ModalCardBase/ModalCardBase.d.ts +1 -1
- package/dist/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/components/ModalRoot/ModalRootContext.d.ts +1 -1
- package/dist/components/ModalRoot/ModalRootContext.d.ts.map +1 -1
- package/dist/components/ModalRoot/ModalRootContext.js.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +14 -1
- package/dist/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.js +13 -4
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.d.ts +2 -0
- package/dist/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.d.ts.map +1 -1
- package/dist/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js +2 -1
- package/dist/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js.map +1 -1
- package/dist/components/Popover/Popover.d.ts +2 -2
- package/dist/components/Popover/Popover.d.ts.map +1 -1
- package/dist/components/Popover/Popover.js +6 -126
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components/Popover/usePopover.d.ts +14 -0
- package/dist/components/Popover/usePopover.d.ts.map +1 -0
- package/dist/components/Popover/usePopover.js +138 -0
- package/dist/components/Popover/usePopover.js.map +1 -0
- package/dist/components/Popper/Popper.d.ts +1 -1
- package/dist/components/Popper/Popper.d.ts.map +1 -1
- package/dist/components/Popper/Popper.js.map +1 -1
- package/dist/components/PullToRefresh/PullToRefresh.js +1 -1
- package/dist/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/components/Removable/Removable.d.ts +2 -2
- package/dist/components/Removable/Removable.js.map +1 -1
- package/dist/components/RichCell/RichCell.d.ts +11 -1
- package/dist/components/RichCell/RichCell.d.ts.map +1 -1
- package/dist/components/RichCell/RichCell.js +15 -8
- package/dist/components/RichCell/RichCell.js.map +1 -1
- package/dist/components/Root/Root.d.ts.map +1 -1
- package/dist/components/Root/Root.js +3 -1
- package/dist/components/Root/Root.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.d.ts +2 -2
- package/dist/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControl.js +30 -10
- package/dist/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts +5 -3
- package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.d.ts.map +1 -1
- package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js +6 -17
- package/dist/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +3 -2
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.js +2 -2
- package/dist/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/components/Slider/Slider.d.ts +9 -1
- package/dist/components/Slider/Slider.d.ts.map +1 -1
- package/dist/components/Slider/Slider.js +5 -1
- package/dist/components/Slider/Slider.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.js +1 -1
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/SplitCol/SplitColContext.d.ts +1 -1
- package/dist/components/SplitCol/SplitColContext.d.ts.map +1 -1
- package/dist/components/SplitCol/SplitColContext.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts.map +1 -1
- package/dist/components/Tabs/Tabs.js +2 -82
- package/dist/components/Tabs/Tabs.js.map +1 -1
- package/dist/components/Textarea/Textarea.js +2 -2
- package/dist/components/Textarea/Textarea.js.map +1 -1
- package/dist/components/Textarea/useResizeTextarea.d.ts +1 -1
- package/dist/components/Textarea/useResizeTextarea.d.ts.map +1 -1
- package/dist/components/Textarea/useResizeTextarea.js +1 -1
- package/dist/components/Textarea/useResizeTextarea.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +2 -2
- package/dist/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/components/Tooltip/Tooltip.js +4 -2
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/UsersStack/UsersStack.d.ts +1 -1
- package/dist/components/UsersStack/UsersStack.d.ts.map +1 -1
- package/dist/components/UsersStack/UsersStack.js +16 -5
- package/dist/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/components/View/View.d.ts.map +1 -1
- package/dist/components/View/View.js +3 -1
- package/dist/components/View/View.js.map +1 -1
- package/dist/components/View/ViewInfinite.d.ts.map +1 -1
- package/dist/components/View/ViewInfinite.js +3 -1
- package/dist/components/View/ViewInfinite.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/context/CalendarDirectionContext.d.ts +7 -0
- package/dist/context/CalendarDirectionContext.d.ts.map +1 -0
- package/dist/context/CalendarDirectionContext.js +7 -0
- package/dist/context/CalendarDirectionContext.js.map +1 -0
- package/dist/cssm/components/ActionSheet/types.js.map +1 -1
- package/dist/cssm/components/Alert/Alert.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRootContext.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRootPortal.js.map +1 -1
- package/dist/cssm/components/AppRoot/ScrollContext.js.map +1 -1
- package/dist/cssm/components/AspectRatio/AspectRatio.js +1 -1
- package/dist/cssm/components/AspectRatio/AspectRatio.js.map +1 -1
- package/dist/cssm/components/Calendar/Calendar.js +79 -64
- package/dist/cssm/components/Calendar/Calendar.js.map +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.js +3 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.module.css +4 -0
- package/dist/cssm/components/CalendarDays/CalendarDays.js.map +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js +4 -2
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.js +108 -94
- package/dist/cssm/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.js +67 -9
- package/dist/cssm/components/CalendarTime/CalendarTime.js.map +1 -1
- package/dist/cssm/components/CardScroll/CardScroll.js +3 -1
- package/dist/cssm/components/CardScroll/CardScroll.js.map +1 -1
- package/dist/cssm/components/CarouselBase/Bullets.js +22 -0
- package/dist/cssm/components/CarouselBase/Bullets.js.map +1 -0
- package/dist/cssm/components/{BaseGallery/CarouselBase → CarouselBase}/CarouselBase.js +164 -97
- package/dist/cssm/components/CarouselBase/CarouselBase.js.map +1 -0
- package/dist/cssm/components/{BaseGallery/BaseGallery.module.css → CarouselBase/CarouselBase.module.css} +21 -1
- package/dist/cssm/components/CarouselBase/CarouselViewPort.js +30 -0
- package/dist/cssm/components/CarouselBase/CarouselViewPort.js.map +1 -0
- package/dist/cssm/components/CarouselBase/ScrollArrows.js +35 -0
- package/dist/cssm/components/CarouselBase/ScrollArrows.js.map +1 -0
- package/dist/cssm/components/{BaseGallery/CarouselBase → CarouselBase}/constants.js +5 -1
- package/dist/cssm/components/CarouselBase/constants.js.map +1 -0
- package/dist/{components/BaseGallery → cssm/components}/CarouselBase/helpers.js +39 -5
- package/dist/cssm/components/CarouselBase/helpers.js.map +1 -0
- package/dist/cssm/components/{BaseGallery/CarouselBase → CarouselBase}/hooks.js +2 -2
- package/dist/cssm/components/CarouselBase/hooks.js.map +1 -0
- package/dist/cssm/components/CarouselBase/types.js.map +1 -0
- package/dist/cssm/components/ChipsInput/ChipsInput.js.map +1 -1
- package/dist/cssm/components/ChipsInput/useChipsInput.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/ChipsSelect.js.map +1 -1
- package/dist/cssm/components/ChipsSelect/useChipsSelect.js.map +1 -1
- package/dist/cssm/components/Clickable/useState.js.map +1 -1
- package/dist/cssm/components/Clickable/useStateWithDelay.js +1 -1
- package/dist/cssm/components/Clickable/useStateWithDelay.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProvider.js +8 -23
- package/dist/cssm/components/ConfigProvider/ConfigProvider.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js +22 -0
- package/dist/cssm/components/ConfigProvider/ConfigProviderContext.js.map +1 -1
- package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js +2 -3
- package/dist/cssm/components/ConfigProvider/ConfigProviderOverride.js.map +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.js +8 -4
- package/dist/cssm/components/CustomScrollView/CustomScrollView.js.map +1 -1
- package/dist/cssm/components/CustomScrollView/CustomScrollView.module.css +6 -2
- package/dist/cssm/components/CustomSelect/CustomSelect.js +6 -3
- package/dist/cssm/components/CustomSelect/CustomSelect.js.map +1 -1
- package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.js +37 -5
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +4 -3
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/Epic/Epic.js.map +1 -1
- package/dist/cssm/components/FixedLayout/FixedLayout.js +1 -2
- package/dist/cssm/components/FixedLayout/FixedLayout.js.map +1 -1
- package/dist/cssm/components/FormField/FormField.module.css +11 -11
- package/dist/cssm/components/Gallery/Gallery.js +3 -5
- package/dist/cssm/components/Gallery/Gallery.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +3 -3
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/Image/Image.js +2 -0
- package/dist/cssm/components/Image/Image.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.js +35 -9
- package/dist/cssm/components/ImageBase/ImageBase.js.map +1 -1
- package/dist/cssm/components/ImageBase/ImageBase.module.css +9 -0
- package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js +91 -0
- package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.js.map +1 -0
- package/dist/cssm/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css +134 -0
- package/dist/cssm/components/ImageBase/ImageBaseFloatElement/helpers.js +35 -0
- package/dist/cssm/components/ImageBase/ImageBaseFloatElement/helpers.js.map +1 -0
- package/dist/cssm/components/ImageBase/ImageBaseOverlay/hooks.js.map +1 -1
- package/dist/cssm/components/ImageBase/context.js +3 -1
- package/dist/cssm/components/ImageBase/context.js.map +1 -1
- package/dist/cssm/components/ImageBase/types.js.map +1 -1
- package/dist/cssm/components/ImageBase/validators.js.map +1 -1
- package/dist/cssm/components/ModalCardBase/ModalCardBase.js.map +1 -1
- package/dist/cssm/components/ModalRoot/ModalRootContext.js.map +1 -1
- package/dist/cssm/components/Pagination/Pagination.js +10 -4
- package/dist/cssm/components/Pagination/Pagination.js.map +1 -1
- package/dist/cssm/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js +2 -1
- package/dist/cssm/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.js.map +1 -1
- package/dist/cssm/components/Popover/Popover.js +5 -93
- package/dist/cssm/components/Popover/Popover.js.map +1 -1
- package/dist/cssm/components/Popover/usePopover.js +102 -0
- package/dist/cssm/components/Popover/usePopover.js.map +1 -0
- package/dist/cssm/components/Popper/Popper.js.map +1 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.js +1 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/cssm/components/Removable/Removable.js.map +1 -1
- package/dist/cssm/components/RichCell/RichCell.js +13 -8
- package/dist/cssm/components/RichCell/RichCell.js.map +1 -1
- package/dist/cssm/components/RichCell/RichCell.module.css +17 -3
- package/dist/cssm/components/Root/Root.js +3 -1
- package/dist/cssm/components/Root/Root.js.map +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControl.js +27 -7
- package/dist/cssm/components/SegmentedControl/SegmentedControl.js.map +1 -1
- package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js +5 -5
- package/dist/cssm/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.js.map +1 -1
- package/dist/cssm/components/Select/Select.js +1 -1
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Skeleton/Skeleton.js +2 -2
- package/dist/cssm/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/cssm/components/Slider/Slider.js +3 -1
- package/dist/cssm/components/Slider/Slider.js.map +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.js +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.module.css +12 -6
- package/dist/cssm/components/SplitCol/SplitColContext.js.map +1 -1
- package/dist/cssm/components/Tabs/Tabs.js +2 -82
- package/dist/cssm/components/Tabs/Tabs.js.map +1 -1
- package/dist/cssm/components/Textarea/Textarea.js +2 -2
- package/dist/cssm/components/Textarea/Textarea.js.map +1 -1
- package/dist/cssm/components/Textarea/useResizeTextarea.js +1 -1
- package/dist/cssm/components/Textarea/useResizeTextarea.js.map +1 -1
- package/dist/cssm/components/Tooltip/Tooltip.js +3 -2
- package/dist/cssm/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.js +15 -4
- package/dist/cssm/components/UsersStack/UsersStack.js.map +1 -1
- package/dist/cssm/components/UsersStack/UsersStack.module.css +27 -17
- package/dist/cssm/components/View/View.js +3 -1
- package/dist/cssm/components/View/View.js.map +1 -1
- package/dist/cssm/components/View/ViewInfinite.js +3 -1
- package/dist/cssm/components/View/ViewInfinite.js.map +1 -1
- package/dist/cssm/context/CalendarDirectionContext.js +7 -0
- package/dist/cssm/context/CalendarDirectionContext.js.map +1 -0
- package/dist/cssm/helpers/getMergedSameEventsByProps.js.map +1 -1
- package/dist/cssm/hooks/useDateInput.js.map +1 -1
- package/dist/cssm/hooks/useDirection.js.map +1 -1
- package/dist/cssm/hooks/useDraggableWithDomApi/types.js.map +1 -1
- package/dist/cssm/hooks/useEnsuredControl.js +1 -1
- package/dist/cssm/hooks/useEnsuredControl.js.map +1 -1
- package/dist/cssm/hooks/useExternRef.js.map +1 -1
- package/dist/cssm/hooks/useFocusTrap.js.map +1 -1
- package/dist/cssm/hooks/useGlobalOnClickOutside.js.map +1 -1
- package/dist/cssm/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/cssm/hooks/useMutationObserver.js.map +1 -1
- package/dist/cssm/hooks/useNativeFormResetListener.js.map +1 -1
- package/dist/cssm/hooks/usePatchChildren.js.map +1 -1
- package/dist/cssm/hooks/usePrevious.js +1 -1
- package/dist/cssm/hooks/usePrevious.js.map +1 -1
- package/dist/cssm/hooks/useResizeObserver.js +20 -4
- package/dist/cssm/hooks/useResizeObserver.js.map +1 -1
- package/dist/cssm/hooks/useStateWithPrev.js.map +1 -1
- package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js.map +1 -1
- package/dist/cssm/hooks/useSyncHTMLWithTokens.js.map +1 -1
- package/dist/cssm/hooks/useTabsNavigation.js +90 -0
- package/dist/cssm/hooks/useTabsNavigation.js.map +1 -0
- package/dist/cssm/index.js +4 -0
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/animation/useCSSTransition.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingMiddlewaresBootstrap/index.js +4 -4
- package/dist/cssm/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +10 -3
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/cssm/lib/utils.js.map +1 -1
- package/dist/cssm/styles/constants.css +1 -0
- package/dist/helpers/getMergedSameEventsByProps.d.ts +1 -1
- package/dist/helpers/getMergedSameEventsByProps.d.ts.map +1 -1
- package/dist/helpers/getMergedSameEventsByProps.js.map +1 -1
- package/dist/hooks/useDateInput.d.ts +3 -3
- package/dist/hooks/useDateInput.d.ts.map +1 -1
- package/dist/hooks/useDateInput.js.map +1 -1
- package/dist/hooks/useDirection.d.ts +2 -2
- package/dist/hooks/useDirection.d.ts.map +1 -1
- package/dist/hooks/useDirection.js.map +1 -1
- package/dist/hooks/useDraggableWithDomApi/types.d.ts +1 -1
- package/dist/hooks/useDraggableWithDomApi/types.d.ts.map +1 -1
- package/dist/hooks/useDraggableWithDomApi/types.js.map +1 -1
- package/dist/hooks/useEnsuredControl.js +1 -1
- package/dist/hooks/useEnsuredControl.js.map +1 -1
- package/dist/hooks/useExternRef.d.ts +1 -1
- package/dist/hooks/useExternRef.d.ts.map +1 -1
- package/dist/hooks/useExternRef.js.map +1 -1
- package/dist/hooks/useFocusTrap.d.ts +1 -1
- package/dist/hooks/useFocusTrap.d.ts.map +1 -1
- package/dist/hooks/useFocusTrap.js.map +1 -1
- package/dist/hooks/useGlobalOnClickOutside.d.ts +1 -1
- package/dist/hooks/useGlobalOnClickOutside.d.ts.map +1 -1
- package/dist/hooks/useGlobalOnClickOutside.js.map +1 -1
- package/dist/hooks/useKeyboardInputTracker.d.ts +1 -1
- package/dist/hooks/useKeyboardInputTracker.d.ts.map +1 -1
- package/dist/hooks/useKeyboardInputTracker.js.map +1 -1
- package/dist/hooks/useMutationObserver.d.ts +1 -1
- package/dist/hooks/useMutationObserver.d.ts.map +1 -1
- package/dist/hooks/useMutationObserver.js.map +1 -1
- package/dist/hooks/useNativeFormResetListener.d.ts +1 -1
- package/dist/hooks/useNativeFormResetListener.d.ts.map +1 -1
- package/dist/hooks/useNativeFormResetListener.js.map +1 -1
- package/dist/hooks/usePatchChildren.d.ts +2 -2
- package/dist/hooks/usePatchChildren.d.ts.map +1 -1
- package/dist/hooks/usePatchChildren.js.map +1 -1
- package/dist/hooks/usePrevious.js +1 -1
- package/dist/hooks/usePrevious.js.map +1 -1
- package/dist/hooks/useResizeObserver.d.ts +1 -1
- package/dist/hooks/useResizeObserver.d.ts.map +1 -1
- package/dist/hooks/useResizeObserver.js +20 -4
- package/dist/hooks/useResizeObserver.js.map +1 -1
- package/dist/hooks/useStateWithPrev.d.ts.map +1 -1
- package/dist/hooks/useStateWithPrev.js.map +1 -1
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.d.ts +1 -1
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.d.ts.map +1 -1
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.js.map +1 -1
- package/dist/hooks/useSyncHTMLWithTokens.d.ts +1 -1
- package/dist/hooks/useSyncHTMLWithTokens.d.ts.map +1 -1
- package/dist/hooks/useSyncHTMLWithTokens.js.map +1 -1
- package/dist/hooks/useTabsNavigation.d.ts +5 -0
- package/dist/hooks/useTabsNavigation.d.ts.map +1 -0
- package/dist/hooks/useTabsNavigation.js +90 -0
- package/dist/hooks/useTabsNavigation.js.map +1 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/lib/animation/useCSSTransition.d.ts +1 -1
- package/dist/lib/animation/useCSSTransition.d.ts.map +1 -1
- package/dist/lib/animation/useCSSTransition.js.map +1 -1
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.d.ts +1 -1
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.js +4 -4
- package/dist/lib/floating/useFloatingMiddlewaresBootstrap/index.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts +10 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +10 -3
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/lib/utils.d.ts +1 -1
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +6 -6
- package/src/components/ActionSheet/types.ts +1 -1
- package/src/components/Alert/Alert.tsx +1 -1
- package/src/components/AppRoot/AppRoot.tsx +1 -1
- package/src/components/AppRoot/AppRootContext.ts +2 -2
- package/src/components/AppRoot/AppRootPortal.tsx +1 -1
- package/src/components/AppRoot/ScrollContext.tsx +1 -1
- package/src/components/AspectRatio/AspectRatio.tsx +11 -4
- package/src/components/Calendar/Calendar.tsx +90 -72
- package/src/components/CalendarDay/CalendarDay.module.css +4 -0
- package/src/components/CalendarDay/CalendarDay.tsx +10 -1
- package/src/components/CalendarDays/CalendarDays.tsx +3 -0
- package/src/components/CalendarHeader/CalendarHeader.tsx +17 -2
- package/src/components/CalendarRange/CalendarRange.tsx +110 -84
- package/src/components/CalendarTime/CalendarTime.tsx +104 -16
- package/src/components/CardScroll/CardScroll.tsx +8 -2
- package/src/components/CarouselBase/Bullets.tsx +36 -0
- package/src/components/{BaseGallery/BaseGallery.module.css → CarouselBase/CarouselBase.module.css} +19 -1
- package/src/components/CarouselBase/CarouselBase.tsx +502 -0
- package/src/components/CarouselBase/CarouselViewPort.tsx +54 -0
- package/src/components/CarouselBase/ScrollArrows.tsx +80 -0
- package/src/components/{BaseGallery/CarouselBase → CarouselBase}/constants.ts +4 -0
- package/src/components/{BaseGallery/CarouselBase → CarouselBase}/helpers.ts +67 -7
- package/src/components/{BaseGallery/CarouselBase → CarouselBase}/hooks.ts +2 -2
- package/src/components/CarouselBase/types.ts +135 -0
- package/src/components/ChipsInput/ChipsInput.tsx +1 -1
- package/src/components/ChipsInput/useChipsInput.ts +2 -2
- package/src/components/ChipsSelect/ChipsSelect.tsx +1 -1
- package/src/components/ChipsSelect/useChipsSelect.ts +1 -1
- package/src/components/Clickable/useState.tsx +2 -2
- package/src/components/Clickable/useStateWithDelay.tsx +1 -1
- package/src/components/ConfigProvider/ConfigProvider.tsx +8 -35
- package/src/components/ConfigProvider/ConfigProviderContext.tsx +36 -0
- package/src/components/ConfigProvider/ConfigProviderOverride.tsx +2 -5
- package/src/components/CustomScrollView/CustomScrollView.module.css +6 -2
- package/src/components/CustomScrollView/CustomScrollView.tsx +13 -2
- package/src/components/CustomSelect/CustomSelect.tsx +12 -4
- package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx +1 -1
- package/src/components/DateInput/DateInput.tsx +62 -5
- package/src/components/DateRangeInput/DateRangeInput.tsx +22 -2
- package/src/components/Epic/Epic.tsx +5 -3
- package/src/components/FixedLayout/FixedLayout.tsx +1 -2
- package/src/components/FormField/FormField.module.css +11 -11
- package/src/components/Gallery/Gallery.tsx +4 -10
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +12 -2
- package/src/components/Image/Image.tsx +4 -0
- package/src/components/ImageBase/ImageBase.module.css +9 -0
- package/src/components/ImageBase/ImageBase.tsx +69 -10
- package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css +134 -0
- package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx +168 -0
- package/src/components/ImageBase/ImageBaseFloatElement/helpers.ts +44 -0
- package/src/components/ImageBase/ImageBaseOverlay/hooks.ts +1 -1
- package/src/components/ImageBase/context.ts +2 -0
- package/src/components/ImageBase/types.ts +2 -0
- package/src/components/ImageBase/validators.ts +5 -4
- package/src/components/ModalCardBase/ModalCardBase.tsx +1 -1
- package/src/components/ModalRoot/ModalRootContext.tsx +3 -1
- package/src/components/Pagination/Pagination.tsx +23 -4
- package/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx +4 -2
- package/src/components/Popover/Popover.tsx +6 -166
- package/src/components/Popover/usePopover.tsx +183 -0
- package/src/components/Popper/Popper.tsx +1 -1
- package/src/components/PullToRefresh/PullToRefresh.tsx +1 -1
- package/src/components/Removable/Removable.tsx +2 -2
- package/src/components/RichCell/RichCell.module.css +17 -3
- package/src/components/RichCell/RichCell.tsx +28 -8
- package/src/components/Root/Root.tsx +4 -2
- package/src/components/SegmentedControl/SegmentedControl.tsx +46 -14
- package/src/components/SegmentedControl/SegmentedControlOption/SegmentedControlOption.tsx +14 -10
- package/src/components/Select/Select.tsx +1 -0
- package/src/components/Skeleton/Skeleton.tsx +3 -3
- package/src/components/Slider/Slider.tsx +12 -0
- package/src/components/Snackbar/Snackbar.tsx +1 -1
- package/src/components/Snackbar/subcomponents/Basic/Basic.module.css +12 -6
- package/src/components/SplitCol/SplitColContext.tsx +1 -1
- package/src/components/Tabs/Tabs.tsx +2 -99
- package/src/components/Textarea/Textarea.tsx +2 -2
- package/src/components/Textarea/useResizeTextarea.ts +3 -3
- package/src/components/Tooltip/Tooltip.tsx +3 -0
- package/src/components/UsersStack/UsersStack.module.css +27 -17
- package/src/components/UsersStack/UsersStack.tsx +24 -3
- package/src/components/View/View.tsx +9 -5
- package/src/components/View/ViewInfinite.tsx +5 -3
- package/src/context/CalendarDirectionContext.ts +12 -0
- package/src/helpers/getMergedSameEventsByProps.ts +1 -1
- package/src/hooks/useDateInput.ts +5 -5
- package/src/hooks/useDirection.ts +3 -3
- package/src/hooks/useDraggableWithDomApi/types.ts +1 -1
- package/src/hooks/useEnsuredControl.ts +1 -1
- package/src/hooks/useExternRef.ts +2 -2
- package/src/hooks/useFocusTrap.ts +1 -1
- package/src/hooks/useGlobalOnClickOutside.ts +1 -1
- package/src/hooks/useKeyboardInputTracker.ts +1 -1
- package/src/hooks/useMutationObserver.ts +1 -1
- package/src/hooks/useNativeFormResetListener.ts +1 -1
- package/src/hooks/usePatchChildren.ts +2 -9
- package/src/hooks/usePrevious.ts +1 -1
- package/src/hooks/useResizeObserver.ts +30 -6
- package/src/hooks/useStateWithPrev.ts +1 -5
- package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts +1 -1
- package/src/hooks/useSyncHTMLWithTokens.ts +1 -1
- package/src/hooks/useTabsNavigation.ts +104 -0
- package/src/index.ts +7 -0
- package/src/lib/animation/useCSSTransition.ts +1 -1
- package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts +9 -9
- package/src/lib/floating/useFloatingWithInteractions/types.ts +15 -5
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +7 -2
- package/src/lib/utils.ts +2 -2
- package/src/styles/constants.css +1 -0
- package/dist/components/BaseGallery/BaseGallery.d.ts +0 -4
- package/dist/components/BaseGallery/BaseGallery.d.ts.map +0 -1
- package/dist/components/BaseGallery/BaseGallery.js +0 -321
- package/dist/components/BaseGallery/BaseGallery.js.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.d.ts +0 -4
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/CarouselBase.js.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/constants.d.ts.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/constants.js.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/helpers.d.ts.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/helpers.js.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/hooks.d.ts.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/hooks.js.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/types.d.ts +0 -54
- package/dist/components/BaseGallery/CarouselBase/types.d.ts.map +0 -1
- package/dist/components/BaseGallery/CarouselBase/types.js.map +0 -1
- package/dist/components/BaseGallery/helpers.d.ts +0 -13
- package/dist/components/BaseGallery/helpers.d.ts.map +0 -1
- package/dist/components/BaseGallery/helpers.js +0 -24
- package/dist/components/BaseGallery/helpers.js.map +0 -1
- package/dist/components/BaseGallery/types.d.ts +0 -55
- package/dist/components/BaseGallery/types.d.ts.map +0 -1
- package/dist/components/BaseGallery/types.js.map +0 -1
- package/dist/cssm/components/BaseGallery/BaseGallery.js +0 -293
- package/dist/cssm/components/BaseGallery/BaseGallery.js.map +0 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/CarouselBase.js.map +0 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/constants.js.map +0 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/helpers.js.map +0 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/hooks.js.map +0 -1
- package/dist/cssm/components/BaseGallery/CarouselBase/types.js +0 -3
- package/dist/cssm/components/BaseGallery/CarouselBase/types.js.map +0 -1
- package/dist/cssm/components/BaseGallery/helpers.js +0 -24
- package/dist/cssm/components/BaseGallery/helpers.js.map +0 -1
- package/dist/cssm/components/BaseGallery/types.js +0 -3
- package/dist/cssm/components/BaseGallery/types.js.map +0 -1
- package/dist/cssm/hooks/useObjectMemo.js +0 -15
- package/dist/cssm/hooks/useObjectMemo.js.map +0 -1
- package/dist/hooks/useObjectMemo.d.ts +0 -5
- package/dist/hooks/useObjectMemo.d.ts.map +0 -1
- package/dist/hooks/useObjectMemo.js +0 -15
- package/dist/hooks/useObjectMemo.js.map +0 -1
- package/src/components/BaseGallery/BaseGallery.tsx +0 -380
- package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx +0 -399
- package/src/components/BaseGallery/CarouselBase/types.ts +0 -56
- package/src/components/BaseGallery/helpers.ts +0 -46
- package/src/components/BaseGallery/types.ts +0 -61
- package/src/hooks/useObjectMemo.ts +0 -16
- /package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/constants.d.ts +0 -0
- /package/dist/components/{BaseGallery/CarouselBase → CarouselBase}/types.js +0 -0
- /package/dist/{components/BaseGallery → cssm/components/CarouselBase}/types.js +0 -0
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import type * as React from 'react';
|
|
2
|
-
import type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
|
|
3
|
-
import type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
|
|
4
|
-
import type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';
|
|
5
|
-
export interface GallerySlidesState {
|
|
6
|
-
coordX: number;
|
|
7
|
-
width: number;
|
|
8
|
-
}
|
|
9
|
-
export interface ShiftingState {
|
|
10
|
-
deltaX: number;
|
|
11
|
-
shiftX: number;
|
|
12
|
-
animation?: boolean;
|
|
13
|
-
dragging: boolean;
|
|
14
|
-
}
|
|
15
|
-
export interface LayoutState {
|
|
16
|
-
containerWidth: number;
|
|
17
|
-
viewportOffsetWidth: number;
|
|
18
|
-
layerWidth: number;
|
|
19
|
-
min?: number;
|
|
20
|
-
max: number;
|
|
21
|
-
slides: GallerySlidesState[];
|
|
22
|
-
isFullyVisible: boolean;
|
|
23
|
-
}
|
|
24
|
-
export interface BaseGalleryProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>, HasAlign, HasRef<HTMLElement> {
|
|
25
|
-
slideWidth?: string | number;
|
|
26
|
-
slideIndex?: number;
|
|
27
|
-
onDragStart?: CustomTouchEventHandler;
|
|
28
|
-
onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;
|
|
29
|
-
onChange?: (current: number) => void;
|
|
30
|
-
/**
|
|
31
|
-
* Будет вызвано при клике на кнопку-стрелку влево
|
|
32
|
-
*/
|
|
33
|
-
onPrevClick?: (event: React.MouseEvent) => void;
|
|
34
|
-
/**
|
|
35
|
-
* Будет вызвано при клике на кнопку-стрелку вправо
|
|
36
|
-
*/
|
|
37
|
-
onNextClick?: (event: React.MouseEvent) => void;
|
|
38
|
-
bullets?: 'dark' | 'light' | false;
|
|
39
|
-
/**
|
|
40
|
-
* Позволяет отключить реагирование на тач-события
|
|
41
|
-
*/
|
|
42
|
-
dragDisabled?: boolean;
|
|
43
|
-
showArrows?: boolean;
|
|
44
|
-
hasPointer?: boolean;
|
|
45
|
-
arrowSize?: ScrollArrowProps['size'];
|
|
46
|
-
/**
|
|
47
|
-
* Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий
|
|
48
|
-
*/
|
|
49
|
-
arrowPrevLabel?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий
|
|
52
|
-
*/
|
|
53
|
-
arrowNextLabel?: string;
|
|
54
|
-
}
|
|
55
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/BaseGallery/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AAEhF,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,WAAW;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,kBAAkB,EAAE,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAC,EAC/F,QAAQ,EACR,MAAM,CAAC,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,uBAAuB,CAAC;IACtC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IACnC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n coordX: number;\n width: number;\n}\n\nexport interface ShiftingState {\n deltaX: number;\n shiftX: number;\n animation?: boolean;\n dragging: boolean;\n}\n\nexport interface LayoutState {\n containerWidth: number;\n viewportOffsetWidth: number;\n layerWidth: number;\n min?: number;\n max: number;\n slides: GallerySlidesState[];\n isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n HasAlign,\n HasRef<HTMLElement> {\n slideWidth?: string | number;\n slideIndex?: number;\n onDragStart?: CustomTouchEventHandler;\n onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;\n onChange?: (current: number) => void;\n /**\n * Будет вызвано при клике на кнопку-стрелку влево\n */\n onPrevClick?: (event: React.MouseEvent) => void;\n /**\n * Будет вызвано при клике на кнопку-стрелку вправо\n */\n onNextClick?: (event: React.MouseEvent) => void;\n bullets?: 'dark' | 'light' | false;\n /**\n * Позволяет отключить реагирование на тач-события\n */\n dragDisabled?: boolean;\n showArrows?: boolean;\n hasPointer?: boolean;\n arrowSize?: ScrollArrowProps['size'];\n /**\n * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий\n */\n arrowPrevLabel?: string;\n /**\n * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий\n */\n arrowNextLabel?: string;\n}\n"],"names":[],"mappings":"AA2BA,WAiCC"}
|
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
|
-
import { classNames } from "@vkontakte/vkjs";
|
|
5
|
-
import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer.js";
|
|
6
|
-
import { useExternRef } from "../../hooks/useExternRef.js";
|
|
7
|
-
import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
|
|
8
|
-
import { useDOM } from "../../lib/dom.js";
|
|
9
|
-
import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
|
|
10
|
-
import { RootComponent } from "../RootComponent/RootComponent.js";
|
|
11
|
-
import { ScrollArrow } from "../ScrollArrow/ScrollArrow.js";
|
|
12
|
-
import { Touch } from "../Touch/Touch.js";
|
|
13
|
-
import { calcMax, calcMin } from "./helpers.js";
|
|
14
|
-
import styles from "./BaseGallery.module.css";
|
|
15
|
-
const ANIMATION_DURATION = 0.24;
|
|
16
|
-
const LAYOUT_DEFAULT_STATE = {
|
|
17
|
-
containerWidth: 0,
|
|
18
|
-
viewportOffsetWidth: 0,
|
|
19
|
-
layerWidth: 0,
|
|
20
|
-
min: 0,
|
|
21
|
-
max: 0,
|
|
22
|
-
slides: [],
|
|
23
|
-
isFullyVisible: true
|
|
24
|
-
};
|
|
25
|
-
const SHIFT_DEFAULT_STATE = {
|
|
26
|
-
animation: undefined,
|
|
27
|
-
shiftX: 0,
|
|
28
|
-
dragging: false,
|
|
29
|
-
deltaX: 0,
|
|
30
|
-
indent: 0
|
|
31
|
-
};
|
|
32
|
-
const stylesBullets = {
|
|
33
|
-
dark: styles.bulletsDark,
|
|
34
|
-
light: styles.bulletsLight
|
|
35
|
-
};
|
|
36
|
-
export const BaseGallery = ({ bullets = false, getRootRef, children, slideWidth = '100%', slideIndex = 0, dragDisabled = false, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align = 'left', showArrows, getRef, arrowSize = 'm', ...restProps })=>{
|
|
37
|
-
const slidesStore = React.useRef({});
|
|
38
|
-
const layoutState = React.useRef(LAYOUT_DEFAULT_STATE);
|
|
39
|
-
const [shiftState, setShiftState] = React.useState(SHIFT_DEFAULT_STATE);
|
|
40
|
-
const rootRef = useExternRef(getRootRef);
|
|
41
|
-
const viewportRef = useExternRef(getRef);
|
|
42
|
-
const { window } = useDOM();
|
|
43
|
-
const hasPointer = useAdaptivityHasPointer();
|
|
44
|
-
const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';
|
|
45
|
-
const validateIndent = (value)=>{
|
|
46
|
-
const localMax = layoutState.current.max ?? 0;
|
|
47
|
-
const localMin = layoutState.current.min ?? 0;
|
|
48
|
-
if (value < localMin) {
|
|
49
|
-
return localMin;
|
|
50
|
-
} else if (value > localMax) {
|
|
51
|
-
return localMax;
|
|
52
|
-
}
|
|
53
|
-
return value;
|
|
54
|
-
};
|
|
55
|
-
/*
|
|
56
|
-
* Считает отступ слоя галереи
|
|
57
|
-
*/ const calculateIndent = (targetIndex)=>{
|
|
58
|
-
if (layoutState.current.isFullyVisible) {
|
|
59
|
-
return 0;
|
|
60
|
-
}
|
|
61
|
-
const targetSlide = layoutState.current.slides?.length ? layoutState.current.slides[targetIndex] : null;
|
|
62
|
-
if (targetSlide) {
|
|
63
|
-
const { coordX, width } = targetSlide;
|
|
64
|
-
if (isCenterWithCustomWidth) {
|
|
65
|
-
const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;
|
|
66
|
-
return viewportWidth / 2 - coordX - width / 2;
|
|
67
|
-
}
|
|
68
|
-
return validateIndent(-1 * coordX);
|
|
69
|
-
}
|
|
70
|
-
return 0;
|
|
71
|
-
};
|
|
72
|
-
/*
|
|
73
|
-
* Считает отступ слоя галереи во время драга
|
|
74
|
-
*/ const calculateDragIndent = ()=>{
|
|
75
|
-
const localMax = layoutState.current.max ?? 0;
|
|
76
|
-
const localMin = layoutState.current.min ?? 0;
|
|
77
|
-
const indent = shiftState.shiftX + shiftState.deltaX;
|
|
78
|
-
if (indent > localMax) {
|
|
79
|
-
return localMax + Number((indent - localMax) / 3);
|
|
80
|
-
} else if (indent < localMin) {
|
|
81
|
-
return localMin + Number((indent - localMin) / 3);
|
|
82
|
-
}
|
|
83
|
-
return indent;
|
|
84
|
-
};
|
|
85
|
-
const initializeSlides = (options = {})=>{
|
|
86
|
-
const localSlides = React.Children.map(children, (_item, i)=>{
|
|
87
|
-
const elem = slidesStore.current[`slide-${i}`];
|
|
88
|
-
return {
|
|
89
|
-
coordX: elem?.offsetLeft ?? 0,
|
|
90
|
-
width: elem?.offsetWidth ?? 0
|
|
91
|
-
};
|
|
92
|
-
}) ?? [];
|
|
93
|
-
const localContainerWidth = rootRef.current?.offsetWidth ?? 0;
|
|
94
|
-
const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;
|
|
95
|
-
const localLayerWidth = localSlides.reduce((val, slide)=>slide.width + val, 0);
|
|
96
|
-
const adjustShiftX = localSlides.length <= layoutState.current.slides.length || layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;
|
|
97
|
-
const currentSlideOffsetOnCenterAlignment = (localContainerWidth - (localSlides[slideIndex]?.width ?? 0)) / 2;
|
|
98
|
-
const isFullyVisible = align === 'center' ? localLayerWidth + currentSlideOffsetOnCenterAlignment <= localContainerWidth : localLayerWidth <= localContainerWidth;
|
|
99
|
-
layoutState.current = {
|
|
100
|
-
containerWidth: localContainerWidth,
|
|
101
|
-
viewportOffsetWidth: localViewportOffsetWidth,
|
|
102
|
-
layerWidth: localLayerWidth,
|
|
103
|
-
max: calcMax({
|
|
104
|
-
slides: localSlides,
|
|
105
|
-
viewportOffsetWidth: localViewportOffsetWidth,
|
|
106
|
-
isCenterWithCustomWidth
|
|
107
|
-
}),
|
|
108
|
-
min: calcMin({
|
|
109
|
-
containerWidth: localContainerWidth,
|
|
110
|
-
layerWidth: localLayerWidth,
|
|
111
|
-
slides: localSlides,
|
|
112
|
-
viewportOffsetWidth: localViewportOffsetWidth,
|
|
113
|
-
isCenterWithCustomWidth,
|
|
114
|
-
align
|
|
115
|
-
}),
|
|
116
|
-
slides: localSlides,
|
|
117
|
-
isFullyVisible
|
|
118
|
-
};
|
|
119
|
-
setShiftState((prevState)=>({
|
|
120
|
-
...prevState,
|
|
121
|
-
shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,
|
|
122
|
-
animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX)
|
|
123
|
-
}));
|
|
124
|
-
};
|
|
125
|
-
const onResize = ()=>{
|
|
126
|
-
if (shiftState.animation !== undefined) {
|
|
127
|
-
initializeSlides({
|
|
128
|
-
animation: false
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
};
|
|
132
|
-
useGlobalEventListener(window, 'resize', onResize);
|
|
133
|
-
useIsomorphicLayoutEffect(()=>{
|
|
134
|
-
initializeSlides({
|
|
135
|
-
animation: false
|
|
136
|
-
});
|
|
137
|
-
}, [
|
|
138
|
-
children,
|
|
139
|
-
align,
|
|
140
|
-
slideWidth
|
|
141
|
-
]);
|
|
142
|
-
useIsomorphicLayoutEffect(()=>{
|
|
143
|
-
if (shiftState.animation !== undefined) {
|
|
144
|
-
setShiftState((prevState)=>({
|
|
145
|
-
...prevState,
|
|
146
|
-
animation: true,
|
|
147
|
-
deltaX: 0,
|
|
148
|
-
shiftX: calculateIndent(slideIndex ?? 0)
|
|
149
|
-
}));
|
|
150
|
-
}
|
|
151
|
-
}, [
|
|
152
|
-
slideIndex
|
|
153
|
-
]);
|
|
154
|
-
const slideLeft = (event)=>{
|
|
155
|
-
onChange?.(slideIndex - 1);
|
|
156
|
-
onPrevClick?.(event);
|
|
157
|
-
};
|
|
158
|
-
const slideRight = (event)=>{
|
|
159
|
-
onChange?.(slideIndex + 1);
|
|
160
|
-
onNextClick?.(event);
|
|
161
|
-
};
|
|
162
|
-
/*
|
|
163
|
-
* Получает индекс слайда, к которому будет осуществлен переход
|
|
164
|
-
*/ const getTarget = (e)=>{
|
|
165
|
-
const expectDeltaX = shiftState.deltaX / e.duration * 240 * 0.6;
|
|
166
|
-
const shift = shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);
|
|
167
|
-
const direction = shiftState.deltaX < 0 ? 1 : -1;
|
|
168
|
-
// Находим ближайшую границу слайда к текущему отступу
|
|
169
|
-
let targetIndex = layoutState.current.slides.reduce((val, item, index)=>{
|
|
170
|
-
const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);
|
|
171
|
-
const currentValue = Math.abs(item.coordX + shift);
|
|
172
|
-
return previousValue < currentValue ? val : index;
|
|
173
|
-
}, slideIndex);
|
|
174
|
-
if (targetIndex === slideIndex) {
|
|
175
|
-
let targetSlide = slideIndex + direction;
|
|
176
|
-
if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {
|
|
177
|
-
if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {
|
|
178
|
-
targetIndex = targetSlide;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
return targetIndex;
|
|
183
|
-
};
|
|
184
|
-
const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;
|
|
185
|
-
const onStart = (e)=>{
|
|
186
|
-
e.originalEvent.stopPropagation();
|
|
187
|
-
if (isDraggable) {
|
|
188
|
-
onDragStart?.(e);
|
|
189
|
-
setShiftState((prevState)=>({
|
|
190
|
-
...prevState,
|
|
191
|
-
animation: false
|
|
192
|
-
}));
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
const onMoveX = (e)=>{
|
|
196
|
-
if (isDraggable) {
|
|
197
|
-
e.originalEvent.preventDefault();
|
|
198
|
-
if (e.isSlideX) {
|
|
199
|
-
if (shiftState.deltaX !== e.shiftX) {
|
|
200
|
-
setShiftState((prevState)=>({
|
|
201
|
-
...prevState,
|
|
202
|
-
deltaX: e.shiftX,
|
|
203
|
-
dragging: e.isSlideX
|
|
204
|
-
}));
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
};
|
|
209
|
-
const onEnd = (e)=>{
|
|
210
|
-
if (isDraggable) {
|
|
211
|
-
const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
|
|
212
|
-
onDragEnd?.(e, targetIndex);
|
|
213
|
-
const nextShiftState = {
|
|
214
|
-
animation: true,
|
|
215
|
-
dragging: false,
|
|
216
|
-
deltaX: 0
|
|
217
|
-
};
|
|
218
|
-
const shiftXStick = calculateDragIndent();
|
|
219
|
-
if (targetIndex !== slideIndex) {
|
|
220
|
-
// Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
|
|
221
|
-
nextShiftState.shiftX = shiftXStick;
|
|
222
|
-
}
|
|
223
|
-
setShiftState((prevState)=>({
|
|
224
|
-
...prevState,
|
|
225
|
-
...nextShiftState
|
|
226
|
-
}));
|
|
227
|
-
if (targetIndex !== slideIndex) {
|
|
228
|
-
onChange?.(targetIndex);
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
};
|
|
232
|
-
const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;
|
|
233
|
-
const layerStyle = {
|
|
234
|
-
transform: `translateX(${indent}px)`,
|
|
235
|
-
transition: shiftState.animation ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)` : 'none'
|
|
236
|
-
};
|
|
237
|
-
const setSlideRef = (slideRef, slideIndex)=>{
|
|
238
|
-
slidesStore.current[`slide-${slideIndex}`] = slideRef;
|
|
239
|
-
};
|
|
240
|
-
// shiftX is negative number <= 0, we can swipe back only if it is < 0
|
|
241
|
-
const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;
|
|
242
|
-
const canSlideRight = !layoutState.current.isFullyVisible && // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
|
|
243
|
-
(align === 'left' && layoutState.current.containerWidth - shiftState.shiftX < (layoutState.current.layerWidth ?? 0) || // otherwise we need to check current slide index (align = right or align = center)
|
|
244
|
-
align !== 'left' && slideIndex < layoutState.current.slides.length - 1);
|
|
245
|
-
return /*#__PURE__*/ _jsxs(RootComponent, {
|
|
246
|
-
...restProps,
|
|
247
|
-
baseClassName: classNames(styles.host, align === 'center' && styles.alignCenter, slideWidth === 'custom' && styles.customWidth, isDraggable && styles.draggable),
|
|
248
|
-
getRootRef: rootRef,
|
|
249
|
-
children: [
|
|
250
|
-
/*#__PURE__*/ _jsx(Touch, {
|
|
251
|
-
className: styles.viewport,
|
|
252
|
-
onStartX: onStart,
|
|
253
|
-
onMoveX: onMoveX,
|
|
254
|
-
onEnd: onEnd,
|
|
255
|
-
style: {
|
|
256
|
-
width: slideWidth === 'custom' ? '100%' : slideWidth
|
|
257
|
-
},
|
|
258
|
-
getRootRef: viewportRef,
|
|
259
|
-
noSlideClick: true,
|
|
260
|
-
children: /*#__PURE__*/ _jsx("div", {
|
|
261
|
-
className: styles.layer,
|
|
262
|
-
style: layerStyle,
|
|
263
|
-
children: React.Children.map(children, (item, i)=>/*#__PURE__*/ _jsx("div", {
|
|
264
|
-
className: styles.slide,
|
|
265
|
-
ref: (el)=>setSlideRef(el, i),
|
|
266
|
-
children: item
|
|
267
|
-
}, `slide-${i}`))
|
|
268
|
-
})
|
|
269
|
-
}),
|
|
270
|
-
bullets && /*#__PURE__*/ _jsx("div", {
|
|
271
|
-
"aria-hidden": true,
|
|
272
|
-
className: classNames(styles.bullets, stylesBullets[bullets]),
|
|
273
|
-
children: React.Children.map(children, (_item, index)=>/*#__PURE__*/ _jsx("div", {
|
|
274
|
-
className: classNames(styles.bullet, index === slideIndex && styles.bulletActive)
|
|
275
|
-
}, index))
|
|
276
|
-
}),
|
|
277
|
-
showArrows && hasPointer && canSlideLeft && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
278
|
-
className: styles.arrow,
|
|
279
|
-
direction: "left",
|
|
280
|
-
onClick: slideLeft,
|
|
281
|
-
size: arrowSize
|
|
282
|
-
}),
|
|
283
|
-
showArrows && hasPointer && canSlideRight && /*#__PURE__*/ _jsx(ScrollArrow, {
|
|
284
|
-
className: styles.arrow,
|
|
285
|
-
direction: "right",
|
|
286
|
-
onClick: slideRight,
|
|
287
|
-
size: arrowSize
|
|
288
|
-
})
|
|
289
|
-
]
|
|
290
|
-
});
|
|
291
|
-
};
|
|
292
|
-
|
|
293
|
-
//# sourceMappingURL=BaseGallery.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport type { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n containerWidth: 0,\n viewportOffsetWidth: 0,\n layerWidth: 0,\n min: 0,\n max: 0,\n slides: [],\n isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n animation: undefined,\n shiftX: 0,\n dragging: false,\n deltaX: 0,\n indent: 0,\n};\n\nconst stylesBullets = {\n dark: styles.bulletsDark,\n light: styles.bulletsLight,\n};\nexport const BaseGallery = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'm',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const validateIndent = (value: number) => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n\n if (value < localMin) {\n return localMin;\n } else if (value > localMax) {\n return localMax;\n }\n\n return value;\n };\n\n /*\n * Считает отступ слоя галереи\n */\n const calculateIndent = (targetIndex: number) => {\n if (layoutState.current.isFullyVisible) {\n return 0;\n }\n\n const targetSlide = layoutState.current.slides?.length\n ? layoutState.current.slides[targetIndex]\n : null;\n\n if (targetSlide) {\n const { coordX, width } = targetSlide;\n\n if (isCenterWithCustomWidth) {\n const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n return viewportWidth / 2 - coordX - width / 2;\n }\n\n return validateIndent(-1 * coordX);\n }\n return 0;\n };\n\n /*\n * Считает отступ слоя галереи во время драга\n */\n const calculateDragIndent = () => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n const indent = shiftState.shiftX + shiftState.deltaX;\n\n if (indent > localMax) {\n return localMax + Number((indent - localMax) / 3);\n } else if (indent < localMin) {\n return localMin + Number((indent - localMin) / 3);\n }\n\n return indent;\n };\n\n const initializeSlides = (options: { animation?: boolean } = {}) => {\n const localSlides =\n React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n const elem = slidesStore.current[`slide-${i}`];\n return {\n coordX: elem?.offsetLeft ?? 0,\n width: elem?.offsetWidth ?? 0,\n };\n }) ?? [];\n\n const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n const localLayerWidth = localSlides.reduce(\n (val: number, slide: GallerySlidesState) => slide.width + val,\n 0,\n );\n const adjustShiftX =\n localSlides.length <= layoutState.current.slides.length ||\n layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n const currentSlideOffsetOnCenterAlignment =\n (localContainerWidth - (localSlides[slideIndex]?.width ?? 0)) / 2;\n const isFullyVisible =\n align === 'center'\n ? localLayerWidth + currentSlideOffsetOnCenterAlignment <= localContainerWidth\n : localLayerWidth <= localContainerWidth;\n\n layoutState.current = {\n containerWidth: localContainerWidth,\n viewportOffsetWidth: localViewportOffsetWidth,\n layerWidth: localLayerWidth,\n max: calcMax({\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n }),\n min: calcMin({\n containerWidth: localContainerWidth,\n layerWidth: localLayerWidth,\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n align,\n }),\n slides: localSlides,\n isFullyVisible,\n };\n\n setShiftState((prevState) => ({\n ...prevState,\n shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n }));\n };\n\n const onResize = () => {\n if (shiftState.animation !== undefined) {\n initializeSlides({ animation: false });\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(() => {\n initializeSlides({ animation: false });\n }, [children, align, slideWidth]);\n\n useIsomorphicLayoutEffect(() => {\n if (shiftState.animation !== undefined) {\n setShiftState((prevState) => ({\n ...prevState,\n animation: true,\n deltaX: 0,\n shiftX: calculateIndent(slideIndex ?? 0),\n }));\n }\n }, [slideIndex]);\n\n const slideLeft = (event: React.MouseEvent) => {\n onChange?.(slideIndex - 1);\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n onChange?.(slideIndex + 1);\n onNextClick?.(event);\n };\n\n /*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\n const getTarget = (e: CustomTouchEvent) => {\n const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n const shift =\n shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n // Находим ближайшую границу слайда к текущему отступу\n let targetIndex = layoutState.current.slides.reduce(\n (val: number, item: GallerySlidesState, index: number) => {\n const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n const currentValue = Math.abs(item.coordX + shift);\n\n return previousValue < currentValue ? val : index;\n },\n slideIndex,\n );\n\n if (targetIndex === slideIndex) {\n let targetSlide = slideIndex + direction;\n\n if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n targetIndex = targetSlide;\n }\n }\n }\n\n return targetIndex;\n };\n\n const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (isDraggable) {\n onDragStart?.(e);\n setShiftState((prevState) => ({ ...prevState, animation: false }));\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftState.deltaX !== e.shiftX) {\n setShiftState((prevState) => ({\n ...prevState,\n deltaX: e.shiftX,\n dragging: e.isSlideX,\n }));\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (isDraggable) {\n const targetIndex = e.isSlide ? getTarget(e) : (slideIndex ?? 0);\n onDragEnd?.(e, targetIndex);\n\n const nextShiftState: Partial<ShiftingState> = {\n animation: true,\n dragging: false,\n deltaX: 0,\n };\n\n const shiftXStick = calculateDragIndent();\n if (targetIndex !== slideIndex) {\n // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n nextShiftState.shiftX = shiftXStick;\n }\n\n setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n if (targetIndex !== slideIndex) {\n onChange?.(targetIndex);\n }\n }\n };\n\n const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n const layerStyle = {\n transform: `translateX(${indent}px)`,\n transition: shiftState.animation\n ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n : 'none',\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[`slide-${slideIndex}`] = slideRef;\n };\n\n // shiftX is negative number <= 0, we can swipe back only if it is < 0\n const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n const canSlideRight =\n !layoutState.current.isFullyVisible &&\n // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n ((align === 'left' &&\n layoutState.current.containerWidth - shiftState.shiftX <\n (layoutState.current.layerWidth ?? 0)) ||\n // otherwise we need to check current slide index (align = right or align = center)\n (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n align === 'center' && styles.alignCenter,\n slideWidth === 'custom' && styles.customWidth,\n isDraggable && styles.draggable,\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles.viewport}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles.layer} style={layerStyle}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div className={styles.slide} key={`slide-${i}`} ref={(el) => setSlideRef(el, i)}>\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles.arrow}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles.arrow}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useDOM","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","Touch","calcMax","calcMin","styles","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","bulletsDark","light","bulletsLight","BaseGallery","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","layoutState","shiftState","setShiftState","useState","rootRef","viewportRef","window","hasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","currentSlideOffsetOnCenterAlignment","prevState","onResize","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","transform","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","baseClassName","host","alignCenter","customWidth","draggable","className","viewport","onStartX","style","noSlideClick","div","layer","ref","el","aria-hidden","bullet","bulletActive","arrow","onClick","size"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../../hooks/useGlobalEventListener';\nimport { useMutationObserver } from '../../../hooks/useMutationObserver';\nimport { useDOM } from '../../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../../lib/warnOnce';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { ScrollArrow } from '../../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../../Touch/Touch';\nimport { type BaseGalleryProps, type GallerySlidesState } from '../types';\nimport {\n ANIMATION_DURATION,\n CONTROL_ELEMENTS_STATE,\n SLIDE_THRESHOLD,\n SLIDES_MANAGER_STATE,\n} from './constants';\nimport { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';\nimport { useSlideAnimation } from './hooks';\nimport type { ControlElementsState, SlidesManagerState } from './types';\nimport styles from '../BaseGallery.module.css';\n\nconst stylesBullets = {\n dark: styles.bulletsDark,\n light: styles.bulletsLight,\n};\n\nconst warn = warnOnce('Gallery');\n\nexport const CarouselBase = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'm',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n const layerRef = React.useRef<HTMLDivElement>(null);\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n const shiftXCurrentRef = React.useRef<number>(0);\n const shiftXDeltaRef = React.useRef<number>(0);\n const initialized = React.useRef<boolean>(false);\n const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();\n\n const [controlElementsState, setControlElementsState] =\n React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const transformCssStyles = (shiftX: number, animation = false) => {\n shiftX = Math.round(shiftX);\n slidesManager.current.loopPoints.forEach((loopPoint) => {\n const { target, index } = loopPoint;\n const slide = slidesStore.current[index];\n if (slide) {\n slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;\n }\n });\n\n if (layerRef.current) {\n layerRef.current.style.transform = `translate3d(${shiftX}px, 0, 0)`;\n layerRef.current.style.transition = animation\n ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`\n : '';\n }\n };\n\n const requestTransform = (shiftX: number, animation = false) => {\n const { snaps, contentSize, slides } = slidesManager.current;\n\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (shiftX > snaps[0]) {\n shiftXCurrentRef.current = -contentSize + snaps[0];\n shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;\n }\n const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;\n\n if (shiftX <= -lastPoint) {\n shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];\n }\n transformCssStyles(shiftX, animation);\n });\n };\n\n const initializeSlides = () => {\n if (!rootRef.current || !viewportRef.current) {\n return;\n }\n let localSlides =\n React.Children.map(children, (_item, i): GallerySlidesState => {\n const elem = slidesStore.current[i] || { offsetLeft: 0, offsetWidth: 0 };\n return { coordX: elem.offsetLeft, width: elem.offsetWidth };\n }) || [];\n\n if (localSlides.length === 0) {\n initialized.current = false;\n return;\n }\n\n const containerWidth = rootRef.current.offsetWidth;\n const viewportOffsetWidth = viewportRef.current.offsetWidth;\n const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);\n\n if (process.env.NODE_ENV === 'development') {\n let remainingWidth = containerWidth;\n let slideIndex = 0;\n\n while (remainingWidth > 0 && slideIndex < localSlides.length) {\n remainingWidth -= localSlides[slideIndex].width;\n slideIndex++;\n }\n if (remainingWidth <= 0 && slideIndex === localSlides.length) {\n warn(\n 'Ширины слайдов недостаточно для корректной работы свойства \"looped\". Пожалуйста, сделайте её больше.',\n );\n }\n }\n if (align === 'center') {\n const firstSlideShift = (containerWidth - localSlides[0].width) / 2;\n localSlides = localSlides.map((item) => {\n return {\n width: item.width,\n coordX: item.coordX - firstSlideShift,\n };\n });\n }\n\n slidesManager.current = {\n ...slidesManager.current,\n viewportOffsetWidth,\n slides: localSlides,\n isFullyVisible: layerWidth <= containerWidth,\n };\n\n const snaps = localSlides.map((_, index) =>\n calculateIndent(index, slidesManager.current, isCenterWithCustomWidth),\n );\n\n let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;\n if (align === 'center') {\n contentSize += snaps[0];\n }\n\n slidesManager.current.snaps = snaps;\n slidesManager.current.contentSize = contentSize;\n slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);\n\n setControlElementsState({\n canSlideLeft: !slidesManager.current.isFullyVisible,\n canSlideRight: !slidesManager.current.isFullyVisible,\n isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),\n });\n\n shiftXCurrentRef.current = snaps[slideIndex];\n initialized.current = true;\n\n requestTransform(shiftXCurrentRef.current);\n };\n\n const onResize = () => {\n if (initialized.current) {\n initializeSlides();\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(\n function performSlideChange() {\n if (!initialized.current) {\n return;\n }\n const { snaps, slides } = slidesManager.current;\n const indent = snaps[slideIndex];\n let startPoint = shiftXCurrentRef.current;\n\n /**\n * Переключаемся с последнего элемента на первый\n * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) \"вперед\"\n * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения\n */\n if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {\n const distance =\n Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;\n\n addToAnimationQueue(\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * -1;\n\n transformCssStyles(shiftX);\n\n if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {\n requestAnimationFrame(() => {\n shiftXCurrentRef.current = indent;\n transformCssStyles(snaps[0]);\n });\n }\n }),\n );\n /**\n * Переключаемся с первого слайда на последний\n * Для корректной анимации сначала задаем первым видимым слайдам смещение\n * В следующем кадре начинаем анимация прокрутки \"назад\"\n */\n } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {\n startPoint = indent - slides[slides.length - 1].width;\n\n addToAnimationQueue(() => {\n requestAnimationFrame(() => {\n const shiftX = indent - slides[slides.length - 1].width;\n transformCssStyles(shiftX);\n\n getAnimateFunction((progress) => {\n transformCssStyles(startPoint + progress * slides[slides.length - 1].width);\n })();\n });\n });\n /**\n * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения\n */\n } else {\n addToAnimationQueue(() => {\n const distance = Math.abs(indent - startPoint);\n let direction = startPoint <= indent ? 1 : -1;\n\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * direction;\n transformCssStyles(shiftX);\n })();\n });\n }\n\n startAnimation();\n\n shiftXCurrentRef.current = indent;\n },\n [slideIndex],\n );\n\n useMutationObserver(layerRef, initializeSlides);\n\n useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth]);\n\n const calculateMinDeltaXToSlide = () => {\n return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;\n };\n\n const slideLeft = (event: React.MouseEvent) => {\n if (slideIndex > 0) {\n shiftXCurrentRef.current += calculateMinDeltaXToSlide();\n }\n onChange?.(\n (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,\n );\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n if (slideIndex < slidesManager.current.slides.length - 1) {\n shiftXCurrentRef.current -= calculateMinDeltaXToSlide();\n }\n onChange?.((slideIndex + 1) % slidesManager.current.slides.length);\n onNextClick?.(event);\n };\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (controlElementsState.isDraggable) {\n onDragStart?.(e);\n shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];\n shiftXDeltaRef.current = 0;\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftXDeltaRef.current !== e.shiftX) {\n shiftXDeltaRef.current = e.shiftX;\n requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n let targetIndex = slideIndex;\n if (e.isSlide) {\n targetIndex = getTargetIndex(\n slidesManager.current.slides,\n slideIndex,\n shiftXCurrentRef.current,\n shiftXDeltaRef.current,\n );\n }\n onDragEnd?.(e, targetIndex);\n\n if (targetIndex !== slideIndex) {\n shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;\n onChange?.(targetIndex);\n } else {\n const initialShiftX = slidesManager.current.snaps[targetIndex];\n requestTransform(initialShiftX, true);\n }\n }\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[slideIndex] = slideRef;\n };\n\n const { canSlideLeft, canSlideRight, isDraggable } = controlElementsState;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n slideWidth === 'custom' && styles.customWidth,\n isDraggable && styles.draggable,\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles.viewport}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles.layer} ref={layerRef}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div className={styles.slide} key={`slide-${i}`} ref={(el) => setSlideRef(el, i)}>\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles.arrow}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles.arrow}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useGlobalEventListener","useMutationObserver","useDOM","useIsomorphicLayoutEffect","warnOnce","RootComponent","ScrollArrow","Touch","ANIMATION_DURATION","CONTROL_ELEMENTS_STATE","SLIDE_THRESHOLD","SLIDES_MANAGER_STATE","calculateIndent","getLoopPoints","getTargetIndex","useSlideAnimation","styles","stylesBullets","dark","bulletsDark","light","bulletsLight","warn","CarouselBase","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","useRef","slidesManager","rootRef","viewportRef","layerRef","animationFrameRef","shiftXCurrentRef","shiftXDeltaRef","initialized","addToAnimationQueue","getAnimateFunction","startAnimation","controlElementsState","setControlElementsState","useState","window","hasPointer","isCenterWithCustomWidth","transformCssStyles","shiftX","animation","Math","round","current","loopPoints","forEach","loopPoint","target","index","slide","style","transform","transition","requestTransform","snaps","contentSize","slides","cancelAnimationFrame","requestAnimationFrame","lastPoint","length","width","coordX","abs","initializeSlides","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","containerWidth","viewportOffsetWidth","layerWidth","reduce","val","process","env","NODE_ENV","remainingWidth","firstSlideShift","item","isFullyVisible","_","canSlideLeft","canSlideRight","isDraggable","onResize","performSlideChange","indent","startPoint","distance","progress","direction","calculateMinDeltaXToSlide","slideLeft","event","slideRight","onStart","e","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","targetIndex","isSlide","initialShiftX","setSlideRef","slideRef","baseClassName","host","customWidth","draggable","className","viewport","onStartX","noSlideClick","div","layer","ref","el","aria-hidden","bullet","bulletActive","arrow","onClick","size"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,4CAAyC;AACjF,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,SAASC,sBAAsB,QAAQ,2CAAwC;AAC/E,SAASC,mBAAmB,QAAQ,wCAAqC;AACzE,SAASC,MAAM,QAAQ,sBAAmB;AAC1C,SAASC,yBAAyB,QAAQ,4CAAyC;AACnF,SAASC,QAAQ,QAAQ,2BAAwB;AACjD,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,WAAW,QAAQ,mCAAgC;AAC5D,SAAgCC,KAAK,QAAQ,uBAAoB;AAEjE,SACEC,kBAAkB,EAClBC,sBAAsB,EACtBC,eAAe,EACfC,oBAAoB,QACf,iBAAc;AACrB,SAASC,eAAe,EAAEC,aAAa,EAAEC,cAAc,QAAQ,eAAY;AAC3E,SAASC,iBAAiB,QAAQ,aAAU;AAE5C,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,gBAAgB;IACpBC,MAAMF,OAAOG,WAAW;IACxBC,OAAOJ,OAAOK,YAAY;AAC5B;AAEA,MAAMC,OAAOlB,SAAS;AAEtB,OAAO,MAAMmB,eAAe,CAAC,EAC3BC,UAAU,KAAK,EACfC,UAAU,EACVC,QAAQ,EACRC,aAAa,MAAM,EACnBC,aAAa,CAAC,EACdC,eAAe,KAAK,EACpBC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,QAAQ,MAAM,EACdC,UAAU,EACVC,MAAM,EACNC,YAAY,GAAG,EACf,GAAGC,WACc;IACjB,MAAMC,cAAc5C,MAAM6C,MAAM,CAAwC,CAAC;IACzE,MAAMC,gBAAgB9C,MAAM6C,MAAM,CAAqB9B;IAEvD,MAAMgC,UAAU5C,aAAa0B;IAC7B,MAAMmB,cAAc7C,aAAasC;IACjC,MAAMQ,WAAWjD,MAAM6C,MAAM,CAAiB;IAC9C,MAAMK,oBAAoBlD,MAAM6C,MAAM,CAAkD;IACxF,MAAMM,mBAAmBnD,MAAM6C,MAAM,CAAS;IAC9C,MAAMO,iBAAiBpD,MAAM6C,MAAM,CAAS;IAC5C,MAAMQ,cAAcrD,MAAM6C,MAAM,CAAU;IAC1C,MAAM,EAAES,mBAAmB,EAAEC,kBAAkB,EAAEC,cAAc,EAAE,GAAGrC;IAEpE,MAAM,CAACsC,sBAAsBC,wBAAwB,GACnD1D,MAAM2D,QAAQ,CAAuB9C;IAEvC,MAAM,EAAE+C,MAAM,EAAE,GAAGtD;IACnB,MAAMuD,aAAa3D;IAEnB,MAAM4D,0BAA0B/B,eAAe,YAAYQ,UAAU;IAErE,MAAMwB,qBAAqB,CAACC,QAAgBC,YAAY,KAAK;QAC3DD,SAASE,KAAKC,KAAK,CAACH;QACpBlB,cAAcsB,OAAO,CAACC,UAAU,CAACC,OAAO,CAAC,CAACC;YACxC,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGF;YAC1B,MAAMG,QAAQ9B,YAAYwB,OAAO,CAACK,MAAM;YACxC,IAAIC,OAAO;gBACTA,MAAMC,KAAK,CAACC,SAAS,GAAG,CAAC,YAAY,EAAEJ,OAAOR,QAAQ,SAAS,CAAC;YAClE;QACF;QAEA,IAAIf,SAASmB,OAAO,EAAE;YACpBnB,SAASmB,OAAO,CAACO,KAAK,CAACC,SAAS,GAAG,CAAC,YAAY,EAAEZ,OAAO,SAAS,CAAC;YACnEf,SAASmB,OAAO,CAACO,KAAK,CAACE,UAAU,GAAGZ,YAChC,CAAC,UAAU,EAAErD,mBAAmB,8BAA8B,CAAC,GAC/D;QACN;IACF;IAEA,MAAMkE,mBAAmB,CAACd,QAAgBC,YAAY,KAAK;QACzD,MAAM,EAAEc,KAAK,EAAEC,WAAW,EAAEC,MAAM,EAAE,GAAGnC,cAAcsB,OAAO;QAE5D,IAAIlB,kBAAkBkB,OAAO,KAAK,MAAM;YACtCc,qBAAqBhC,kBAAkBkB,OAAO;QAChD;QACAlB,kBAAkBkB,OAAO,GAAGe,sBAAsB;YAChD,IAAInB,SAASe,KAAK,CAAC,EAAE,EAAE;gBACrB5B,iBAAiBiB,OAAO,GAAG,CAACY,cAAcD,KAAK,CAAC,EAAE;gBAClDf,SAASb,iBAAiBiB,OAAO,GAAGhB,eAAegB,OAAO;YAC5D;YACA,MAAMgB,YAAYH,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK,GAAGL,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACE,MAAM;YAEpF,IAAIvB,UAAU,CAACoB,WAAW;gBACxBjC,iBAAiBiB,OAAO,GAAGF,KAAKsB,GAAG,CAACpC,eAAegB,OAAO,IAAIW,KAAK,CAAC,EAAE;YACxE;YACAhB,mBAAmBC,QAAQC;QAC7B;IACF;IAEA,MAAMwB,mBAAmB;QACvB,IAAI,CAAC1C,QAAQqB,OAAO,IAAI,CAACpB,YAAYoB,OAAO,EAAE;YAC5C;QACF;QACA,IAAIsB,cACF1F,MAAM2F,QAAQ,CAACC,GAAG,CAAC9D,UAAU,CAAC+D,OAAOC;YACnC,MAAMC,OAAOnD,YAAYwB,OAAO,CAAC0B,EAAE,IAAI;gBAAEE,YAAY;gBAAGC,aAAa;YAAE;YACvE,OAAO;gBAAEV,QAAQQ,KAAKC,UAAU;gBAAEV,OAAOS,KAAKE,WAAW;YAAC;QAC5D,MAAM,EAAE;QAEV,IAAIP,YAAYL,MAAM,KAAK,GAAG;YAC5BhC,YAAYe,OAAO,GAAG;YACtB;QACF;QAEA,MAAM8B,iBAAiBnD,QAAQqB,OAAO,CAAC6B,WAAW;QAClD,MAAME,sBAAsBnD,YAAYoB,OAAO,CAAC6B,WAAW;QAC3D,MAAMG,aAAaV,YAAYW,MAAM,CAAC,CAACC,KAAK5B,QAAUA,MAAMY,KAAK,GAAGgB,KAAK;QAEzE,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;YAC1C,IAAIC,iBAAiBR;YACrB,IAAIlE,aAAa;YAEjB,MAAO0E,iBAAiB,KAAK1E,aAAa0D,YAAYL,MAAM,CAAE;gBAC5DqB,kBAAkBhB,WAAW,CAAC1D,WAAW,CAACsD,KAAK;gBAC/CtD;YACF;YACA,IAAI0E,kBAAkB,KAAK1E,eAAe0D,YAAYL,MAAM,EAAE;gBAC5D3D,KACE;YAEJ;QACF;QACA,IAAIa,UAAU,UAAU;YACtB,MAAMoE,kBAAkB,AAACT,CAAAA,iBAAiBR,WAAW,CAAC,EAAE,CAACJ,KAAK,AAAD,IAAK;YAClEI,cAAcA,YAAYE,GAAG,CAAC,CAACgB;gBAC7B,OAAO;oBACLtB,OAAOsB,KAAKtB,KAAK;oBACjBC,QAAQqB,KAAKrB,MAAM,GAAGoB;gBACxB;YACF;QACF;QAEA7D,cAAcsB,OAAO,GAAG;YACtB,GAAGtB,cAAcsB,OAAO;YACxB+B;YACAlB,QAAQS;YACRmB,gBAAgBT,cAAcF;QAChC;QAEA,MAAMnB,QAAQW,YAAYE,GAAG,CAAC,CAACkB,GAAGrC,QAChCzD,gBAAgByD,OAAO3B,cAAcsB,OAAO,EAAEN;QAGhD,IAAIkB,cAAc,CAACD,KAAK,CAACA,MAAMM,MAAM,GAAG,EAAE,GAAGK,WAAW,CAACA,YAAYL,MAAM,GAAG,EAAE,CAACC,KAAK;QACtF,IAAI/C,UAAU,UAAU;YACtByC,eAAeD,KAAK,CAAC,EAAE;QACzB;QAEAjC,cAAcsB,OAAO,CAACW,KAAK,GAAGA;QAC9BjC,cAAcsB,OAAO,CAACY,WAAW,GAAGA;QACpClC,cAAcsB,OAAO,CAACC,UAAU,GAAGpD,cAAc6B,cAAcsB,OAAO,EAAE8B;QAExExC,wBAAwB;YACtBqD,cAAc,CAACjE,cAAcsB,OAAO,CAACyC,cAAc;YACnDG,eAAe,CAAClE,cAAcsB,OAAO,CAACyC,cAAc;YACpDI,aAAa,CAAEhF,CAAAA,gBAAgBa,cAAcsB,OAAO,CAACyC,cAAc,AAAD;QACpE;QAEA1D,iBAAiBiB,OAAO,GAAGW,KAAK,CAAC/C,WAAW;QAC5CqB,YAAYe,OAAO,GAAG;QAEtBU,iBAAiB3B,iBAAiBiB,OAAO;IAC3C;IAEA,MAAM8C,WAAW;QACf,IAAI7D,YAAYe,OAAO,EAAE;YACvBqB;QACF;IACF;IAEArF,uBAAuBwD,QAAQ,UAAUsD;IAEzC3G,0BACE,SAAS4G;QACP,IAAI,CAAC9D,YAAYe,OAAO,EAAE;YACxB;QACF;QACA,MAAM,EAAEW,KAAK,EAAEE,MAAM,EAAE,GAAGnC,cAAcsB,OAAO;QAC/C,MAAMgD,SAASrC,KAAK,CAAC/C,WAAW;QAChC,IAAIqF,aAAalE,iBAAiBiB,OAAO;QAEzC;;;;OAIC,GACD,IAAIgD,WAAWrC,KAAK,CAAC,EAAE,IAAI5B,iBAAiBiB,OAAO,IAAIW,KAAK,CAACA,MAAMM,MAAM,GAAG,EAAE,EAAE;YAC9E,MAAMiC,WACJpD,KAAKsB,GAAG,CAACT,KAAK,CAACA,MAAMM,MAAM,GAAG,EAAE,IAAIJ,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK,GAAG+B;YAExE/D,oBACEC,mBAAmB,CAACgE;gBAClB,MAAMvD,SAASqD,aAAaE,WAAWD,WAAW,CAAC;gBAEnDvD,mBAAmBC;gBAEnB,IAAIA,UAAUe,KAAK,CAACA,MAAMM,MAAM,GAAG,EAAE,GAAGJ,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK,EAAE;oBACvEH,sBAAsB;wBACpBhC,iBAAiBiB,OAAO,GAAGgD;wBAC3BrD,mBAAmBgB,KAAK,CAAC,EAAE;oBAC7B;gBACF;YACF;QAEF;;;;SAIC,GACH,OAAO,IAAIqC,WAAWrC,KAAK,CAACA,MAAMM,MAAM,GAAG,EAAE,IAAIlC,iBAAiBiB,OAAO,KAAKW,KAAK,CAAC,EAAE,EAAE;YACtFsC,aAAaD,SAASnC,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK;YAErDhC,oBAAoB;gBAClB6B,sBAAsB;oBACpB,MAAMnB,SAASoD,SAASnC,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK;oBACvDvB,mBAAmBC;oBAEnBT,mBAAmB,CAACgE;wBAClBxD,mBAAmBsD,aAAaE,WAAWtC,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE,CAACC,KAAK;oBAC5E;gBACF;YACF;QACA;;SAEC,GACH,OAAO;YACLhC,oBAAoB;gBAClB,MAAMgE,WAAWpD,KAAKsB,GAAG,CAAC4B,SAASC;gBACnC,IAAIG,YAAYH,cAAcD,SAAS,IAAI,CAAC;gBAE5C7D,mBAAmB,CAACgE;oBAClB,MAAMvD,SAASqD,aAAaE,WAAWD,WAAWE;oBAClDzD,mBAAmBC;gBACrB;YACF;QACF;QAEAR;QAEAL,iBAAiBiB,OAAO,GAAGgD;IAC7B,GACA;QAACpF;KAAW;IAGd3B,oBAAoB4C,UAAUwC;IAE9BlF,0BAA0BkF,kBAAkB;QAAClD;QAAOR;KAAW;IAE/D,MAAM0F,4BAA4B;QAChC,OAAO3E,cAAcsB,OAAO,CAACa,MAAM,CAACjD,WAAW,CAACsD,KAAK,GAAGxE;IAC1D;IAEA,MAAM4G,YAAY,CAACC;QACjB,IAAI3F,aAAa,GAAG;YAClBmB,iBAAiBiB,OAAO,IAAIqD;QAC9B;QACArF,WACE,AAACJ,CAAAA,aAAa,IAAIc,cAAcsB,OAAO,CAACa,MAAM,CAACI,MAAM,AAAD,IAAKvC,cAAcsB,OAAO,CAACa,MAAM,CAACI,MAAM;QAE9FhD,cAAcsF;IAChB;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAI3F,aAAac,cAAcsB,OAAO,CAACa,MAAM,CAACI,MAAM,GAAG,GAAG;YACxDlC,iBAAiBiB,OAAO,IAAIqD;QAC9B;QACArF,WAAW,AAACJ,CAAAA,aAAa,CAAA,IAAKc,cAAcsB,OAAO,CAACa,MAAM,CAACI,MAAM;QACjE/C,cAAcqF;IAChB;IAEA,MAAME,UAAU,CAACC;QACfA,EAAEC,aAAa,CAACC,eAAe;QAC/B,IAAIvE,qBAAqBwD,WAAW,EAAE;YACpC/E,cAAc4F;YACd3E,iBAAiBiB,OAAO,GAAGtB,cAAcsB,OAAO,CAACW,KAAK,CAAC/C,WAAW;YAClEoB,eAAegB,OAAO,GAAG;QAC3B;IACF;IAEA,MAAM6D,UAAU,CAACH;QACf,IAAIrE,qBAAqBwD,WAAW,EAAE;YACpCa,EAAEC,aAAa,CAACG,cAAc;YAE9B,IAAIJ,EAAEK,QAAQ,EAAE;gBACd,IAAI/E,eAAegB,OAAO,KAAK0D,EAAE9D,MAAM,EAAE;oBACvCZ,eAAegB,OAAO,GAAG0D,EAAE9D,MAAM;oBACjCc,iBAAiB3B,iBAAiBiB,OAAO,GAAGhB,eAAegB,OAAO;gBACpE;YACF;QACF;IACF;IAEA,MAAMgE,QAAQ,CAACN;QACb,IAAIrE,qBAAqBwD,WAAW,EAAE;YACpC,IAAIoB,cAAcrG;YAClB,IAAI8F,EAAEQ,OAAO,EAAE;gBACbD,cAAcnH,eACZ4B,cAAcsB,OAAO,CAACa,MAAM,EAC5BjD,YACAmB,iBAAiBiB,OAAO,EACxBhB,eAAegB,OAAO;YAE1B;YACAjC,YAAY2F,GAAGO;YAEf,IAAIA,gBAAgBrG,YAAY;gBAC9BmB,iBAAiBiB,OAAO,GAAGjB,iBAAiBiB,OAAO,GAAGhB,eAAegB,OAAO;gBAC5EhC,WAAWiG;YACb,OAAO;gBACL,MAAME,gBAAgBzF,cAAcsB,OAAO,CAACW,KAAK,CAACsD,YAAY;gBAC9DvD,iBAAiByD,eAAe;YAClC;QACF;IACF;IAEA,MAAMC,cAAc,CAACC,UAAiCzG;QACpDY,YAAYwB,OAAO,CAACpC,WAAW,GAAGyG;IACpC;IAEA,MAAM,EAAE1B,YAAY,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAGxD;IAErD,qBACE,MAAChD;QACE,GAAGkC,SAAS;QACb+F,eAAezI,WACbmB,OAAOuH,IAAI,EACX5G,eAAe,YAAYX,OAAOwH,WAAW,EAC7C3B,eAAe7F,OAAOyH,SAAS;QAEjChH,YAAYkB;;0BAEZ,KAACpC;gBACCmI,WAAW1H,OAAO2H,QAAQ;gBAC1BC,UAAUnB;gBACVI,SAASA;gBACTG,OAAOA;gBACPzD,OAAO;oBAAEW,OAAOvD,eAAe,WAAW,SAASA;gBAAW;gBAC9DF,YAAYmB;gBACZiG,YAAY;0BAEZ,cAAA,KAACC;oBAAIJ,WAAW1H,OAAO+H,KAAK;oBAAEC,KAAKnG;8BAChCjD,MAAM2F,QAAQ,CAACC,GAAG,CAAC9D,UAAU,CAAC8E,MAAuBd,kBACpD,KAACoD;4BAAIJ,WAAW1H,OAAOsD,KAAK;4BAAqB0E,KAAK,CAACC,KAAOb,YAAYa,IAAIvD;sCAC3Ec;2BADgC,CAAC,MAAM,EAAEd,GAAG;;;YAOpDlE,yBACC,KAACsH;gBAAII,aAAW;gBAACR,WAAW7I,WAAWmB,OAAOQ,OAAO,EAAEP,aAAa,CAACO,QAAQ;0BAC1E5B,MAAM2F,QAAQ,CAACC,GAAG,CAAC9D,UAAU,CAAC+D,OAAwBpB,sBACrD,KAACyE;wBACCJ,WAAW7I,WAAWmB,OAAOmI,MAAM,EAAE9E,UAAUzC,cAAcZ,OAAOoI,YAAY;uBAC3E/E;;YAMZjC,cAAcqB,cAAckD,8BAC3B,KAACrG;gBACCoI,WAAW1H,OAAOqI,KAAK;gBACvBjC,WAAU;gBACVkC,SAAShC;gBACTiC,MAAMjH;;YAGTF,cAAcqB,cAAcmD,+BAC3B,KAACtG;gBACCoI,WAAW1H,OAAOqI,KAAK;gBACvBjC,WAAU;gBACVkC,SAAS9B;gBACT+B,MAAMjH;;;;AAKhB,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/BaseGallery/CarouselBase/constants.ts"],"sourcesContent":["import type { ControlElementsState, SlidesManagerState } from './types';\n\nexport const ANIMATION_DURATION = 240;\n\nexport const SLIDE_THRESHOLD = 0.05;\n\nexport const CONTROL_ELEMENTS_STATE: ControlElementsState = {\n canSlideLeft: true,\n canSlideRight: true,\n isDraggable: true,\n};\n\nexport const SLIDES_MANAGER_STATE: SlidesManagerState = {\n viewportOffsetWidth: 0,\n slides: [],\n isFullyVisible: true,\n loopPoints: [],\n contentSize: 0,\n snaps: [],\n};\n"],"names":["ANIMATION_DURATION","SLIDE_THRESHOLD","CONTROL_ELEMENTS_STATE","canSlideLeft","canSlideRight","isDraggable","SLIDES_MANAGER_STATE","viewportOffsetWidth","slides","isFullyVisible","loopPoints","contentSize","snaps"],"mappings":"AAEA,OAAO,MAAMA,qBAAqB,IAAI;AAEtC,OAAO,MAAMC,kBAAkB,KAAK;AAEpC,OAAO,MAAMC,yBAA+C;IAC1DC,cAAc;IACdC,eAAe;IACfC,aAAa;AACf,EAAE;AAEF,OAAO,MAAMC,uBAA2C;IACtDC,qBAAqB;IACrBC,QAAQ,EAAE;IACVC,gBAAgB;IAChBC,YAAY,EAAE;IACdC,aAAa;IACbC,OAAO,EAAE;AACX,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/BaseGallery/CarouselBase/helpers.ts"],"sourcesContent":["import type { GallerySlidesState } from '../types';\nimport { SLIDE_THRESHOLD } from './constants';\nimport type { LoopPoint, SlidesManagerState } from './types';\n\n/*\n * Считает отступ слоя галереи\n */\nexport function calculateIndent(\n targetIndex: number,\n slidesManager: SlidesManagerState,\n isCenterWithCustomWidth: boolean,\n): number {\n if (slidesManager.isFullyVisible || !slidesManager.slides.length) {\n return 0;\n }\n\n const targetSlide = slidesManager.slides[targetIndex];\n\n if (targetSlide) {\n const { coordX, width } = targetSlide;\n\n if (isCenterWithCustomWidth) {\n return slidesManager.viewportOffsetWidth / 2 - coordX - width / 2;\n }\n\n return -1 * coordX;\n }\n\n return 0;\n}\n\n/**\n * Вычисляем индексы слайдов, которые необходимо смещать\n */\nexport function getShiftedIndexes(\n direction: 1 | -1,\n slides: GallerySlidesState[],\n availableWidth: number,\n): number[] {\n let gap = availableWidth;\n const shiftedSlideIndexes = [];\n const startIndex = direction === 1 ? 0 : slides.length - 1;\n const endIndex = direction === 1 ? slides.length - 1 : 0;\n\n for (\n let i = startIndex;\n (direction === 1 ? i <= endIndex : i >= endIndex) && gap > 0;\n i += direction\n ) {\n const slideWidth = slides[i].width;\n\n if (gap > 0) {\n shiftedSlideIndexes.push(i);\n }\n gap -= slideWidth;\n }\n\n return shiftedSlideIndexes;\n}\n\nfunction calculateLoopPoints(\n indexes: number[],\n edge: 'start' | 'end',\n slidesManager: SlidesManagerState,\n containerWidth: number,\n): LoopPoint[] {\n const { contentSize, slides, snaps } = slidesManager;\n const isStartEdge = edge === 'start';\n const offset = isStartEdge ? -contentSize : contentSize;\n\n return indexes.map((index) => {\n const initial = isStartEdge ? 0 : -contentSize;\n const altered = isStartEdge ? contentSize : 0;\n const loopPoint = isStartEdge\n ? snaps[index] + containerWidth + offset\n : snaps[index] - slides[index].width + offset - snaps[0];\n\n return {\n index,\n target: (currentLocation) => {\n return currentLocation >= loopPoint ? initial : altered;\n },\n };\n });\n}\n\n/**\n * Вычисляем \"ключевые\" точки, на которых должно происходить смещение слайдов\n */\nexport function getLoopPoints(\n slidesManager: SlidesManagerState,\n containerWidth: number,\n): LoopPoint[] {\n const { slides, snaps } = slidesManager;\n const startShiftedIndexes = getShiftedIndexes(-1, slides, snaps[0]);\n const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - snaps[0]);\n\n return [\n ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth),\n ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth),\n ];\n}\n\n/*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\nexport function getTargetIndex(\n slides: GallerySlidesState[],\n slideIndex: number,\n currentShiftX: number,\n currentShiftXDelta: number,\n): number {\n const shift = currentShiftX + currentShiftXDelta;\n const direction = currentShiftXDelta < 0 ? 1 : -1;\n\n // Находим ближайшую границу слайда к текущему отступу\n let targetIndex = slides.reduce((val: number, item: GallerySlidesState, index: number) => {\n const previousValue = Math.abs(slides[val].coordX + shift);\n const currentValue = Math.abs(item.coordX + shift);\n\n return previousValue < currentValue ? val : index;\n }, slideIndex);\n\n if (targetIndex === slideIndex) {\n let targetSlide = slideIndex + direction;\n\n if (targetSlide >= 0 && targetSlide < slides.length) {\n if (Math.abs(currentShiftXDelta) > slides[targetSlide].width * SLIDE_THRESHOLD) {\n return targetSlide;\n }\n return targetIndex;\n }\n return direction < 0\n ? (targetSlide + slides.length) % slides.length\n : targetSlide % slides.length;\n }\n\n return targetIndex;\n}\n"],"names":["SLIDE_THRESHOLD","calculateIndent","targetIndex","slidesManager","isCenterWithCustomWidth","isFullyVisible","slides","length","targetSlide","coordX","width","viewportOffsetWidth","getShiftedIndexes","direction","availableWidth","gap","shiftedSlideIndexes","startIndex","endIndex","i","slideWidth","push","calculateLoopPoints","indexes","edge","containerWidth","contentSize","snaps","isStartEdge","offset","map","index","initial","altered","loopPoint","target","currentLocation","getLoopPoints","startShiftedIndexes","endShiftedIndexes","getTargetIndex","slideIndex","currentShiftX","currentShiftXDelta","shift","reduce","val","item","previousValue","Math","abs","currentValue"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/BaseGallery/CarouselBase/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { animate, type DrawInterface } from '../../../lib/animate';\nimport { cubicBezier } from '../../../lib/fx';\nimport { ANIMATION_DURATION } from './constants';\n\nconst TIMING_FUNCTION = cubicBezier(0.8, 1);\n\nexport function useSlideAnimation(): {\n getAnimateFunction: (drawFunction: DrawInterface) => () => void;\n addToAnimationQueue: (func: VoidFunction) => void;\n startAnimation: () => void;\n} {\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n function getAnimateFunction(drawFunction: DrawInterface) {\n return () => {\n animate({\n duration: ANIMATION_DURATION,\n timing: TIMING_FUNCTION,\n animationQueue: animationQueue.current,\n draw: drawFunction,\n });\n };\n }\n\n function addToAnimationQueue(func: VoidFunction) {\n animationQueue.current.push(func);\n }\n\n function startAnimation() {\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n }\n\n return {\n getAnimateFunction,\n addToAnimationQueue,\n startAnimation,\n };\n}\n"],"names":["React","animate","cubicBezier","ANIMATION_DURATION","TIMING_FUNCTION","useSlideAnimation","animationQueue","useRef","getAnimateFunction","drawFunction","duration","timing","current","draw","addToAnimationQueue","func","push","startAnimation","length"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAA4B,0BAAuB;AACnE,SAASC,WAAW,QAAQ,qBAAkB;AAC9C,SAASC,kBAAkB,QAAQ,iBAAc;AAEjD,MAAMC,kBAAkBF,YAAY,KAAK;AAEzC,OAAO,SAASG;IAKd,MAAMC,iBAAiBN,MAAMO,MAAM,CAAiB,EAAE;IAEtD,SAASC,mBAAmBC,YAA2B;QACrD,OAAO;YACLR,QAAQ;gBACNS,UAAUP;gBACVQ,QAAQP;gBACRE,gBAAgBA,eAAeM,OAAO;gBACtCC,MAAMJ;YACR;QACF;IACF;IAEA,SAASK,oBAAoBC,IAAkB;QAC7CT,eAAeM,OAAO,CAACI,IAAI,CAACD;IAC9B;IAEA,SAASE;QACP,IAAIX,eAAeM,OAAO,CAACM,MAAM,KAAK,GAAG;YACvCZ,eAAeM,OAAO,CAAC,EAAE;QAC3B;IACF;IAEA,OAAO;QACLJ;QACAM;QACAG;IACF;AACF"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/BaseGallery/CarouselBase/types.ts"],"sourcesContent":["import type { GallerySlidesState } from '../types';\n\nexport interface LoopPoint {\n /**\n * Индекс слайда\n */\n index: number;\n /**\n * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда\n */\n target: (this: void, location: number) => void;\n}\n\nexport interface ControlElementsState {\n /**\n * Отвечает за отображение стрелки влево\n */\n canSlideLeft: boolean;\n /**\n * Отвечает за отображение стрелки вправо\n */\n canSlideRight: boolean;\n /**\n * Возможность листаться слайды drag'ом\n */\n isDraggable: boolean;\n}\n\nexport interface SlidesManagerState {\n /**\n * Общая ширина всех слайдов\n */\n contentSize: number;\n /**\n * Массив с пограничными точками слайдов, которые необходимо смещать, чтобы они всегда были в области видимости\n * (пример: для последнего слайда это n-первых слайдов, необходимых для заполнения оставшейся ширины,\n * или для первого слайда это n-последних слайдов при выравнивании по центру)\n */\n loopPoints: LoopPoint[];\n /**\n * Массив с правыми границами слайдов\n */\n snaps: number[];\n /**\n * Ширина видимой области слайдов\n */\n viewportOffsetWidth: number;\n /**\n * Массив слайдов с координатой начала слайда и шириной\n */\n slides: GallerySlidesState[];\n /**\n * Все слайды видимы без скрола\n */\n isFullyVisible: boolean;\n}\n"],"names":[],"mappings":"AA4BA,WA2BC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
export const calcMin = ({ containerWidth = 0, layerWidth = 0, slides = [], viewportOffsetWidth = 0, align, isCenterWithCustomWidth })=>{
|
|
2
|
-
switch(align){
|
|
3
|
-
case 'left':
|
|
4
|
-
return containerWidth - layerWidth;
|
|
5
|
-
case 'right':
|
|
6
|
-
return viewportOffsetWidth - layerWidth;
|
|
7
|
-
case 'center':
|
|
8
|
-
if (isCenterWithCustomWidth && slides.length) {
|
|
9
|
-
const { coordX, width } = slides[slides.length - 1];
|
|
10
|
-
return viewportOffsetWidth / 2 - coordX - width / 2;
|
|
11
|
-
} else {
|
|
12
|
-
return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
};
|
|
16
|
-
export const calcMax = ({ slides = [], viewportOffsetWidth = 0, isCenterWithCustomWidth })=>{
|
|
17
|
-
if (isCenterWithCustomWidth && slides.length) {
|
|
18
|
-
const { width, coordX } = slides[0];
|
|
19
|
-
return viewportOffsetWidth / 2 - coordX - width / 2;
|
|
20
|
-
}
|
|
21
|
-
return 0;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
//# sourceMappingURL=helpers.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/BaseGallery/helpers.ts"],"sourcesContent":["import type { AlignType } from '../../types';\nimport type { LayoutState } from './types';\n\ninterface CalcMin extends Partial<LayoutState> {\n isCenterWithCustomWidth: boolean;\n align: AlignType;\n}\n\nexport const calcMin = ({\n containerWidth = 0,\n layerWidth = 0,\n slides = [],\n viewportOffsetWidth = 0,\n align,\n isCenterWithCustomWidth,\n}: CalcMin): number | undefined => {\n switch (align) {\n case 'left':\n return containerWidth - layerWidth;\n case 'right':\n return viewportOffsetWidth - layerWidth;\n case 'center':\n if (isCenterWithCustomWidth && slides.length) {\n const { coordX, width } = slides[slides.length - 1];\n return viewportOffsetWidth / 2 - coordX - width / 2;\n } else {\n return viewportOffsetWidth - (containerWidth - viewportOffsetWidth) / 2 - layerWidth;\n }\n }\n};\n\ninterface CalcMax extends Partial<LayoutState> {\n isCenterWithCustomWidth: boolean;\n}\n\nexport const calcMax = ({\n slides = [],\n viewportOffsetWidth = 0,\n isCenterWithCustomWidth,\n}: CalcMax): number => {\n if (isCenterWithCustomWidth && slides.length) {\n const { width, coordX } = slides[0];\n return viewportOffsetWidth / 2 - coordX - width / 2;\n }\n return 0;\n};\n"],"names":["calcMin","containerWidth","layerWidth","slides","viewportOffsetWidth","align","isCenterWithCustomWidth","length","coordX","width","calcMax"],"mappings":"AAQA,OAAO,MAAMA,UAAU,CAAC,EACtBC,iBAAiB,CAAC,EAClBC,aAAa,CAAC,EACdC,SAAS,EAAE,EACXC,sBAAsB,CAAC,EACvBC,KAAK,EACLC,uBAAuB,EACf;IACR,OAAQD;QACN,KAAK;YACH,OAAOJ,iBAAiBC;QAC1B,KAAK;YACH,OAAOE,sBAAsBF;QAC/B,KAAK;YACH,IAAII,2BAA2BH,OAAOI,MAAM,EAAE;gBAC5C,MAAM,EAAEC,MAAM,EAAEC,KAAK,EAAE,GAAGN,MAAM,CAACA,OAAOI,MAAM,GAAG,EAAE;gBACnD,OAAOH,sBAAsB,IAAII,SAASC,QAAQ;YACpD,OAAO;gBACL,OAAOL,sBAAsB,AAACH,CAAAA,iBAAiBG,mBAAkB,IAAK,IAAIF;YAC5E;IACJ;AACF,EAAE;AAMF,OAAO,MAAMQ,UAAU,CAAC,EACtBP,SAAS,EAAE,EACXC,sBAAsB,CAAC,EACvBE,uBAAuB,EACf;IACR,IAAIA,2BAA2BH,OAAOI,MAAM,EAAE;QAC5C,MAAM,EAAEE,KAAK,EAAED,MAAM,EAAE,GAAGL,MAAM,CAAC,EAAE;QACnC,OAAOC,sBAAsB,IAAII,SAASC,QAAQ;IACpD;IACA,OAAO;AACT,EAAE"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/BaseGallery/types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';\nimport type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';\n\nexport interface GallerySlidesState {\n coordX: number;\n width: number;\n}\n\nexport interface ShiftingState {\n deltaX: number;\n shiftX: number;\n animation?: boolean;\n dragging: boolean;\n}\n\nexport interface LayoutState {\n containerWidth: number;\n viewportOffsetWidth: number;\n layerWidth: number;\n min?: number;\n max: number;\n slides: GallerySlidesState[];\n isFullyVisible: boolean;\n}\n\nexport interface BaseGalleryProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,\n HasAlign,\n HasRef<HTMLElement> {\n slideWidth?: string | number;\n slideIndex?: number;\n onDragStart?: CustomTouchEventHandler;\n onDragEnd?: (e: CustomTouchEvent, targetIndex: number) => void;\n onChange?: (current: number) => void;\n /**\n * Будет вызвано при клике на кнопку-стрелку влево\n */\n onPrevClick?: (event: React.MouseEvent) => void;\n /**\n * Будет вызвано при клике на кнопку-стрелку вправо\n */\n onNextClick?: (event: React.MouseEvent) => void;\n bullets?: 'dark' | 'light' | false;\n /**\n * Позволяет отключить реагирование на тач-события\n */\n dragDisabled?: boolean;\n showArrows?: boolean;\n hasPointer?: boolean;\n arrowSize?: ScrollArrowProps['size'];\n /**\n * Текст для кнопки-стрелки влево (назад). Делает ее доступной для ассистивных технологий\n */\n arrowPrevLabel?: string;\n /**\n * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий\n */\n arrowNextLabel?: string;\n}\n"],"names":[],"mappings":"AA2BA,WAiCC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { isEqual } from "@vkontakte/vkjs";
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated используйте React.useMemo
|
|
5
|
-
*/ export function useObjectMemo(object) {
|
|
6
|
-
/**
|
|
7
|
-
* Запись и чтение во время рендеринга в useRef запрещена
|
|
8
|
-
*/ const cache = React.useRef(object);
|
|
9
|
-
if (!isEqual(cache.current, object)) {
|
|
10
|
-
cache.current = object;
|
|
11
|
-
}
|
|
12
|
-
return cache.current;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
//# sourceMappingURL=useObjectMemo.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useObjectMemo.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\n\n/**\n * @deprecated используйте React.useMemo\n */\nexport function useObjectMemo<T>(object: T): T {\n /**\n * Запись и чтение во время рендеринга в useRef запрещена\n */\n const cache = React.useRef(object);\n if (!isEqual(cache.current, object)) {\n cache.current = object;\n }\n return cache.current;\n}\n"],"names":["React","isEqual","useObjectMemo","object","cache","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC,cAAiBC,MAAS;IACxC;;GAEC,GACD,MAAMC,QAAQJ,MAAMK,MAAM,CAACF;IAC3B,IAAI,CAACF,QAAQG,MAAME,OAAO,EAAEH,SAAS;QACnCC,MAAME,OAAO,GAAGH;IAClB;IACA,OAAOC,MAAME,OAAO;AACtB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useObjectMemo.d.ts","sourceRoot":"","sources":["../../src/hooks/useObjectMemo.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAS7C"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { isEqual } from "@vkontakte/vkjs";
|
|
3
|
-
/**
|
|
4
|
-
* @deprecated используйте React.useMemo
|
|
5
|
-
*/ export function useObjectMemo(object) {
|
|
6
|
-
/**
|
|
7
|
-
* Запись и чтение во время рендеринга в useRef запрещена
|
|
8
|
-
*/ const cache = React.useRef(object);
|
|
9
|
-
if (!isEqual(cache.current, object)) {
|
|
10
|
-
cache.current = object;
|
|
11
|
-
}
|
|
12
|
-
return cache.current;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
//# sourceMappingURL=useObjectMemo.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/useObjectMemo.ts"],"sourcesContent":["import * as React from 'react';\nimport { isEqual } from '@vkontakte/vkjs';\n\n/**\n * @deprecated используйте React.useMemo\n */\nexport function useObjectMemo<T>(object: T): T {\n /**\n * Запись и чтение во время рендеринга в useRef запрещена\n */\n const cache = React.useRef(object);\n if (!isEqual(cache.current, object)) {\n cache.current = object;\n }\n return cache.current;\n}\n"],"names":["React","isEqual","useObjectMemo","object","cache","useRef","current"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAQ,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC,cAAiBC,MAAS;IACxC;;GAEC,GACD,MAAMC,QAAQJ,MAAMK,MAAM,CAACF;IAC3B,IAAI,CAACF,QAAQG,MAAME,OAAO,EAAEH,SAAS;QACnCC,MAAME,OAAO,GAAGH;IAClB;IACA,OAAOC,MAAME,OAAO;AACtB"}
|