@snack-uikit/carousel 0.5.6 → 0.6.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.6.0 (2025-07-08)
+
+
+### Features
+
+* **FF-6899:** add controlsVisibility prop ([780bf9f](https://github.com/cloud-ru-tech/snack-uikit/commit/780bf9fab6bc0c4a3487c52d68e4f13f063ecd76))
+
+
+
+
+
 ## 0.5.6 (2025-07-07)
 
 ### Only dependencies have been changed

package/README.md

@@ -25,6 +25,7 @@
 | gap | `string` | var(--dimension-2m) | Расстояние между айтемами |
 | state | `{ page: number; onChange(page: number): void; }` | - | Управление состоянием извне |
 | infiniteScroll | `boolean` | - | Цикличная прокрутка |
+| controlsVisibility | "hover" \| "always" | hover | Управление видимостью стрелок: 'hover' — по ховеру, 'always' — всегда |
 
 
 [//]: DOCUMENTATION_SECTION_END

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

@@ -30,5 +30,7 @@ export type CarouselProps = WithSupportProps<{
     };
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
+    /** Управление видимостью стрелок: 'hover' — по ховеру, 'always' — всегда @default 'hover' */
+    controlsVisibility?: 'hover' | 'always';
 }>;
-export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, autoSwipe, ...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, autoSwipe, controlsVisibility, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Carousel/Carousel.js

@@ -42,9 +42,10 @@ function Carousel(_a) {
       state,
       infiniteScroll = false,
       swipeActivateLength = 48,
-      autoSwipe
+      autoSwipe,
+      controlsVisibility = 'hover'
     } = _a,
-    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe"]);
+    rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe", "controlsVisibility"]);
   const timerRef = (0, react_1.useRef)();
   const scrollBy = (0, react_1.useMemo)(() => scrollByProp !== null && scrollByProp !== void 0 ? scrollByProp : Math.trunc(showItems), [showItems, scrollByProp]);
   const [page, setPage] = (0, uncontrollable_1.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 => {
@@ -78,7 +79,8 @@ function Carousel(_a) {
     return () => clearTimeout(timerRef.current);
   }, [autoSwipe, infiniteScroll, onRightArrowClick]);
   return (0, jsx_runtime_1.jsxs)("div", Object.assign({
-    className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className)
+    className: (0, classnames_1.default)(styles_module_scss_1.default.carousel, className),
+    "data-controls-visibility": controlsVisibility
   }, (0, utils_1.extractSupportProps)(rest), {
     children: [(0, jsx_runtime_1.jsxs)("div", {
       className: styles_module_scss_1.default.carouselBase,
@@ -96,11 +98,13 @@ function Carousel(_a) {
         children: [(infiniteScroll || page > 0) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
           onClick: onLeftArrowClick,
           variant: 'prev',
-          "data-test-id": testIds_1.TEST_IDS.arrowPrev
+          "data-test-id": testIds_1.TEST_IDS.arrowPrev,
+          className: styles_module_scss_1.default.control
         }), (infiniteScroll || page + 1 < total) && (0, jsx_runtime_1.jsx)(Control_1.Control, {
           onClick: onRightArrowClick,
           variant: 'next',
-          "data-test-id": testIds_1.TEST_IDS.arrowNext
+          "data-test-id": testIds_1.TEST_IDS.arrowNext,
+          className: styles_module_scss_1.default.control
         })]
       })]
     }), pagination && (0, jsx_runtime_1.jsx)("div", {

package/dist/cjs/components/Carousel/styles.module.css

@@ -6,12 +6,22 @@
   outline:none;
 }
 
+.control{
+  pointer-events:none;
+  opacity:0;
+  transition:opacity 0.2s;
+}
+
 .carousel{
   display:flex;
   flex-direction:column;
   align-items:center;
   box-sizing:border-box;
 }
+.carousel[data-controls-visibility=always] .control, .carousel[data-controls-visibility=hover]:hover .control{
+  pointer-events:auto;
+  opacity:1;
+}
 
 .pagination{
   padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);

package/dist/cjs/components/Control/Control.d.ts

@@ -3,4 +3,5 @@ export declare const Control: import("react").ForwardRefExoticComponent<{
 } & import("react").AriaAttributes & {
     onClick?(): void;
     variant: "prev" | "next";
+    className?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/cjs/components/Control/Control.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Control = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
 const icons_1 = require("@snack-uikit/icons");
 const utils_1 = require("@snack-uikit/utils");
@@ -25,12 +26,13 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.Control = (0, react_1.forwardRef)((_a, ref) => {
   var {
       onClick,
-      variant
+      variant,
+      className
     } = _a,
-    rest = __rest(_a, ["onClick", "variant"]);
+    rest = __rest(_a, ["onClick", "variant", "className"]);
   return (0, jsx_runtime_1.jsx)("button", Object.assign({
     ref: ref,
-    className: styles_module_scss_1.default.control,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.control, className),
     onClick: onClick,
     type: 'button',
     "data-variant": variant

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

@@ -30,5 +30,7 @@ export type CarouselProps = WithSupportProps<{
     };
     /** Цикличная прокрутка @default false*/
     infiniteScroll?: boolean;
+    /** Управление видимостью стрелок: 'hover' — по ховеру, 'always' — всегда @default 'hover' */
+    controlsVisibility?: 'hover' | 'always';
 }>;
-export declare function Carousel({ children: items, showItems, scrollBy: scrollByProp, transition, swipe, arrows, pagination, className, gap, state, infiniteScroll, swipeActivateLength, autoSwipe, ...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, autoSwipe, controlsVisibility, ...rest }: CarouselProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/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, swipeActivateLength = 48, autoSwipe } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe"]);
+    var { children: items, showItems = 1, scrollBy: scrollByProp, transition = 0.4, swipe = true, arrows = true, pagination = true, className, gap, state, infiniteScroll = false, swipeActivateLength = 48, autoSwipe, controlsVisibility = 'hover' } = _a, rest = __rest(_a, ["children", "showItems", "scrollBy", "transition", "swipe", "arrows", "pagination", "className", "gap", "state", "infiniteScroll", "swipeActivateLength", "autoSwipe", "controlsVisibility"]);
     const timerRef = useRef();
     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 => {
@@ -54,7 +54,7 @@ export function Carousel(_a) {
         timerRef.current = setTimeout(() => onRightArrowClick(), autoSwipe * 1000);
         return () => clearTimeout(timerRef.current);
     }, [autoSwipe, infiniteScroll, 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, 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) => {
+    return (_jsxs("div", Object.assign({ className: cn(styles.carousel, className), "data-controls-visibility": controlsVisibility }, 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, className: styles.control })), (infiniteScroll || page + 1 < total) && (_jsx(Control, { onClick: onRightArrowClick, variant: 'next', "data-test-id": TEST_IDS.arrowNext, className: styles.control }))] }))] }), 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/esm/components/Carousel/styles.module.css

@@ -6,12 +6,22 @@
   outline:none;
 }
 
+.control{
+  pointer-events:none;
+  opacity:0;
+  transition:opacity 0.2s;
+}
+
 .carousel{
   display:flex;
   flex-direction:column;
   align-items:center;
   box-sizing:border-box;
 }
+.carousel[data-controls-visibility=always] .control, .carousel[data-controls-visibility=hover]:hover .control{
+  pointer-events:auto;
+  opacity:1;
+}
 
 .pagination{
   padding-top:var(--space-carousel-sliders-wrap-padding-top, 8px);

package/dist/esm/components/Control/Control.d.ts

@@ -3,4 +3,5 @@ export declare const Control: import("react").ForwardRefExoticComponent<{
 } & import("react").AriaAttributes & {
     onClick?(): void;
     variant: "prev" | "next";
+    className?: string;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/Control/Control.js

@@ -10,11 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
 import { forwardRef } from 'react';
 import { ChevronLeftSVG } from '@snack-uikit/icons';
 import { extractSupportProps } from '@snack-uikit/utils';
 import styles from './styles.module.css';
 export const Control = forwardRef((_a, ref) => {
-    var { onClick, variant } = _a, rest = __rest(_a, ["onClick", "variant"]);
-    return (_jsx("button", Object.assign({ ref: ref, className: styles.control, onClick: onClick, type: 'button', "data-variant": variant }, extractSupportProps(rest), { children: _jsx(ChevronLeftSVG, { size: 24, className: styles.icon }) })));
+    var { onClick, variant, className } = _a, rest = __rest(_a, ["onClick", "variant", "className"]);
+    return (_jsx("button", Object.assign({ ref: ref, className: cn(styles.control, className), onClick: onClick, type: 'button', "data-variant": variant }, extractSupportProps(rest), { children: _jsx(ChevronLeftSVG, { size: 24, className: styles.icon }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.6",
+  "version": "0.6.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -44,5 +44,5 @@
     "merge-refs": "1.3.0",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "9e08a5c61a90e739f44ba128242a95d866452dc0"
+  "gitHead": "fd6c80ece2583c94b7686214acf00c70b3a8f55a"
 }

package/src/components/Carousel/Carousel.tsx

@@ -40,6 +40,8 @@ export type CarouselProps = WithSupportProps<{
   };
   /** Цикличная прокрутка @default false*/
   infiniteScroll?: boolean;
+  /** Управление видимостью стрелок: 'hover' — по ховеру, 'always' — всегда @default 'hover' */
+  controlsVisibility?: 'hover' | 'always';
 }>;
 
 export function Carousel({
@@ -56,6 +58,7 @@ export function Carousel({
   infiniteScroll = false,
   swipeActivateLength = 48,
   autoSwipe,
+  controlsVisibility = 'hover',
   ...rest
 }: CarouselProps) {
   const timerRef = useRef<NodeJS.Timeout>();
@@ -105,7 +108,11 @@ export function Carousel({
   }, [autoSwipe, infiniteScroll, onRightArrowClick]);
 
   return (
-    <div className={cn(styles.carousel, className)} {...extractSupportProps(rest)}>
+    <div
+      className={cn(styles.carousel, className)}
+      data-controls-visibility={controlsVisibility}
+      {...extractSupportProps(rest)}
+    >
       <div className={styles.carouselBase}>
         <ItemProvider
           showItems={showItems}
@@ -122,10 +129,20 @@ export function Carousel({
         {arrows && (
           <>
             {(infiniteScroll || page > 0) && (
-              <Control onClick={onLeftArrowClick} variant='prev' data-test-id={TEST_IDS.arrowPrev} />
+              <Control
+                onClick={onLeftArrowClick}
+                variant='prev'
+                data-test-id={TEST_IDS.arrowPrev}
+                className={styles.control}
+              />
             )}
             {(infiniteScroll || page + 1 < total) && (
-              <Control onClick={onRightArrowClick} variant='next' data-test-id={TEST_IDS.arrowNext} />
+              <Control
+                onClick={onRightArrowClick}
+                variant='next'
+                data-test-id={TEST_IDS.arrowNext}
+                className={styles.control}
+              />
             )}
           </>
         )}

package/src/components/Carousel/styles.module.scss

@@ -11,11 +11,25 @@
   outline: none;
 }
 
+.control {
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
 .carousel {
   display: flex;
   flex-direction: column;
   align-items: center;
   box-sizing: border-box;
+
+  &[data-controls-visibility=always],
+  &[data-controls-visibility=hover]:hover {
+    & .control {
+      pointer-events: auto;
+      opacity: 1;
+    }
+  }
 }
 
 .pagination {

package/src/components/Control/Control.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import { forwardRef } from 'react';
 
 import { ChevronLeftSVG } from '@snack-uikit/icons';
@@ -8,13 +9,14 @@ import styles from './styles.module.scss';
 type ControlProps = WithSupportProps<{
   onClick?(): void;
   variant: 'prev' | 'next';
+  className?: string;
 }>;
 
 export const Control = forwardRef<HTMLButtonElement, ControlProps>(
-  ({ onClick, variant, ...rest }: ControlProps, ref) => (
+  ({ onClick, variant, className, ...rest }: ControlProps, ref) => (
     <button
       ref={ref}
-      className={styles.control}
+      className={cn(styles.control, className)}
       onClick={onClick}
       type='button'
       data-variant={variant}