chore(release): 4.8.2 [CI SKIP]

CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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)
+
+
+### Bug Fixes
+
+* **DialogCheckbox:** prevent some potential issues in dialogcheckbox ([bf58e08](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/bf58e08e4b5b183737c9ad43a858b642ce593f93))
+* prevent issues where toString may not be a function (what) ([e965816](https://github.com/SteamDeckHomebrew/decky-frontend-lib/commit/e96581614471524cbf91bf962742df867ba3c3e9))
+
 # [4.8.0](https://github.com/SteamDeckHomebrew/decky-frontend-lib/compare/v4.7.4...v4.8.0) (2024-10-05)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "4.8.0",
+  "version": "4.8.2",
   "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/Dialog.ts

@@ -78,11 +78,11 @@ export const DialogControlsSection = MappedDialogDivs.get('DialogControlsSection
 export const DialogControlsSectionHeader = MappedDialogDivs.get('DialogControlsSectionHeader') as FC<DialogCommonProps>;
 
 export const DialogButtonPrimary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Primary"'),
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Primary"'),
 ) as FC<DialogButtonProps>;
 
 export const DialogButtonSecondary = Object.values(CommonUIModule).find(
-  (mod: any) => mod?.render?.toString()?.includes('"DialogButton","_DialogLayout","Secondary"')
+  (mod: any) => mod?.render?.toString?.()?.includes('"DialogButton","_DialogLayout","Secondary"')
 ) as FC<DialogButtonProps>;
 
 // This is the "main" button. The Primary can act as a submit button,

src/components/DialogCheckbox.ts

@@ -20,13 +20,14 @@ export interface DialogCheckboxProps extends DialogCommonProps, FooterLegendProp
 
 // Do not access KeyDown, SetChecked, Toggle here as they are getters and accessing them outside of a render breaks them globally
 export const DialogCheckbox = findModuleExport(e =>
-  e.prototype &&
+  e?.prototype &&
+  typeof e?.prototype == "object" &&
   "GetPanelElementProps" in e?.prototype &&
   "SetChecked" in e?.prototype &&
   "Toggle" in e?.prototype &&
   // beta || stable as of oct 2 2024
-  (e?.prototype?.render?.toString().includes('="DialogCheckbox"') || (
+  (e?.prototype?.render?.toString?.().includes('="DialogCheckbox"') || (
     e.contextType &&
-    e.prototype?.render?.toString().includes('fallback:')
+    e.prototype?.render?.toString?.().includes('fallback:')
   ))
 ) as FC<DialogCheckboxProps>;

src/components/FocusRing.ts

@@ -11,5 +11,5 @@ export interface FocusRingProps {
 }
 
 export const FocusRing = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.GetShowDebugFocusRing())'),
+  e?.toString?.()?.includes('.GetShowDebugFocusRing())'),
 ) as FC<FocusRingProps>;

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

@@ -26,7 +26,7 @@ export interface MenuGroupProps {
 }
 
 const MenuGoupModule = findModuleByExport(e => e?.prototype?.Focus && e?.prototype?.OnOKButton && e?.prototype?.render?.toString().includes?.(`"emphasis"==this.props.tone`));
-export const MenuGroup: FC<MenuGroupProps> = MenuGoupModule && Object.values(MenuGoupModule).find((e: Export) => typeof e == "function" && e?.toString()?.includes("bInGamepadUI:"));
+export const MenuGroup: FC<MenuGroupProps> = MenuGoupModule && Object.values(MenuGoupModule).find((e: Export) => typeof e == "function" && e?.toString?.()?.includes("bInGamepadUI:"));
 export interface MenuItemProps extends FooterLegendProps {
   bInteractableItem?: boolean;
   onClick?(evt: Event): void;
@@ -42,7 +42,7 @@ export interface MenuItemProps extends FooterLegendProps {
 
 export const MenuItem: FC<MenuItemProps> = findModuleExport(
   (e: Export) =>
-    e?.render?.toString()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
+    e?.render?.toString?.()?.includes('bPlayAudio:') || (e?.prototype?.OnOKButton && e?.prototype?.OnMouseEnter),
 );
 
 /*

src/components/Modal.ts

@@ -98,7 +98,7 @@ export const ModalRoot = Object.values(
 
     return false;
   }) || {},
-)?.find((x: any) => x?.type?.toString()?.includes('((function(){')) as FC<ModalRootProps>;
+)?.find((x: any) => x?.type?.toString?.()?.includes('((function(){')) as FC<ModalRootProps>;
 
 interface SimpleModalProps {
   active?: boolean;

src/components/Panel.ts

@@ -22,5 +22,5 @@ export interface PanelSectionRowProps {
   children?: ReactNode;
 }
 export const PanelSectionRow = Object.values(mod).filter(
-  (exp: any) => !exp?.toString()?.includes('.PanelSection'),
+  (exp: any) => !exp?.toString?.()?.includes('.PanelSection'),
 )[0] as FC<PanelSectionRowProps>;

src/components/ProgressBar.ts

@@ -24,11 +24,11 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
 }
 
 export const ProgressBar = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBar,"standard"=='),
+  e?.toString?.()?.includes('.ProgressBar,"standard"=='),
 ) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
-  e?.toString()?.includes('.ProgressBarFieldStatus},'),
+  e?.toString?.()?.includes('.ProgressBarFieldStatus},'),
 ) as FC<ProgressBarWithInfoProps>;
 
 const progressBarItemRegex = createPropListRegex(["indeterminate", "nTransitionSec", "nProgress"]);

src/components/SliderField.ts

@@ -30,5 +30,5 @@ export interface SliderFieldProps extends ItemProps {
 
 export const SliderField = Object.values(CommonUIModule).find((mod: any) =>
   // stable || beta as of oct 2 2024
-  mod?.toString()?.includes('SliderField,fallback') || mod?.toString()?.includes("SliderField\",")
+  mod?.toString?.()?.includes('SliderField,fallback') || mod?.toString?.()?.includes("SliderField\",")
 ) as FC<SliderFieldProps>;

src/components/Tabs.tsx

@@ -62,9 +62,9 @@ export interface TabsProps {
   autoFocusContents?: boolean;
 }
 
-const tabsModule = findModuleByExport(e => e?.toString()?.includes(".TabRowTabs") && e?.toString()?.includes("activeTab:"));
+const tabsModule = findModuleByExport(e => e?.toString?.()?.includes(".TabRowTabs") && e?.toString?.()?.includes("activeTab:"));
 
 /**
  * Tabs component as used in the library and media tabs. See {@link TabsProps}.
  */
-export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString()?.includes("((function()")) as FC<TabsProps>;
+export const Tabs = tabsModule && Object.values(tabsModule).find((e: any) => e?.type?.toString?.()?.includes("((function()")) as FC<TabsProps>;

src/components/Toggle.ts

@@ -10,5 +10,5 @@ export interface ToggleProps {
 }
 
 export const Toggle = Object.values(CommonUIModule).find((mod: any) =>
-  mod?.render?.toString()?.includes('.ToggleOff)'),
+  mod?.render?.toString?.()?.includes('.ToggleOff)'),
 ) as FC<ToggleProps>;

src/components/ToggleField.ts

@@ -12,5 +12,5 @@ export interface ToggleFieldProps extends ItemProps {
 
 export const ToggleField = Object.values(CommonUIModule).find((mod: any) =>
   // stable || beta as of oct 2 2024
-  mod?.render?.toString()?.includes('ToggleField,fallback') || mod?.render?.toString()?.includes("ToggleField\",")
+  mod?.render?.toString?.()?.includes('ToggleField,fallback') || mod?.render?.toString?.()?.includes("ToggleField\",")
 ) as FC<ToggleFieldProps>;