From 688c7471cde96bf9e9a71c47d19bd63cff7a66b3 Mon Sep 17 00:00:00 2001
From: AAGaming <aagaming@riseup.net>
Date: Mon, 27 May 2024 13:19:11 -0400
Subject: [PATCH] fix(components): fix missing children prop also remove
 unnessecary use of tsx

---
 package.json                                              | 2 +-
 src/components/{Button.tsx => Button.ts}                  | 0
 src/components/{ButtonItem.tsx => ButtonItem.ts}          | 0
 src/components/Carousel.ts                                | 4 ++--
 src/components/{ControlsList.tsx => ControlsList.ts}      | 3 ++-
 src/components/{Dialog.tsx => Dialog.ts}                  | 3 ++-
 src/components/{DialogCheckbox.tsx => DialogCheckbox.ts}  | 0
 src/components/{Dropdown.tsx => Dropdown.ts}              | 6 +++---
 src/components/{Field.tsx => Field.ts}                    | 0
 src/components/{Focusable.tsx => Focusable.ts}            | 4 ++--
 src/components/{Item.tsx => Item.ts}                      | 1 +
 src/components/{Marquee.tsx => Marquee.ts}                | 0
 src/components/{Menu.tsx => Menu.ts}                      | 0
 src/components/{Modal.tsx => Modal.ts}                    | 0
 src/components/{Panel.tsx => Panel.ts}                    | 0
 src/components/{ProgressBar.tsx => ProgressBar.ts}        | 8 ++++----
 src/components/{Scroll.tsx => Scroll.ts}                  | 0
 .../{SidebarNavigation.tsx => SidebarNavigation.ts}       | 4 ++--
 src/components/{SliderField.tsx => SliderField.ts}        | 0
 src/components/{Spinner.tsx => Spinner.ts}                | 0
 src/components/{SteamSpinner.tsx => SteamSpinner.ts}      | 0
 src/components/{Tabs.tsx => Tabs.ts}                      | 0
 src/components/{TextField.tsx => TextField.ts}            | 4 ++--
 src/components/{Toggle.tsx => Toggle.ts}                  | 0
 src/components/{ToggleField.tsx => ToggleField.ts}        | 0
 ...useQuickAccessVisible.tsx => useQuickAccessVisible.ts} | 4 ++--
 src/modules/{Router.tsx => Router.ts}                     | 0
 27 files changed, 23 insertions(+), 20 deletions(-)
 rename src/components/{Button.tsx => Button.ts} (100%)
 rename src/components/{ButtonItem.tsx => ButtonItem.ts} (100%)
 rename src/components/{ControlsList.tsx => ControlsList.ts} (83%)
 rename src/components/{Dialog.tsx => Dialog.ts} (97%)
 rename src/components/{DialogCheckbox.tsx => DialogCheckbox.ts} (100%)
 rename src/components/{Dropdown.tsx => Dropdown.ts} (92%)
 rename src/components/{Field.tsx => Field.ts} (100%)
 rename src/components/{Focusable.tsx => Focusable.ts} (81%)
 rename src/components/{Item.tsx => Item.ts} (92%)
 rename src/components/{Marquee.tsx => Marquee.ts} (100%)
 rename src/components/{Menu.tsx => Menu.ts} (100%)
 rename src/components/{Modal.tsx => Modal.ts} (100%)
 rename src/components/{Panel.tsx => Panel.ts} (100%)
 rename src/components/{ProgressBar.tsx => ProgressBar.ts} (86%)
 rename src/components/{Scroll.tsx => Scroll.ts} (100%)
 rename src/components/{SidebarNavigation.tsx => SidebarNavigation.ts} (89%)
 rename src/components/{SliderField.tsx => SliderField.ts} (100%)
 rename src/components/{Spinner.tsx => Spinner.ts} (100%)
 rename src/components/{SteamSpinner.tsx => SteamSpinner.ts} (100%)
 rename src/components/{Tabs.tsx => Tabs.ts} (100%)
 rename src/components/{TextField.tsx => TextField.ts} (87%)
 rename src/components/{Toggle.tsx => Toggle.ts} (100%)
 rename src/components/{ToggleField.tsx => ToggleField.ts} (100%)
 rename src/custom-hooks/{useQuickAccessVisible.tsx => useQuickAccessVisible.ts} (95%)
 rename src/modules/{Router.tsx => Router.ts} (100%)

diff --git a/package.json b/package.json
index 979aefb..42aeedb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@decky/ui",
-  "version": "3.26.1",
+  "version": "4.0.2",
   "description": "A library for interacting with the Steam frontend in Decky plugins and elsewhere.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
diff --git a/src/components/Button.tsx b/src/components/Button.ts
similarity index 100%
rename from src/components/Button.tsx
rename to src/components/Button.ts
diff --git a/src/components/ButtonItem.tsx b/src/components/ButtonItem.ts
similarity index 100%
rename from src/components/ButtonItem.tsx
rename to src/components/ButtonItem.ts
diff --git a/src/components/Carousel.ts b/src/components/Carousel.ts
index a1bd7c3..1c16291 100644
--- a/src/components/Carousel.ts
+++ b/src/components/Carousel.ts
@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
@@ -20,6 +20,6 @@ export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   scrollToAlignment?: 'center';
 }
 
