@decky/ui 4.7.4 → 4.8.1

package/dist/components/Dialog.js

@@ -19,6 +19,6 @@ export const DialogBodyText = MappedDialogDivs.get('DialogBodyText');
 export const DialogBody = MappedDialogDivs.get('DialogBody');
 export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection');
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader');
-export const DialogButtonPrimary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'));
-export const DialogButtonSecondary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"'));
+export const DialogButtonPrimary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Primary"'));
+export const DialogButtonSecondary = Object.values(CommonUIModule).find((mod) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Secondary"'));
 export const DialogButton = DialogButtonSecondary;

package/dist/components/DialogCheckbox.js

@@ -1,7 +1,8 @@
 import { findModuleExport } from '../webpack';
-export const DialogCheckbox = findModuleExport(e => e.prototype &&
+export const DialogCheckbox = findModuleExport(e => e?.prototype &&
+    typeof e?.prototype == "object" &&
     "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:'))));
+    (e?.prototype?.render?.toString?.().includes('="DialogCheckbox"') || (e.contextType &&
+        e.prototype?.render?.toString?.().includes('fallback:'))));

package/dist/components/FocusRing.js

@@ -1,2 +1,2 @@
 import { findModuleExport } from '../webpack';
-export const FocusRing = findModuleExport((e) => e?.toString()?.includes('.GetShowDebugFocusRing())'));
+export const FocusRing = findModuleExport((e) => e?.toString?.()?.includes('.GetShowDebugFocusRing())'));

package/dist/components/Menu.js

@@ -3,5 +3,5 @@ export const showContextMenu = findModuleExport((e) => typeof e === 'function' &
     && e.toString().includes('.CreateContextMenuInstance('));
 export const Menu = findModuleExport((e) => e?.prototype?.HideIfSubmenu && e?.prototype?.HideMenu);
 const MenuGoupModule = findModuleByExport(e => e?.prototype?.Focus && e?.prototype?.OnOKButton && e?.prototype?.render?.toString().includes?.(`"emphasis"==this.props.tone`));
-export const MenuGroup = MenuGoupModule && Object.values(MenuGoupModule).find((e) => typeof e == "function" && e?.toString()?.includes("bInGamepadUI:"));
-export const MenuItem = findModuleExport((e) => e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter));
+export const MenuGroup = MenuGoupModule && Object.values(MenuGoupModule).find((e) => typeof e == "function" && e?.toString?.()?.includes("bInGamepadUI:"));
+export const MenuItem = findModuleExport((e) => e?.render?.toString?.()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter));

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,
     });
 };
