@snack-uikit/carousel 0.2.18 → 0.2.20-preview-94780dcd.0

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.19 (2024-09-07)
+
+
+### Bug Fixes
+
+* **FF-5560:** fix swipe ([12714e8](https://github.com/cloud-ru-tech/snack-uikit/commit/12714e8c0318f7aac976fe327fa830ebd37cb3ed))
+
+
+
+
+
 ## 0.2.18 (2024-08-15)
 
 ### Only dependencies have been changed

package/README.md

@@ -18,6 +18,7 @@
 | scrollBy | `number` | Math.trunc(show) | Сдвиг айтемов при смене 1 страницы |
 | transition | `number` | 0.4 | Время переключения 1 страницы (в s) |
 | swipe | `boolean` | true | Переключение страниц свайпом |
+| swipeActivateLength | `number` | 48 | Минимальная длина в px для активации свайпа |
 | arrows | `boolean` | true | Использовать стрелки для переключения страниц |
 | pagination | `boolean` | true | Использовать пагинацию для переключения страниц |
 | gap | `string` | var(--dimension-2m) | Расстояние между айтемами |

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

@@ -13,6 +13,8 @@ export type CarouselProps = WithSupportProps<{
     transition?: number;
     /** Переключение страниц свайпом @default true */
     swipe?: boolean;
+    /** Минимальная длина в px для активации свайпа @default 48 */
+    swipeActivateLength?: number;
     /** Использовать стрелки для переключения страниц @default true */
     arrows?: boolean;
     /** Использовать пагинацию для переключения страниц @default true */
@@ -27,4 +29,4 @@ export type CarouselProps = WithSupportProps<{
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
 }>;
-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;
+export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Carousel/Carousel.js

@@ -21,7 +21,7 @@ import { ItemProvider } from '../ItemProvider';
 import styles from './styles.module.css';
 export function Carousel(_a) {
     var _b;
-    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"]);
+    var { children: items, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false, swipeActivateLength = 48 } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength"]);
     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;
@@ -41,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: 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) => {
+    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, swipeActivateLength: swipeActivateLength }), 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/dist/components/Control/styles.module.css

@@ -29,7 +29,7 @@
   outline-width:var(--border-state-focus-s-border-width, 2px);
   outline-style:var(--border-state-focus-s-border-style, solid);
   outline-color:var(--border-state-focus-s-border-color, );
-  border-color:var(--sys-available-complementary, #15151b);
+  border-color:var(--sys-available-complementary, #1c1c24);
   outline-color:var(--sys-available-on-complementary, #ffffff);
   box-shadow:none;
 }

package/dist/components/ItemProvider/ItemProvider.d.ts

@@ -6,7 +6,8 @@ export type ItemProviderProps = {
     slideCallback(direction: number): void;
     transition: number;
     swipe: boolean;
+    swipeActivateLength: number;
     page: number;
     gap?: string;
 };
-export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }: ItemProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ItemProvider/ItemProvider.js

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { TEST_IDS } from '../../testIds';
 import { getPageX } from './helpers';
 import styles from './styles.module.css';
-export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, page, gap, }) {
+export function ItemProvider({ items, showItems, scrollBy, slideCallback, transition, swipe, swipeActivateLength, page, gap, }) {
     const containerRef = useRef(null);
     const [computedValues, setComputedValues] = useState({
         itemWidth: 200,
@@ -83,7 +83,7 @@ export function ItemProvider({ items, showItems, scrollBy, slideCallback, transi
         if (drag.finished) {
             return;
         }
-        if (Math.abs(drag.drag) < computedValues.itemWidth / 2) {
+        if (Math.abs(drag.drag) < swipeActivateLength) {
             return setDrag({
                 initial: transform,
                 start: 0,

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.2.18",
+  "version": "0.2.20-preview-94780dcd.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.0",
-    "@snack-uikit/pagination": "0.7.0",
-    "@snack-uikit/utils": "3.3.0",
+    "@snack-uikit/icons": "0.22.1-preview-94780dcd.0",
+    "@snack-uikit/pagination": "0.7.1-preview-94780dcd.0",
+    "@snack-uikit/utils": "3.3.1-preview-94780dcd.0",
     "classnames": "2.3.2",
     "lodash.debounce": "4.0.8",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "01d09f2bffea51f14bcf910ba49f7e4493f8b560"
+  "gitHead": "0b67805c876ec8ccc1567d110a3b37b04d2f0fb6"
 }

package/src/components/Carousel/Carousel.tsx

@@ -23,6 +23,8 @@ export type CarouselProps = WithSupportProps<{
   transition?: number;
   /** Переключение страниц свайпом @default true */
   swipe?: boolean;
+  /** Минимальная длина в px для активации свайпа @default 48 */
+  swipeActivateLength?: number;
   /** Использовать стрелки для переключения страниц @default true */
   arrows?: boolean;
   /** Использовать пагинацию для переключения страниц @default true */
@@ -50,6 +52,7 @@ export function Carousel({
   gap,
   state,
   infiniteScroll = false,
+  swipeActivateLength = 48,
   ...rest
 }: CarouselProps) {
   const scrollBy = useMemo(() => scrollByProp ?? Math.trunc(showItems), [showItems, scrollByProp]);
@@ -96,6 +99,7 @@ export function Carousel({
           slideCallback={slideCallback}
           page={page}
           gap={gap}
+          swipeActivateLength={swipeActivateLength}
         />
 
         {arrows && (

package/src/components/ItemProvider/ItemProvider.tsx

@@ -12,6 +12,7 @@ export type ItemProviderProps = {
   slideCallback(direction: number): void;
   transition: number;
   swipe: boolean;
+  swipeActivateLength: number;
   page: number;
   gap?: string;
 };
@@ -23,6 +24,7 @@ export function ItemProvider({
   slideCallback,
   transition,
   swipe,
+  swipeActivateLength,
   page,
   gap,
 }: ItemProviderProps) {
@@ -131,7 +133,7 @@ export function ItemProvider({
     if (drag.finished) {
       return;
     }
-    if (Math.abs(drag.drag) < computedValues.itemWidth / 2) {
+    if (Math.abs(drag.drag) < swipeActivateLength) {
       return setDrag({
         initial: transform,
         start: 0,