@royaloperahouse/harmonic 0.18.6-b → 0.18.6-c

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

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

package/dist/harmonic.cjs.development.js

@@ -3653,6 +3653,9 @@ var RotatorButtons = function RotatorButtons(_ref) {
     isTablet = _useViewport.isTablet,
     hydrated = _useViewport.hydrated;
   if (!hydrated) return null;
+  var preventMouseFocus = function preventMouseFocus(e) {
+    e.preventDefault();
+  };
   var onClickLeftHandler = function onClickLeftHandler() {
     if (onClickPrev) {
       onClickPrev();
@@ -3705,6 +3708,7 @@ var RotatorButtons = function RotatorButtons(_ref) {
     className: className
   }, availablePrev ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
     size: size,
+    onMouseDown: preventMouseFocus,
     onClick: onClickLeftHandler,
     onKeyDown: onPrevKeyDownHandler,
     tabIndex: 0,
@@ -3714,9 +3718,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
     role: "button"
   }, renderPrevIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     size: size,
-    "data-testid": "iconprevnoavailable"
+    onMouseDown: preventMouseFocus,
+    "data-testid": "iconprevnoavailable",
+    "aria-hidden": "true"
   }, renderPrevIcon())), availableNext ? (/*#__PURE__*/React__default.createElement(IconWrapper$1, {
     size: size,
+    onMouseDown: preventMouseFocus,
     onClick: onClickRightHandler,
     onKeyDown: onNextKeyDownHandler,
     tabIndex: 0,
@@ -3726,9 +3733,12 @@ var RotatorButtons = function RotatorButtons(_ref) {
     role: "button"
   }, renderNextIcon())) : (/*#__PURE__*/React__default.createElement(IconUnavailableWrapper, {
     size: size,
-    "data-testid": "iconnextnoavailable"
+    onMouseDown: preventMouseFocus,
+    "data-testid": "iconnextnoavailable",
+    "aria-hidden": "true"
   }, renderNextIcon())), showFullscreen && !isMobile && !isTablet && (/*#__PURE__*/React__default.createElement(FullscreenIconWrapper, {
     size: size,
+    onMouseDown: preventMouseFocus,
     onClick: onClickFullscreenHandler,
     onKeyDown: onFullscreenKeyDownHandler,
     tabIndex: 0,
@@ -6617,7 +6627,7 @@ var CastFiltersComponentWrapper = /*#__PURE__*/styled__default.div(_templateObje
 var CastFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject2$x || (_templateObject2$x = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 32px;\n\n  @media ", " {\n    gap: 15px;\n  }\n"])), devices.mobile);
 var HeadingTextWrapper = /*#__PURE__*/styled__default.div(_templateObject3$m || (_templateObject3$m = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  height: 44px;\n  display: flex;\n  align-items: center;\n"])));
 var RotatorButtonsWrapper = /*#__PURE__*/styled__default(GridItem)(_templateObject4$j || (_templateObject4$j = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
-var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  overflow-x: scroll;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media ", " {\n    flex-direction: column;\n    gap: 10px;\n  }\n"])), devices.mobile);
+var CastWrapper = /*#__PURE__*/styled__default.div(_templateObject5$f || (_templateObject5$f = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  overflow-x: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  @media ", " {\n    flex-direction: column;\n    gap: 10px;\n    overflow-x: scroll;\n  }\n"])), devices.mobile);
 var ActionButtons = /*#__PURE__*/styled__default.div(_templateObject6$a || (_templateObject6$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n  gap: 32px;\n\n  .mobile-only {\n    visibility: hidden;\n\n    p {\n      font-size: 14px;\n      line-height: 17px;\n    }\n  }\n\n  @media ", " {\n    .mobile-only {\n      visibility: visible;\n      padding-block: 24px;\n      font-size: 17px;\n      line-height: 24px;\n    }\n\n    flex-direction: row-reverse;\n    gap: unset;\n    justify-content: space-between;\n    border-block-end: 2px solid var(--base-color-light-grey);\n\n    :has(.mobile-only) {\n      justify-content: left;\n    }\n\n    :not(:has(.mobile-only)) {\n      padding-block: 12px;\n    }\n\n    a {\n      width: fit-content;\n    }\n  }\n"])), devices.mobile);
 var PersonWrapper = /*#__PURE__*/styled__default.div(_templateObject7$7 || (_templateObject7$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 6px;\n  margin-block-start: 2px;\n  margin-inline: 2px;\n\n  p {\n    font-size: 14px;\n    line-height: 17px;\n  }\n\n  :focus-visible {\n    outline: none;\n\n    & > div:first-child {\n      outline: 2px solid var(--color-base-black);\n    }\n  }\n\n  @media ", " {\n    flex-direction: row;\n    gap: 20px;\n    margin-block-end: 2px;\n    margin-inline-end: unset;\n\n    p {\n      font-size: 17px;\n      line-height: 24px;\n    }\n  }\n"])), devices.mobile);
 var PersonToggle = /*#__PURE__*/styled__default.div(_templateObject8$4 || (_templateObject8$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 86px;\n  height: 86px;\n  min-width: 86px;\n  border: 4px solid;\n  border-color: ", ";\n  border-radius: 50%;\n  background: var(--color-base-white);\n  position: relative;\n  box-shadow: inset 0 0 0 4px var(--color-base-white);\n"])), function (_ref) {
@@ -6707,7 +6717,7 @@ var getMovedSlides = function getMovedSlides(delta, slideWidths) {
   return movedSlides;
 };
 
-var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange"];
+var _excluded$h = ["children", "infinite", "onIndexChange", "slidesOffsetBefore", "slidesAriaHidden", "onActiveChange", "onOverflowChange", "limitDragToNavigableRange"];
 var MAX_CLONES_NUMBER = 6;
 var CLICK_DRAG_THRESHOLD = 10;
 var getClonesCount = function getClonesCount(infinite, childrenLength) {
@@ -6732,6 +6742,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     slidesAriaHidden = _ref$slidesAriaHidden === void 0 ? false : _ref$slidesAriaHidden,
     onActiveChange = _ref.onActiveChange,
     onOverflowChange = _ref.onOverflowChange,
+    _ref$limitDragToNavig = _ref.limitDragToNavigableRange,
+    limitDragToNavigableRange = _ref$limitDragToNavig === void 0 ? false : _ref$limitDragToNavig,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   var containerRef = React.useRef(null);
   var childRefs = React.useRef([]);
@@ -6837,6 +6849,39 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, 0);
     return (slidesOffsetBefore || 0) - widthsBefore;
   };
+  var canScrollRightFromIndex = function canScrollRightFromIndex(index) {
+    if (infinite) return true;
+    if (slideWidths.length === 0 || containerWidth === 0) return false;
+    var totalContentWidth = slideWidths.reduce(function (sum, width) {
+      return sum + width;
+    }, 0);
+    var widthBeforeCurrent = slideWidths.slice(0, index).reduce(function (sum, width) {
+      return sum + width;
+    }, 0);
+    var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
+    var remainingToRight = totalContentWidth - widthBeforeCurrent - visibleSpace;
+    var visible = getVisibleIndexes(index, slideWidths, containerWidth, slides.length);
+    var lastVisibleIndex = visible.length ? visible[visible.length - 1] : index;
+    var nextIndex = lastVisibleIndex + 1;
+    if (nextIndex >= slideWidths.length) return false;
+    var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
+    if (nextSlideWidth === 0) return false;
+    var EPS = 1; // pixel tolerance
+    // full next slide fits
+    if (remainingToRight + EPS >= nextSlideWidth) return true;
+    return remainingToRight > 0;
+  };
+  var canMoveNext = function canMoveNext() {
+    return canScrollRightFromIndex(currentIndex);
+  };
+  var getMaxNavigableIndex = function getMaxNavigableIndex() {
+    if (infinite) return slides.length - 1;
+    var index = 0;
+    while (index < slides.length - 1 && canScrollRightFromIndex(index)) {
+      index += 1;
+    }
+    return index;
+  };
   var navigateOnSwipeEnd = function navigateOnSwipeEnd() {
     var delta = currentTranslate.current - getTranslateX();
     var direction = delta > 0 ? -1 : 1;
@@ -6844,7 +6889,8 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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));
+      var maxNavigableIndex = limitDragToNavigableRange ? getMaxNavigableIndex() : slides.length - 1;
+      var finalIndex = infinite ? targetIndex : Math.max(0, Math.min(maxNavigableIndex, targetIndex));
       if (!infinite) {
         currentTranslate.current = getTranslateForIndex(finalIndex);
         setDragTranslateX(null);
@@ -6859,28 +6905,6 @@ var Swipe = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     setDragTranslateX(null);
   };
-  var canMoveNext = function canMoveNext() {
-    if (infinite) return true;
-    if (slideWidths.length === 0 || containerWidth === 0) return false;
-    var totalWidth = slideWidths.reduce(function (acc, w) {
-      return acc + w;
-    }, 0);
-    var widthsBefore = slideWidths.slice(0, currentIndex).reduce(function (acc, w) {
-      return acc + w;
-    }, 0);
-    var visibleSpace = containerWidth - (slidesOffsetBefore || 0);
-    var remainingToRight = totalWidth - widthsBefore - visibleSpace;
-    var visible = getVisibleIndexes(currentIndex, slideWidths, containerWidth, slides.length);
-    var lastVisibleIndex = visible.length ? visible[visible.length - 1] : currentIndex;
-    var nextIndex = lastVisibleIndex + 1;
-    if (nextIndex >= slideWidths.length) return false;
-    var nextSlideWidth = typeof slideWidths[nextIndex] === 'number' ? slideWidths[nextIndex] : 0;
-    if (nextSlideWidth === 0) return false;
-    var EPS = 1; // pixel tolerance
-    // full next slide fits
-    if (remainingToRight + EPS >= nextSlideWidth) return true;
-    return remainingToRight > 0;
-  };
   var handleTransitionEnd = function handleTransitionEnd() {
     setTransitioning(false);
     if (!infinite) return;
@@ -7092,11 +7116,13 @@ var CastFilters = function CastFilters(_ref) {
   };
   var onNext = function onNext() {
     var _swipeRef$current4;
-    return (_swipeRef$current4 = swipeRef.current) == null ? void 0 : _swipeRef$current4.nextSlide();
+    if (!availableNext) return;
+    (_swipeRef$current4 = swipeRef.current) == null || _swipeRef$current4.nextSlide();
   };
   var onPrev = function onPrev() {
     var _swipeRef$current5;
-    return (_swipeRef$current5 = swipeRef.current) == null ? void 0 : _swipeRef$current5.prevSlide();
+    if (!availablePrev) return;
+    (_swipeRef$current5 = swipeRef.current) == null || _swipeRef$current5.prevSlide();
   };
   React.useEffect(function () {
     var el = castWrapperRef.current;
@@ -7119,15 +7145,15 @@ var CastFilters = function CastFilters(_ref) {
     };
   }, []);
   var handleMouseDown = React.useCallback(function (e) {
-    if (!castWrapperRef.current) return;
+    if (!isMobile || !castWrapperRef.current) return;
     isDraggingRef.current = true;
     hasDraggedRef.current = false;
     startXRef.current = e.clientX;
     scrollStartRef.current = castWrapperRef.current.scrollLeft;
     if (e.target === castWrapperRef.current) e.preventDefault();
-  }, []);
+  }, [isMobile]);
   var handleMouseMove = React.useCallback(function (e) {
-    if (!isDraggingRef.current || !castWrapperRef.current) return;
+    if (!isMobile || !isDraggingRef.current || !castWrapperRef.current) return;
     var deltaX = e.clientX - startXRef.current;
     var threshold = 5;
     if (Math.abs(deltaX) > threshold) {
@@ -7135,17 +7161,19 @@ var CastFilters = function CastFilters(_ref) {
       e.preventDefault();
       castWrapperRef.current.scrollLeft = scrollStartRef.current - deltaX;
     }
-  }, []);
+  }, [isMobile]);
   var handleMouseUp = React.useCallback(function () {
+    if (!isMobile) return;
     isDraggingRef.current = false;
     setTimeout(function () {
       hasDraggedRef.current = false;
     }, 0);
-  }, []);
+  }, [isMobile]);
   var handleMouseLeave = React.useCallback(function () {
+    if (!isMobile) return;
     isDraggingRef.current = false;
     hasDraggedRef.current = false;
-  }, []);
+  }, [isMobile]);
   var handleClick = React__default.useCallback(function (index, onClick) {
     if (hasDraggedRef.current) return;
     if (onSelect) onSelect(index);
@@ -7231,7 +7259,8 @@ var CastFilters = function CastFilters(_ref) {
     onIndexChange: onIndexChangeHandler,
     "data-testid": "cast-filter-swipe",
     ref: swipeRef,
-    onOverflowChange: handleOverflowChange
+    onOverflowChange: handleOverflowChange,
+    limitDragToNavigableRange: true
   }, getPersonCards())))), showActionButtonsSection && (/*#__PURE__*/React__default.createElement(ActionButtons, null, selectedIndices.length === 0 && emptySelectionText && (/*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
     size: "medium",
     className: "mobile-only"