fix: ssr compatibility (#DS-3964)

Author: artembelik

packages/components/core/option/option.ts

@@ -20,6 +20,7 @@ import {
 import { ENTER, SPACE } from '@koobiq/cdk/keycodes';
 import { Subject } from 'rxjs';
 import { KBQ_TITLE_TEXT_REF, KbqTitleTextRef } from '../title';
+import { isFunction } from '../utils';
 import { KbqOptgroup } from './optgroup';
 
 /**
@@ -237,7 +238,7 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
     private mostRecentViewValue = '';
 
     constructor(
-        private readonly element: ElementRef<HTMLElement>,
+        private readonly elementRef: ElementRef<HTMLElement>,
         private readonly changeDetectorRef: ChangeDetectorRef,
         @Optional() @Inject(KBQ_OPTION_PARENT_COMPONENT) private readonly parent: KbqOptionParentComponent,
         @Optional() readonly group: KbqOptgroup
@@ -265,10 +266,14 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
         this.stateChanges.complete();
     }
 
+    /** @docs-private */
     getHeight(): number {
-        const DOMRect: DOMRect = this.element.nativeElement.getClientRects()[0];
+        const element = this.elementRef.nativeElement;
 
-        return DOMRect ? DOMRect.height : 0;
+        // For SSR compatibility
+        if (!isFunction(element.getClientRects)) return 0;
+
+        return element.getClientRects()[0]?.height ?? 0;
     }
 
     select(emitEvent: boolean = true): void {
@@ -357,7 +362,7 @@ export class KbqOption extends KbqOptionBase implements AfterViewChecked, OnDest
     }
 
     getHostElement(): HTMLElement {
-        return this.element.nativeElement;
+        return this.elementRef.nativeElement;
     }
 }
 

packages/components/core/utils/utils.ts

@@ -12,6 +12,12 @@ export const isNull = (value: unknown): value is null => {
     return value === null;
 };
 
+/** Whether the value is a function. */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (value: unknown): value is Function => {
+    return typeof value === 'function';
+};
+
 /**
  * Will be removed in the next major release
  *

packages/components/filter-bar/pipes/base-pipe.ts

@@ -54,8 +54,12 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
     /** TemplateRef for selecting an option */
     protected valueTemplate?: TemplateRef<any> | string;
 
-    /** Whether the current platform is a Mac. */
-    isMac = isMac();
+    /**
+     * Whether the current platform is a Mac.
+     *
+     * @docs-private
+     */
+    isMac = false;
 
     /** Data for the pipe.
      *  @docs-private */
@@ -85,6 +89,10 @@ export abstract class KbqBasePipe<V> implements AfterViewInit {
         });
 
         this.filterBar?.internalTemplatesChanges.pipe(takeUntilDestroyed()).subscribe(this.updateTemplates);
