@decky/ui 4.10.6 → 4.11.0

package/dist/components/Focusable.js

@@ -1,4 +1,4 @@
 import { findModuleExport } from '../webpack';
 import { createPropListRegex } from '../utils';
 const focusableRegex = createPropListRegex(["flow-children", "onActivate", "onCancel", "focusClassName", "focusWithinClassName"]);
-export const Focusable = findModuleExport((e) => e?.render?.toString && focusableRegex.test(e.render.toString()));
+export const Focusable = findModuleExport((e) => (typeof e == 'function' && e?.toString && focusableRegex.test(e.toString())) || (e?.render?.toString && focusableRegex.test(e.render.toString())));

package/dist/custom-components/ColorPickerModal.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { ConfirmModal, SliderField } from '../components';
 import { gamepadSliderClasses } from '../utils/static-classes';
@@ -12,11 +13,10 @@ export const ColorPickerModal = ({ closeModal, onConfirm = () => { }, title = 'C
         '--decky-color-picker-lvalue': `${L}%`,
         '--decky-color-picker-avalue': `${A}`,
     };
-    return (window.SP_REACT.createElement(ConfirmModal, { bAllowFullSize: true, onCancel: closeModal, onOK: () => {
+    return (_jsxs(ConfirmModal, { bAllowFullSize: true, onCancel: closeModal, onOK: () => {
             onConfirm(`hsla(${H}, ${S}%, ${L}%, ${A})`);
             closeModal();
-        } },
-        window.SP_REACT.createElement("style", null, `
+        }, children: [_jsx("style", { children: `
         /* This removes the cyan track color that is behind the slider head */
         .ColorPicker_Container .${gamepadSliderClasses.SliderTrack} {
           --left-track-color: #0000;
@@ -59,29 +59,15 @@ export const ColorPickerModal = ({ closeModal, onConfirm = () => { }, title = 'C
             hsla(var(--decky-color-picker-hvalue), var(--decky-color-picker-svalue), var(--decky-color-picker-lvalue), 1)
           );
         }
-        `),
-        window.SP_REACT.createElement("div", { className: "ColorPicker_ColorDisplayContainer", style: {
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: '1em',
-                marginTop: '-2.5em',
-            } },
-            window.SP_REACT.createElement("div", null,
-                window.SP_REACT.createElement("span", { style: { fontSize: '1.5em' } },
-                    window.SP_REACT.createElement("b", null, title))),
-            window.SP_REACT.createElement("div", { style: {
-                    backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
-                    width: '40px',
-                    height: '40px',
-                } })),
-        window.SP_REACT.createElement("div", { className: "ColorPicker_Container", style: colorPickerCSSVars },
-            window.SP_REACT.createElement("div", { className: "ColorPicker_HSlider" },
-                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Hue", value: H, min: 0, max: 360, onChange: setH })),
-            window.SP_REACT.createElement("div", { className: "ColorPicker_SSlider" },
-                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Saturation", value: S, min: 0, max: 100, onChange: setS })),
-            window.SP_REACT.createElement("div", { className: "ColorPicker_LSlider" },
-                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Lightness", value: L, min: 0, max: 100, onChange: setL })),
-            window.SP_REACT.createElement("div", { className: "ColorPicker_ASlider" },
-                window.SP_REACT.createElement(SliderField, { showValue: true, editableValue: true, label: "Alpha", value: A, step: 0.1, min: 0, max: 1, onChange: setA })))));
+        ` }), _jsxs("div", { className: "ColorPicker_ColorDisplayContainer", style: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: '1em',
+                    marginTop: '-2.5em',
+                }, children: [_jsx("div", { children: _jsx("span", { style: { fontSize: '1.5em' }, children: _jsx("b", { children: title }) }) }), _jsx("div", { style: {
+                            backgroundColor: `hsla(${H}, ${S}%, ${L}%, ${A})`,
+                            width: '40px',
+                            height: '40px',
+                        } })] }), _jsxs("div", { className: "ColorPicker_Container", style: colorPickerCSSVars, children: [_jsx("div", { className: "ColorPicker_HSlider", children: _jsx(SliderField, { showValue: true, editableValue: true, label: "Hue", value: H, min: 0, max: 360, onChange: setH }) }), _jsx("div", { className: "ColorPicker_SSlider", children: _jsx(SliderField, { showValue: true, editableValue: true, label: "Saturation", value: S, min: 0, max: 100, onChange: setS }) }), _jsx("div", { className: "ColorPicker_LSlider", children: _jsx(SliderField, { showValue: true, editableValue: true, label: "Lightness", value: L, min: 0, max: 100, onChange: setL }) }), _jsx("div", { className: "ColorPicker_ASlider", children: _jsx(SliderField, { showValue: true, editableValue: true, label: "Alpha", value: A, step: 0.1, min: 0, max: 1, onChange: setA }) })] })] }));
 };

package/dist/custom-components/ReorderableList.d.ts

@@ -14,7 +14,7 @@ export type ReorderableListProps<T> = {
     fieldProps?: FieldProps;
     animate?: boolean;
 };
-export declare function ReorderableList<T>(props: ReorderableListProps<T>): JSX.Element;
+export declare function ReorderableList<T>(props: ReorderableListProps<T>): import("react/jsx-runtime").JSX.Element;
 export type ReorderableListEntryProps<T> = {
     fieldProps?: FieldProps;
     listData: ReorderableEntry<T>[];
@@ -22,5 +22,5 @@ export type ReorderableListEntryProps<T> = {
     reorderEntryFunc: CallableFunction;
     reorderEnabled: boolean;
     animate: boolean;
-    children: ReactElement | null;
+    children: ReactElement<any> | null;
 };

package/dist/custom-components/ReorderableList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment, useEffect, useState } from 'react';
 import { Field, Focusable, GamepadButton } from '../components';
 export function ReorderableList(props) {
@@ -22,8 +23,7 @@ export function ReorderableList(props) {
             props.onSave(entryList);
         }
     }
-    return (window.SP_REACT.createElement(Fragment, null,
-        window.SP_REACT.createElement("div", { style: {
+    return (_jsx(Fragment, { children: _jsx("div", { style: {
                 width: 'inherit',
                 height: 'inherit',
                 flex: '1 1 1px',
@@ -32,8 +32,7 @@ export function ReorderableList(props) {
                 flexDirection: 'column',
                 justifyContent: 'flex-start',
                 alignContent: 'stretch',
-            } },
-            window.SP_REACT.createElement(Focusable, { onSecondaryButton: toggleReorderEnabled, onSecondaryActionDescription: reorderEnabled ? 'Save Order' : 'Reorder', onClick: toggleReorderEnabled, onButtonDown: saveOnBackout }, entryList.map((entry) => (window.SP_REACT.createElement(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps }, props.interactables ? window.SP_REACT.createElement(props.interactables, { entry: entry }) : null)))))));
+            }, children: _jsx(Focusable, { onSecondaryButton: toggleReorderEnabled, onSecondaryActionDescription: reorderEnabled ? 'Save Order' : 'Reorder', onClick: toggleReorderEnabled, onButtonDown: saveOnBackout, children: entryList.map((entry) => (_jsx(ReorderableItem, { animate: props.animate, listData: entryList, entryData: entry, reorderEntryFunc: setEntryList, reorderEnabled: reorderEnabled, fieldProps: props.fieldProps, children: props.interactables ? _jsx(props.interactables, { entry: entry }) : null }))) }) }) }));
 }
 function ReorderableItem(props) {
     const [isSelected, _setIsSelected] = useState(false);
@@ -70,7 +69,7 @@ function ReorderableItem(props) {
             await new Promise((res) => requestAnimationFrame(res));
         setIsSelectedLastFrame(val);
     }
-    return (window.SP_REACT.createElement("div", { style: props.animate
+    return (_jsx("div", { style: props.animate
             ? {
                 transition: isSelected || isSelectedLastFrame
                     ? ''
@@ -78,7 +77,5 @@ function ReorderableItem(props) {
                 transform: !props.reorderEnabled || isSelected ? 'scale(1)' : 'scale(0.9)',
                 opacity: !props.reorderEnabled || isSelected ? 1 : 0.7,
             }
-            : {} },
-        window.SP_REACT.createElement(Field, { label: props.entryData.label, ...props.fieldProps, focusable: !props.children, onButtonDown: onReorder, onGamepadBlur: () => setIsSelected(false), onGamepadFocus: () => setIsSelected(true) },
-            window.SP_REACT.createElement(Focusable, { style: { display: 'flex', width: '100%', position: 'relative' } }, props.children))));
+            : {}, children: _jsx(Field, { label: props.entryData.label, ...props.fieldProps, focusable: !props.children, onButtonDown: onReorder, onGamepadBlur: () => setIsSelected(false), onGamepadFocus: () => setIsSelected(true), children: _jsx(Focusable, { style: { display: 'flex', width: '100%', position: 'relative' }, children: props.children }) }) }));
 }

package/dist/custom-components/SuspensefulImage.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { Spinner } from '../components';
@@ -16,12 +17,12 @@ export const SuspensefulImage = (props) => {
             setError(true);
         });
     }, [props.src]);
