fix: extract document fetching prop into util (#259)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,2 @@
-<!--
-### Breaking Changes
-
-### Features
-
 ### Bug Fixes and Improvements
-
-### Other Changes
--->
+- Fixed globally-scoped references to the document prop into a getter that doesn't fail in ssr environments (#259)

packages/core/src/controlledEnvironment/layoutUtils.ts

@@ -1,5 +1,7 @@
+import { getDocument } from '../utils';
+
 export const computeItemHeight = (treeId: string) => {
-  const firstItem = document.querySelector<HTMLElement>(
+  const firstItem = getDocument()?.querySelector<HTMLElement>(
     `[data-rct-tree="${treeId}"] [data-rct-item-container="true"]`
   );
   return firstItem?.offsetHeight ?? 5;

packages/core/src/controlledEnvironment/useControlledTreeEnvironmentProps.ts

@@ -8,7 +8,7 @@ import {
 } from '../types';
 import { scrollIntoView } from '../tree/scrollIntoView';
 import { useRenderers } from '../renderers/useRenderers';
-import { buildMapForTrees } from '../utils';
+import { buildMapForTrees, getDocument } from '../utils';
 import { getItemsLinearly } from '../tree/getItemsLinearly';
 import { useRefCopy } from '../useRefCopy';
 import { useStableHandler } from '../use-stable-handler';
@@ -53,13 +53,13 @@ export const useControlledTreeEnvironmentProps = ({
     Required<TreeChangeHandlers>['onFocusItem']
   >(
     (item, treeId) => {
-      const newItem = document.querySelector(
+      const newItem = getDocument()?.querySelector(
         `[data-rct-tree="${treeId}"] [data-rct-item-id="${item.index}"]`
       );
 
       if (autoFocus ?? true) {
         if (
-          document.activeElement?.attributes.getNamedItem(
+          getDocument()?.activeElement?.attributes.getNamedItem(
             'data-rct-search-input'
           )?.value !== 'true'
         ) {
@@ -123,7 +123,7 @@ export const useControlledTreeEnvironmentProps = ({
   );
 
   const focusTree = useCallback((treeId: string) => {
-    const focusItem = document.querySelector(
+    const focusItem = getDocument()?.querySelector(
       `[data-rct-tree="${treeId}"] [data-rct-item-focus="true"]`
     );
     (focusItem as HTMLElement)?.focus?.();
@@ -136,8 +136,8 @@ export const useControlledTreeEnvironmentProps = ({
           autoFocusTree &&
           (autoFocus ?? true) &&
           treeId &&
-          !document
-            .querySelector(`[data-rct-tree="${treeId}"]`)
+          !getDocument()
+            ?.querySelector(`[data-rct-tree="${treeId}"]`)
             ?.contains(document.activeElement)
         ) {
           focusTree(treeId);

packages/core/src/hotkeys/useHotkey.ts

@@ -3,6 +3,7 @@ import { useHtmlElementEventListener } from '../useHtmlElementEventListener';
 import { KeyboardBindings } from '../types';
 import { useKeyboardBindings } from './useKeyboardBindings';
 import { useCallSoon } from '../useCallSoon';
+import { getDocument } from '../utils';
 
 const elementsThatCanTakeText = ['input', 'textarea'];
 
@@ -24,7 +25,7 @@ export const useHotkey = (
     [combinationName, keyboardBindings]
   );
 
-  useHtmlElementEventListener(document, 'keydown', e => {
+  useHtmlElementEventListener(getDocument(), 'keydown', e => {
     if (active === false) {
       return;
     }
@@ -63,7 +64,7 @@ export const useHotkey = (
     }
   });
 
-  useHtmlElementEventListener(document, 'keyup', e => {
+  useHtmlElementEventListener(getDocument(), 'keyup', e => {
     if (active === false) {
       return;
     }

packages/core/src/hotkeys/useKey.ts

@@ -1,21 +1,18 @@
 import { useHtmlElementEventListener } from '../useHtmlElementEventListener';
+import { getDocument } from '../utils';
 
 export const useKey = (
   key: string,
   onHit: (e: KeyboardEvent) => void,
   active?: boolean
 ) => {
-  useHtmlElementEventListener(
-    typeof document !== 'undefined' ? document : undefined,
-    'keydown',
-    e => {
-      if (!active) {
-        return;
-      }
+  useHtmlElementEventListener(getDocument(), 'keydown', e => {
+    if (!active) {
+      return;
+    }
 
-      if (active && key.toLowerCase() === e.key.toLowerCase()) {
-        onHit(e);
-      }
+    if (active && key.toLowerCase() === e.key.toLowerCase()) {
+      onHit(e);
     }
-  );
+  });
 };

packages/core/src/search/SearchInput.tsx

@@ -6,6 +6,7 @@ import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvir
 import { useSearchMatchFocus } from './useSearchMatchFocus';
 import { useViewState } from '../tree/useViewState';
 import { useCallSoon } from '../useCallSoon';
+import { getDocument } from '../utils';
 
 export const SearchInput: React.FC<{
   containerRef?: HTMLElement;
@@ -24,7 +25,7 @@ export const SearchInput: React.FC<{
     if (environment.autoFocus ?? true) {
       // Refocus item in tree
       // TODO move logic as reusable method into tree or tree environment
-      const focusItem = document.querySelector(
+      const focusItem = getDocument()?.querySelector(
         `[data-rct-tree="${treeId}"] [data-rct-item-focus="true"]`
       );
       (focusItem as HTMLElement)?.focus?.();

packages/core/src/tree/scrollIntoView.ts

@@ -1,3 +1,5 @@
+import { getDocument } from '../utils';
+
 export const scrollIntoView = (element: Element | undefined | null) => {
   if (!element) {
     return;
@@ -11,9 +13,10 @@ export const scrollIntoView = (element: Element | undefined | null) => {
       boundingBox.top >= 0 &&
       boundingBox.left >= 0 &&
       boundingBox.bottom <=
-        (window.innerHeight || document.documentElement.clientHeight) &&
+        (window.innerHeight ||
+          !!getDocument()?.documentElement?.clientHeight) &&
       boundingBox.right <=
-        (window.innerWidth || document.documentElement.clientWidth);
+        (window.innerWidth || !!getDocument()?.documentElement?.clientWidth);
     if (!isElementInViewport) {
       element.scrollIntoView();
     }

packages/core/src/utils.ts

@@ -5,3 +5,6 @@ export const buildMapForTrees = <T>(
   treeIds
     .map(id => [id, build(id)] as const)
     .reduce((a, [id, obj]) => ({ ...a, [id]: obj }), {});
+
+export const getDocument = () =>
+  typeof document !== 'undefined' ? document : undefined;