From f9fe675208cae521ce2b215afb81bae1452bcfa3 Mon Sep 17 00:00:00 2001
From: Quentin Gliech <quenting@element.io>
Date: Wed, 2 Aug 2023 10:00:26 +0200
Subject: [PATCH] Forward refs to most components (#47)

---
 .../ActionControl/ActionControl.tsx           | 27 ++++++++++---------
 src/components/Checkbox/Checkbox.tsx          | 16 ++++++-----
 src/components/Form/Control.tsx               | 12 ++++-----
 .../Form/Controls/Password/Password.tsx       |  8 +++---
 src/components/Form/Field.tsx                 | 12 ++++-----
 src/components/Form/Label.tsx                 | 12 ++++-----
 src/components/Form/Message.tsx               | 12 ++++-----
 src/components/Form/Root.tsx                  | 12 ++++-----
 src/components/Link/Link.tsx                  | 13 +++++----
 src/components/Radio/Radio.tsx                | 13 +++++----
 src/components/Toggle/Toggle.tsx              | 12 ++++-----
 11 files changed, 76 insertions(+), 73 deletions(-)

diff --git a/src/components/ActionControl/ActionControl.tsx b/src/components/ActionControl/ActionControl.tsx
index 08f2c789..f476758b 100644
--- a/src/components/ActionControl/ActionControl.tsx
+++ b/src/components/ActionControl/ActionControl.tsx
@@ -28,19 +28,19 @@ type ActionControlProps = {
   disabled?: boolean;
 } & React.ComponentProps<typeof Control>;
 
-export const ActionControl: React.FC<PropsWithChildren<ActionControlProps>> = ({
-  children,
-  Icon,
-  className,
-  actionLabel,
-  onActionClick,
-  ...props
-}) => {
+export const ActionControl = React.forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<ActionControlProps>
+>(function ActionControl(
+  { children, Icon, className, actionLabel, onActionClick, ...props },
+  ref,
+) {
   const id = useId();
   const classes = classnames(styles.actioncontrol, className);
   return (
     <div className={classes}>
       <Control
+        ref={ref}
         {...props}
         className={styles.input}
         id={id}
@@ -60,16 +60,17 @@ export const ActionControl: React.FC<PropsWithChildren<ActionControlProps>> = ({
       />
     </div>
   );
-};
+});
 
-export const StandaloneActionControl: React.FC<
+export const StandaloneActionControl = React.forwardRef<
+  HTMLInputElement,
   PropsWithChildren<ActionControlProps>
-> = (props) => {
+>(function StandaloneActionControl(props, ref) {
   return (
     <Root>
       <Field name="action">
-        <ActionControl {...props} />
+        <ActionControl ref={ref} {...props} />
       </Field>
     </Root>
   );
-};
+});
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index bde1a28a..5ad727b0 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -25,16 +25,18 @@ type CheckboxProps = {
   onMouseDown?: (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
 } & React.ComponentPropsWithoutRef<"input">;
 
-export const Checkbox: React.FC<PropsWithChildren<CheckboxProps>> = ({
-  kind = "primary",
-  className,
-  onMouseDown,
-  ...props
-}) => {
+export const Checkbox = React.forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<CheckboxProps>
+>(function Checkbox(
+  { kind = "primary", className, onMouseDown, ...props },
+  ref,
+) {
   const classes = classnames(styles.checkbox, className);
   return (
     <div className={classes} data-kind={kind}>
       <input
+        ref={ref}
         {...props}
         type="checkbox"
         onMouseDown={(e) => {
@@ -49,4 +51,4 @@ export const Checkbox: React.FC<PropsWithChildren<CheckboxProps>> = ({
       </div>
     </div>
   );
-};
+});
diff --git a/src/components/Form/Control.tsx b/src/components/Form/Control.tsx
index ca8696ff..90798464 100644
--- a/src/components/Form/Control.tsx
+++ b/src/components/Form/Control.tsx
@@ -28,14 +28,14 @@ type ControlProps = {
  * Thin wrapper around Radix UI Control component
  * https://www.radix-ui.com/docs/primitives/components/form#control
  */
-export const Control: React.FC<PropsWithChildren<ControlProps>> = ({
-  children,
-  ...props
-}) => {
+export const Control = React.forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<ControlProps>
+>(function Control({ children, ...props }, ref) {
   const classes = classNames(styles.control, props.className);
   return (
-    <RadixControl {...props} className={classes}>
+    <RadixControl ref={ref} {...props} className={classes}>
       {children}
     </RadixControl>
   );
-};
+});
diff --git a/src/components/Form/Controls/Password/Password.tsx b/src/components/Form/Controls/Password/Password.tsx
index 69c786a5..0422d305 100644
--- a/src/components/Form/Controls/Password/Password.tsx
+++ b/src/components/Form/Controls/Password/Password.tsx
@@ -39,15 +39,17 @@ const hideState = {
  * Thin wrapper around Radix UI Control component
  * https://www.radix-ui.com/docs/primitives/components/form#control
  */
-export const PasswordControl: React.FC<
+export const PasswordControl = React.forwardRef<
+  HTMLInputElement,
   PropsWithChildren<React.ComponentProps<typeof Control>>
-> = (props) => {
+>(function PasswordControl(props, ref) {
   const [{ icon, label, type }, togglePasswordVisibility] = useReducer(
     (state) => (!state.isHidden ? showState : hideState),
     showState,
   );
   return (
     <ActionControl
+      ref={ref}
       {...props}
       Icon={icon}
       // TODO: Replace with a function that deal with i18n of those values
@@ -56,4 +58,4 @@ export const PasswordControl: React.FC<
       type={type}
     />
   );
-};
+});
diff --git a/src/components/Form/Field.tsx b/src/components/Form/Field.tsx
index a50f7156..d9c84514 100644
--- a/src/components/Form/Field.tsx
+++ b/src/components/Form/Field.tsx
@@ -28,14 +28,14 @@ type FieldProps = {
  * Thin wrapper around Radix UI Field component
  * https://www.radix-ui.com/docs/primitives/components/form#field
  */
-export const Field: React.FC<PropsWithChildren<FieldProps>> = ({
-  children,
-  ...props
-}) => {
+export const Field = React.forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<FieldProps>
+>(function Field({ children, ...props }, ref) {
   const classes = classNames(styles.field, props.className);
   return (
-    <RadixField {...props} className={classes}>
+    <RadixField ref={ref} {...props} className={classes}>
       {children}
     </RadixField>
   );
-};
+});
diff --git a/src/components/Form/Label.tsx b/src/components/Form/Label.tsx
index 33978838..886ef719 100644
--- a/src/components/Form/Label.tsx
+++ b/src/components/Form/Label.tsx
@@ -28,14 +28,14 @@ type LabelProps = {
  * Thin wrapper around Radix UI Label component
  * https://www.radix-ui.com/docs/primitives/components/form#label
  */
-export const Label: React.FC<PropsWithChildren<LabelProps>> = ({
-  children,
-  ...props
-}) => {
+export const Label = React.forwardRef<
+  HTMLLabelElement,
+  PropsWithChildren<LabelProps>
+>(function Label({ children, ...props }, ref) {
   const classes = classNames(styles.label, props.className);
   return (
-    <RadixLabel {...props} className={classes}>
+    <RadixLabel ref={ref} {...props} className={classes}>
       {children}
     </RadixLabel>
   );
-};
+});
diff --git a/src/components/Form/Message.tsx b/src/components/Form/Message.tsx
index fb597266..08258e28 100644
--- a/src/components/Form/Message.tsx
+++ b/src/components/Form/Message.tsx
@@ -28,16 +28,16 @@ type MessageProps = {
  * Thin wrapper around Radix UI Message component
  * https://www.radix-ui.com/docs/primitives/components/form#message
  */
-export const Message: React.FC<PropsWithChildren<MessageProps>> = ({
-  children,
-  ...props
-}) => {
+export const Message = React.forwardRef<
+  HTMLSpanElement,
+  PropsWithChildren<MessageProps>
+>(function Message({ children, ...props }, ref) {
   const classes = classNames(styles.message, props.className);
   return (
-    <RadixMessage {...props} className={classes}>
+    <RadixMessage ref={ref} {...props} className={classes}>
       {/* Pending to be replaced by the alert component, see
           https://github.com/vector-im/compound-web/pull/6 */}
       {children}
     </RadixMessage>
   );
-};
+});
diff --git a/src/components/Form/Root.tsx b/src/components/Form/Root.tsx
index 545a3547..fd6e729a 100644
--- a/src/components/Form/Root.tsx
+++ b/src/components/Form/Root.tsx
@@ -28,14 +28,14 @@ type RootProps = {
  * Thin wrapper around Radix UI Root component
  * https://www.radix-ui.com/docs/primitives/components/form#root
  */
-export const Root: React.FC<PropsWithChildren<RootProps>> = ({
-  children,
-  ...props
-}) => {
+export const Root = React.forwardRef<
+  HTMLFormElement,
+  PropsWithChildren<RootProps>
+>(function Root({ children, ...props }, ref) {
   const classes = classNames(styles.root, props.className);
   return (
-    <RadixRoot {...props} className={classes}>
+    <RadixRoot ref={ref} {...props} className={classes}>
       {children}
     </RadixRoot>
   );
-};
+});
diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx
index b3756fda..7131c499 100644
--- a/src/components/Link/Link.tsx
+++ b/src/components/Link/Link.tsx
@@ -23,14 +23,13 @@ type LinkProps = {
   kind?: "primary" | "critical";
 } & Omit<React.HTMLProps<HTMLAnchorElement>, "rel">;
 
-export const Link: React.FC<PropsWithChildren<LinkProps>> = ({
-  children,
-  className,
-  kind = "primary",
-  ...props
-}) => {
+export const Link = React.forwardRef<
+  HTMLAnchorElement,
+  PropsWithChildren<LinkProps>
+>(function Link({ children, className, kind = "primary", ...props }, ref) {
   return (
     <a
+      ref={ref}
       {...props}
       rel="noreferrer noopener"
       className={classNames(styles.link, className)}
@@ -39,4 +38,4 @@ export const Link: React.FC<PropsWithChildren<LinkProps>> = ({
       {children}
     </a>
   );
-};
+});
diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx
index f24ec5cc..5999577e 100644
--- a/src/components/Radio/Radio.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -27,16 +27,15 @@ type RadioProps = {
 /**
  * Radio form control
  */
-export const Radio: React.FC<PropsWithChildren<RadioProps>> = ({
-  kind = "primary",
-  className,
-  onMouseDown,
-  ...props
-}) => {
+export const Radio = React.forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<RadioProps>
+>(function Radio({ kind = "primary", className, onMouseDown, ...props }, ref) {
   const classes = classnames(styles.radio, className);
   return (
     <div className={classes} data-kind={kind}>
       <input
+        ref={ref}
         {...props}
         type="radio"
         onMouseDown={(e) => {
@@ -49,4 +48,4 @@ export const Radio: React.FC<PropsWithChildren<RadioProps>> = ({
       <div className={styles["radio-ui"]} />
     </div>
   );
-};
+});
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index e0d49df1..c1148fe7 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -27,15 +27,15 @@ type ToggleProps = {
  * Standalone toggle component to be used with a Radix form control
  * See https://www.radix-ui.com/docs/primitives/components/form#composing-with-your-own-components
  */
-export const Toggle: React.FC<PropsWithChildren<ToggleProps>> = ({
-  className,
-  onMouseDown,
-  ...props
-}) => {
+export const Toggle = React.forwardRef<
+  HTMLInputElement,
+  PropsWithChildren<ToggleProps>
+>(function Toggle({ className, onMouseDown, ...props }, ref) {
   const classes = classnames(styles.toggle, className);
   return (
     <div className={classes}>
       <input
+        ref={ref}
         {...props}
         type="checkbox"
         onMouseDown={(e) => {
@@ -48,4 +48,4 @@ export const Toggle: React.FC<PropsWithChildren<ToggleProps>> = ({
       <div className={styles["toggle-ui"]} />
     </div>
   );
-};
+});