@envive-ai/react-toolkit-v3 0.3.40 → 0.3.41

package/src/components/SocialProof/SocialProof.tsx

@@ -1,9 +1,9 @@
 import { ImageGalleryLayout } from '../ImageGallery/types/types';
 import { PromptButtonVariant } from '../PromptButton';
 import { PromptCarouselRows } from '../PromptCarousel';
-import { Theme } from '../Tokens';
+import { Theme, screensBreakpointsVariables } from '../Tokens';
 import { resolveTheme } from '../utils/resolveTheme';
-import { useCheckIsMobile } from '../utils/useCheckIsMobile';
+import { useGetContentSize } from '../utils/useGetContentSize';
 import { IconVariant } from '../WidgetTextField/types/types';
 import { WidgetWrapperVariant } from '../WidgetWrapper';
 import { WidgetWrapperWithTitle } from '../WidgetWrapperWithTitle/WidgetWrapperWithTitle';
@@ -72,7 +72,12 @@ export const SocialProof = ({
 
   const finalTheme = resolveTheme(theme);
 
-  const { isMobile } = useCheckIsMobile('sm');
+  const { width: containerWidth, ref: containerRef } = useGetContentSize({});
+
+  const isMobile =
+    containerWidth !== undefined
+      ? containerWidth < screensBreakpointsVariables.sm
+      : typeof window !== 'undefined' && window.innerWidth < screensBreakpointsVariables.sm;
 
   const hasDynamicLayout = kind === WidgetKind.DYNAMIC || dynamicLayout !== undefined;
 
@@ -131,19 +136,9 @@ export const SocialProof = ({
     />
   );
 
-  if (isFourGridLayout) {
-    return (
-      <WidgetWrapperWithTitle
-        id={id}
-        testId={testId}
-        variant={variant}
-        className={className}
-        style={style}
-        titleLabel={titleLabel}
-        logoSrc={logoSrc}
-        hexCardColor={hexCardColor}
-        hideLogo={hideLogo}
-      >
+  const layoutContent = (() => {
+    if (isFourGridLayout) {
+      return (
         <SocialProofComponents.LayoutFourGrid
           hideImage={hideImageGallery}
           images={images}
@@ -151,46 +146,23 @@ export const SocialProof = ({
           subheadline={subheadline}
           textfield={!hideTextField && textfield}
         />
-      </WidgetWrapperWithTitle>
-    );
-  }
+      );
+    }
 
-  if (isFourHorizontalLayout) {
-    return (
-      <WidgetWrapperWithTitle
-        id={id}
-        testId={testId}
-        variant={variant}
-        className={className}
-        style={style}
-        titleLabel={titleLabel}
-        logoSrc={logoSrc}
-        hexCardColor={hexCardColor}
-        hideLogo={hideLogo}
-      >
+    if (isFourHorizontalLayout) {
+      return (
         <SocialProofComponents.LayoutFourHorizontal
           hideImage={hideImageGallery}
           images={images}
           headline={headline}
           subheadline={subheadline}
           textfield={!hideTextField && textfield}
+          containerWidth={containerWidth}
         />
-      </WidgetWrapperWithTitle>
-    );
-  }
+      );
+    }
 
-  return (
-    <WidgetWrapperWithTitle
-      id={id}
-      testId={testId}
-      variant={variant}
-      className={className}
-      style={style}
-      titleLabel={titleLabel}
-      logoSrc={logoSrc}
-      hexCardColor={hexCardColor}
-      hideLogo={hideLogo}
-    >
+    return (
       <SocialProofComponents.LayoutSingle
         hideImage={hideImageGallery}
         dynamicLayout={dynamicLayout}
@@ -198,7 +170,28 @@ export const SocialProof = ({
         headline={headline}
         subheadline={subheadline}
         textfield={!hideTextField && textfield}
+        containerWidth={containerWidth}
       />
-    </WidgetWrapperWithTitle>
+    );
+  })();
+
+  return (
+    <div
+      ref={containerRef}
+      style={style}
+      className={className}
+    >
+      <WidgetWrapperWithTitle
+        id={id}
+        testId={testId}
+        variant={variant}
+        titleLabel={titleLabel}
+        logoSrc={logoSrc}
+        hexCardColor={hexCardColor}
+        hideLogo={hideLogo}
+      >
+        {layoutContent}
+      </WidgetWrapperWithTitle>
+    </div>
   );
 };

package/src/components/SocialProof/components/LayoutFourHorizontal.tsx

@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
 import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
 import { useGetContentSize } from '../../utils/useGetContentSize';
 import { screensBreakpointsVariables } from '../../Tokens';
@@ -15,6 +14,8 @@ export type LayoutFourHorizontalProps = {
   headline?: React.ReactNode;
   subheadline?: React.ReactNode;
   textfield?: React.ReactNode;
+
+  containerWidth?: number;
 };
 
 export const LayoutFourHorizontal = ({
@@ -23,10 +24,11 @@ export const LayoutFourHorizontal = ({
   headline,
   subheadline,
   textfield,
+  containerWidth,
 }: LayoutFourHorizontalProps) => {
-  const { isMobile, viewportWidth } = useCheckIsMobile('sm');
+  const isMobile = containerWidth !== undefined && containerWidth < screensBreakpointsVariables.sm;
   const isTablet =
-    !isMobile && viewportWidth !== undefined && viewportWidth < screensBreakpointsVariables.xl;
+    !isMobile && containerWidth !== undefined && containerWidth < screensBreakpointsVariables.xl;
 
   const { height, ref } = useGetContentSize({ heightDefault: 170 });
   const imageGalleryWidth = calculateWidthImageGallery(height, 4, 1);

package/src/components/SocialProof/components/LayoutSingle.tsx

@@ -1,7 +1,7 @@
 import { cloneElement } from 'react';
 import { ImageGalleryImage, ImageGalleryLayout } from '../../ImageGallery/types/types';
 import { Stack } from '../../Stack';
-import { useCheckIsMobile } from '../../utils/useCheckIsMobile';
+import { screensBreakpointsVariables } from '../../Tokens';
 import { useGetContentSize } from '../../utils/useGetContentSize';
 import { DynamicLayout } from '../types/types';
 import { HeadlineProps } from './Headline';
@@ -16,6 +16,8 @@ export type LayoutSingleProps = {
   headline?: React.ReactNode;
   subheadline?: React.ReactNode;
   textfield?: React.ReactNode;
+
+  containerWidth?: number;
 };
 
 export const LayoutSingle = ({
@@ -25,13 +27,14 @@ export const LayoutSingle = ({
   headline,
   subheadline,
   textfield,
+  containerWidth,
 }: LayoutSingleProps) => {
-  const { isMobile } = useCheckIsMobile('sm');
+  const isMobile = containerWidth !== undefined && containerWidth < screensBreakpointsVariables.sm;
 
   const isNarrowLayout =
     dynamicLayout === DynamicLayout.NARROW || (isMobile && dynamicLayout !== DynamicLayout.WIDE);
 
-  const { height, ref } = useGetContentSize({
+  const { ref } = useGetContentSize({
     heightDefault: 245,
   });