+
+        afterNextRender(() => {
+            this.isMac = isMac();
+        });
     }
 
     ngAfterViewInit(): void {

packages/components/filter-bar/pipes/pipe-title.ts

@@ -1,4 +1,5 @@
 import {
+    afterNextRender,
     AfterViewInit,
     ContentChild,
     ContentChildren,
@@ -62,6 +63,14 @@ export class KbqPipeTitleDirective extends KbqTooltipTrigger implements AfterVie
     @ContentChild('kbqTitleContainer')
     private parentContainer: ElementRef;
 
+    constructor() {
+        super();
+
+        afterNextRender(() => {
+            this.listenToMutationObserver();
+        });
+    }
+
     ngAfterViewInit() {
         this.parentContainer = this.parentContainer || this.componentInstance?.parentTextElement || this.elementRef;
         this.childContainer = this.childContainer || this.componentInstance?.textElement || this.elementRef;
@@ -71,13 +80,6 @@ export class KbqPipeTitleDirective extends KbqTooltipTrigger implements AfterVie
             .pipe(debounceTime(this.debounceInterval))
             .subscribe(() => (this.disabled = !this.isOverflown));
 
-        this.mutationSubscription = this.createMutationObserver()
-            .pipe(throttleTime(this.debounceInterval))
-            .subscribe(() => {
-                this.disabled = !this.isOverflown;
-                this.content = this.viewValue;
-            });
-
         this.focusMonitorSubscription = this.focusMonitor
             .monitor(this.elementRef)
             .subscribe((origin) => (origin === 'keyboard' ? this.handleElementEnter() : this.hideTooltip()));
@@ -100,6 +102,15 @@ export class KbqPipeTitleDirective extends KbqTooltipTrigger implements AfterVie
         this.disabled = true;
     }
 
+    private listenToMutationObserver(): void {
+        this.mutationSubscription = this.createMutationObserver()
+            .pipe(throttleTime(this.debounceInterval))
+            .subscribe(() => {
+                this.disabled = !this.isOverflown;
+                this.content = this.viewValue;
+            });
+    }
+
     private createMutationObserver(): Observable<MutationRecord[]> {
         return new Observable((observer) => {
             const mutationObserver = new MutationObserver((mutations) => observer.next(mutations));

packages/components/list/list-selection.component.ts

@@ -50,6 +50,7 @@ import {
     UP_ARROW
 } from '@koobiq/cdk/keycodes';
 import {
+    isFunction,
     KBQ_OPTION_ACTION_PARENT,
     KBQ_TITLE_TEXT_REF,
     KbqOptgroup,
@@ -439,10 +440,14 @@ export class KbqListSelection implements AfterContentInit, AfterViewInit, OnDest
         return !(this.noUnselectLast && this.selectionModel.selected.length === 1 && listOption.selected);
     }
 
+    /** @docs-private */
     getHeight(): number {
-        const clientRects = this.elementRef.nativeElement.getClientRects();
+        const element = this.elementRef.nativeElement;
 
-        return clientRects.length ? clientRects[0].height : 0;
+        // For SSR compatibility
+        if (!isFunction(element.getClientRects)) return 0;
+
+        return element.getClientRects()[0]?.height ?? 0;
     }
 
     // View to model callback that should be called if the list or its options lost focus.
@@ -822,10 +827,14 @@ export class KbqListOption implements OnDestroy, OnInit, IFocusableOption, KbqTi
         this.changeDetector.markForCheck();
     }
 
+    /** @docs-private */
     getHeight(): number {
-        const clientRects = this.elementRef.nativeElement.getClientRects();
+        const element = this.elementRef.nativeElement;
+
+        // For SSR compatibility
+        if (!isFunction(element.getClientRects)) return 0;
 
-        return clientRects.length ? clientRects[0].height : 0;
+        return element.getClientRects()[0]?.height ?? 0;
     }
 
     /** Handles click events on the list option. */

packages/components/modal/modal-util.ts

@@ -1,12 +1,14 @@
+/** @docs-private */
 export interface IClickPosition {
     x: number;
     y: number;
 }
 
+/** @docs-private */
 export class ModalUtil {
     private lastPosition: IClickPosition;
 
-    constructor(private document: Document) {
+    constructor(private document?: Document) {
         this.lastPosition = { x: -1, y: -1 };
         this.listenDocumentClick();
     }
@@ -16,11 +18,15 @@ export class ModalUtil {
     }
 
     listenDocumentClick(): void {
-        this.document.addEventListener('click', (event: MouseEvent) => {
+        this.document?.addEventListener('click', (event: MouseEvent) => {
             this.lastPosition = { x: event.clientX, y: event.clientY };
         });
     }
 }
 
-// eslint-disable-next-line no-restricted-globals
-export const modalUtilObject = new ModalUtil(document);
+/** @docs-private */
+export const modalUtilObject = new ModalUtil(
+    // For SSR compatibility
+    // eslint-disable-next-line no-restricted-globals
+    typeof document === 'undefined' ? undefined : document
+);

packages/components/navbar/navbar.component.ts

@@ -21,6 +21,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { isHorizontalMovement, isVerticalMovement, LEFT_ARROW, RIGHT_ARROW, TAB } from '@koobiq/cdk/keycodes';
+import { isFunction } from '@koobiq/components/core';
 import { merge, Observable, Subject, Subscription } from 'rxjs';
 import { debounceTime, startWith } from 'rxjs/operators';
 import {
@@ -205,7 +206,12 @@ export class KbqNavbar extends KbqFocusableComponent implements AfterViewInit, A
     private readonly resizeDebounceInterval: number = 100;
 
     private get width(): number {
-        return this.elementRef.nativeElement.getBoundingClientRect().width;
+        const element = this.elementRef.nativeElement;
+
+        // For SSR compatibility
+        if (!isFunction(element.getBoundingClientRect)) return 0;
+
+        return element.getBoundingClientRect().width;
     }
 
     private get totalItemsWidth(): number {

packages/components/scrollbar/scrollbar.directive.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-globals */
 import { CdkScrollable } from '@angular/cdk/overlay';
 import { Directive, Inject, Input, NgZone, OnDestroy } from '@angular/core';
 import { OverlayScrollbars } from 'overlayscrollbars';
@@ -10,8 +9,9 @@ type Defer = [
 ];
 
 const createDefer = (): Defer => {
+    // For SSR compatibility
+    // eslint-disable-next-line no-restricted-globals
     if (typeof window === 'undefined') {
-        // mock ssr calls with "noop"
         const noop = () => {};
 
         return [noop, noop];
@@ -20,6 +20,7 @@ const createDefer = (): Defer => {
     let idleId: number;
     let rafId: number;
 
+    // eslint-disable-next-line no-restricted-globals
     const { requestIdleCallback, requestAnimationFrame, cancelAnimationFrame, cancelIdleCallback } = window;
 
     const idleSupported = typeof requestIdleCallback === 'function';

packages/components/tree/tree-option.component.ts

@@ -19,6 +19,7 @@ import {
 } from '@angular/core';
 import { hasModifierKey, TAB } from '@koobiq/cdk/keycodes';
 import {
+    isFunction,
     KBQ_OPTION_ACTION_PARENT,
     KBQ_TITLE_TEXT_REF,
     KbqOptionActionComponent,
@@ -301,14 +302,14 @@ export class KbqTreeOption extends KbqTreeNode<KbqTreeOption> implements AfterCo
             });
     }
 
+    /** @docs-private */
     getHeight(): number {
-        const clientRects = this.elementRef.nativeElement.getClientRects();
+        const element = this.elementRef.nativeElement;
 
-        if (clientRects.length) {
-            return clientRects[0].height;
-        }
+        // For SSR compatibility
+        if (!isFunction(element.getClientRects)) return 0;
 
-        return 0;
+        return element.getClientRects()[0]?.height ?? 0;
     }
 
     select(setFocus = true): void {

packages/components/tree/tree-selection.component.ts

@@ -45,7 +45,7 @@ import {
     TAB,
     UP_ARROW
 } from '@koobiq/cdk/keycodes';
-import { getKbqSelectNonArrayValueError, MultipleMode } from '@koobiq/components/core';
+import { getKbqSelectNonArrayValueError, isFunction, MultipleMode } from '@koobiq/components/core';
 import { merge, Observable, Subscription } from 'rxjs';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
 import { delay } from 'rxjs/operators';
@@ -610,13 +610,12 @@ export class KbqTreeSelection
     }
 
     private getHeight(): number {
-        const clientRects = this.elementRef.nativeElement.getClientRects();
+        const element = this.elementRef.nativeElement;
 
-        if (clientRects.length) {
-            return clientRects[0].height;
-        }
+        // For SSR compatibility
+        if (!isFunction(element.getClientRects)) return 0;
 
-        return 0;
+        return element.getClientRects()[0]?.height ?? 0;
     }
 
     private updateTabIndex(): void {