@snack-uikit/carousel 0.2.8 → 0.2.9

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.2.9 (2024-04-03)
+
+
+### Bug Fixes
+
+* **PDS-92:** remove ref for items ([5ef87bb](https://github.com/cloud-ru-tech/snack-uikit/commit/5ef87bb473bcf9525bc9f7022436668666a8dc2a))
+
+
+
+
+
 ## 0.2.8 (2024-02-28)
 
 ### Only dependencies have been changed

package/dist/components/Carousel/Carousel.d.ts

@@ -27,4 +27,4 @@ export type CarouselProps = WithSupportProps<{
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
 }>;
-export declare function Carousel({ children, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/Carousel.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 import { PaginationSlider } from '@snack-uikit/pagination';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -21,19 +21,13 @@ import { ItemProvider } from '../ItemProvider';
 import styles from './styles.module.css';
 export function Carousel(_a) {
     var _b;
-    var { children, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll"]);
-    const initialItems = children;
-    const itemsRef = useRef(children);
-    useEffect(() => {
-        itemsRef.current = initialItems;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialItems.length]);
+    var { children: items, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll"]);
     const scrollBy = useMemo(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
     const [page, setPage] = useUncontrolledProp(state === null || state === void 0 ? void 0 : state.page, (_b = state === null || state === void 0 ? void 0 : state.page) !== null && _b !== void 0 ? _b : 0, newPage => {
         const result = typeof newPage === 'function' ? newPage(page) : newPage;
         state === null || state === void 0 ? void 0 : state.onChange(result);
     });
-    const total = useMemo(() => Math.trunc(initialItems.length / scrollBy) + (initialItems.length % scrollBy ? 1 : 0), [initialItems.length, scrollBy]);
+    const total = useMemo(() => Math.trunc(items.length / scrollBy) + (items.length % scrollBy ? 1 : 0), [items.length, scrollBy]);
     const onLeftArrowClick = useCallback(() => {
         setPage((page) => (infiniteScroll ? (total + page - 1) % total : Math.max(0, page - 1)));
     }, [infiniteScroll, setPage, total]);
@@ -47,7 +41,7 @@ export function Carousel(_a) {
         }
         onLeftArrowClick();
     }, [onLeftArrowClick, onRightArrowClick]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.carouselBase, children: [_jsx(ItemProvider, { showItems: showItems, scrollBy: scrollBy, swipe: swipe, transition: transition, items: itemsRef.current, slideCallback: slideCallback, page: page, gap: gap }), arrows && (_jsxs(_Fragment, { children: [(infiniteScroll || page > 0) && (_jsx(Control, { onClick: onLeftArrowClick, variant: 'prev', "data-test-id": TEST_IDS.arrowPrev })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext }))] }))] }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: (page) => {
+    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.carouselBase, children: [_jsx(ItemProvider, { showItems: showItems, scrollBy: scrollBy, swipe: swipe, transition: transition, items: items, slideCallback: slideCallback, page: page, gap: gap }), arrows && (_jsxs(_Fragment, { children: [(infiniteScroll || page > 0) && (_jsx(Control, { onClick: onLeftArrowClick, variant: 'prev', "data-test-id": TEST_IDS.arrowPrev })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext }))] }))] }), pagination && (_jsx("div", { className: styles.pagination, children: _jsx(PaginationSlider, { "data-test-id": TEST_IDS.pagination, page: page + 1, onChange: (page) => {
                         setPage(page - 1);
                     }, total: total }) }))] })));
 }

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.8",
+  "version": "0.2.9",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "classnames": "2.3.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "0054db0a5550fb69d388335d844017bca31fffe7"
+  "gitHead": "a20e8e6d435accc13b59b95401200d7dbf52ed10"
 }

package/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { ReactElement, useCallback, useEffect, useMemo, useRef } from 'react';
+import { ReactElement, useCallback, useMemo } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
 
 import { PaginationSlider } from '@snack-uikit/pagination';
@@ -39,7 +39,7 @@ export type CarouselProps = WithSupportProps<{
 }>;
 
 export function Carousel({
-  children,
+  children: items,
   showItems = 1,
   scrollBy: scrollByProp,
   transition = 0.4,
@@ -52,14 +52,6 @@ export function Carousel({
   infiniteScroll = false,
   ...rest
 }: CarouselProps) {
-  const initialItems = children;
-  const itemsRef = useRef(children);
-
-  useEffect(() => {
-    itemsRef.current = initialItems;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [initialItems.length]);
-
   const scrollBy = useMemo(() => scrollByProp ?? Math.trunc(showItems), [showItems, scrollByProp]);
 
   const [page, setPage] = useUncontrolledProp<number>(state?.page, state?.page ?? 0, newPage => {
@@ -68,8 +60,8 @@ export function Carousel({
   });
 
   const total = useMemo(
-    () => Math.trunc(initialItems.length / scrollBy) + (initialItems.length % scrollBy ? 1 : 0),
-    [initialItems.length, scrollBy],
+    () => Math.trunc(items.length / scrollBy) + (items.length % scrollBy ? 1 : 0),
+    [items.length, scrollBy],
   );
 
   const onLeftArrowClick = useCallback(() => {
@@ -100,7 +92,7 @@ export function Carousel({
           scrollBy={scrollBy}
           swipe={swipe}
           transition={transition}
-          items={itemsRef.current}
+          items={items}
           slideCallback={slideCallback}
           page={page}
           gap={gap}