@royaloperahouse/harmonic 0.1.8-k → 0.1.8-l

package/dist/components/molecules/Swipe/Swipe.d.ts

@@ -8,5 +8,6 @@ declare const Swipe: React.ForwardRefExoticComponent<{
     infinite?: boolean | undefined;
     slidesOffsetBefore?: number | undefined;
     onIndexChange?: ((index: number) => void) | undefined;
+    onActiveChange?: ((value: boolean) => void) | undefined;
 } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<SwipeRef>>;
 export default Swipe;

package/dist/components/molecules/Swipe/helper.d.ts

@@ -1 +1,2 @@
 export declare const getVisibleIndexes: (currentIndex: number, slideWidths: number[], containerWidth: number, slidesLength: number) => number[];
+export declare const getMovedSlides: (delta: number, slideWidths: number[]) => number;

package/dist/components/organisms/Carousels/Carousel/helper.d.ts

@@ -3,6 +3,8 @@ export declare const GRID_VALUES: {
     desktop: {
         gapsNumber: number;
         columnsNumber: number;
+        gapsNumberOffset: number;
+        columnsNumberOffset: number;
         largeCard: {
             gapsPerSlide: number;
             columnsPerSlide: number;
@@ -19,6 +21,6 @@ export declare const GRID_VALUES: {
         gapsPerSlide: number;
     };
 };
-export declare const getCardSlideDesktopStyles: (type: CarouselType) => string;
+export declare const getCardSlideDesktopStyles: (type: CarouselType, isActive?: boolean | undefined) => string;
 export declare const getCardSlideMobileStyles: () => string;
 export declare const getImageSlideStyles: (imageHeight: number) => string;

package/dist/harmonic.cjs.development.js

@@ -7316,6 +7316,8 @@ var GRID_VALUES = {
   desktop: {
     gapsNumber: 13,
     columnsNumber: 13,
+    gapsNumberOffset: 15,
+    columnsNumberOffset: 14,
     largeCard: {
       gapsPerSlide: 4,
       columnsPerSlide: 5
@@ -7343,16 +7345,20 @@ var calculateSlideGapsSpace = function calculateSlideGapsSpace(gapsPerSlide) {
   return "calc(" + GRID_COLUMN_GAP + " * " + gapsPerSlide + ")";
 };
 // Slide styles
-var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type) {
+var getCardSlideDesktopStyles = function getCardSlideDesktopStyles(type, isActive) {
   var _GRID_VALUES$desktop = GRID_VALUES.desktop,
     gapsNumber = _GRID_VALUES$desktop.gapsNumber,
-    columnsNumber = _GRID_VALUES$desktop.columnsNumber;
+    columnsNumber = _GRID_VALUES$desktop.columnsNumber,
+    columnsNumberOffset = _GRID_VALUES$desktop.columnsNumberOffset,
+    gapsNumberOffset = _GRID_VALUES$desktop.gapsNumberOffset;
   var _ref = type === exports.CarouselType.LargeCard ? GRID_VALUES.desktop.largeCard : GRID_VALUES.desktop.smallCard,
     gapsPerSlide = _ref.gapsPerSlide,
     columnsPerSlide = _ref.columnsPerSlide;
-  var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gapsNumber);
+  var columns = isActive ? columnsNumberOffset : columnsNumber;
+  var gaps = isActive ? gapsNumberOffset : gapsNumber;
+  var gapsSpaceInMainGrid = calculateGapsSpaceInMainGrid(gaps);
   var slideGapsSpace = calculateSlideGapsSpace(gapsPerSlide);
-  return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columnsNumber + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
+  return "\n      width: calc( (" + columnsPerSlide + " * (100% - " + gapsSpaceInMainGrid + ") / " + columns + ") + " + slideGapsSpace + " );\n      margin-right: " + GRID_COLUMN_GAP + ";\n    ";
 };
 var getCardSlideMobileStyles = function getCardSlideMobileStyles() {
   var _GRID_VALUES$mobile = GRID_VALUES.mobile,
@@ -7376,8 +7382,9 @@ var ImageCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject$N ||
   return "&&& {\n        .swipe-slide > figure {\n          " + getImageSlideStyles(imagesHeightDevice) + "\n        }\n      }";
 });
 var CardsCarouselWrapper = /*#__PURE__*/styled__default.div(_templateObject2$A || (_templateObject2$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  @media ", " {\n    && {\n      .swipe-slide {\n        ", "\n      }\n    }\n}}"])), function (_ref3) {
-  var type = _ref3.type;
-  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type) + "\n        }\n      }\n    ";
+  var type = _ref3.type,
+    isActive = _ref3.isActive;
+  return "\n      & {\n        .swipe-slide {\n          " + getCardSlideDesktopStyles(type, isActive) + "\n        }\n      }\n    ";
 }, devices.mobile, /*#__PURE__*/getCardSlideMobileStyles());
 var TitleButtonsGrid = /*#__PURE__*/styled__default(Grid)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-bottom: 28px;\n\n  @media ", " {\n    padding-bottom: 0;\n  }\n\n  @media ", " {\n    margin-bottom: 20px;\n  }\n"])), devices.mobile, devices.mobile);
 var CarouselInfoWrapper = /*#__PURE__*/styled__default.div(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  user-select: text;\n"])));
@@ -7395,10 +7402,12 @@ var SwipeGridWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject8$5
 var _templateObject$O, _templateObject2$B;
 var SWIPE_SLIDE_CLASS_NAME = 'swipe-slide';
 var SwipeContainer = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  width: 100%;\n  touch-action: pan-y;\n"])));
-var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", "px);\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (props) {
-  return props.transitioning ? 'transform 0.3s ease-in-out' : 'none';
-}, function (props) {
-  return props.translateX;
+var SwipeTrack = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  transition: ", ";\n  transform: translateX(", ");\n\n  .", " {\n    flex-shrink: 0;\n  }\n"])), function (_ref) {
+  var transitioning = _ref.transitioning;
+  return transitioning ? 'transform 0.3s ease' : 'none';
+}, function (_ref2) {
+  var translateX = _ref2.translateX;
+  return translateX + "px";
 }, SWIPE_SLIDE_CLASS_NAME);
 
 /**
@@ -7426,9 +7435,26 @@ var getVisibleIndexes = function getVisibleIndexes(currentIndex, slideWidths, co
   }
   return visible;
 };
+var getMovedSlides = function getMovedSlides(delta, slideWidths) {
+  var absDelta = Math.abs(delta);
+  var movedSlides = 0;
+  var accumulated = 0;
+  for (var i = 0; i < slideWidths.length; i++) {
+    accumulated += slideWidths[i];
+    // Allow partial slide (e.g. 50% of next slide) to count
+    var partialThreshold = slideWidths[i] * 0.5;
+    if (absDelta > accumulated - partialThreshold) {
+      movedSlides++;
+    } else {
+      break;
+    }
+  }
+  return movedSlides;
+};
 
-var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "onActiveChange"];
 var MAX_CLONES_NUMBER = 6;
+var CLICK_DRAG_THRESHOLD = 20;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
   if (!infinite) return 0;
   if (childrenLength > MAX_CLONES_NUMBER) return MAX_CLONES_NUMBER;
@@ -7448,13 +7474,29 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onIndexChange = _ref.onIndexChange,
     _ref$slidesOffsetBefo = _ref.slidesOffsetBefore,
     slidesOffsetBefore = _ref$slidesOffsetBefo === void 0 ? 0 : _ref$slidesOffsetBefo,
+    onActiveChange = _ref.onActiveChange,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
   var startX = React.useRef(0);
   var currentTranslate = React.useRef(0);
   var isDragging = React.useRef(false);
+  var isMouseDown = React.useRef(false);
+  var isActive = React.useRef(false);
+  var isClickPrevented = React.useRef(false);
   var uniqueIdRef = React.useRef(generateDomElementId());
+  var _useState = React.useState(null),
+    dragTranslateX = _useState[0],
+    setDragTranslateX = _useState[1];
+  var _useState2 = React.useState(false),
+    transitioning = _useState2[0],
+    setTransitioning = _useState2[1];
+  var _useState3 = React.useState([]),
+    slideWidths = _useState3[0],
+    setSlideWidths = _useState3[1];
+  var _useState4 = React.useState(0),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
   var _useMemo = React.useMemo(function () {
       var count = getClonesCount(infinite, children.length);
       var leftClones = infinite ? children.slice(-count) : [];
@@ -7467,65 +7509,74 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, [children, infinite]),
     slides = _useMemo.slides,
     clonesCount = _useMemo.clonesCount;
-  // Set the initial index to clonesCount (so the first real slide is shown)
-  var _useState = React.useState(infinite ? clonesCount : 0),
-    currentIndex = _useState[0],
-    setCurrentIndex = _useState[1];
-  var _useState2 = React.useState(false),
-    transitioning = _useState2[0],
-    setTransitioning = _useState2[1];
-  var _useState3 = React.useState([]),
-    slideWidths = _useState3[0],
-    setSlideWidths = _useState3[1];
-  var _useState4 = React.useState(0),
-    containerWidth = _useState4[0],
-    setContainerWidth = _useState4[1];
+  var _useState5 = React.useState(infinite ? clonesCount : 0),
+    currentIndex = _useState5[0],
+    setCurrentIndex = _useState5[1];
   React.useEffect(function () {
     if (!onIndexChange) return;
     if (!infinite) {
       onIndexChange(currentIndex);
-      return;
+    } else {
+      var offset = currentIndex - clonesCount + children.length;
+      var realIndex = offset % children.length;
+      onIndexChange(realIndex);
     }
-    var offset = currentIndex - clonesCount + children.length;
-    var realIndex = offset % children.length;
-    onIndexChange(realIndex);
-  }, [currentIndex, onIndexChange, infinite, children.length]);
-  // Update dimensions
+  }, [currentIndex, onIndexChange, infinite, children.length, clonesCount]);
   var updateDimensions = React.useCallback(function () {
     if (containerRef.current) setContainerWidth(containerRef.current.offsetWidth);
     if (childRefs.current.length) setSlideWidths(childRefs.current.map(getSlidedWidth));
   }, []);
   React.useEffect(function () {
-    var animationFrameRequestId = requestAnimationFrame(function () {
-      updateDimensions();
-    });
+    var animationFrameRequestId = requestAnimationFrame(updateDimensions);
     return function () {
-      cancelAnimationFrame(animationFrameRequestId);
+      return cancelAnimationFrame(animationFrameRequestId);
     };
   }, [children]);
   React.useEffect(function () {
     var observer = new ResizeObserver(updateDimensions);
     if (containerRef.current) observer.observe(containerRef.current);
     return function () {
-      observer.disconnect();
+      return observer.disconnect();
     };
   }, [children]);
-  // Compute current translate X value by summing widths of all slides before currentIndex.
+  var setIsActive = function setIsActive() {
+    if (!isActive.current) {
+      isActive.current = true;
+      onActiveChange == null || onActiveChange(true);
+    }
+  };
   var getTranslateX = function getTranslateX() {
-    var slideOffset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
+    var offset = slidesOffsetBefore - slideWidths.slice(0, currentIndex).reduce(function (acc, width) {
       return acc + width;
     }, 0);
-    return slideOffset + (slidesOffsetBefore || 0); // Apply offsetBefore
+    return offset + (slidesOffsetBefore || 0);
+  };
+  var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
+    var delta = currentTranslate.current - getTranslateX();
+    var direction = delta > 0 ? -1 : 1;
+    var movedSlides = getMovedSlides(delta, slideWidths);
+    if (Math.abs(delta) > 20) {
+      movedSlides = Math.max(1, movedSlides);
+      var targetIndex = currentIndex + direction * movedSlides;
+      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(slides.length - 1, targetIndex));
+      setTransitioning(true);
+      setCurrentIndex(finalIndex);
+    } else {
+      setTransitioning(true);
+      setCurrentIndex(function (prev) {
+        return prev;
+      });
+    }
+    setDragTranslateX(null);
   };
   var canMoveNext = function canMoveNext() {
     var totalVisibleWidth = slideWidths.slice(currentIndex).reduce(function (acc, width) {
       return acc + width;
     }, 0);
-    // In non-infinite mode, only move if there is more to show
     return infinite || totalVisibleWidth > containerWidth - (slidesOffsetBefore || 0);
   };
   var handleTransitionEnd = function handleTransitionEnd() {
-    setTransitioning(false); // Reset transitioning after animation ends
+    setTransitioning(false);
     if (!infinite) return;
     if (currentIndex >= children.length + clonesCount) {
       setCurrentIndex(clonesCount);
@@ -7534,22 +7585,16 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var goToPrev = function goToPrev() {
-    if (transitioning) return; // Prevent clicks during transition
-    if (currentIndex === 0 && !infinite) {
-      setTransitioning(false); // Reset immediately if no more slides
-      return;
-    }
+    if (transitioning) return;
+    setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
       return infinite ? prev - 1 : Math.max(0, prev - 1);
     });
   };
   var goToNext = function goToNext() {
-    if (transitioning || !canMoveNext()) return; // Prevent clicks during transition
-    if (currentIndex === children.length - 1 && !infinite) {
-      setTransitioning(false); // Reset immediately if no more slides
-      return;
-    }
+    if (transitioning || !canMoveNext()) return;
+    setIsActive();
     setTransitioning(true);
     setCurrentIndex(function (prev) {
       return infinite ? prev + 1 : Math.min(children.length - 1, prev + 1);
@@ -7562,26 +7607,70 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   });
   var handleTouchStart = function handleTouchStart(e) {
+    setIsActive();
     startX.current = e.touches[0].clientX;
     isDragging.current = true;
+    isClickPrevented.current = false;
     setTransitioning(false);
   };
   var handleTouchMove = function handleTouchMove(e) {
     if (!isDragging.current) return;
     var deltaX = e.touches[0].clientX - startX.current;
-    currentTranslate.current = getTranslateX() + deltaX;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
+    }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
   };
   var handleTouchEnd = function handleTouchEnd() {
     isDragging.current = false;
-    setTransitioning(true);
-    if (currentTranslate.current > getTranslateX()) {
-      goToPrev();
-    } else if (currentTranslate.current < getTranslateX()) {
-      goToNext();
+    navigateOnSwipeEnd();
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    if (!isDragging.current || !isMouseDown.current || transitioning) return;
+    var deltaX = e.clientX - startX.current;
+    if (Math.abs(deltaX) > CLICK_DRAG_THRESHOLD) {
+      isClickPrevented.current = true;
     }
+    var visualOffset = getTranslateX() + deltaX;
+    currentTranslate.current = visualOffset;
+    setDragTranslateX(visualOffset);
+  };
+  var _handleMouseUp = function handleMouseUp() {
+    if (!isDragging.current || !isMouseDown.current) return;
+    isDragging.current = false;
+    isMouseDown.current = false;
+    window.removeEventListener('mousemove', handleMouseMove);
+    window.removeEventListener('mouseup', _handleMouseUp);
+    if (!isClickPrevented.current) {
+      setDragTranslateX(null);
+      return;
+    }
+    navigateOnSwipeEnd();
+  };
+  var handleMouseDown = function handleMouseDown(e) {
+    if (transitioning || e.button !== 0) return;
+    e.preventDefault();
+    setIsActive();
+    startX.current = e.clientX;
+    isDragging.current = true;
+    isMouseDown.current = true;
+    isClickPrevented.current = false;
+    setTransitioning(false);
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', _handleMouseUp);
   };
   var onSlideFocus = function onSlideFocus(isVisible, index) {
-    if (!isVisible) setCurrentIndex(index);
+    if (!isVisible) {
+      setCurrentIndex(index);
+    }
+  };
+  var onClickCapture = function onClickCapture(e) {
+    if (isClickPrevented.current) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
   };
   var visibleIndexes = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
   return /*#__PURE__*/React__default.createElement(SwipeContainer, Object.assign({
@@ -7589,11 +7678,12 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onTouchStart: handleTouchStart,
     onTouchMove: handleTouchMove,
     onTouchEnd: handleTouchEnd,
+    onMouseDown: handleMouseDown,
     className: "swipe"
   }, props), /*#__PURE__*/React__default.createElement(SwipeTrack, {
     className: "swipe-track-wrapper",
-    translateX: getTranslateX(),
-    transitioning: transitioning,
+    translateX: dragTranslateX !== null ? dragTranslateX : getTranslateX(),
+    transitioning: transitioning && dragTranslateX === null,
     onTransitionEnd: handleTransitionEnd
   }, slides.map(function (child, index) {
     var isVisible = visibleIndexes.includes(index);
@@ -7606,7 +7696,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       },
       onFocus: function onFocus() {
         return onSlideFocus(isVisible, index);
-      }
+      },
+      onClickCapture: onClickCapture
     });
   })));
 });
