@decky/ui 4.7.3 → 4.8.0

package/dist/components/DialogCheckbox.js

@@ -1,14 +1,7 @@
-import { findModule } from '../webpack';
-export const DialogCheckbox = Object.values(findModule((m) => {
-    if (typeof m !== 'object')
-        return false;
-    for (const prop in m) {
-        if (m[prop]?.prototype?.GetPanelElementProps)
-            return true;
-    }
-    return false;
-})).find((m) => m?.prototype?.SetChecked &&
-    m?.prototype?.Toggle &&
-    m?.prototype?.GetPanelElementProps &&
-    (m?.prototype?.render?.toString().includes('="DialogCheckbox"') || (m.contextType &&
-        m.prototype?.render.toString().includes('fallback:'))));
+import { findModuleExport } from '../webpack';
+export const DialogCheckbox = findModuleExport(e => e.prototype &&
+    "GetPanelElementProps" in e?.prototype &&
+    "SetChecked" in e?.prototype &&
+    "Toggle" in e?.prototype &&
+    (e?.prototype?.render?.toString().includes('="DialogCheckbox"') || (e.contextType &&
+        e.prototype?.render?.toString().includes('fallback:'))));

package/dist/components/Modal.js

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

package/dist/modules/Router.js

@@ -71,8 +71,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) {
                 try {

package/dist/utils/react/react.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Ref } from 'react';
 declare global {
     interface Window {
         SP_REACT: typeof React;
@@ -19,3 +20,5 @@ export interface findInTreeOpts {
 export declare type findInTreeFilter = (element: any) => boolean;
 export declare const findInTree: (parent: any, filter: findInTreeFilter, opts: findInTreeOpts) => any;
 export declare const findInReactTree: (node: any, filter: findInTreeFilter) => any;
+export declare function getParentWindow<WindowType = Window>(elem: HTMLElement | null): WindowType | null | undefined;
+export declare function useWindowRef<RefElementType extends HTMLElement, WindowType = Window>(): [Ref<RefElementType>, WindowType | null | undefined];

package/dist/utils/react/react.js

@@ -2,6 +2,7 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
     if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
     return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
 };
+import { useState } from 'react';
 export function createPropListRegex(propList, fromStart = true) {
     let regexString = fromStart ? "const\{" : "";
     propList.forEach((prop, propIdx) => {
@@ -98,3 +99,10 @@ export const findInTree = (parent, filter, opts) => {
 export const findInReactTree = (node, filter) => findInTree(node, filter, {
     walkable: ['props', 'children', 'child', 'sibling'],
 });
+export function getParentWindow(elem) {
+    return elem?.ownerDocument?.defaultView;
+}
+export function useWindowRef() {
+    const [win, setWin] = useState(null);
+    return [(elem) => setWin(getParentWindow(elem)), win];
+}

package/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",

package/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>;

package/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,
   });
 };

package/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) {

package/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];
+}