-    return loading ? (window.SP_REACT.createElement("div", { style: {
+    return loading ? (_jsx("div", { style: {
             width: props.suspenseWidth || props.style?.width,
             height: props.suspenseHeight || props.style?.height,
             background: 'rgba(255, 255, 255, 0.2)',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-        } }, error ? 'Missing image' : window.SP_REACT.createElement(Spinner, { style: { height: '48px' } }))) : (window.SP_REACT.createElement("img", { ...props }));
+        }, children: error ? 'Missing image' : _jsx(Spinner, { style: { height: '48px' } }) })) : (_jsx("img", { ...props }));
 };

package/dist/globals/steam-client/Input.d.ts

@@ -38,7 +38,7 @@ export interface Input {
     RegisterForControllerCommandMessages(callback: (msg: ControllerCommandMessage) => void): Unregisterable;
     RegisterForControllerConfigCloudStateChanges(callback: (state: ControllerConfigCloudState) => void): Unregisterable;
     RegisterForControllerConfigInfoMessages(callback: (msgs: ControllerConfigInfoMessageList[] | ControllerConfigInfoMessageQuery[]) => void): Unregisterable;
-    RegisterForControllerInputMessages(callback: (msgs: ControllerInputMessage[]) => void): Unregisterable;
+    RegisterForControllerInputMessages(callback: (controllerIndex: number, gamepadButton: ControllerInputGamepadButton, isButtonPressed: boolean) => void): Unregisterable;
     RegisterForControllerListChanges(callback: (controllerListChanges: ControllerInfo[]) => void): Unregisterable;
     RegisterForControllerStateChanges(callback: (changes: ControllerStateChange[]) => void): Unregisterable;
     RegisterForDualSenseUpdateNotification(callback: (m_strDualSenseUpdateProduct: string) => void): Unregisterable;
@@ -273,16 +273,64 @@ export declare enum EControllerRumbleSetting {
     Off = 1,
     On = 2
 }
+export declare 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
+}
 export declare enum EThirdPartyControllerConfiguration {
     Off = 0,
     DefaultSetting = 1,
     On = 2
 }