@@ -7660,19 +7751,23 @@ var Carousel = function Carousel(_ref) {
   }, [useOffset, active]);
   var onNext = function onNext() {
     var _swipeRef$current;
-    if (useOffset && !active) setActive(true);
     (_swipeRef$current = swipeRef.current) == null || _swipeRef$current.nextSlide();
   };
   var onPrev = function onPrev() {
     var _swipeRef$current2;
-    if (useOffset && !active) setActive(true);
     (_swipeRef$current2 = swipeRef.current) == null || _swipeRef$current2.prevSlide();
   };
+  var onActiveChangeHandler = function onActiveChangeHandler(value) {
+    if (useOffset && !active) {
+      setActive(value);
+    }
+  };
   var carouselTitleId = "carousel-title-" + title;
   var Wrapper = type === exports.CarouselType.Image ? ImageCarouselWrapper : CardsCarouselWrapper;
   return /*#__PURE__*/React__default.createElement(Wrapper, {
     className: className,
     type: type,
+    isActive: active,
     imagesHeightDevice: imagesHeightDevice,
     imagesHeightDesktop: imagesHeightDesktop,
     role: "region",
@@ -7711,6 +7806,9 @@ var Carousel = function Carousel(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 13
   }, /*#__PURE__*/React__default.createElement(Swipe, {
+    onActiveChange: function onActiveChange(value) {
+      return onActiveChangeHandler(value);
+    },
     "data-testid": "carousel-swipe",
     ref: swipeRef,
     infinite: infinite,