-export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as VFC<
+export const Carousel = findModuleExport((e: Export) => e.render?.toString().includes('setFocusedColumn:')) as FC<
   CarouselProps & RefAttributes<HTMLDivElement>
 >;
diff --git a/src/components/ControlsList.tsx b/src/components/ControlsList.ts
similarity index 83%
rename from src/components/ControlsList.tsx
rename to src/components/ControlsList.ts
index 34982de..6c72521 100644
--- a/src/components/ControlsList.tsx
+++ b/src/components/ControlsList.ts
@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
 export interface ControlsListProps {
   alignItems?: 'left' | 'right' | 'center';
   spacing?: 'standard' | 'extra';
+  children?: ReactNode;
 }
 
 export const ControlsList: FC<ControlsListProps> = findModuleExport(
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.ts
similarity index 97%
rename from src/components/Dialog.tsx
rename to src/components/Dialog.ts
index 9a76ac4..6eeba71 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.ts
@@ -1,4 +1,4 @@
-import { CSSProperties, FC, RefAttributes } from 'react';
+import { CSSProperties, FC, ReactNode, RefAttributes } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
@@ -6,6 +6,7 @@ import { FooterLegendProps } from './FooterLegend';
 export interface DialogCommonProps extends RefAttributes<HTMLDivElement> {
   style?: CSSProperties;
   className?: string;
+  children?: ReactNode;
 }
 
 export interface DialogButtonProps extends DialogCommonProps, FooterLegendProps {
diff --git a/src/components/DialogCheckbox.tsx b/src/components/DialogCheckbox.ts
similarity index 100%
rename from src/components/DialogCheckbox.tsx
rename to src/components/DialogCheckbox.ts
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.ts
similarity index 92%
rename from src/components/Dropdown.tsx
rename to src/components/Dropdown.ts
index 7df7bf2..96afdb6 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.ts
@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { CommonUIModule } from '../webpack';
 import { ItemProps } from './Item';
@@ -40,10 +40,10 @@ export interface DropdownProps {
 
 export const Dropdown = Object.values(CommonUIModule).find(
   (mod: any) => mod?.prototype?.SetSelectedOption && mod?.prototype?.BuildMenu,
-) as VFC<DropdownProps>;
+) as FC<DropdownProps>;
 
 export interface DropdownItemProps extends DropdownProps, ItemProps {}
 
 export const DropdownItem = Object.values(CommonUIModule).find((mod: any) =>
   mod?.toString()?.includes('"dropDownControlRef","description"'),
-) as VFC<DropdownItemProps>;
+) as FC<DropdownItemProps>;
diff --git a/src/components/Field.tsx b/src/components/Field.ts
similarity index 100%
rename from src/components/Field.tsx
rename to src/components/Field.ts
diff --git a/src/components/Focusable.tsx b/src/components/Focusable.ts
similarity index 81%
rename from src/components/Focusable.tsx
rename to src/components/Focusable.ts
index 259bfc7..f605d1d 100644
--- a/src/components/Focusable.tsx
+++ b/src/components/Focusable.ts
@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, RefAttributes, VFC } from 'react';
+import { HTMLAttributes, ReactNode, RefAttributes, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { FooterLegendProps } from './FooterLegend';
@@ -15,4 +15,4 @@ export interface FocusableProps extends HTMLAttributes<HTMLDivElement>, FooterLe
 
 export const Focusable = findModuleExport((e: Export) =>
   e?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'),
-) as VFC<FocusableProps & RefAttributes<HTMLDivElement>>;
+) as FC<FocusableProps & RefAttributes<HTMLDivElement>>;
diff --git a/src/components/Item.tsx b/src/components/Item.ts
similarity index 92%
rename from src/components/Item.tsx
rename to src/components/Item.ts
index 2861edc..9b72cbf 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.ts
@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 export interface ItemProps {
   label?: ReactNode;
   description?: ReactNode;
+  children?: ReactNode;
   layout?: 'below' | 'inline';
   icon?: ReactNode;
   bottomSeparator?: 'standard' | 'thick' | 'none';
diff --git a/src/components/Marquee.tsx b/src/components/Marquee.ts
similarity index 100%
rename from src/components/Marquee.tsx
rename to src/components/Marquee.ts
diff --git a/src/components/Menu.tsx b/src/components/Menu.ts
similarity index 100%
rename from src/components/Menu.tsx
rename to src/components/Menu.ts
diff --git a/src/components/Modal.tsx b/src/components/Modal.ts
similarity index 100%
rename from src/components/Modal.tsx
rename to src/components/Modal.ts
diff --git a/src/components/Panel.tsx b/src/components/Panel.ts
similarity index 100%
rename from src/components/Panel.tsx
rename to src/components/Panel.ts
diff --git a/src/components/ProgressBar.tsx b/src/components/ProgressBar.ts
similarity index 86%
rename from src/components/ProgressBar.tsx
rename to src/components/ProgressBar.ts
index eb0df55..4799889 100644
--- a/src/components/ProgressBar.tsx
+++ b/src/components/ProgressBar.ts
@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 import { ItemProps } from './Item';
@@ -24,12 +24,12 @@ export interface ProgressBarWithInfoProps extends ProgressBarItemProps {
 
 export const ProgressBar = findModuleExport((e: Export) =>
   e?.toString()?.includes('.ProgressBar,"standard"=='),
-) as VFC<ProgressBarProps>;
+) as FC<ProgressBarProps>;
 
 export const ProgressBarWithInfo = findModuleExport((e: Export) =>
   e?.toString()?.includes('.ProgressBarFieldStatus},'),
-) as VFC<ProgressBarWithInfoProps>;
+) as FC<ProgressBarWithInfoProps>;
 
 export const ProgressBarItem = findModuleExport((e: Export) =>
   e?.toString()?.includes('"indeterminate","nTransitionSec"'),
-) as VFC<ProgressBarItemProps>;
+) as FC<ProgressBarItemProps>;
diff --git a/src/components/Scroll.tsx b/src/components/Scroll.ts
similarity index 100%
rename from src/components/Scroll.tsx
rename to src/components/Scroll.ts
diff --git a/src/components/SidebarNavigation.tsx b/src/components/SidebarNavigation.ts
similarity index 89%
rename from src/components/SidebarNavigation.tsx
rename to src/components/SidebarNavigation.ts
index ba9db3a..42361d9 100644
--- a/src/components/SidebarNavigation.tsx
+++ b/src/components/SidebarNavigation.ts
@@ -1,4 +1,4 @@
-import { ReactNode, VFC } from 'react';
+import { ReactNode, FC } from 'react';
 
 import { Export, findModuleExport } from '../webpack';
 
