@deck.gl/widgets 9.3.0-alpha.5 → 9.3.0-beta.1

package/dist/index.cjs

@@ -110,7 +110,8 @@ var ZoomWidget = class extends import_core.Widget {
     const ui = (0, import_jsx_runtime3.jsxs)(ButtonGroup, { orientation: this.props.orientation, children: [(0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomIn(), label: this.props.zoomInLabel, className: "deck-widget-zoom-in" }), (0, import_jsx_runtime3.jsx)(IconButton, { onClick: () => this.handleZoomOut(), label: this.props.zoomOutLabel, className: "deck-widget-zoom-out" })] });
     (0, import_preact.render)(ui, rootElement);
   }
-  handleZoom(viewId, nextZoom) {
+  handleZoom(viewId, nextZoom, delta) {
+    var _a, _b;
     const viewState = this.getViewState(viewId);
     if (viewState) {
       const { minZoom, maxZoom } = viewState;
@@ -121,6 +122,7 @@ var ZoomWidget = class extends import_core.Widget {
         nextZoom = Math.min(maxZoom, nextZoom);
       }
     }
+    (_b = (_a = this.props).onZoom) == null ? void 0 : _b.call(_a, { viewId, delta, zoom: nextZoom });
     const nextViewState = {
       ...viewState,
       zoom: nextZoom
@@ -138,7 +140,7 @@ var ZoomWidget = class extends import_core.Widget {
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
       const viewState = this.getViewState(viewId);
-      this.handleZoom(viewId, viewState.zoom + 1);
+      this.handleZoom(viewId, viewState.zoom + 1, 1);
     }
   }
   handleZoomOut() {
@@ -146,7 +148,7 @@ var ZoomWidget = class extends import_core.Widget {
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
       const viewState = this.getViewState(viewId);
-      this.handleZoom(viewId, viewState.zoom - 1);
+      this.handleZoom(viewId, viewState.zoom - 1, -1);
     }
   }
 };
@@ -158,7 +160,9 @@ ZoomWidget.defaultProps = {
   transitionDuration: 200,
   zoomInLabel: "Zoom In",
   zoomOutLabel: "Zoom Out",
-  viewId: null
+  viewId: null,
+  onZoom: () => {
+  }
 };
 
 // dist/reset-view-widget.js
@@ -186,7 +190,7 @@ var ResetViewWidget = class extends import_core2.Widget {
     this.resetViewState(initialViewState);
   }
   resetViewState(viewState) {
-    var _a;
+    var _a, _b, _c;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
       const nextViewState = {
@@ -195,6 +199,7 @@ var ResetViewWidget = class extends import_core2.Widget {
         // transitionDuration: this.props.transitionDuration,
         // transitionInterpolator: new FlyToInterpolator()
       };
+      (_c = (_b = this.props).onReset) == null ? void 0 : _c.call(_b, { viewId, viewState: nextViewState });
       this.setViewState(viewId, nextViewState);
     }
   }
@@ -205,7 +210,9 @@ ResetViewWidget.defaultProps = {
   placement: "top-left",
   label: "Reset View",
   initialViewState: void 0,
-  viewId: null
+  viewId: null,
+  onReset: () => {
+  }
 };
 
 // dist/gimbal-widget.js
@@ -252,9 +259,11 @@ var GimbalWidget = class extends import_core3.Widget {
     this.updateHTML();
   }
   resetOrbitView(viewport) {
+    var _a, _b;
     const viewId = this.viewId || (viewport == null ? void 0 : viewport.id) || "OrbitView";
     const viewState = this.getViewState(viewId);
     if ("rotationOrbit" in viewState || "rotationX" in viewState) {
+      (_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, { viewId, rotationOrbit: 0, rotationX: 0 });
       const nextViewState = {
         ...viewState,
         rotationOrbit: 0,
@@ -289,7 +298,9 @@ GimbalWidget.defaultProps = {
   viewId: null,
   label: "Gimbal",
   strokeWidth: 1.5,
-  transitionDuration: 200
+  transitionDuration: 200,
+  onReset: () => {
+  }
 };
 function normalizeAndClampAngle(angle) {
   let normalized = ((angle + 180) % 360 + 360) % 360 - 180;
@@ -349,13 +360,18 @@ var CompassWidget = class extends import_core4.Widget {
     return [0, 0];
   }
   handleCompassReset(viewport) {
+    var _a, _b;
     const viewId = this.viewId || viewport.id;
     if (viewport instanceof import_core4.WebMercatorViewport) {
       const viewState = this.getViewState(viewId);
+      const resetPitch = this.getRotation(viewport)[0] === 0;
+      const nextBearing = 0;
+      const nextPitch = resetPitch ? 0 : viewport.pitch;
+      (_b = (_a = this.props).onReset) == null ? void 0 : _b.call(_a, { viewId, bearing: nextBearing, pitch: nextPitch });
       const nextViewState = {
         ...viewState,
-        bearing: 0,
-        ...this.getRotation(viewport)[0] === 0 ? { pitch: 0 } : {},
+        bearing: nextBearing,
+        ...resetPitch ? { pitch: nextPitch } : {},
         transitionDuration: this.props.transitionDuration,
         transitionInterpolator: new import_core4.FlyToInterpolator()
       };
@@ -369,7 +385,9 @@ CompassWidget.defaultProps = {
   placement: "top-left",
   viewId: null,
   label: "Reset Compass",
-  transitionDuration: 200
+  transitionDuration: 200,
+  onReset: () => {
+  }
 };
 
 // dist/scale-widget.js
@@ -791,9 +809,19 @@ var GeocoderWidget = class extends import_core6.Widget {
     }), (0, import_jsx_runtime9.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime9.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
   }
   flyTo(viewState) {
-    var _a;
+    var _a, _b, _c;
     const viewIds = this.viewId ? [this.viewId] : ((_a = this.deck) == null ? void 0 : _a.getViews().map((v) => v.id)) ?? [];
     for (const viewId of viewIds) {
+      if ("longitude" in viewState && "latitude" in viewState) {
+        (_c = (_b = this.props).onGeocode) == null ? void 0 : _c.call(_b, {
+          viewId,
+          coordinates: {
+            longitude: viewState.longitude,
+            latitude: viewState.latitude,
+            zoom: viewState.zoom
+          }
+        });
+      }
       const currentViewState = this.getViewState(viewId);
       const nextViewState = {
         ...currentViewState,
@@ -817,7 +845,9 @@ GeocoderWidget.defaultProps = {
   geocoder: "coordinates",
   customGeocoder: CoordinatesGeocoder,
   apiKey: "",
-  _geolocation: false
+  _geolocation: false,
+  onGeocode: () => {
+  }
 };
 function getGeocoder(props) {
   switch (props.geocoder) {
@@ -858,9 +888,10 @@ var FullscreenWidget = class extends import_core8.Widget {
     document.removeEventListener("fullscreenchange", this.onFullscreenChange.bind(this));
   }
   onRenderHTML(rootElement) {
+    const isFullscreen = this.getFullscreen();
     (0, import_preact7.render)((0, import_jsx_runtime10.jsx)(IconButton, { onClick: () => {
       this.handleClick().catch((err) => import_core8.log.error(err)());
-    }, label: this.fullscreen ? this.props.exitLabel : this.props.enterLabel, className: this.fullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
+    }, label: isFullscreen ? this.props.exitLabel : this.props.enterLabel, className: isFullscreen ? "deck-widget-fullscreen-exit" : "deck-widget-fullscreen-enter" }), rootElement);
   }
   setProps(props) {
     this.placement = props.placement ?? this.placement;
@@ -871,21 +902,25 @@ var FullscreenWidget = class extends import_core8.Widget {
     var _a, _b, _c;
     return this.props.container || ((_a = this.deck) == null ? void 0 : _a.props.parent) || ((_c = (_b = this.deck) == null ? void 0 : _b.getCanvas()) == null ? void 0 : _c.parentElement);
   }
+  getFullscreen() {
+    return this.fullscreen;
+  }
   onFullscreenChange() {
-    const prevFullscreen = this.fullscreen;
+    var _a, _b;
     const fullscreen = document.fullscreenElement === this.getContainer();
-    if (prevFullscreen !== fullscreen) {
-      this.fullscreen = !this.fullscreen;
+    if (fullscreen !== this.fullscreen) {
+      this.fullscreen = fullscreen;
+      (_b = (_a = this.props).onFullscreenChange) == null ? void 0 : _b.call(_a, fullscreen);
+      this.updateHTML();
     }
-    this.updateHTML();
   }
   async handleClick() {
-    if (this.fullscreen) {
+    const isFullscreen = this.getFullscreen();
+    if (isFullscreen) {
       await this.exitFullscreen();
     } else {
       await this.requestFullscreen();
     }
-    this.updateHTML();
   }
   async requestFullscreen() {
     const container = this.getContainer();
@@ -903,8 +938,11 @@ var FullscreenWidget = class extends import_core8.Widget {
     }
   }
   togglePseudoFullscreen() {
-    var _a;
+    var _a, _b, _c;
     (_a = this.getContainer()) == null ? void 0 : _a.classList.toggle("deck-pseudo-fullscreen");
+    this.fullscreen = !this.fullscreen;
+    (_c = (_b = this.props).onFullscreenChange) == null ? void 0 : _c.call(_b, this.fullscreen);
+    this.updateHTML();
   }
 };
 FullscreenWidget.defaultProps = {
@@ -914,7 +952,9 @@ FullscreenWidget.defaultProps = {
   viewId: null,
   enterLabel: "Enter Fullscreen",
   exitLabel: "Exit Fullscreen",
-  container: void 0
+  container: void 0,
+  onFullscreenChange: () => {
+  }
 };
 
 // dist/splitter-widget.js
@@ -2017,74 +2057,124 @@ var import_jsx_runtime22 = require("preact/jsx-runtime");
 var import_core17 = require("@deck.gl/core");
 var import_preact16 = require("preact");
 var TimelineWidget = class extends import_core17.Widget {
+  /**
+   * Returns the current time value.
+   * In controlled mode, returns the time prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getTime() {
+    return this.props.time ?? this.currentTime;
+  }
+  /**
+   * Returns the current playing state.
+   * In controlled mode, returns the playing prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getPlaying() {
+    return this.props.playing ?? this._playing;
+  }
   constructor(props = {}) {
     var _a;
     super(props);
     this.id = "timeline";
     this.className = "deck-widget-timeline";
     this.placement = "fill";
-    this.playing = false;
+    this._playing = false;
     this.timerId = null;
     this.handlePlayPause = () => {
-      if (this.playing) {
-        this.stop();
-      } else {
-        this.play();
+      var _a2, _b;
+      const isPlaying = this.getPlaying();
+      const nextPlaying = !isPlaying;
+      (_b = (_a2 = this.props).onPlayingChange) == null ? void 0 : _b.call(_a2, nextPlaying);
+      if (this.props.playing === void 0) {
+        if (nextPlaying) {
+          this.play();
+        } else {
+          this.stop();
+        }
       }
     };
     this.handleTimeChange = ([value]) => {
       var _a2;
-      this.currentTime = value;
-      (_a2 = this.props.timeline) == null ? void 0 : _a2.setTime(value);
       this.props.onTimeChange(value);
-      this.updateHTML();
+      if (this.props.time === void 0) {
+        this.currentTime = value;
+        (_a2 = this.props.timeline) == null ? void 0 : _a2.setTime(value);
+        this.updateHTML();
+      }
     };
     this.tick = () => {
+      var _a2, _b, _c;
       const { timeRange: [min, max], step, loop } = this.props;
       if (step > 0) {
-        let next = Math.round(this.currentTime / step) * step + step;
+        const currentTime = this.getTime();
+        let next = Math.round(currentTime / step) * step + step;
         if (next > max) {
-          if (this.currentTime < max) {
+          if (currentTime < max) {
             next = max;
           } else if (loop) {
             next = min;
           } else {
             next = max;
-            this.playing = false;
+            this._playing = false;
+            (_b = (_a2 = this.props).onPlayingChange) == null ? void 0 : _b.call(_a2, false);
           }
         }
-        this.currentTime = next;
         this.props.onTimeChange(next);
+        if (this.props.time === void 0) {
+          this.currentTime = next;
+          (_c = this.props.timeline) == null ? void 0 : _c.setTime(next);
+        }
         this.updateHTML();
       }
-      if (this.playing) {
+      if (this._playing) {
         this.timerId = window.setTimeout(this.tick, this.props.playInterval);
       } else {
         this.timerId = null;
       }
     };
     this.currentTime = this.props.initialTime ?? this.props.timeRange[0];
-    (_a = this.props.timeline) == null ? void 0 : _a.setTime(this.currentTime);
+    const syncTime = this.props.time ?? this.currentTime;
+    (_a = this.props.timeline) == null ? void 0 : _a.setTime(syncTime);
     this.setProps(this.props);
   }
   setProps(props) {
+    var _a;
+    const { playing: prevPlaying, time: prevTime } = this.props;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
+    if (props.time !== void 0 && props.time !== prevTime) {
+      (_a = this.props.timeline) == null ? void 0 : _a.setTime(props.time);
+    }
+    if (props.playing !== void 0 && props.playing !== prevPlaying) {
+      if (props.playing && !this._playing) {
+        this._startTimer();
+      } else if (!props.playing && this._playing) {
+        this._stopTimer();
+      }
+    }
   }
   onAdd() {
-    this.playing = false;
+    var _a, _b;
+    this._playing = false;
     this.timerId = null;
-    if (this.props.autoPlay)
-      this.play();
+    if (this.props.autoPlay) {
+      if (this.props.playing !== void 0) {
+        (_b = (_a = this.props).onPlayingChange) == null ? void 0 : _b.call(_a, true);
+      } else {
+        this.play();
+      }
+    }
   }
   onRemove() {
     this.stop();
   }
   onRenderHTML(rootElement) {
     const { timeRange, step, formatLabel } = this.props;
-    const currentTime = this.currentTime;
+    const isPlaying = this.getPlaying();
+    const currentTime = this.getTime();
     rootElement.dataset.placement = this.props.placement;
-    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [this.playing ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
+    (0, import_preact16.render)((0, import_jsx_runtime22.jsxs)("div", { className: "deck-widget-button-group", children: [isPlaying ? (0, import_jsx_runtime22.jsx)(IconButton, { label: "Pause", className: "deck-widget-timeline-pause", onClick: this.handlePlayPause }) : (0, import_jsx_runtime22.jsx)(IconButton, { label: "Play", className: "deck-widget-timeline-play", onClick: this.handlePlayPause }), (0, import_jsx_runtime22.jsx)(RangeInput, { min: timeRange[0], max: timeRange[1], orientation: "horizontal", step, value: [currentTime, currentTime], onChange: this.handleTimeChange, decorations: [
       {
         position: [currentTime, currentTime + step],
         element: (0, import_jsx_runtime22.jsx)("div", { className: "deck-widget-timeline-label deck-widget-timeline-label--current", children: formatLabel(currentTime) })
@@ -2092,22 +2182,33 @@ var TimelineWidget = class extends import_core17.Widget {
     ] })] }), rootElement);
   }
   play() {
-    this.playing = true;
+    var _a;
+    this._playing = true;
     const { timeRange: [min, max] } = this.props;
-    if (this.currentTime >= max) {
+    if (this.props.time === void 0 && this.getTime() >= max) {
       this.currentTime = min;
       this.props.onTimeChange(min);
+      (_a = this.props.timeline) == null ? void 0 : _a.setTime(min);
     }
     this.updateHTML();
     this.tick();
   }
   stop() {
-    this.playing = false;
+    this._stopTimer();
+    this.updateHTML();
+  }
+  /** Start the playback timer (used internally) */
+  _startTimer() {
+    this._playing = true;
+    this.tick();
+  }
+  /** Stop the playback timer (used internally) */
+  _stopTimer() {
+    this._playing = false;
     if (this.timerId !== null) {
       window.clearTimeout(this.timerId);
       this.timerId = null;
     }
-    this.updateHTML();
   }
 };
 TimelineWidget.defaultProps = {
@@ -2119,11 +2220,15 @@ TimelineWidget.defaultProps = {
   timeRange: [0, 100],
   step: 1,
   initialTime: void 0,
+  time: void 0,
   onTimeChange: () => {
   },
   autoPlay: false,
   loop: false,
   playInterval: 1e3,
+  playing: void 0,
+  onPlayingChange: () => {
+  },
   formatLabel: String
 };
 
@@ -2313,44 +2418,64 @@ var ThemeWidget = class extends import_core20.Widget {
   }
   // eslint-disable-next-line complexity
   setProps(props) {
-    const { lightModeTheme, darkModeTheme } = this.props;
+    const { lightModeTheme, darkModeTheme, themeMode: prevThemeMode } = this.props;
     this.placement = props.placement ?? this.placement;
     this.viewId = props.viewId ?? this.viewId;
     super.setProps(props);
-    switch (this.themeMode) {
+    const currentMode = this.getThemeMode();
+    if (props.themeMode !== void 0 && props.themeMode !== prevThemeMode) {
+      this._applyTheme(props.themeMode);
+      return;
+    }
+    switch (currentMode) {
       case "light":
         if (props.lightModeTheme && !(0, import_core19._deepEqual)(props.lightModeTheme, lightModeTheme, 1)) {
-          this._setThemeMode("light");
+          this._applyTheme("light");
         }
         break;
       case "dark":
         if (props.darkModeTheme && !(0, import_core19._deepEqual)(props.darkModeTheme, darkModeTheme, 1)) {
-          this._setThemeMode("dark");
+          this._applyTheme("dark");
         }
         break;
       default:
-        import_core19.log.warn(`Invalid theme mode ${this.themeMode}`)();
+        import_core19.log.warn(`Invalid theme mode ${currentMode}`)();
     }
   }
   onRenderHTML(rootElement) {
     const { lightModeLabel, darkModeLabel } = this.props;
-    (0, import_preact18.render)((0, import_jsx_runtime24.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: this.themeMode === "dark" ? darkModeLabel : lightModeLabel, className: this.themeMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
+    const currentMode = this.getThemeMode();
+    (0, import_preact18.render)((0, import_jsx_runtime24.jsx)(IconButton, { onClick: this._handleClick.bind(this), label: currentMode === "dark" ? darkModeLabel : lightModeLabel, className: currentMode === "dark" ? "deck-widget-moon" : "deck-widget-sun" }), rootElement);
   }
   onAdd() {
-    this._setThemeMode(this.themeMode);
+    this._applyTheme(this.getThemeMode());
+  }
+  /**
+   * Returns the current theme mode.
+   * In controlled mode, returns the themeMode prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getThemeMode() {
+    return this.props.themeMode ?? this.themeMode;
   }
   _handleClick() {
-    const newThemeMode = this.themeMode === "dark" ? "light" : "dark";
-    this._setThemeMode(newThemeMode);
+    var _a, _b;
+    const currentMode = this.getThemeMode();
+    const nextMode = currentMode === "dark" ? "light" : "dark";
+    (_b = (_a = this.props).onThemeModeChange) == null ? void 0 : _b.call(_a, nextMode);
+    if (this.props.themeMode === void 0) {
+      this.themeMode = nextMode;
+      this._applyTheme(nextMode);
+    }
   }
-  _setThemeMode(themeMode) {
+  /** Apply theme styling without changing internal state */
+  _applyTheme(themeMode) {
     var _a;
-    this.themeMode = themeMode;
     const container = (_a = this.rootElement) == null ? void 0 : _a.closest(".deck-widget-container");
     if (container) {
       const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
       (0, import_core19._applyStyles)(container, themeStyle);
-      const label = this.themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
+      const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
       import_core19.log.log(1, `Switched theme to ${label}`, themeStyle)();
       this.updateHTML();
     }
@@ -2376,7 +2501,10 @@ ThemeWidget.defaultProps = {
   lightModeTheme: LightGlassTheme,
   darkModeLabel: "Dark Mode",
   darkModeTheme: DarkGlassTheme,
-  initialThemeMode: "auto"
+  initialThemeMode: "auto",
+  themeMode: void 0,
+  onThemeModeChange: () => {
+  }
 };
 
 // dist/loading-widget.js
@@ -2404,9 +2532,11 @@ var LoadingWidget = class extends import_core21.Widget {
     );
   }
   onRedraw({ layers }) {
+    var _a, _b;
     const loading = layers.some((layer) => !layer.isLoaded);
     if (loading !== this.loading) {
       this.loading = loading;
+      (_b = (_a = this.props).onLoadingChange) == null ? void 0 : _b.call(_a, loading);
       this.updateHTML();
     }
   }
@@ -2419,7 +2549,9 @@ LoadingWidget.defaultProps = {
   id: "loading",
   placement: "top-left",
   viewId: null,
-  label: "Loading layer data"
+  label: "Loading layer data",
+  onLoadingChange: () => {
+  }
 };
 
 // dist/stats-widget.js
@@ -2444,15 +2576,28 @@ var DEFAULT_FORMATTERS = {
   memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
 };
 var StatsWidget = class extends import_core22.Widget {
+  /**
+   * Returns the current expanded state.
+   * In controlled mode, returns the expanded prop.
+   * In uncontrolled mode, returns the internal state.
+   */
+  getExpanded() {
+    return this.props.expanded ?? this._expanded;
+  }
   constructor(props = {}) {
     super(props);
     this.className = "deck-widget-stats";
     this.placement = "top-left";
     this._counter = 0;
-    this.collapsed = true;
-    this._toggleCollapsed = () => {
-      this.collapsed = !this.collapsed;
-      this.updateHTML();
+    this._expanded = false;
+    this._toggleExpanded = () => {
+      var _a, _b;
+      const nextExpanded = !this.getExpanded();
+      (_b = (_a = this.props).onExpandedChange) == null ? void 0 : _b.call(_a, nextExpanded);
+      if (this.props.expanded === void 0) {
+        this._expanded = nextExpanded;
+        this.updateHTML();
+      }
     };
     this._getFps = () => {
       var _a;
@@ -2460,7 +2605,7 @@ var StatsWidget = class extends import_core22.Widget {
     };
     this._formatters = { ...DEFAULT_FORMATTERS };
     this._resetOnUpdate = { ...this.props.resetOnUpdate };
-    this.collapsed = !props.defaultIsExpanded;
+    this._expanded = Boolean(props.initialExpanded);
     this.setProps(props);
   }
   setProps(props) {
@@ -2483,9 +2628,9 @@ var StatsWidget = class extends import_core22.Widget {
     }
   }
   onRenderHTML(rootElement) {
-    const collapsed = this.collapsed;
-    if (collapsed) {
-      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleCollapsed }), rootElement);
+    const isExpanded = this.getExpanded();
+    if (!isExpanded) {
+      (0, import_preact20.render)((0, import_jsx_runtime26.jsx)(FpsIcon, { getFps: this._getFps, onClick: this._toggleExpanded }), rootElement);
       return;
     }
     const stats = this._getStats();
@@ -2503,10 +2648,10 @@ var StatsWidget = class extends import_core22.Widget {
         });
       });
     }
-    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleCollapsed, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
+    (0, import_preact20.render)((0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-container", style: { cursor: "default" }, children: [(0, import_jsx_runtime26.jsxs)("div", { className: "deck-widget-stats-header", style: { cursor: "pointer", pointerEvents: "auto" }, onClick: this._toggleExpanded, children: [(0, import_jsx_runtime26.jsx)("b", { children: title }), deviceLabel && (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-stats-device", children: deviceLabel }), (0, import_jsx_runtime26.jsx)("button", { className: "deck-widget-dropdown-button", children: (0, import_jsx_runtime26.jsx)("span", { className: "deck-widget-dropdown-icon open" }) })] }), (0, import_jsx_runtime26.jsx)("div", { className: "deck-widget-stats-content", children: items })] }), rootElement);
   }
   onRedraw() {
-    if (!this.collapsed) {
+    if (this.getExpanded()) {
       const framesPerUpdate = Math.max(1, this.props.framesPerUpdate || 1);
       if (this._counter++ % framesPerUpdate === 0) {
         this.updateHTML();
@@ -2561,13 +2706,16 @@ StatsWidget.defaultProps = {
   type: "deck",
   placement: "top-left",
   viewId: null,
-  defaultIsExpanded: false,
+  initialExpanded: false,
   stats: void 0,
   title: "Stats",
   framesPerUpdate: 1,
   formatters: {},
   resetOnUpdate: {},
-  id: "stats"
+  id: "stats",
+  expanded: void 0,
+  onExpandedChange: () => {
+  }
 };
 function FpsIcon({ getFps, onClick }) {
   const [fps, setFps] = (0, import_hooks7.useState)(getFps());