SITE-23502 - resolving SSR issues with carousel.

common/changes/pcln-carousel/SITE-23502_2024-09-09-14-02.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-carousel",
+      "comment": "Adding SSR check to no longer crash next-landing",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-carousel"
+}

packages/carousel/src/Carousel.jsx

@@ -11,6 +11,7 @@
   getVisibleSlidesArray,
   useResponsiveVisibleSlides,
   getMobileVisibleSlides,
+  getVisibleSlides,
 } from './helpers'
 import { RenderInView } from './RenderInView'
 import { CAROUSEL_BREAKPOINT_1, ARROW_MARGIN, ARROW_JUSTIFY_CONTENT } from './constants'
@@ -71,16 +72,29 @@
   overflowAllowancePxTop = 0,
   maxHeight,
   arrowButtonZIndex,
+  lockedWidth,
 }) => {
   const widths = layoutToFlexWidths(layout, children.length)
   const layoutSize = layout?.split('-').length
   const visibleSlidesArray = getVisibleSlidesArray(visibleSlides)
-  const { responsiveVisibleSlides, browserWidth } = useResponsiveVisibleSlides(visibleSlidesArray)
+  const isBrowser = typeof window !== 'undefined'
+  let calculatedResponsiveVisibleSlides
+  let calculatedBrowserWidth
+  const DEFAULT_WIDTH = 1024
+  if (isBrowser && !lockedWidth) {
+    const { responsiveVisibleSlides, browserWidth } = useResponsiveVisibleSlides(visibleSlidesArray)
+    calculatedResponsiveVisibleSlides = responsiveVisibleSlides
+    calculatedBrowserWidth = browserWidth
+  } else {
+    calculatedResponsiveVisibleSlides = getVisibleSlides(visibleSlidesArray, DEFAULT_WIDTH)
+    calculatedBrowserWidth = DEFAULT_WIDTH
+  }
+
   const overflowAdjust = overflowAllowancePxTop
     ? (overflowAllowancePxTop + overflowAllowancePxY) / 2
     : overflowAllowancePxY
 
-  if (!displayArrowsMobile && browserWidth < CAROUSEL_BREAKPOINT_1) {
+  if (!displayArrowsMobile && calculatedBrowserWidth < CAROUSEL_BREAKPOINT_1) {
     return (
       <SlideBox
         slideSpacing={slideSpacing}
@@ -109,8 +123,8 @@
         naturalSlideWidth={naturalSlideWidth}
         naturalSlideHeight={naturalSlideHeight}
         totalSlides={children.length}
-        visibleSlides={layoutSize || responsiveVisibleSlides}
-        dragEnabled={children.length > (layoutSize || responsiveVisibleSlides)}
+        visibleSlides={layoutSize || calculatedResponsiveVisibleSlides}
+        dragEnabled={children.length > (layoutSize || calculatedResponsiveVisibleSlides)}
         isIntrinsicHeight={isIntrinsicHeight}
         step={layoutSize || step}
         dragStep={layoutSize || step}
@@ -322,4 +336,6 @@
   maxHeight: PropTypes.number,
   /** z-index for arrow buttons*/
   arrowButtonZIndex: PropTypes.number,
+  /** set width number. Ignores responsive logic */
+  lockedWidth: PropTypes.number,
 }

packages/carousel/src/Carousel.stories.jsx

@@ -137,6 +137,25 @@ const SimpleTextContent = () => (
   </Text>
 )
 
+const NonResponsiveTemplate = (args) => <Carousel {...args}>{renderCards()}</Carousel>
+
+export const SSRNonresponsive = NonResponsiveTemplate.bind({})
+SSRNonresponsive.args = {
+  visibleSlides: 3,
+  setWidth: 1024,
+  mobileVisibleSlides: [1.1, 2.1, 2.1],
+  showDots: false,
+  showForwardBackBtns: true,
+  onSlideChange: action('Slide Change'),
+  buttonSize: '60px',
+  sideButtonMargin: '-30px',
+}
+
+SSRNonresponsive.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement)
+  expect(canvas.queryByTestId('slide-box')).not.toBeInTheDocument()
+}
+
 const CardWithPopover = () => {
   return (
     <Card borderRadius={20} boxShadowSize='lg' borderWidth={0} p={4} height='200px' bg='background.lightest'>