fix: ssr

.changeset/weak-seals-collect.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix SSR support

src/components/Root.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { ModalProvider } from '@react-aria/overlays';
 import { StyleSheetManager } from 'styled-components';
-import { useViewportSize } from '@react-aria/utils';
 
 import {
   BASE_STYLES,
@@ -13,6 +12,7 @@ import {
 } from '../tasty';
 import { Provider } from '../provider';
 import { TOKENS } from '../tokens';
+import { useViewportSize } from '../utils/react';
 
 import { PortalProvider } from './portal';
 import { GlobalStyles } from './GlobalStyles';
@@ -47,7 +47,9 @@ export interface CubeRootProps extends BaseProps {
 }
 
 const IS_DVH_SUPPORTED =
-  typeof CSS?.supports !== 'undefined' ? CSS.supports('height: 100dvh') : false;
+  typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
+    ? CSS.supports('height: 100dvh')
+    : false;
 
 export function Root(allProps: CubeRootProps) {
   let {
@@ -81,7 +83,7 @@ export function Root(allProps: CubeRootProps) {
   let timeoutRef = useRef<NodeJS.Timeout>();
 
   useEffect(() => {
-    if (IS_DVH_SUPPORTED) {
+    if (IS_DVH_SUPPORTED && typeof window !== 'undefined') {
       return;
     }
 

src/tasty/styles/dimension.ts

@@ -4,7 +4,7 @@ const DEFAULT_MIN_SIZE = 'var(--gap)';
 const DEFAULT_MAX_SIZE = '100%';
 
 function isSizingSupport(val) {
-  return typeof CSS !== 'undefined' && typeof CSS.supports !== 'undefined'
+  return typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
     ? CSS.supports('height', val)
     : false;
 }

src/tasty/utils/styles.ts

@@ -66,7 +66,9 @@ export type StyleStateListMap = { [key: string]: StyleStateList };
 const devMode = process.env.NODE_ENV !== 'production';
 
 const IS_DVH_SUPPORTED =
-  typeof CSS?.supports !== 'undefined' ? CSS.supports('height: 100dvh') : false;
+  typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
+    ? CSS.supports('height: 100dvh')
+    : false;
 
 export const CUSTOM_UNITS = {
   r: 'var(--radius)',

src/utils/react/index.ts

@@ -6,3 +6,4 @@ export { useSlotProps, SlotProvider, ClearSlots } from './Slots';
 export { useLayoutEffect } from './useLayoutEffect';
 export { useCombinedRefs } from './useCombinedRefs';
 export { wrapNodeIfPlain } from './wrapNodeIfPlain';
+export { useViewportSize } from './useViewportSize';

src/utils/react/useViewportSize.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+
+interface ViewportSize {
+  width: number;
+  height: number;
+}
+
+// @ts-ignore
+let visualViewport = typeof window !== 'undefined' && window.visualViewport;
+
+export function useViewportSize(): ViewportSize {
+  let [size, setSize] = useState(() => getViewportSize());
+
+  useEffect(() => {
+    // Use visualViewport api to track available height even on iOS virtual keyboard opening
+    let onResize = () => {
+      setSize((size) => {
+        let newSize = getViewportSize();
+        if (newSize.width === size.width && newSize.height === size.height) {
+          return size;
+        }
+        return newSize;
+      });
+    };
+
+    if (!visualViewport) {
+      window.addEventListener('resize', onResize);
+    } else {
+      visualViewport.addEventListener('resize', onResize);
+    }
+
+    return () => {
+      if (!visualViewport) {
+        window.removeEventListener('resize', onResize);
+      } else {
+        visualViewport.removeEventListener('resize', onResize);
+      }
+    };
+  }, []);
+
+  return size;
+}
+
+function getViewportSize(): ViewportSize {
+  return {
+    width:
+      (visualViewport && visualViewport.width) ||
+      (typeof window !== 'undefined' ? window.innerWidth : 0),
+    height:
+      (visualViewport && visualViewport.height) ||
+      (typeof window !== 'undefined' ? window.innerHeight : 0),
+  };
+}