chore(release): 3.16.0 [CI SKIP]

* feat(Menu): extend FooterLegendProps

* feat(MenuItem): add more missing props

CHANGELOG.md

@@ -1,3 +1,81 @@
+# [3.16.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.15.0...v3.16.0) (2022-12-11)
+
+
+### Features
+
+* **Marquee:** Add Marquee component ([#63](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/63)) ([925ea8c](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/925ea8c3ceaaf6ff2f79b8808908a9b144a4fcff))
+
+# [3.15.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.14.0...v3.15.0) (2022-12-11)
+
+
+### Features
+
+* **Focusable:** add noFocusRing prop type ([#65](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/65)) ([cc29dda](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/cc29ddaf578e21ab2abe1cd266f1d15debee0637))
+
+# [3.14.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.13.0...v3.14.0) (2022-12-10)
+
+
+### Features
+
+* **toast:** add showToast/playSound to ToastData ([#64](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/64)) ([7ba1229](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/7ba1229a4e24fea587b96dc8b078200faf45ddee))
+
+# [3.13.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.12.0...v3.13.0) (2022-11-29)
+
+
+### Features
+
+* **Menu:** add more missing props ([#60](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/60)) [CI SKIP] ([678ba21](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/678ba216f1e194986b0c391398e6f73536cd0102))
+
+# [3.12.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.1...v3.12.0) (2022-11-28)
+
+
+### Features
+
+* **MenuItem:** add missing props ([#59](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/59)) ([c84a091](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/c84a09146935f0942265b7a1e4aadc40e8cf22dc))
+
+## [3.11.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.11.0...v3.11.1) (2022-11-20)
+
+
+### Bug Fixes
+
+* **Footer:** add types for ActionDescriptionMap ([2ec9519](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/2ec9519b7d6d1cc0d232853ce05a773953b37c5a))
+
+# [3.11.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.10.0...v3.11.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add "appDetailsClasses" ([#55](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/55)) ([ed98d14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/ed98d14b37cf09500afd88e7c8e9c03749119b38))
+
+# [3.10.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.9.0...v3.10.0) (2022-11-18)
+
+
+### Features
+
+* **classes:** add appDetailsHeaderClasses ([#54](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/54)) ([3229162](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/32291620b403f8b65cf378343454a3f2668fb6ee))
+
+# [3.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.8.0...v3.9.0) (2022-11-16)
+
+
+### Features
+
+* **Dialog:** add "focusable" button prop ([#51](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/51)) ([e167ef5](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e167ef5a138a3edc004db2365334f8455c177132))
+
+# [3.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.14...v3.8.0) (2022-11-11)
+
+
+### Features
+
+* **routerhook:** add global components support ([215156d](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/215156d31688faac9028627379e5a3ac4d64ec46))
+
+## [3.7.14](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.13...v3.7.14) (2022-11-05)
+
+
+### Bug Fixes
+
+* **Menu:** fix on Steam beta ([82768e0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/82768e0415d084deb2af39beb3f9273a83e819de))
+* **Modal:** fix on Steam beta ([e44187f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e44187fe4b9d3e3c9e94490669591599dc5246ba))
+
 ## [3.7.13](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v3.7.12...v3.7.13) (2022-11-02)
 
 

package.json

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

src/deck-components/Dialog.tsx

@@ -9,8 +9,35 @@ export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
 }
 
 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
+  /**
+   * Enables/disables the focus around the button.
+   * 
+   * @note
+   * Default value depends on context, so setting it to `false` will enable it.
+   */
   noFocusRing?: boolean;
+
+  /**
+   * Disables the button - assigned `on*` methods will not be invoked if clicked.
+   * 
+   * @note
+   * Depending on where it is, it might still get focus. In such case it can be 
+   * partially disabled separately.
+   * 
+   * @see focusable.
+   */
   disabled?: boolean;
+
+  /**
+   * Enables/disables the navigation based focus on button - you won't be able to navigate to
+   * it via the gamepad or keyboard. 
+   * 
+   * @note
+   * If set to `false`, it still can be clicked and **WILL** become focused until navigated away.
+   * Depending on the context of where the button is, even a disabled button can focused.
+   */
+  focusable?: boolean;
+  
   onClick?(e: MouseEvent): void;
   onPointerDown?(e: PointerEvent): void;
   onPointerUp?(e: PointerEvent): void;

src/deck-components/Focusable.tsx

@@ -8,6 +8,7 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
   'flow-children'?: string;
   focusClassName?: string;
   focusWithinClassName?: string;
+  noFocusRing?: boolean;
   onActivate?: (e: CustomEvent) => void;
   onCancel?: (e: CustomEvent) => void;
 }

src/deck-components/FooterLegend.ts

@@ -29,25 +29,24 @@ export enum GamepadButton {
   STEAM_GUIDE,
   STEAM_QUICK_MENU,
 }
-
-export enum NavEntryPositionPreferences {
+export declare enum NavEntryPositionPreferences {
   FIRST,
   LAST,
   MAINTAIN_X,
   MAINTAIN_Y,
-  PREFERRED_CHILD,
+  PREFERRED_CHILD
 }
-
 export interface GamepadEventDetail {
   button: number;
   is_repeat?: boolean;
   source: number;
 }
-
-export type GamepadEvent = CustomEvent<GamepadEventDetail>;
-
+export declare type ActionDescriptionMap = {
+  [key in GamepadButton]?: string
+}
+export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
-  actionDescriptionMap?: unknown;
+  actionDescriptionMap?: ActionDescriptionMap;
   onOKActionDescription?: string;
   onCancelActionDescription?: string;
   onSecondaryActionDescription?: string;

src/deck-components/Marquee.tsx

@@ -0,0 +1,27 @@
+import { FC, CSSProperties } from 'react';
+import { findModuleChild } from '../webpack';
+
+export interface MarqueeProps {
+  play?: boolean;
+  direction?: 'left' | 'right';
+  speed?: number;
+  delay?: number;
+  fadeLength?: number;
+  center?: boolean;
+  resetOnPause?: boolean;
+  style?: CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const Marquee: FC<MarqueeProps> = findModuleChild((m) => {
+  if (typeof m !== 'object') return;
+  for (const prop in m) {
+    if (m[prop]?.toString && m[prop].toString().includes('.Marquee') && m[prop].toString().includes('--fade-length')) {
+      return m[prop];
+    }
+  }
+  return;
+});
+
+export default Marquee;

src/deck-components/Menu.tsx

@@ -1,6 +1,8 @@
 import { FC, ReactNode } from 'react';
 
+import { fakeRenderComponent } from '../utils';
 import { findModuleChild } from '../webpack';
+import { FooterLegendProps } from './FooterLegend';
 
 export const showContextMenu: (children: ReactNode, parent?: EventTarget) => void = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
@@ -11,7 +13,7 @@ export const showContextMenu: (children: ReactNode, parent?: EventTarget) => voi
   }
 });
 
-export interface MenuProps {
+export interface MenuProps extends FooterLegendProps {
   label: string;
   onCancel?(): void;
   cancelText?: string;
@@ -38,15 +40,26 @@ export const MenuGroup: FC<MenuGroupProps> = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
 
   for (let prop in m) {
-    if (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu) {
+    if (
+      (m[prop]?.toString()?.includes('bInGamepadUI:') &&
+        fakeRenderComponent(() => m[prop]())?.type?.prototype?.RenderSubMenu) ||
+      (m[prop]?.prototype?.RenderSubMenu && m[prop]?.prototype?.ShowSubMenu)
+    ) {
       return m[prop];
     }
   }
 });
 
-export interface MenuItemProps {
-  onSelected?(): void;
+export interface MenuItemProps extends FooterLegendProps {
+  bInteractableItem?: boolean;
+  onClick?(evt: Event): void;
+  onSelected?(evt: Event): void;
+  onMouseEnter?(evt: MouseEvent): void;
+  onMoveRight?(): void;
+  selected?: boolean;
   disabled?: boolean;
+  bPlayAudio?: boolean;
+  tone?: 'positive' | 'emphasis' | 'destructive';
   children?: ReactNode;
 }
 
@@ -54,7 +67,10 @@ export const MenuItem: FC<MenuItemProps> = findModuleChild((m) => {
   if (typeof m !== 'object') return undefined;
 
   for (let prop in m) {
-    if (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter) {
+    if (
+      m[prop]?.render?.toString()?.includes('bPlayAudio:') ||
+      (m[prop]?.prototype?.OnOKButton && m[prop]?.prototype?.OnMouseEnter)
+    ) {
       return m[prop];
     }
   }

src/deck-components/Modal.tsx

@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react';
 
 import { findSP } from '../utils';
-import { findModuleChild } from '../webpack';
+import { findModule, findModuleChild } from '../webpack';
 
 // All of the popout options + strTitle are related. Proper usage is not yet known...
 export interface ShowModalProps {
@@ -29,18 +29,57 @@ export interface ShowModalResult {
   Update: (modal: ReactNode) => void;
 }
 
-const showModalRaw: (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult> =
-  findModuleChild((m) => {
-    if (typeof m !== 'object') return undefined;
-    for (let prop in m) {
-      if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
-        return m[prop];
-      }
+const showModalRaw:
+  | ((
+      modal: ReactNode,
+      parent?: EventTarget,
+      title?: string,
+      props?: ShowModalProps,
+      unknown1?: unknown,
+      hideActions?: { bHideActions?: boolean },
+      modalManager?: unknown,
+    ) => Promise<ShowModalResult>)
+  | void = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (
+      typeof m[prop] === 'function' &&
+      m[prop].toString().includes('props.bDisableBackgroundDismiss') &&
+      !m[prop]?.prototype?.Cancel
+    ) {
+      return m[prop];
     }
-  });
+  }
+});
 
-export const showModal = (modal: ReactNode, parent?: EventTarget, props?: ShowModalProps): Promise<ShowModalResult> => {
-  return showModalRaw(modal, parent || findSP(), props);
+const oldShowModalRaw:
+  | ((modal: ReactNode, parent?: EventTarget, props?: ShowModalProps) => Promise<ShowModalResult>)
+  | void = findModuleChild((m) => {
+  if (typeof m !== 'object') return undefined;
+  for (let prop in m) {
+    if (typeof m[prop] === 'function' && m[prop].toString().includes('bHideMainWindowForPopouts:!0')) {
+      return m[prop];
+    }
+  }
+});
+
+export const showModal = (
+  modal: ReactNode,
+  parent?: EventTarget,
+  props: ShowModalProps = {
+    strTitle: 'Decky Dialog',
+    bHideMainWindowForPopouts: false,
+  },
+): Promise<ShowModalResult> => {
+  if (showModalRaw) {
+    return showModalRaw(modal, parent || findSP(), props.strTitle, props, undefined, {
+      bHideActions: props.bHideActionIcons,
+    });
+  } else if (oldShowModalRaw) {
+    return oldShowModalRaw(modal, parent || findSP(), props);
+  } else {
+    throw new Error('[DFL:Modals]: Cannot find showModal function');
+  }
 };
 
 export interface ModalRootProps {
@@ -79,11 +118,26 @@ export const ConfirmModal = findModuleChild((m) => {
   }
 }) as FC<ConfirmModalProps>;
 
-export const ModalRoot = findModuleChild((m) => {
-  if (typeof m !== 'object') return undefined;
-  for (let prop in m) {
-    if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
-      return m[prop];
+// new
+export const ModalRoot = (Object.values(
+  findModule((m: any) => {
+    if (typeof m !== 'object') return false;
+
+    for (let prop in m) {
+      if (m[prop]?.toString()?.includes('"ModalManager","DialogWrapper"')) {
+        return true;
+      }
     }
-  }
-}) as FC<ModalRootProps>;
+
+    return false;
+  }) || {},
+)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) ||
+  // old
+  findModuleChild((m) => {
+    if (typeof m !== 'object') return undefined;
+    for (let prop in m) {
+      if (m[prop]?.prototype?.OK && m[prop]?.prototype?.Cancel && m[prop]?.prototype?.render) {
+        return m[prop];
+      }
+    }
+  })) as FC<ModalRootProps>;

src/deck-components/index.ts

@@ -7,6 +7,7 @@ export * from './Field';
 export * from './Focusable';
 export * from './FocusRing';
 export * from './FooterLegend';
+export * from './Marquee';
 export * from './Menu';
 export * from './Modal';
 export * from './Panel';

src/deck-components/static-classes.ts

@@ -349,6 +349,98 @@ type GamepadSliderClasses = Record<
   string
 >;
 
+type AppDetailsHeaderClasses = Record<
+  | 'AddBoxSizer'
+  | 'Background'
+  | 'Bottom'
+  | 'BottomCenter'
+  | 'BottomLeft'
+  | 'BottomRight'
+  | 'BoxSizer'
+  | 'BoxSizerButtonContainer'
+  | 'BoxSizerContainer'
+  | 'BoxSizerDelete'
+  | 'BoxSizerDragBox'
+  | 'BoxSizerEdge'
+  | 'BoxSizerGridBox'
+  | 'BoxSizerInfo'
+  | 'BoxSizerSettings'
+  | 'BoxSizerValidRegion'
+  | 'CenterCenter'
+  | 'DialogButton'
+  | 'EdgeDown'
+  | 'FallbackArt'
+  | 'Features'
+  | 'FullscreenEnterActive'
+  | 'FullscreenEnterDone'
+  | 'FullscreenEnterStart'
+  | 'FullscreenExitActive'
+  | 'FullscreenExitDone'
+  | 'FullscreenExitStart'
+  | 'HeaderBackgroundImage'
+  | 'ImgBlur'
+  | 'ImgBlurBackdrop'
+  | 'ImgContainer'
+  | 'ImgSrc'
+  | 'Left'
+  | 'Loaded'
+  | 'Middle'
+  | 'NoArt'
+  | 'PinBox'
+  | 'Right'
+  | 'SVGTitle'
+  | 'SaveBoxSizer'
+  | 'TextNameSpace'
+  | 'TitleImageContainer'
+  | 'TitleLogo'
+  | 'TitleSection'
+  | 'Top'
+  | 'TopCapsule'
+  | 'TopGradient'
+  | 'TopLeft'
+  | 'TopRight'
+  | 'UpperCenter'
+  | 'UpperLeft'
+  | 'duration-app-launch',
+  string
+>;
+
+type AppDetailsClasses = Record<
+  | 'BreakNarrow'
+  | 'BreakShort'
+  | 'BreakTall'
+  | 'BreakUltraWide'
+  | 'BreakWide'
+  | 'Container'
+  | 'GamepadUIBreakNarrow'
+  | 'GamepadUIBreakShort'
+  | 'GamepadUIBreakWide'
+  | 'Glassy'
+  | 'Header'
+  | 'HeaderLoaded'
+  | 'InnerContainer'
+  | 'ItemFocusAnim-darkGrey'
+  | 'ItemFocusAnim-darkerGrey'
+  | 'ItemFocusAnim-darkerGrey-nocolor'
+  | 'ItemFocusAnim-green'
+  | 'ItemFocusAnim-grey'
+  | 'ItemFocusAnimBorder-darkGrey'
+  | 'PlayBar'
+  | 'PreventScrolling'
+  | 'RightBreakNarrow'
+  | 'RightBreakUltraNarrow'
+  | 'RightBreakUltraWide'
+  | 'RightBreakWide'
+  | 'ScrollContainer'
+  | 'ShowPlayBar'
+  | 'Throbber'
+  | 'duration-app-launch'
+  | 'fadein'
+  | 'focusAnimation'
+  | 'hoverAnimation',
+  string
+>;
+
 export const quickAccessMenuClasses: QuickAccessMenuClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.Title?.includes('quickaccessmenu'),
 );
@@ -378,3 +470,9 @@ export const playSectionClasses: PlaySectionClasses = findModule(
 export const gamepadSliderClasses: GamepadSliderClasses = findModule(
   (mod) => typeof mod === 'object' && mod?.SliderControlPanelGroup?.includes('gamepadslider'),
 );
+export const appDetailsHeaderClasses: AppDetailsHeaderClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.TopCapsule?.includes('sharedappdetailsheader'),
+);
+export const appDetailsClasses: AppDetailsClasses = findModule(
+  (mod) => typeof mod === 'object' && mod?.HeaderLoaded?.includes('appdetails_'),
+);

src/plugin.tsx

@@ -26,8 +26,10 @@ export type RoutePatch = (route: RouteProps) => RouteProps;
 export interface RouterHook {
   addRoute(path: string, component: ComponentType, props?: Omit<RouteProps, 'path' | 'children'>): void;
   addPatch(path: string, patch: RoutePatch): RoutePatch;
-  removePatch(path: string, patch: RoutePatch): void;
+  addGlobalComponent(name: string, component: ComponentType): void;
   removeRoute(path: string): void;
+  removePatch(path: string, patch: RoutePatch): void;
+  removeGlobalComponent(name: string): void;
 }
 
 export interface ToastData {
@@ -40,6 +42,10 @@ export interface ToastData {
   contentClassName?: string;
   duration?: number;
   critical?: boolean;
+  eType?: number;
+  sound?: number;
+  playSound?: boolean;
+  showToast?: boolean;
 }
 
 export interface Toaster {