From 4a243a74a1858aee6e8b24069d58e9da501f0f41 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 15 Sep 2022 16:50:58 +0200 Subject: [PATCH 1/3] fix: ssr --- src/components/Root.tsx | 4 +++- src/tasty/styles/dimension.ts | 2 +- src/tasty/utils/styles.ts | 4 +++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Root.tsx b/src/components/Root.tsx index abb8c310..baa77e74 100644 --- a/src/components/Root.tsx +++ b/src/components/Root.tsx @@ -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 { diff --git a/src/tasty/styles/dimension.ts b/src/tasty/styles/dimension.ts index b7d35f4b..05de6e4c 100644 --- a/src/tasty/styles/dimension.ts +++ b/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; } diff --git a/src/tasty/utils/styles.ts b/src/tasty/utils/styles.ts index a6f9ff15..51ba5585 100644 --- a/src/tasty/utils/styles.ts +++ b/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)', From cfc56f32fb82139e979f5881dc7fe831901568eb Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 15 Sep 2022 17:54:28 +0300 Subject: [PATCH 2/3] Create weak-seals-collect.md --- .changeset/weak-seals-collect.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-seals-collect.md diff --git a/.changeset/weak-seals-collect.md b/.changeset/weak-seals-collect.md new file mode 100644 index 00000000..21dad195 --- /dev/null +++ b/.changeset/weak-seals-collect.md @@ -0,0 +1,5 @@ +--- +"@cube-dev/ui-kit": patch +--- + +Fix SSR support From 15ecfbe69fb1f821aa5c21842d975dac835fce38 Mon Sep 17 00:00:00 2001 From: Andrey Yamanov Date: Thu, 15 Sep 2022 18:07:02 +0200 Subject: [PATCH 3/3] fix: srr * 2 --- src/components/Root.tsx | 4 +-- src/utils/react/index.ts | 1 + src/utils/react/useViewportSize.ts | 53 ++++++++++++++++++++++++++++++ 3 files changed, 56 insertions(+), 2 deletions(-) create mode 100644 src/utils/react/useViewportSize.ts diff --git a/src/components/Root.tsx b/src/components/Root.tsx index baa77e74..aeac4a72 100644 --- a/src/components/Root.tsx +++ b/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'; @@ -83,7 +83,7 @@ export function Root(allProps: CubeRootProps) { let timeoutRef = useRef(); useEffect(() => { - if (IS_DVH_SUPPORTED) { + if (IS_DVH_SUPPORTED && typeof window !== 'undefined') { return; } diff --git a/src/utils/react/index.ts b/src/utils/react/index.ts index 5745b0c4..9ab11a87 100644 --- a/src/utils/react/index.ts +++ b/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'; diff --git a/src/utils/react/useViewportSize.ts b/src/utils/react/useViewportSize.ts new file mode 100644 index 00000000..4e695b98 --- /dev/null +++ b/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), + }; +}