@@ -19,7 +19,7 @@ export const ModalRoot = Object.values(findModule((m) => {
         }
     }
     return false;
-}) || {})?.find((x) => x?.type?.toString()?.includes('((function(){'));
+}) || {})?.find((x) => x?.type?.toString?.()?.includes('((function(){'));
 const [ModalModule, _ModalPosition] = findModuleDetailsByExport((e) => e?.toString().includes('.ModalPosition'), 5);
 const ModalModuleProps = ModalModule ? Object.values(ModalModule) : [];
 export const SimpleModal = ModalModuleProps.find((prop) => {

package/dist/components/Panel.js

@@ -1,4 +1,4 @@
 import { findModuleDetailsByExport } from '../webpack';
 const [mod, panelSection] = findModuleDetailsByExport((e) => e.toString()?.includes('.PanelSection'));
 export const PanelSection = panelSection;
-export const PanelSectionRow = Object.values(mod).filter((exp) => !exp?.toString()?.includes('.PanelSection'))[0];
+export const PanelSectionRow = Object.values(mod).filter((exp) => !exp?.toString?.()?.includes('.PanelSection'))[0];

package/dist/components/ProgressBar.js

@@ -1,6 +1,6 @@
 import { findModuleExport } from '../webpack';
 import { createPropListRegex } from '../utils';
-export const ProgressBar = findModuleExport((e) => e?.toString()?.includes('.ProgressBar,"standard"=='));
-export const ProgressBarWithInfo = findModuleExport((e) => e?.toString()?.includes('.ProgressBarFieldStatus},'));
+export const ProgressBar = findModuleExport((e) => e?.toString?.()?.includes('.ProgressBar,"standard"=='));
+export const ProgressBarWithInfo = findModuleExport((e) => e?.toString?.()?.includes('.ProgressBarFieldStatus},'));
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);
 export const ProgressBarItem = findModuleExport((e) => e?.toString && progressBarItemRegex.test(e.toString()));

package/dist/components/SliderField.js

@@ -1,2 +1,2 @@
 import { CommonUIModule } from '../webpack';
-export const SliderField = Object.values(CommonUIModule).find((mod) => mod?.toString()?.includes('SliderField,fallback') || mod?.toString()?.includes("SliderField\","));
+export const SliderField = Object.values(CommonUIModule).find((mod) => mod?.toString?.()?.includes('SliderField,fallback') || mod?.toString?.()?.includes("SliderField\","));

package/dist/components/Tabs.js

@@ -1,3 +1,3 @@
 import { findModuleByExport } from '../webpack';
-const tabsModule = findModuleByExport(e => e?.toString()?.includes(".TabRowTabs") && e?.toString()?.includes("activeTab:"));
-export const Tabs = tabsModule && Object.values(tabsModule).find((e) => e?.type?.toString()?.includes("((function()"));
+const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTabs") && e?.toString?.()?.includes("activeTab:"));
+export const Tabs = tabsModule && Object.values(tabsModule).find((e) => e?.type?.toString?.()?.includes("((function()"));

package/dist/components/Toggle.js

@@ -1,2 +1,2 @@
 import { CommonUIModule } from '../webpack';
-export const Toggle = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('.ToggleOff)'));
+export const Toggle = Object.values(CommonUIModule).find((mod) => mod?.render?.toString?.()?.includes('.ToggleOff)'));

package/dist/components/ToggleField.js

@@ -1,2 +1,2 @@
 import { CommonUIModule } from '../webpack';
-export const ToggleField = Object.values(CommonUIModule).find((mod) => mod?.render?.toString()?.includes('ToggleField,fallback') || mod?.render?.toString()?.includes("ToggleField\","));
+export const ToggleField = Object.values(CommonUIModule).find((mod) => mod?.render?.toString?.()?.includes('ToggleField,fallback') || mod?.render?.toString?.()?.includes("ToggleField\","));

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.4",
+  "version": "4.8.1",
   "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/Dialog.ts

@@ -78,11 +78,11 @@ export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;
 
 export const DialogButtonPrimary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'),
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Primary"'),
 ) as FC<DialogButtonProps>;
 
 export const DialogButtonSecondary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"')
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Secondary"')
 ) as FC<DialogButtonProps>;
 
 // This is the "main" button. The Primary can act as a submit button,

package/src/components/DialogCheckbox.ts

@@ -20,13 +20,14 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
 
 // 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 &&
+  e?.prototype &&
+  typeof e?.prototype == "object" &&
   "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?.prototype?.render?.toString?.().includes('="DialogCheckbox"') || (
     e.contextType &&
-    e.prototype?.render?.toString().includes('fallback:')
+    e.prototype?.render?.toString?.().includes('fallback:')
   ))
 ) as FC<DialogCheckboxProps>;

package/src/components/FocusRing.ts

@@ -11,5 +11,5 @@ export interface FocusRingProps {
 }
 
 export const FocusRing = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.GetShowDebugFocusRing())'),
+  e?.toString?.()?.includes('.GetShowDebugFocusRing())'),
 ) as FC<FocusRingProps>;

package/src/components/Menu.ts

@@ -26,7 +26,7 @@ export interface MenuGroupProps {
 }
 
 const MenuGoupModule = findModuleByExport(e => e?.prototype?.Focus && e?.prototype?.OnOKButton && e?.prototype?.render?.toString().includes?.(`"emphasis"==this.props.tone`));