@@ -25,4 +25,4 @@ export interface SidebarNavigationProps {
 
 export const SidebarNavigation = findModuleExport((e: Export) =>
   e?.toString()?.includes('"disableRouteReporting"'),
-) as VFC<SidebarNavigationProps>;
+) as FC<SidebarNavigationProps>;
diff --git a/src/components/SliderField.tsx b/src/components/SliderField.ts
similarity index 100%
rename from src/components/SliderField.tsx
rename to src/components/SliderField.ts
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.ts
similarity index 100%
rename from src/components/Spinner.tsx
rename to src/components/Spinner.ts
diff --git a/src/components/SteamSpinner.tsx b/src/components/SteamSpinner.ts
similarity index 100%
rename from src/components/SteamSpinner.tsx
rename to src/components/SteamSpinner.ts
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.ts
similarity index 100%
rename from src/components/Tabs.tsx
rename to src/components/Tabs.ts
diff --git a/src/components/TextField.tsx b/src/components/TextField.ts
similarity index 87%
rename from src/components/TextField.tsx
rename to src/components/TextField.ts
index 2be5322..0594a65 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.ts
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, HTMLAttributes, ReactNode, VFC } from 'react';
+import { ChangeEventHandler, HTMLAttributes, ReactNode, FC } from 'react';
 
 import { CommonUIModule, Module } from '../webpack';
 
@@ -25,4 +25,4 @@ export interface TextFieldProps extends HTMLAttributes<HTMLInputElement> {
 
 export const TextField = Object.values(CommonUIModule).find(
   (mod: Module) => mod?.validateUrl && mod?.validateEmail,
-) as VFC<TextFieldProps>;
+) as FC<TextFieldProps>;
diff --git a/src/components/Toggle.tsx b/src/components/Toggle.ts
similarity index 100%
rename from src/components/Toggle.tsx
rename to src/components/Toggle.ts
diff --git a/src/components/ToggleField.tsx b/src/components/ToggleField.ts
similarity index 100%
rename from src/components/ToggleField.tsx
rename to src/components/ToggleField.ts
diff --git a/src/custom-hooks/useQuickAccessVisible.tsx b/src/custom-hooks/useQuickAccessVisible.ts
similarity index 95%
rename from src/custom-hooks/useQuickAccessVisible.tsx
rename to src/custom-hooks/useQuickAccessVisible.ts
index 3b80730..f76c7c4 100644
--- a/src/custom-hooks/useQuickAccessVisible.tsx
+++ b/src/custom-hooks/useQuickAccessVisible.ts
@@ -15,10 +15,10 @@ function getQuickAccessWindow(): Window | null {
  * @returns `true` if quick access menu is visible and `false` otherwise.
  *
  * @example
- * import { VFC, useEffect } from "react";
+ * import { FC, useEffect } from "react";
  * import { useQuickAccessVisible } from "decky-frontend-lib";
  *
- * export const PluginPanelView: VFC<{}> = ({ }) => {
+ * export const PluginPanelView: FC<{}> = ({ }) => {
  *   const isVisible = useQuickAccessVisible();
  *
  *   useEffect(() => {
diff --git a/src/modules/Router.tsx b/src/modules/Router.ts
similarity index 100%
rename from src/modules/Router.tsx
rename to src/modules/Router.ts