chore(release): 4.11.0 [CI SKIP]

Co-Authored-By: junkrunner <eben@sdk.co.nz>

CHANGELOG.md

@@ -1,3 +1,38 @@
+# [4.11.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.6...v4.11.0) (2025-10-15)
+
+
+### Features
+
+* react 19 support update ([6e443c0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/6e443c06d3b7f2790da8b44a5c907517fcf12152))
+
+## [4.10.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.5...v4.10.6) (2025-09-01)
+
+
+### Bug Fixes
+
+* **ci:** update to resolve deprecation in sem. rel. due to octokit ([779b1ae](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/779b1ae0defac84dd0d93517858d5aa5e51a2328))
+
+## [4.10.5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.4...v4.10.5) (2025-08-20)
+
+
+### Bug Fixes
+
+* **DialogHeader:** valve rewrote component on beta, update filter to search for both versions ([37dd885](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/37dd88513ed7360d3bcdc99630d6cb0c8d31db3e))
+
+## [4.10.4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.3...v4.10.4) (2025-07-13)
+
+
+### Bug Fixes
+
+* **modals:** fix ModalRoot on beta ([3d5de65](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3d5de65077098ff3fb5192cb55fb1534336411f5))
+
+## [4.10.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.2...v4.10.3) (2025-07-09)
+
+
+### Bug Fixes
+
+* **modals:** fix `<ConfirmModal />` for new Steam beta ([#123](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/123)) ([aa0678c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/aa0678c857e07f58de58e5d20565bf2718fff6dc))
+
 ## [4.10.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.10.1...v4.10.2) (2025-06-28)
 
 

global.d.ts

@@ -1,5 +1,10 @@
+import type * as React from 'react';
+import type * as ReactDOM from 'react-dom';
+import type * as JSXRuntime from 'react/jsx-runtime';
 declare global {
   interface Window {
     SP_REACT: typeof React;
+    SP_REACTDOM: typeof ReactDOM;
+    SP_JSX: typeof JSXRuntime;
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.10.2",
+  "version": "4.11.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,30 +41,30 @@
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.3.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@commitlint/cz-commitlint": "^19.2.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@commitlint/cz-commitlint": "^19.8.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@types/jest": "^29.5.12",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "19.1.1",
+    "@types/react-dom": "19.1.1",
     "@types/react-router": "5.1.20",
-    "commitizen": "^4.3.0",
-    "husky": "^9.0.11",
+    "commitizen": "^4.3.1",
+    "husky": "^9.1.7",
     "import-sort-style-module": "^6.0.0",
     "jest": "^29.7.0",
     "minimist": "^1.2.8",
-    "prettier": "^3.3.2",
+    "prettier": "^3.6.2",
     "prettier-plugin-import-sort": "^0.0.7",
-    "semantic-release": "^24.0.0",
+    "semantic-release": "^24.2.7",
     "shx": "^0.3.4",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.4.1",
     "typedoc": "^0.25.13",
-    "typedoc-plugin-mdn-links": "^3.1.29",
+    "typedoc-plugin-mdn-links": "^3.3.8",
     "typedoc-plugin-missing-exports": "^2.3.0",
     "typedoc-wikijs-theme": "^1.0.5",
-    "typescript": "^5.4.5"
+    "typescript": "^5.9.2"
   },
   "pnpm": {
     "peerDependencyRules": {

src/components/Dialog.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, ReactNode, RefAttributes } from 'react';
 
-import { CommonUIModule } from '../webpack';
+import { CommonUIModule, Module } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
 
 export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
@@ -68,7 +68,12 @@ const MappedDialogDivs = new Map(
   }),
 );
 
-export const DialogHeader = MappedDialogDivs.get('DialogHeader') as FC<DialogCommonProps>;
+// Old | New
+export const DialogHeader = (MappedDialogDivs.get('DialogHeader') || Object.values(CommonUIModule).find((component: Module) => {
+  const str = component?.render?.toString?.();
+  return str?.includes("role:\"heading\"") && str.includes(")(\"DialogHeader\",");
+})) as FC<DialogCommonProps>;
+
 export const DialogSubHeader = MappedDialogDivs.get('DialogSubHeader') as FC<DialogCommonProps>;
 export const DialogFooter = MappedDialogDivs.get('DialogFooter') as FC<DialogCommonProps>;
 export const DialogLabel = MappedDialogDivs.get('DialogLabel') as FC<DialogCommonProps>;

src/components/Focusable.ts

@@ -17,5 +17,5 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
 const focusableRegex = createPropListRegex(["flow-children", "onActivate", "onCancel", "focusClassName", "focusWithinClassName"]);
 
 export const Focusable = findModuleExport((e: Export) =>
-  e?.render?.toString && focusableRegex.test(e.render.toString())
+  (typeof e == 'function' && e?.toString && focusableRegex.test(e.toString())) || (e?.render?.toString && focusableRegex.test(e.render.toString()))
 ) as FC<FocusableProps & RefAttributes<HTMLDivElement>>;

src/components/Modal.ts

@@ -83,22 +83,26 @@ export interface ConfirmModalProps extends ModalRootProps {
 }
 
 export const ConfirmModal = findModuleExport(
-  (e: Export) => !e?.prototype?.OK && e?.prototype?.Cancel && e?.prototype?.render,
+  (e: Export) => e?.toString()?.includes('bUpdateDisabled') && e?.toString()?.includes('closeModal') && e?.toString()?.includes('onGamepadCancel'),
 ) as FC<ConfirmModalProps>;
 
-export const ModalRoot = Object.values(
-  findModule((m: any) => {
-    if (typeof m !== 'object') return false;
+export const ModalRoot = 
+  // new
+  findModuleExport((e: Export) => typeof e === 'function' && e.toString().includes('Either closeModal or onCancel should be passed to GenericDialog. Classes: ')) || 
+  // old
+  Object.values(
+    findModule((m: any) => {
+      if (typeof m !== 'object') return false;
 
-    for (let prop in m) {
-      if (m[prop]?.m_mapModalManager && Object.values(m)?.find((x: any) => x?.type)) {
-        return true;
+      for (let prop in m) {
+        if (m[prop]?.m_mapModalManager && Object.values(m)?.find((x: any) => x?.type)) {
+          return true;
+        }
       }
-    }
 
-    return false;
-  }) || {},
-)?.find((x: any) => x?.type?.toString?.()?.includes('((function(){')) as FC<ModalRootProps>;
+      return false;
+    }) || {},
+  )?.find((x: any) => x?.type?.toString?.()?.includes('((function(){')) as FC<ModalRootProps>;
 
 interface SimpleModalProps {
   active?: boolean;

src/custom-components/ReorderableList.tsx

@@ -108,7 +108,7 @@ export type ReorderableListEntryProps<T> = {
   reorderEntryFunc: CallableFunction;
   reorderEnabled: boolean;
   animate: boolean;
-  children: ReactElement | null;
+  children: ReactElement<any> | null;
 };
 
 function ReorderableItem<T>(props: ReorderableListEntryProps<T>) {

src/globals/steam-client/Input.ts

@@ -130,7 +130,7 @@ export interface Input {
      * @returns an object that can be used to unregister the callback.
      */
     RegisterForControllerInputMessages(
-        callback: (msgs: ControllerInputMessage[]) => void,
+        callback: (controllerIndex: number, gamepadButton: ControllerInputGamepadButton, isButtonPressed: boolean) => void,
     ): Unregisterable;
 
     RegisterForControllerListChanges(callback: (controllerListChanges: ControllerInfo[]) => void): Unregisterable;
@@ -560,6 +560,60 @@ export enum EControllerRumbleSetting {
     On,
 }
 
+export enum ControllerInputGamepadButton {
+    GAMEPAD_BUTTON_A = 0,
+    GAMEPAD_BUTTON_B = 1,
+    GAMEPAD_BUTTON_X = 2,
+    GAMEPAD_BUTTON_Y = 3,
+    GAMEPAD_BUTTON_DPAD_UP = 4,
+    GAMEPAD_BUTTON_DPAD_RIGHT = 5,
+    GAMEPAD_BUTTON_DPAD_DOWN = 6,
+    GAMEPAD_BUTTON_DPAD_LEFT = 7,
+    GAMEPAD_BUTTON_MENU = 8,
+    GAMEPAD_BUTTON_VIEW = 9,
+    GAMEPAD_LEFTPAD_UP = 10,
+    GAMEPAD_LEFTPAD_DOWN = 11,
+    GAMEPAD_LEFTPAD_LEFT = 12,
+    GAMEPAD_LEFTPAD_RIGHT = 13,
+    GAMEPAD_LEFTPAD_ANALOG = 14,
+    GAMEPAD_RIGHTPAD_UP = 15,
+    GAMEPAD_RIGHTPAD_DOWN = 16,
+    GAMEPAD_RIGHTPAD_LEFT = 17,
+    GAMEPAD_RIGHTPAD_RIGHT = 18,
+    GAMEPAD_RIGHTPAD_ANALOG = 19,
+    GAMEPAD_LEFTSTICK_UP = 20,
+    GAMEPAD_LEFTSTICK_DOWN = 21,
+    GAMEPAD_LEFTSTICK_LEFT = 22,
+    GAMEPAD_LEFTSTICK_RIGHT = 23,
+    GAMEPAD_LEFTSTICK_ANALOG = 24,
+    GAMEPAD_LEFTSTICK_CLICK = 25,
+    GAMEPAD_LTRIGGER_ANALOG = 26,
+    GAMEPAD_RTRIGGER_ANALOG = 27,
+    GAMEPAD_BUTTON_LTRIGGER = 28,
+    GAMEPAD_BUTTON_RTRIGGER = 29,
+    GAMEPAD_BUTTON_LSHOULDER = 30,
+    GAMEPAD_BUTTON_RSHOULDER = 31,
+    GAMEPAD_BUTTON_LBACK = 32,
+    GAMEPAD_BUTTON_RBACK = 33,
+    GAMEPAD_BUTTON_GUIDE = 34,
+    GAMEPAD_BUTTON_SELECT = 35,
+    GAMEPAD_BUTTON_START = 36,
+    GAMEPAD_BUTTON_LPAD_CLICKED = 37,
+    GAMEPAD_BUTTON_LPAD_TOUCH = 38,
+    GAMEPAD_BUTTON_RPAD_CLICKED = 39,
+    GAMEPAD_BUTTON_RPAD_TOUCH = 40,
+    GAMEPAD_RIGHTSTICK_CLICK = 41,
+    GAMEPAD_RIGHTSTICK_TOUCH = 42,
+    GAMEPAD_LEFTSTICK_TOUCH = 43,
+    GAMEPAD_BUTTON_LBACK_UPPER = 44,
+    GAMEPAD_BUTTON_RBACK_UPPER = 45,
+    GAMEPAD_BUTTON_LAST = 46,
+    GAMEPAD_ANALOG_SCROLL = 47,
+    GAMEPAD_ANALOG_LEFT_KEYBOARD_CURSOR = 48,
+    GAMEPAD_ANALOG_RIGHT_KEYBOARD_CURSOR = 49,
+    GAMEPAD_ANALOG_LAST = 50
+}
+
 // TODO: Not the actual name, but the enum is only represented in a dropdown
 // options vector, ty valve
 export enum EThirdPartyControllerConfiguration {
@@ -568,12 +622,6 @@ export enum EThirdPartyControllerConfiguration {
     On,
 }
 
-export interface ControllerInputMessage {
-    nA: number;
-    bS: boolean;
-    nC: number;
-}
-
 export interface ActiveAccount {
     strActiveAccountID: string;
     strName: string;

src/utils/react/fc.ts

@@ -69,71 +69,145 @@ export function injectFCTrampoline(component: FC, customHooks?: any): FCTrampoli
 
     let renderHookStep = 0;
 
-    // Accessed two times, once directly before class instantiation, and again in some extra logic we don't need to worry about that we hanlde below just in case.
-    Object.defineProperty(component, "contextType", {
-        configurable: true,
-        get: function () {
-            loggingEnabled && logger.debug("get contexttype", this, stubsApplied, renderHookStep);
-            loggingEnabled && console.trace("contextType trace");
-            if (renderHookStep == 0) renderHookStep = 1;
-            else if (renderHookStep == 3) renderHookStep = 4;
-            return this._contextType;
-        },
-        set: function (value) {
-            this._contextType = value;
-        }
-    });
-
-    // Always accessed directly after contextType for the path we want to catch.
-    Object.defineProperty(component, "contextTypes", {
-        configurable: true,
-        get: function () {
-            loggingEnabled && logger.debug("get contexttypes", this, stubsApplied, renderHookStep);
-            loggingEnabled && console.trace("contextTypes trace");
-            if (renderHookStep == 1) {
-                renderHookStep = 2;
-                applyStubsIfNeeded();
-            };
-            return this._contextTypes;
-        },
-        set: function (value) {
-            this._contextTypes = value;
-        }
-    });
-
-    // Set directly after class is instantiated
-    Object.defineProperty(component.prototype, "updater", {
-        configurable: true,
-        get: function () {
-            return this._updater;
-        },
-        set: function (value) {
-            loggingEnabled && logger.debug("set updater", this, value, stubsApplied, renderHookStep);
-            loggingEnabled && console.trace("updater trace");
-            if (renderHookStep == 2) {
-                renderHookStep = 0;
-                removeStubsIfNeeded();
+    if (window.SP_REACTDOM.version.startsWith("19.")) {
+        // Accessed two times directly before class instantiation on path A and once on path B
+        Object.defineProperty(component, "contextType", {
+            configurable: true,
+            get: function () {
+                loggingEnabled && logger.debug("get contexttype", this, this._contextType, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("contextType trace");
+                if (renderHookStep == 0) {
+                    renderHookStep = 1;
+                }
+                if (this._contextType == null) {
+                    this._contextType = {};
+                }
+                if (!this._contextType.appliedCurrentValueHook) {
+                    logger.debug("applied currentvalue hook");
+                    this._contextType.appliedCurrentValueHook = true;
+                    Object.defineProperty(this._contextType, "_currentValue", {
+                        configurable: true,
+                        get: function () {
+                            loggingEnabled && logger.debug("get currentValue", this, stubsApplied, renderHookStep);
+                            loggingEnabled && console.trace("currentValue trace");
+                            if (renderHookStep == 1) {
+                                renderHookStep = 2;
+                                applyStubsIfNeeded();
+                            }
+                            return this.__currentValue;
+                        },
+                        set: function (value) {
+                            return this.__currentValue = value;
+                        }
+                    });
+                }
+                return this._contextType;
+            },
+            set: function (value) {
+                this._contextType = value;
             }
-            return this._updater = value;
-        }
-    });
+        });
 
-    // Prevents the second contextType+contextTypes access from leaving its hooks around
-    Object.defineProperty(component, "getDerivedStateFromProps", {
-        configurable: true,
-        get: function () {
-            loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied, renderHookStep);
-            loggingEnabled && console.trace("getDerivedStateFromProps trace");
-            if (renderHookStep == 2) {
-                renderHookStep = 0;
-                removeStubsIfNeeded();
+        // Set directly after class is instantiated
+        Object.defineProperty(component.prototype, "updater", {
+            configurable: true,
+            get: function () {
+                return this._updater;
+            },
+            set: function (value) {
+                loggingEnabled && logger.debug("set updater", this, value, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("updater trace");
+                if (renderHookStep == 1 || renderHookStep == 2) {
+                    renderHookStep = 0;
+                    removeStubsIfNeeded();
+                }
+                return this._updater = value;
             }
-            return this._getDerivedStateFromProps;
-        },
-        set: function (value) {
-            this._getDerivedStateFromProps = value;
-        }
-    });
+        });
+
+        // Prevents the second contextType access from leaving its hooks around
+        Object.defineProperty(component, "getDerivedStateFromProps", {
+            configurable: true,
+            get: function () {
+                loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("getDerivedStateFromProps trace");
+                if (renderHookStep == 1|| renderHookStep == 2) {
+                    renderHookStep = 0;
+                    removeStubsIfNeeded();
+                }
+                return this._getDerivedStateFromProps;
+            },
+            set: function (value) {
+                this._getDerivedStateFromProps = value;
+            }
+        });
+    } else if (window.SP_REACTDOM.version.startsWith("18.")) {
+        // Accessed two times, once directly before class instantiation, and again in some extra logic we don't need to worry about that we hanlde below just in case.
+        Object.defineProperty(component, "contextType", {
+            configurable: true,
+            get: function () {
+                loggingEnabled && logger.debug("get contexttype", this, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("contextType trace");
+                if (renderHookStep == 0) renderHookStep = 1;
+                else if (renderHookStep == 3) renderHookStep = 4;
+                return this._contextType;
+            },
+            set: function (value) {
+                this._contextType = value;
+            }
+        });
+
+        // Always accessed directly after contextType for the path we want to catch.
+        Object.defineProperty(component, "contextTypes", {
+            configurable: true,
+            get: function () {
+                loggingEnabled && logger.debug("get contexttypes", this, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("contextTypes trace");
+                if (renderHookStep == 1) {
+                    renderHookStep = 2;
+                    applyStubsIfNeeded();
+                };
+                return this._contextTypes;
+            },
+            set: function (value) {
+                this._contextTypes = value;
+            }
+        });
+
+        // Set directly after class is instantiated
+        Object.defineProperty(component.prototype, "updater", {
+            configurable: true,
+            get: function () {
+                return this._updater;
+            },
+            set: function (value) {
+                loggingEnabled && logger.debug("set updater", this, value, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("updater trace");
+                if (renderHookStep == 2) {
+                    renderHookStep = 0;
+                    removeStubsIfNeeded();
+                }
+                return this._updater = value;
+            }
+        });
+
+        // Prevents the second contextType+contextTypes access from leaving its hooks around
+        Object.defineProperty(component, "getDerivedStateFromProps", {
+            configurable: true,
+            get: function () {
+                loggingEnabled && logger.debug("get getDerivedStateFromProps", this, stubsApplied, renderHookStep);
+                loggingEnabled && console.trace("getDerivedStateFromProps trace");
+                if (renderHookStep == 2) {
+                    renderHookStep = 0;
+                    removeStubsIfNeeded();
+                }
+                return this._getDerivedStateFromProps;
+            },
+            set: function (value) {
+                this._getDerivedStateFromProps = value;
+            }
+        });
+    }
 
     return userComponent;
 }

src/utils/react/react.ts

@@ -1,4 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
+import type * as ReactDOM from 'react-dom';
+import type * as JSXRuntime from 'react/jsx-runtime';
 import { Ref, useState } from 'react';
 
 // this shouldn't need to be redeclared but it does for some reason
@@ -6,6 +8,8 @@ import { Ref, useState } from 'react';
 declare global {
   interface Window {
     SP_REACT: typeof React;
+    SP_REACTDOM: typeof ReactDOM;
+    SP_JSX: typeof JSXRuntime;
   }
 }
 
@@ -33,9 +37,11 @@ export function createPropListRegex(propList: string[], fromStart: boolean = tru
 
 let oldHooks = {};
 
+export let INTERNAL_HOOKS = (window.SP_REACT as any)?.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher
+    .current || Object.values((window.SP_REACT as any)?.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE).find((p: any) => p?.useEffect);
+
 export function applyHookStubs(customHooks: any = {}): any {
-  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
-    .current;
+  const hooks = INTERNAL_HOOKS;
 
   // TODO: add more hooks
 
@@ -50,7 +56,7 @@ export function applyHookStubs(customHooks: any = {}): any {
   };
 
   hooks.useCallback = (cb: Function) => cb;
-  hooks.useContext = (cb: any) => cb._currentValue;
+  hooks.useContext = (cb: any) => cb?._currentValue;
   hooks.useLayoutEffect = (_: Function) => {}; //cb();
   hooks.useMemo = (cb: Function, _: any[]) => cb;
   hooks.useEffect = (_: Function) => {}; //cb();
@@ -67,8 +73,7 @@ export function applyHookStubs(customHooks: any = {}): any {
 }
 
 export function removeHookStubs() {
-  const hooks = (window.SP_REACT as any).__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
-    .current;
+  const hooks = INTERNAL_HOOKS;
   Object.assign(hooks, oldHooks);
   oldHooks = {};
 }

tsconfig.json

@@ -3,8 +3,7 @@
     "outDir": "dist",
     "module": "ESNext",
     "target": "ES2020",
-    "jsx": "react",
-    "jsxFactory": "window.SP_REACT.createElement",
+    "jsx": "react-jsx",
     "declaration": true,
     "moduleResolution": "node",
     "noUnusedLocals": true,