chore(release): 3.22.1 [CI SKIP]

fix(useQuickAccessVisible): use the "Page Visibility API" instead of focus/blur

CHANGELOG.md

@@ -1,3 +1,37 @@
+## [3.22.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.22.0...v3.22.1) (2023-10-10)
+
+
+### Bug Fixes
+
+* **useQuickAccessVisible:** use the "Page Visibility API" instead of focus/blur ([4c4fda4](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4c4fda47e3d9fd936b493c5965634a0ff443014f))
+
+# [3.22.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.21.8...v3.22.0) (2023-08-09)
+
+
+### Bug Fixes
+
+* add patch indicator to prevent crashes ([3170779](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/3170779c6b3d02ea17f7b6c1fbd57e00498ffe4f))
+
+
+### Features
+
+* add components found while working on tabmaster ([4f8f65d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/4f8f65d42979149cc80b4a86545d3d0d9bf14bf3))
+* add components found while working on tabmaster ([fd0d011](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/fd0d011cbf05790c5a1078970b5be72f9267402c))
+
+## [3.21.8](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.21.7...v3.21.8) (2023-06-27)
+
+
+### Bug Fixes
+
+* the typescript compiler was eating the enum ([c9b5839](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c9b583945c1cb5267b41a821743590a841572abe))
+
+## [3.21.7](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.21.6...v3.21.7) (2023-06-26)
+
+
+### Bug Fixes
+
+* add patch indicator to prevent crashes ([#88](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/88)) ([9128c1e](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/9128c1e7dadb98a8926d3dba9907a01cc78d90cf))
+
 ## [3.21.6](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.21.5...v3.21.6) (2023-06-22)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decky-frontend-lib",
-  "version": "3.21.6",
+  "version": "3.22.1",
   "description": "A library for building decky plugins",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/custom-hooks/useQuickAccessVisible.tsx

@@ -9,14 +9,7 @@ function getQuickAccessWindow(): Window | null {
 /**
  * Returns state indicating the visibility of quick access menu.
  *
- * @remarks
- * During development it is possible to open the quick access menu without giving it
- * focus in some cases. In such cases, the quick access menu state is invisible.
- *
- * This seems to be impossible to replicate when running the deck normally. Even in
- * the edge cases it always seems to have a focus.
- *
- * @returns `true` if quick access menu is visible (focused) and `false` otherwise.
+ * @returns `true` if quick access menu is visible and `false` otherwise.
  *
  * @example
  * import { VFC, useEffect } from "react";
@@ -44,7 +37,10 @@ function getQuickAccessWindow(): Window | null {
  * };
  */
 export function useQuickAccessVisible(): boolean {
-  const [isVisible, setIsVisible] = useState(getQuickAccessWindow()?.document.hasFocus() ?? true);
+  // By default we say that document is not hidden, unless we know otherwise.
+  // This would cover the cases when Valve breaks something and the quick access window
+  // cannot be accessed anymore - the plugins that use this would continue working somewhat.
+  const [isHidden, setIsHidden] = useState(getQuickAccessWindow()?.document.hidden ?? false);
 
   useEffect(() => {
     const quickAccessWindow = getQuickAccessWindow();
@@ -53,16 +49,12 @@ export function useQuickAccessVisible(): boolean {
       return;
     }
 
-    const onBlur = () => setIsVisible(false);
-    const onFocus = () => setIsVisible(true);
-
-    quickAccessWindow.addEventListener('blur', onBlur);
-    quickAccessWindow.addEventListener('focus', onFocus);
+    const onVisibilityChange = () => setIsHidden(quickAccessWindow.document.hidden);
+    quickAccessWindow.addEventListener('visibilitychange', onVisibilityChange);
     return () => {
-      quickAccessWindow.removeEventListener('blur', onBlur);
-      quickAccessWindow.removeEventListener('focus', onFocus);
+      quickAccessWindow.removeEventListener('visibilitychange', onVisibilityChange);
     };
   }, []);
 
-  return isVisible;
+  return !isHidden;
 }

src/deck-components/Modal.tsx

@@ -154,3 +154,16 @@ export const ModalRoot = (Object.values(
       }
     }
   })) as FC<ModalRootProps>;
+
+interface SimpleModalProps{
+  active?: boolean,
+  children: ReactNode
+}
+
+const ModalModule = findModule((mod) => {
+  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
+  if (mod.SimpleModal && mod.ModalPosition) return mod;
+})
+
+export const SimpleModal = ModalModule.SimpleModal  as FC<SimpleModalProps>
+export const ModalPosition = ModalModule.ModalPosition  as FC<SimpleModalProps>

src/deck-components/Panel.tsx

@@ -2,6 +2,11 @@ import { FC, ReactNode } from 'react';
 
 import { findModuleChild } from '../webpack';
 
+export const Panel: FC<{ children?: ReactNode; }> = findModuleChild((mod) => {
+  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
+  return mod.Panel;
+})
+
 export interface PanelSectionProps {
   title?: string;
   spinner?: boolean;

src/deck-components/Scroll.tsx

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { findModuleChild, findModule } from "../webpack";
+
+const ScrollingModule = findModule((mod) => {
+  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
+  if (mod.ScrollPanel) return mod;
+});
+
+export const ScrollPanel: FC<{ children?: ReactNode; }> = ScrollingModule.ScrollPanel;
+
+export const ScrollPanelGroup: FC<{ children?: ReactNode; }> = findModuleChild((mod) => {
+  if (typeof mod !== 'object' || !mod.__esModule) return undefined;
+  return mod.ScrollPanelGroup;
+})

src/deck-components/index.ts

@@ -25,6 +25,7 @@ export * from './TextField';
 export * from './Toggle';
 export * from './ToggleField';
 export * from './SteamClient';
+export * from './Scroll';
 
 import { AppDetails, LogoPosition, SteamAppOverview, SteamClient } from './SteamClient';
 

src/plugin.tsx

@@ -57,7 +57,7 @@ export interface FilePickerRes {
   realpath: string;
 }
 
-export enum FileSelectionType {
+export const enum FileSelectionType {
   FILE,
   FOLDER,
 }

src/utils/react.ts

@@ -46,13 +46,21 @@ export function fakeRenderComponent(fun: Function, customHooks: any = {}): any {
 }
 
 export function wrapReactType(node: any, prop: any = 'type') {
-  return (node[prop] = { ...node[prop] });
+  if (node[prop]?.__DECKY_WRAPPED) {
+    return node[prop];
+  } else {
+    return (node[prop] = { ...node[prop], __DECKY_WRAPPED: true });
+  }
 }
 
 export function wrapReactClass(node: any, prop: any = 'type') {
-  const cls = node[prop];
-  const wrappedCls = class extends cls {};
-  return (node[prop] = wrappedCls);
+  if (node[prop]?.__DECKY_WRAPPED) {
+    return node[prop];
+  } else {
+    const cls = node[prop];
+    const wrappedCls = class extends cls { static __DECKY_WRAPPED = true; };
+    return (node[prop] = wrappedCls);
+  }
 }
 
 export function getReactInstance(o: HTMLElement | Element | Node) {