@deck.gl/widgets 9.2.10 → 9.3.0-alpha.1

package/src/scrollbar-widget.tsx

@@ -0,0 +1,288 @@
+import {Widget} from '@deck.gl/core';
+import type {Position, Viewport, WidgetPlacement, WidgetProps} from '@deck.gl/core';
+import {render} from 'preact';
+import {RangeInput, type RangeInputDecoration} from './lib/components/range-input';
+
+export type ScrollbarOrientation = 'vertical' | 'horizontal';
+
+export type ContentBounds = [min: Position, max: Position];
+
+export type ScrollbarDecoration = {
+  contentBounds: ContentBounds;
+  color: string;
+  title?: string;
+  /** Callback when the decoration is clicked. Return `true` to mark the event as handled, and prevent the default behavior. */
+  onClick?: (evt: MouseEvent) => boolean;
+};
+
+const clamp = (value: number, min: number, max: number) => {
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+};
+
+export type ScrollbarWidgetProps = WidgetProps & {
+  /** The full extent of the scrollable content, in world coordinates.
+   * The widget relies on this value to calculate the position and size of the slider button and track.
+   * If not supplied, the scrollbar will always be hidden.
+   */
+  contentBounds?: ContentBounds | null;
+  placement?: WidgetPlacement;
+  viewId?: string | null;
+  /** Direction of the scrollbar. `'horizontal'` scrolls the camera along the X axis, and `'vertical'` scrolls the camera along the Y axis.
+   * @default 'vertical'
+   */
+  orientation?: ScrollbarOrientation;
+  /* Pixels scrolled when clicked on the step buttons.
+   * @default 1/10 of the viewport size
+   */
+  stepSize?: number | null;
+  /* Pixels scrolled when clicked on the track.
+   * @default 100% of the viewport size
+   */
+  pageSize?: number | null;
+  /** Label of the step button at the start.
+   * @default 'Scroll left' | 'Scroll up'
+   */
+  startButtonAriaLabel?: string;
+  /** Label of the end button at the start.
+   * @default 'Scroll right' | 'Scroll down'
+   */
+  endButtonAriaLabel?: string;
+  /** If `true`, mouse wheel events over the canvas will be intercepted by this scrollbar.
+   * Useful when simulating the native scrollbar's behavior.
+   * @default false
+   */
+  captureWheel?: boolean;
+  /** Custom markers to overlay on the track. */
+  decorations?: ScrollbarDecoration[];
+};
+
+type ScrollbarWidgetRequiredProps = Required<ScrollbarWidgetProps>;
+
+/** A scrollbar widget to be used with OrthographicView */
+export class ScrollbarWidget extends Widget<ScrollbarWidgetProps> {
+  static override defaultProps: ScrollbarWidgetRequiredProps = {
+    ...Widget.defaultProps,
+    contentBounds: null,
+    placement: 'top-right',
+    viewId: null,
+    orientation: 'vertical',
+    stepSize: null,
+    pageSize: null,
+    startButtonAriaLabel: '',
+    endButtonAriaLabel: '',
+    captureWheel: false,
+    decorations: []
+  };
+
+  override className = 'deck-widget-scrollbar';
+
+  placement: WidgetPlacement = 'fill';
+
+  private viewport?: Viewport;
+  private contentSize = 0;
+  private viewportSize = 0;
+  private scrollOffset = 0;
+
+  constructor(props: ScrollbarWidgetProps) {
+    const resolved = {
+      ...ScrollbarWidget.defaultProps,
+      ...props
+    } as ScrollbarWidgetRequiredProps;
+    super(resolved);
+    this.viewId = resolved.viewId ?? null;
+  }
+
+  override onViewportChange(viewport: Viewport) {
+    this.viewport = viewport;
+    this.onRenderHTML();
+  }
+
+  override onRenderHTML(): void {
+    const element = this.rootElement;
+    if (!element) {
+      return;
+    }
+
+    element.dataset.placement = this.props.placement;
+    const viewport = this.viewport;
+    this.updateViewport(viewport);
+
+    const clampedOffset = this.getClampedOffset();
+    const wheelTarget = this.getWheelEventTarget(this.props.captureWheel ? 'global' : 'local');
+    const decorations = this.getDecorations(viewport);
+    const isVertical = this.isVertical();
+    const startLabel =
+      this.props.startButtonAriaLabel ?? (isVertical ? 'Scroll up' : 'Scroll left');
+    const endLabel = this.props.endButtonAriaLabel ?? (isVertical ? 'Scroll down' : 'Scroll right');
+
+    const ui = (
+      <RangeInput
+        min={0}
+        max={Math.max(0, this.contentSize)}
+        step={this.getEffectiveStep()}
+        pageSize={this.getEffectivePage()}
+        value={[clampedOffset, clampedOffset + this.viewportSize]}
+        orientation={this.props.orientation}
+        stepButtons
+        startButtonAriaLabel={startLabel}
+        endButtonAriaLabel={endLabel}
+        eventTarget={wheelTarget}
+        decorations={decorations}
+        onChange={this.handleRangeChange}
+      />
+    );
+
+    render(ui, element);
+  }
+
+  override onRemove(): void {
+    if (this.rootElement) {
+      render(null, this.rootElement);
+    }
+    super.onRemove();
+  }
+
+  private updateViewport(viewport?: Viewport): void {
+    if (!viewport) {
+      this.contentSize = 0;
+      this.scrollOffset = 0;
+      this.viewportSize = 0;
+      return;
+    }
+
+    const {contentBounds} = this.props;
+    const isVertical = this.isVertical();
+    const projectedBounds = contentBounds
+      ? projectBounds(contentBounds, viewport, isVertical)
+      : ([0, 0] as [number, number]);
+
+    this.contentSize = projectedBounds[1] - projectedBounds[0];
+    this.scrollOffset = -projectedBounds[0];
+    this.viewportSize = isVertical ? viewport.height : viewport.width;
+  }
+
+  private getDecorations(viewport?: Viewport): RangeInputDecoration[] {
+    const {decorations = [], contentBounds} = this.props;
+    if (!viewport || !contentBounds || decorations.length === 0) {
+      return [];
+    }
+
+    const isVertical = this.isVertical();
+    const [contentStart] = projectBounds(contentBounds, viewport, isVertical);
+
+    return decorations.map(decoration => {
+      const [start, end] = projectBounds(decoration.contentBounds, viewport, isVertical);
+      const onClick = decoration.onClick
+        ? (e: MouseEvent) => {
+            const handled = decoration.onClick?.(e);
+            if (handled) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }
+        : undefined;
+      return {
+        position: [start - contentStart, end - contentStart],
+        element: (
+          <div
+            style={{
+              pointerEvents: onClick ? 'all' : 'none',
+              width: '100%',
+              height: '100%',
+              backgroundColor: decoration.color
+            }}
+            title={decoration.title}
+            onClick={onClick}
+          />
+        )
+      };
+    });
+  }
+
+  private getWheelEventTarget(mode: 'global' | 'local' | null) {
+    if (mode === null) return null;
+    if (mode === 'local') return this.rootElement;
+
+    return this.deck?.props.parent || this.deck?.getCanvas()?.parentElement || this.rootElement;
+  }
+
+  private getMaxScroll(): number {
+    return Math.max(0, this.contentSize - this.viewportSize);
+  }
+
+  private getClampedOffset(): number {
+    const maxScroll = this.getMaxScroll();
+    return clamp(this.scrollOffset, 0, maxScroll);
+  }
+
+  private isVertical(): boolean {
+    return this.props.orientation !== 'horizontal';
+  }
+
+  private getEffectiveStep(): number {
+    if (typeof this.props.stepSize === 'number' && !Number.isNaN(this.props.stepSize)) {
+      return this.props.stepSize;
+    }
+    return Math.max(1, this.viewportSize / 10 || 1);
+  }
+
+  private getEffectivePage(): number {
+    if (typeof this.props.pageSize === 'number' && !Number.isNaN(this.props.pageSize)) {
+      return this.props.pageSize;
+    }
+    return this.viewportSize;
+  }
+
+  private emitScroll(next: number): void {
+    const maxScroll = this.getMaxScroll();
+    const target = clamp(Math.round(next), 0, maxScroll);
+    const viewport = this.viewport;
+    if (viewport && target !== this.getClampedOffset()) {
+      const pixel = viewport.project(viewport.position) as [number, number];
+      if (this.isVertical()) {
+        pixel[1] -= target - this.scrollOffset;
+      } else {
+        pixel[0] -= target - this.scrollOffset;
+      }
+      const {target: newTarget} = viewport.panByPosition(viewport.position, pixel);
+
+      // @ts-expect-error Using private method temporary until there's a public one
+      this.deck._onViewStateChange({
+        viewId: viewport.id,
+        viewState: {
+          ...this.getViewState(viewport.id),
+          target: newTarget
+        },
+        interactionState: {}
+      });
+    }
+  }
+
+  private handleRangeChange = (nextValue: [number, number]) => {
+    this.emitScroll(nextValue[0]);
+  };
+}
+
+function projectBounds(
+  bounds: ContentBounds,
+  viewport: Viewport,
+  isVertical: boolean
+): [min: number, max: number] {
+  return bounds
+    .map(([x, y]) => viewport.project([x, y, 0]))
+    .reduce(
+      (range: [number, number], [x, y]) => {
+        const value = isVertical ? y : x;
+        range[0] = Math.min(range[0], value);
+        range[1] = Math.max(range[1], value);
+        return range;
+      },
+      [Infinity, -Infinity]
+    );
+}