-export interface ControllerInputMessage {
-    nA: number;
-    bS: boolean;
-    nC: number;
-}
 export interface ActiveAccount {
     strActiveAccountID: string;
     strName: string;

package/dist/globals/steam-client/Input.js

@@ -131,6 +131,60 @@ export var EControllerRumbleSetting;
     EControllerRumbleSetting[EControllerRumbleSetting["Off"] = 1] = "Off";
     EControllerRumbleSetting[EControllerRumbleSetting["On"] = 2] = "On";
 })(EControllerRumbleSetting || (EControllerRumbleSetting = {}));
+export var ControllerInputGamepadButton;
+(function (ControllerInputGamepadButton) {
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_A"] = 0] = "GAMEPAD_BUTTON_A";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_B"] = 1] = "GAMEPAD_BUTTON_B";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_X"] = 2] = "GAMEPAD_BUTTON_X";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_Y"] = 3] = "GAMEPAD_BUTTON_Y";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_DPAD_UP"] = 4] = "GAMEPAD_BUTTON_DPAD_UP";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_DPAD_RIGHT"] = 5] = "GAMEPAD_BUTTON_DPAD_RIGHT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_DPAD_DOWN"] = 6] = "GAMEPAD_BUTTON_DPAD_DOWN";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_DPAD_LEFT"] = 7] = "GAMEPAD_BUTTON_DPAD_LEFT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_MENU"] = 8] = "GAMEPAD_BUTTON_MENU";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_VIEW"] = 9] = "GAMEPAD_BUTTON_VIEW";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTPAD_UP"] = 10] = "GAMEPAD_LEFTPAD_UP";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTPAD_DOWN"] = 11] = "GAMEPAD_LEFTPAD_DOWN";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTPAD_LEFT"] = 12] = "GAMEPAD_LEFTPAD_LEFT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTPAD_RIGHT"] = 13] = "GAMEPAD_LEFTPAD_RIGHT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTPAD_ANALOG"] = 14] = "GAMEPAD_LEFTPAD_ANALOG";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTPAD_UP"] = 15] = "GAMEPAD_RIGHTPAD_UP";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTPAD_DOWN"] = 16] = "GAMEPAD_RIGHTPAD_DOWN";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTPAD_LEFT"] = 17] = "GAMEPAD_RIGHTPAD_LEFT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTPAD_RIGHT"] = 18] = "GAMEPAD_RIGHTPAD_RIGHT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTPAD_ANALOG"] = 19] = "GAMEPAD_RIGHTPAD_ANALOG";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_UP"] = 20] = "GAMEPAD_LEFTSTICK_UP";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_DOWN"] = 21] = "GAMEPAD_LEFTSTICK_DOWN";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_LEFT"] = 22] = "GAMEPAD_LEFTSTICK_LEFT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_RIGHT"] = 23] = "GAMEPAD_LEFTSTICK_RIGHT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_ANALOG"] = 24] = "GAMEPAD_LEFTSTICK_ANALOG";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_CLICK"] = 25] = "GAMEPAD_LEFTSTICK_CLICK";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LTRIGGER_ANALOG"] = 26] = "GAMEPAD_LTRIGGER_ANALOG";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RTRIGGER_ANALOG"] = 27] = "GAMEPAD_RTRIGGER_ANALOG";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LTRIGGER"] = 28] = "GAMEPAD_BUTTON_LTRIGGER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RTRIGGER"] = 29] = "GAMEPAD_BUTTON_RTRIGGER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LSHOULDER"] = 30] = "GAMEPAD_BUTTON_LSHOULDER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RSHOULDER"] = 31] = "GAMEPAD_BUTTON_RSHOULDER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LBACK"] = 32] = "GAMEPAD_BUTTON_LBACK";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RBACK"] = 33] = "GAMEPAD_BUTTON_RBACK";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_GUIDE"] = 34] = "GAMEPAD_BUTTON_GUIDE";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_SELECT"] = 35] = "GAMEPAD_BUTTON_SELECT";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_START"] = 36] = "GAMEPAD_BUTTON_START";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LPAD_CLICKED"] = 37] = "GAMEPAD_BUTTON_LPAD_CLICKED";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LPAD_TOUCH"] = 38] = "GAMEPAD_BUTTON_LPAD_TOUCH";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RPAD_CLICKED"] = 39] = "GAMEPAD_BUTTON_RPAD_CLICKED";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RPAD_TOUCH"] = 40] = "GAMEPAD_BUTTON_RPAD_TOUCH";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTSTICK_CLICK"] = 41] = "GAMEPAD_RIGHTSTICK_CLICK";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_RIGHTSTICK_TOUCH"] = 42] = "GAMEPAD_RIGHTSTICK_TOUCH";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_LEFTSTICK_TOUCH"] = 43] = "GAMEPAD_LEFTSTICK_TOUCH";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LBACK_UPPER"] = 44] = "GAMEPAD_BUTTON_LBACK_UPPER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_RBACK_UPPER"] = 45] = "GAMEPAD_BUTTON_RBACK_UPPER";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_BUTTON_LAST"] = 46] = "GAMEPAD_BUTTON_LAST";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_ANALOG_SCROLL"] = 47] = "GAMEPAD_ANALOG_SCROLL";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_ANALOG_LEFT_KEYBOARD_CURSOR"] = 48] = "GAMEPAD_ANALOG_LEFT_KEYBOARD_CURSOR";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_ANALOG_RIGHT_KEYBOARD_CURSOR"] = 49] = "GAMEPAD_ANALOG_RIGHT_KEYBOARD_CURSOR";
+    ControllerInputGamepadButton[ControllerInputGamepadButton["GAMEPAD_ANALOG_LAST"] = 50] = "GAMEPAD_ANALOG_LAST";
+})(ControllerInputGamepadButton || (ControllerInputGamepadButton = {}));
 export var EThirdPartyControllerConfiguration;
 (function (EThirdPartyControllerConfiguration) {
     EThirdPartyControllerConfiguration[EThirdPartyControllerConfiguration["Off"] = 0] = "Off";

package/dist/utils/react/fc.js

@@ -39,66 +39,136 @@ export function injectFCTrampoline(component, customHooks) {
         }
     };
     let renderHookStep = 0;
-    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;
-        }
-    });
-    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();
+    if (window.SP_REACTDOM.version.startsWith("19.")) {
+        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._contextTypes;
-        },
-        set: function (value) {
-            this._contextTypes = value;
-        }
-    });
-    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();
+        });
+        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._updater = value;
-        }
-    });
-    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();
+        });
+        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;
             }