-export const MenuGroup: FC<MenuGroupProps> = MenuGoupModule && Object.values(MenuGoupModule).find((e: Export) => typeof e == "function" && e?.toString()?.includes("bInGamepadUI:"));
+export const MenuGroup: FC<MenuGroupProps> = MenuGoupModule && Object.values(MenuGoupModule).find((e: Export) => typeof e == "function" && e?.toString?.()?.includes("bInGamepadUI:"));
 export interface MenuItemProps extends FooterLegendProps {
   bInteractableItem?: boolean;
   onClick?(evt: Event): void;
@@ -42,7 +42,7 @@ export interface MenuItemProps extends FooterLegendProps {
 
 export const MenuItem: FC<MenuItemProps> = findModuleExport(
   (e: Export) =>
-    e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
+    e?.render?.toString?.()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
 );
 
 /*

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,
   });
 };
@@ -98,7 +98,7 @@ export const ModalRoot = Object.values(
 
     return false;
   }) || {},
-)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) as FC<ModalRootProps>;
+)?.find((x: any) => x?.type?.toString?.()?.includes('((function(){')) as FC<ModalRootProps>;
 
 interface SimpleModalProps {
   active?: boolean;

package/src/components/Panel.ts

@@ -22,5 +22,5 @@ export interface PanelSectionRowProps {
   children?: ReactNode;
 }
 export const PanelSectionRow = Object.values(mod).filter(
-  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
+  (exp: any) => !exp?.toString?.()?.includes('.PanelSection'),
 )[0] as FC<PanelSectionRowProps>;

package/src/components/ProgressBar.ts

@@ -24,11 +24,11 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
 }
 
 export const ProgressBar = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBar,"standard"=='),
+  e?.toString?.()?.includes('.ProgressBar,"standard"=='),
 ) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBarFieldStatus},'),
+  e?.toString?.()?.includes('.ProgressBarFieldStatus},'),
 ) as FC<ProgressBarWithInfoProps>;
 
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);

package/src/components/SliderField.ts

@@ -30,5 +30,5 @@ export interface SliderFieldProps extends ItemProps {
 
 export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
   // stable || beta as of oct 2 2024
-  mod?.toString()?.includes('SliderField,fallback') || mod?.toString()?.includes("SliderField\",")
+  mod?.toString?.()?.includes('SliderField,fallback') || mod?.toString?.()?.includes("SliderField\",")
 ) as FC<SliderFieldProps>;

package/src/components/Tabs.tsx

@@ -62,9 +62,9 @@ export interface TabsProps {
   autoFocusContents?: boolean;
 }
 
-const tabsModule = findModuleByExport(e => e?.toString()?.includes(".TabRowTabs") && e?.toString()?.includes("activeTab:"));
+const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTabs") && e?.toString?.()?.includes("activeTab:"));
 
 /**
  * Tabs component as used in the library and media tabs. See {@link TabsProps}.
  */
-export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString()?.includes("((function()")) as FC<TabsProps>;
+export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString?.()?.includes("((function()")) as FC<TabsProps>;

package/src/components/Toggle.ts

@@ -10,5 +10,5 @@ export interface ToggleProps {
 }
 
 export const Toggle = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('.ToggleOff)'),
+  mod?.render?.toString?.()?.includes('.ToggleOff)'),
 ) as FC<ToggleProps>;

package/src/components/ToggleField.ts

@@ -12,5 +12,5 @@ export interface ToggleFieldProps extends ItemProps {
 
 export const ToggleField = Object.values(CommonUIModule).find((mod: any) =>
   // stable || beta as of oct 2 2024
-  mod?.render?.toString()?.includes('ToggleField,fallback') || mod?.render?.toString()?.includes("ToggleField\",")
+  mod?.render?.toString?.()?.includes('ToggleField,fallback') || mod?.render?.toString?.()?.includes("ToggleField\",")
 ) as FC<ToggleFieldProps>;

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