chore(release): 4.9.0 [CI SKIP]

feat: add `MenuSeparator` component

CHANGELOG.md

@@ -1,3 +1,24 @@
+# [4.9.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.3...v4.9.0) (2025-01-02)
+
+
+### Features
+
+* add MenuSeparator component ([484a882](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/484a882015ceb51c2c80e08151e79056e751ac15))
+
+## [4.8.3](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.2...v4.8.3) (2024-12-14)
+
+
+### Bug Fixes
+
+* **utils:** add new nav root name ([a43cd7f](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/a43cd7f3c56a2e30e332417e5b4abde8f4492be1))
+
+## [4.8.2](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.1...v4.8.2) (2024-11-20)
+
+
+### Bug Fixes
+
+* **Footer:** add missing focus/nav properties ([#113](https://github.com/SteamDeckHomebrew/decky-frontend-lib/issues/113)) ([8117693](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/8117693427e4dba2f3b5bd24f36704d8d5e65ae2))
+
 ## [4.8.1](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.8.0...v4.8.1) (2024-10-11)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

src/components/FooterLegend.ts

@@ -31,11 +31,42 @@ export enum GamepadButton {
   STEAM_GUIDE,
   STEAM_QUICK_MENU,
 }
-export declare enum NavEntryPositionPreferences {
+export enum NavEntryPositionPreferences {
+  /**
+   * Always give focus to the first child element.
+   */
   FIRST,
+
+  /**
+   * Always give focus to the last child element.
+   */
   LAST,
+
+  /**
+   * Give focus to the child element that would maintain the flow in the X axis.
+   * 
+   * Imagine you have a calculator window with 9 standard buttons.
+   * You have 3 rows of buttons, with 3 buttons per row.
+   * If you select button with number 8 and navigate down, the buttons
+   * will be navigated in the following order 8->5->3.
+   * The flow is maintained for the X axis while you're navigating the Y axis.
+   */
   MAINTAIN_X,
+
+  /**
+   * Give focus to the child element that would maintain the flow in the Y axis.
+   * 
+   * Imagine you have a calculator window with 9 standard buttons.
+   * You have 3 columns of buttons, with 3 buttons per column.
+   * If you select button with number 4 and navigate right, the buttons
+   * will be navigated in the following order 4->5->6.
+   * The flow is maintained for the Y axis while you're navigating the X axis.
+   */
   MAINTAIN_Y,
+
+  /**
+   * Give focus to the first child element with `preferredFocus == true` prop.
+   */
   PREFERRED_CHILD,
 }
 export interface GamepadEventDetail {
@@ -48,6 +79,25 @@ export declare type ActionDescriptionMap = {
 };
 export declare type GamepadEvent = CustomEvent<GamepadEventDetail>;
 export interface FooterLegendProps {
+  /**
+   * Navigation entry strategy to be used when gaining focus during navigation.
+   * 
+   * This is meant to be used on a parent container that has children. Once the
+   * container (e.g. Focusable) is navigated to and has children in it, the children
+   * is then navigated to (focused) using the provided strategy.
+   * 
+   * If no strategy is provided, it seems that the `NavEntryPositionPreferences.FIRST`
+   * is used initialy, but for the next time the parent remembers previously focused
+   * child and focused back on it instead.
+   */
+  navEntryPreferPosition?: NavEntryPositionPreferences;
+
+  /**
+   * Mark the element as the preferred child (to be focused) whenever the parent uses the
+   * `NavEntryPositionPreferences.PREFERRED_CHILD` navigation strategy.
+   */
+  preferredFocus?: boolean;
+
   actionDescriptionMap?: ActionDescriptionMap;
   onOKActionDescription?: ReactNode;
   onCancelActionDescription?: ReactNode;

src/components/Menu.ts

@@ -45,6 +45,10 @@ export const MenuItem: FC<MenuItemProps> = findModuleExport(
     e?.render?.toString?.()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
 );
 
+export const MenuSeparator: FC = findModuleExport(
+  (e: Export) => typeof e === 'function' && /className:.+?\.ContextMenuSeparator/.test(e.toString()),
+);
+
 /*
 all().map(m => {
 if (typeof m !== "object") return undefined;

src/utils/index.ts

@@ -25,7 +25,7 @@ export function findSP(): Window {
   if (document.title == 'SP') return window;
   // new (SP as popup)
   const navTrees = getGamepadNavigationTrees();
-  return navTrees?.find((x: any) => x.m_ID == 'root_1_')?.Root?.Element?.ownerDocument?.defaultView;
+  return navTrees?.find((x: any) => x.m_ID == 'GamepadUI_Full_Root' || x.m_ID == 'root_1_')?.Root?.Element?.ownerDocument?.defaultView;
 }
 
 /**