chore(release): 4.8.0 [CI SKIP]

CHANGELOG.md

@@ -1,3 +1,23 @@
+# [4.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.4...v4.8.0) (2024-10-05)
+
+
+### Bug Fixes
+
+* **components/Modal:** dont break in desktop ui ([bea9ac7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bea9ac777452b883c2f3f3ebf8510c22c4577cd0))
+* **components/Router:** dont break in desktop ui ([980df68](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/980df687e7b7bf389f478e831f992fb9475eeb15))
+
+
+### Features
+
+* **utils/react:** add some window-related utils ([063dedb](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/063dedbbc1573a825571c675bf6bfa8a1bc1c6cd))
+
+## [4.7.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.3...v4.7.4) (2024-10-04)
+
+
+### Bug Fixes
+
+* **DialogCheckbox:** don't access getters to prevent their side effects from breaking the component ([241b22c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/241b22cad711621a1695dfd11da857f13c3fffdf))
+
 ## [4.7.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.2...v4.7.3) (2024-10-03)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.7.3",
+  "version": "4.8.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/DialogCheckbox.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react';
 
-import { findModule } from '../webpack';
+import { findModuleExport } from '../webpack';
 import { DialogCommonProps } from './Dialog';
 import { FooterLegendProps } from './FooterLegend';
 
@@ -18,22 +18,15 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
   onClick?(evt: Event): void;
 }
 
-export const DialogCheckbox = Object.values(
-  findModule((m: any) => {
-    if (typeof m !== 'object') return false;
-    for (const prop in m) {
-      if (m[prop]?.prototype?.GetPanelElementProps) return true;
-    }
-    return false;
-  }),
-).find(
-  (m: any) =>
-    m?.prototype?.SetChecked &&
-    m?.prototype?.Toggle &&
-    m?.prototype?.GetPanelElementProps &&
-    // beta || stable as of oct 2 2024
-    (m?.prototype?.render?.toString().includes('="DialogCheckbox"') || (
-      m.contextType &&
-      m.prototype?.render.toString().includes('fallback:')
-    ))
+// Do not access KeyDown, SetChecked, Toggle here as they are getters and accessing them outside of a render breaks them globally
+export const DialogCheckbox = findModuleExport(e =>
+  e.prototype &&
+  "GetPanelElementProps" in e?.prototype &&
+  "SetChecked" in e?.prototype &&
+  "Toggle" in e?.prototype &&
+  // beta || stable as of oct 2 2024
+  (e?.prototype?.render?.toString().includes('="DialogCheckbox"') || (
+    e.contextType &&
+    e.prototype?.render?.toString().includes('fallback:')
+  ))
 ) as FC<DialogCheckboxProps>;

src/components/Modal.ts

@@ -50,7 +50,7 @@ export const showModal = (
     bHideMainWindowForPopouts: false,
   },
 ): ShowModalResult => {
-  return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+  return showModalRaw(modal, parent || findSP() || window, props.strTitle, props, undefined, {
     bHideActions: props.bHideActionIcons,
   });
 };

src/modules/Router.ts

@@ -144,8 +144,8 @@ try {
         logger.warn("Navigation interface failed to call GetFocusedWindowInstance", e);
       }
       if (!win) {
-        logger.warn("Navigation interface could not find any focused window. Falling back to GamepadUIMainWindowInstance");
-        win = Router.WindowStore?.GamepadUIMainWindowInstance;
+        logger.warn("Navigation interface could not find any focused window. Falling back to Main Window Instance");
+        win = Router.WindowStore?.GamepadUIMainWindowInstance || Router?.WindowStore?.SteamUIWindows?.[0];
       }
 
       if (win) {

src/utils/react/react.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Ref, useState } from 'react';
 
 // this shouldn't need to be redeclared but it does for some reason
 
@@ -150,3 +151,21 @@ export const findInReactTree = (node: any, filter: findInTreeFilter) =>
     // Specialised findInTree for React nodes
     walkable: ['props', 'children', 'child', 'sibling'],
   });
+
+/**
+ * Finds the parent window of a DOM element
+ */
+export function getParentWindow<WindowType = Window>(elem: HTMLElement | null): WindowType | null | undefined {
+  return elem?.ownerDocument?.defaultView as any;
+}
+
+/**
+ * React hook to find the host window of a component
+ * Pass the returned ref into a React element and window will be its host window.
+ * @returns [ref, window]
+ */
+export function useWindowRef<RefElementType extends HTMLElement, WindowType = Window>(): [Ref<RefElementType>, WindowType | null | undefined] {
+  const [win, setWin] = useState<WindowType | null | undefined>(null);
+
+  return [(elem) => setWin(getParentWindow<WindowType>(elem)), win];
+}