package/src/stats-widget.tsx

@@ -7,9 +7,6 @@ import {luma} from '@luma.gl/core';
 import {render} from 'preact';
 import type {Stats, Stat} from '@probe.gl/stats';
 
-const RIGHT_ARROW = '\u25b6';
-const DOWN_ARROW = '\u2b07';
-
 const DEFAULT_COUNT_FORMATTER = (stat: Stat): string => `${stat.name}: ${stat.count}`;
 
 function formatTime(time: number): string {
@@ -36,6 +33,10 @@ export type StatsWidgetProps = WidgetProps & {
   viewId?: string | null;
   /** Type of stats to display. */
   type?: 'deck' | 'luma' | 'device' | 'custom';
+  /** Expand the stats UI by default.
+   * @default false
+   */
+  defaultIsExpanded?: boolean;
   /** Stats object to visualize. */
   stats?: Stats;
   /** Title shown in the header of the pop-up. Defaults to stats.id. */
@@ -55,6 +56,7 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     type: 'deck',
     placement: 'top-left',
     viewId: null,
+    defaultIsExpanded: false,
     stats: undefined!,
     title: 'Stats',
     framesPerUpdate: 1,
@@ -75,6 +77,7 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
     super(props);
     this._formatters = {...DEFAULT_FORMATTERS};
     this._resetOnUpdate = {...this.props.resetOnUpdate};
+    this.collapsed = !props.defaultIsExpanded;
     this.setProps(props);
   }
 
@@ -127,7 +130,10 @@ export class StatsWidget extends Widget<StatsWidgetProps> {
           style={{cursor: 'pointer', pointerEvents: 'auto'}}
           onClick={this._toggleCollapsed}
         >
-          {collapsed ? RIGHT_ARROW : DOWN_ARROW} {title}
+          <b>{title}</b>
+          <button className="deck-widget-dropdown-button">
+            <span className={`deck-widget-dropdown-icon ${collapsed ? '' : 'open'}`} />
+          </button>
         </div>
         {!collapsed && <div className="deck-widget-stats-content">{items}</div>}
       </div>,

package/src/stylesheet.css

@@ -1,5 +1,6 @@
 .deck-widget {
   margin: var(--widget-margin, 12px);
+  box-sizing: border-box;
 }
 
 /* Common button container styles */
@@ -29,6 +30,9 @@
   padding: 1px;
   gap: 1px;
 }
+.deck-widget-button-group > .deck-widget-button {
+  display: contents;
+}
 
 .deck-widget-button-group.vertical {
   display: inline-flex;
@@ -201,24 +205,56 @@
 
 /* Timeline widget styles */
 .deck-widget.deck-widget-timeline {
-  display: flex;
-  align-items: center;
-  pointer-events: 'auto';
+  position: absolute;
+  margin: var(--widget-margin, 12px);
+  left: 0;
+  right: 0;
+  pointer-events: all;
 }
-
-.deck-widget.deck-widget-timeline .timeline-slider {
-  margin: 0 8px;
-  flex: 1;
-  pointer-events: 'auto';
-  cursor: pointer;
+.deck-widget.deck-widget-timeline[data-placement^=top-] {
+  top: 0;
 }
-
-.deck-widget.deck-widget-timeline .text {
-  color: var(--button-icon-idle, rgb(97, 97, 102));
+.deck-widget.deck-widget-timeline[data-placement^=bottom-] {
+  bottom: 0;
 }
-
-.deck-widget.deck-widget-timeline .text:hover {
-  color: var(--button-icon-hover, rgb(24, 24, 26));
+.deck-widget.deck-widget-timeline .deck-widget-button-group {
+  box-sizing: border-box;
+  gap: var(--widget-margin, 12px);
+  padding: var(--widget-margin, 12px);
+}
+.deck-widget-timeline button.deck-widget-timeline-pause .deck-widget-icon {
+  mask-image: var(
+    --icon-pause,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-pause,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z"/></svg>')
+  );
+}
+.deck-widget-timeline button.deck-widget-timeline-play .deck-widget-icon {
+  mask-image: var(
+    --icon-play,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M320-200v-560l440 280-440 280Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-play,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M320-200v-560l440 280-440 280Z"/></svg>')
+  );
+}
+.deck-widget-timeline-label {
+  position: relative;
+  pointer-events: none;
+  width: fit-content;
+  font-size: 13px;
+  color: var(--menu-text, rgb(24, 24, 26));
+  white-space: nowrap;
+}
+.deck-widget-timeline-label--current {
+  transform: translate(-50%, -100%);
+  border-radius: var(--button-corner-radius, 8px);
+  background: var(--menu-background, #fff);
+  padding: 4px;
 }
 
 /* FPS widget styles */
@@ -370,7 +406,6 @@
 }
 
 .deck-widget .deck-widget-dropdown-menu {
-  position: absolute;
   top: calc(100% + var(--menu-gap, 4px));
   left: 1px;
   right: 1px;
@@ -389,14 +424,16 @@
 
 .deck-widget .deck-widget-dropdown-item {
   padding: 8px 12px;
-  cursor: pointer;
   white-space: nowrap;
   overflow: hidden;
+  cursor: default;
+  user-select: none;
   text-overflow: ellipsis;
   color: var(--menu-text, rgb(24, 24, 26));
 }
 
-.deck-widget .deck-widget-dropdown-item:hover {
+.deck-widget .deck-widget-dropdown-item:not(.disabled):hover {
+  cursor: pointer;
   background: var(--menu-item-hover, rgba(128, 128, 128, 0.15));
 }
 
@@ -415,20 +452,198 @@
 
 /* Stats styles */
 .deck-widget-stats-container {
-  border-radius: var(--button-corner-radius, 4px);
+  border-radius: var(--button-corner-radius, 8px);
   display: inline-flex;
   flex-direction: column;
-  padding: 4px;
   font-size: 0.7rem;
   /* Approximately 14px */
   line-height: 1.6;
-  font-family:
-    'SF Mono',
-    /* macOS */ 'Menlo',
-    /* macOS */ 'Consolas',
-    /* Windows */ 'DejaVu Sans Mono',
-    /* Linux */ 'Liberation Mono',
-    /* Linux */ monospace;
-  background-color: var(--button-background, #fff);
-  color: var(--button-text, rgb(24, 24, 26));
+  font-family: monospace;
+  background-color: var(--menu-background, #fff);
+  color: var(--menu-text, rgb(24, 24, 26));
+  box-shadow: var(--menu-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+}
+.deck-widget-stats-header {
+  color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.deck-widget-stats-header:hover {
+  color: var(--button-icon-hover, rgb(24, 24, 26));
+}
+.deck-widget-stats-header .deck-widget-dropdown-button {
+  background: none;
+  border: none;
+}
+.deck-widget-stats-content {
+  padding: 4px 8px 8px;
+}
+
+/* Popup styles */
+.deck-widget.deck-widget-popover {
+  margin: 0 !important;
+}
+.deck-widget-popup-content {
+  border-radius: var(--button-corner-radius, 8px);
+  background: var(--menu-background, #fff);
+  color: var(--menu-text, rgb(24, 24, 26));
+  box-shadow: var(--menu-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+  padding: 10px;
+}
+.deck-widget-popup-content .deck-widget-popup-controls {
+  --button-size: 20px;
+}
+.deck-widget-popup-content .deck-widget-popup-controls .deck-widget-button {
+  box-shadow: none;
+}
+.deck-widget-popup-content button.deck-widget-popup-close-button .deck-widget-icon {
+  mask-image: var(
+    --icon-close,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -120 120 120" fill="black"><path d="m32-25-7-7 28-28-28-28 7-7 28 28 28-28 7 7-28 28 28 28-7 7-28-28-28 28Z"/></svg>')
+  );
+  -webkit-mask-image: var(
+    --icon-close,
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -120 120 120" fill="black"><path d="m32-25-7-7 28-28-28-28 7-7 28 28 28-28 7 7-28 28 28 28-7 7-28-28-28 28Z"/></svg>')
+  );
+}
+
+/** Range input */
+.deck-widget-range {
+  position: relative;
+  pointer-events: all;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  box-sizing: border-box;
+  margin: 0;
+}
+.deck-widget-range__track {
+  position: relative;
+  cursor: pointer;
+  flex: 1;
+  background: var(--range-track-color, #888);
+  border-radius: calc(var(--range-track-size, 16px) / 2);
+}
+.deck-widget-range__decorations {
+  position: absolute;
+}
+.deck-widget-range__decoration {
+  position: absolute;
+}
+.deck-widget-range__decoration:active {
+  background-color: var(--range-decoration-active-color, gold) !important;
+}
+.deck-widget-range__thumb {
+  position: relative;
+  box-sizing: content-box;
+  padding: calc(var(--range-thumb-size, 10px) / 2);
+  border-radius: calc(var(--range-thumb-size, 10px) / 2);
+  margin: calc(var(--range-thumb-size, 10px) * -0.5);
+  background: var(--range-thumb-color, #444);
+}
+.deck-widget-range__button {
+  cursor: pointer;
+  opacity: 0.4;
+  background-color: transparent;
+  width: var(--range-step-button-size, 24px);
+  height: var(--range-step-button-size, 24px);
+  background-size: cover;
+  border: none;
+  padding: 0;
+}
+.deck-widget-range__button:hover {
+  opacity: 1;
+}
+.deck-widget-range:not(.deck-widget-range--disabled) .deck-widget-range__button:disabled {
+  pointer-events: none;
+  opacity: 0.1;
+}
+.deck-widget-range--disabled {
+  display: none;
+}
+.deck-widget-range--vertical {
+  flex-direction: column;
+  height: 100%;
+  top: 0;
+}
+.deck-widget-range--horizontal {
+  flex-direction: row;
+  width: 100%;
+  left: 0;
+}
+.deck-widget-range--vertical .deck-widget-range__track {
+  width: var(--range-track-size, 16px);
+  padding-top: calc(var(--range-track-size, 16px) / 2);
+  padding-bottom: calc(var(--range-track-size, 16px) / 2);
+  height: 100%;
+  min-height: calc(var(--range-track-size, 16px) * 3);
+}
+.deck-widget-range--vertical .deck-widget-range__thumb {
+  width: 0;
+  left: 50%;
+  cursor: ns-resize;
+}
+.deck-widget-range--vertical .deck-widget-range__decorations {
+  top: calc(var(--range-track-size, 16px) / 2);
+  bottom: calc(var(--range-track-size, 16px) / 2);
+  left: 0;
+  right: 0;
+}
+.deck-widget-range--vertical .deck-widget-range__button--start .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>');
+}
+.deck-widget-range--vertical .deck-widget-range__button--end .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>');
+}
+.deck-widget-range--horizontal .deck-widget-range__track {
+  height: var(--range-track-size, 16px);
+  padding-left: calc(var(--range-track-size, 16px) / 2);
+  padding-right: calc(var(--range-track-size, 16px) / 2);
+  width: 100%;
+  min-width: calc(var(--range-track-size, 16px) * 3);
+}
+.deck-widget-range--horizontal .deck-widget-range__thumb {
+  height: 0;
+  top: 50%;
+  cursor: ew-resize;
+}
+.deck-widget-range--horizontal .deck-widget-range__decorations {
+  left: calc(var(--range-track-size, 16px) / 2);
+  right: calc(var(--range-track-size, 16px) / 2);
+  top: 0;
+  bottom: 0;
+}
+.deck-widget-range--horizontal .deck-widget-range__button--start .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/></svg>');
+}
+.deck-widget-range--horizontal .deck-widget-range__button--end .deck-widget-icon {
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 -960 960 960" fill="black"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg>');
+}
+
+/** Scrollbar */
+.deck-widget-scrollbar .deck-widget-range {
+  position: absolute;
+}
+.deck-widget-scrollbar .deck-widget-range--vertical {
+  top: var(--range-step-button-size, 24px);
+  height: calc(100% - var(--range-step-button-size, 24px) * 2);
+}
+.deck-widget-scrollbar[data-placement$=-left] .deck-widget-range--vertical {
+  left: 0;
+}
+.deck-widget-scrollbar[data-placement$=-right] .deck-widget-range--vertical {
+  right: 0;
+}
+.deck-widget-scrollbar .deck-widget-range--horizontal {
+  left: var(--range-step-button-size, 24px);
+  width: calc(100% - var(--range-step-button-size, 24px) * 2);
+}
+.deck-widget-scrollbar[data-placement^=top-] .deck-widget-range--horizontal {
+  top: 0;
+}
+.deck-widget-scrollbar[data-placement^=bottom-] .deck-widget-range--horizontal {
+  bottom: 0;
 }

package/src/theme-widget.tsx

@@ -116,10 +116,12 @@ export class ThemeWidget extends Widget<ThemeWidgetProps> {
   /** Read browser preference */
   _getInitialThemeMode(): 'light' | 'dark' {
     const {initialThemeMode} = this.props;
-    return initialThemeMode === 'auto'
-      ? window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light'
-      : initialThemeMode;
+    if (initialThemeMode !== 'auto') {
+      return initialThemeMode;
+    }
+    if (typeof window === 'undefined') {
+      return 'light';
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
   }
 }