-            return this._getDerivedStateFromProps;
-        },
-        set: function (value) {
-            this._getDerivedStateFromProps = value;
-        }
-    });
+        });
+    }
+    else if (window.SP_REACTDOM.version.startsWith("18.")) {
+        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;
+            }
+        });
+        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;
+            }
+        });
+        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;
+            }
+        });
+        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;
 }

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

@@ -1,11 +1,16 @@
-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 } from 'react';
 declare global {
     interface Window {
         SP_REACT: typeof React;
+        SP_REACTDOM: typeof ReactDOM;
+        SP_JSX: typeof JSXRuntime;
     }
 }
 export declare function createPropListRegex(propList: string[], fromStart?: boolean): RegExp;
+export declare let INTERNAL_HOOKS: any;
 export declare function applyHookStubs(customHooks?: any): any;
 export declare function removeHookStubs(): void;
 export declare function fakeRenderComponent(fun: Function, customHooks?: any): any;

package/dist/utils/react/react.js

@@ -14,9 +14,10 @@ export function createPropListRegex(propList, fromStart = true) {
     return new RegExp(regexString);
 }
 let oldHooks = {};
+export let INTERNAL_HOOKS = window.SP_REACT?.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?.ReactCurrentDispatcher
+    .current || Object.values(window.SP_REACT?.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE).find((p) => p?.useEffect);
 export function applyHookStubs(customHooks = {}) {
-    const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
-        .current;
+    const hooks = INTERNAL_HOOKS;
     oldHooks = {
         useContext: hooks.useContext,
         useCallback: hooks.useCallback,
@@ -27,7 +28,7 @@ export function applyHookStubs(customHooks = {}) {
         useState: hooks.useState,
     };
     hooks.useCallback = (cb) => cb;
-    hooks.useContext = (cb) => cb._currentValue;
+    hooks.useContext = (cb) => cb?._currentValue;
     hooks.useLayoutEffect = (_) => { };
     hooks.useMemo = (cb, _) => cb;
     hooks.useEffect = (_) => { };
@@ -40,8 +41,7 @@ export function applyHookStubs(customHooks = {}) {
     return hooks;
 }
 export function removeHookStubs() {
-    const hooks = window.SP_REACT.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher
-        .current;
+    const hooks = INTERNAL_HOOKS;
     Object.assign(hooks, oldHooks);
     oldHooks = {};
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.10.6",
+  "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",
@@ -47,8 +47,8 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/jest": "^29.5.14",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.1.1",
+    "@types/react-dom": "19.1.1",
     "@types/react-router": "5.1.20",
     "commitizen": "^4.3.1",
     "husky": "^9.1.7",

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

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

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

package/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;
-        }
-    });
+    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;
+            }
+        });
 
-    // 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 == 1 || renderHookStep == 2) {
+                    renderHookStep = 0;
+                    removeStubsIfNeeded();
+                }
+                return this._updater = 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();
+        // 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;
             }
-            return this._updater = 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;
+            }
+        });
 
-    // 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();
+        // 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;
             }
-            return this._getDerivedStateFromProps;
-        },
-        set: function (value) {
-            this._getDerivedStateFromProps = 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;
 }

package/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 = {};
 }