From 410def0750a58ebdffd079e68683e531f27c0899 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Sat, 24 Feb 2024 13:48:20 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20forward=20ref=20the=20com?=
 =?UTF-8?q?ponent=20to=20fix=20console=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Select/SelectItem/SelectItem.tsx   | 104 ++++++++++--------
 .../shared/Select/SelectValue/SelectValue.tsx |  46 ++++----
 2 files changed, 81 insertions(+), 69 deletions(-)

diff --git a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx
index 5112fb4e..dc671371 100644
--- a/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx
+++ b/packages/frontend/src/components/shared/Select/SelectItem/SelectItem.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef, useMemo } from 'react';
+import React, { forwardRef, ComponentPropsWithoutRef, useMemo } from 'react';
 import { Overwrite, UseComboboxGetItemPropsReturnValue } from 'downshift';
 import { SelectOption, SelectOrientation } from 'components/shared/Select';
 import { selectItemTheme, SelectItemTheme } from './SelectItem.theme';
@@ -29,58 +29,70 @@ export interface SelectItemProps
   empty?: boolean;
 }
 
-export const SelectItem = ({
-  className,
-  selected,
-  option,
-  orientation,
-  hovered,
-  empty,
-  variant,
-  ...props
-}: SelectItemProps) => {
-  const theme = selectItemTheme({ active: hovered, orientation, variant });
+const SelectItem = forwardRef<HTMLLIElement, SelectItemProps>(
+  (
+    {
+      className,
+      selected,
+      option,
+      orientation,
+      hovered,
+      empty,
+      variant,
+      ...props
+    },
+    ref,
+  ) => {
+    const theme = selectItemTheme({ active: hovered, orientation, variant });
 
-  const { label, description, leftIcon, rightIcon, disabled } = option;
+    const { label, description, leftIcon, rightIcon, disabled } = option;
 
-  const renderRightIcon = useMemo(() => {
-    if (rightIcon) {
-      return cloneIcon(rightIcon, { className: theme.icon() });
-    } else if (selected) {
+    const renderRightIcon = useMemo(() => {
+      if (rightIcon) {
+        return cloneIcon(rightIcon, { className: theme.icon() });
+      } else if (selected) {
+        return (
+          <CheckRadioIcon
+            className={cn(theme.icon(), 'text-controls-primary')}
+          />
+        );
+      }
+      return null;
+    }, [rightIcon]);
+
+    if (empty) {
       return (
-        <CheckRadioIcon className={cn(theme.icon(), 'text-controls-primary')} />
+        <li {...props} className={theme.wrapper()}>
+          No results found
+        </li>
       );
     }
-    return null;
-  }, [rightIcon]);
 
-  if (empty) {
     return (
-      <li {...props} className={theme.wrapper()}>
-        No results found
+      <li
+        {...props}
+        ref={ref}
+        className={theme.wrapper({ className })}
+        data-disabled={disabled}
+      >
+        {leftIcon && cloneIcon(leftIcon, { className: theme.icon() })}
+        <div className={theme.content()}>
+          <p className={theme.label()} data-disabled={disabled}>
+            {label}
+          </p>
+          {orientation === 'horizontal' && <span className={theme.dot()} />}
+          {description && (
+            <p className={theme.description()} data-disabled={disabled}>
+              {description}
+            </p>
+          )}
+        </div>
+        {renderRightIcon}
       </li>
     );
-  }
+  },
+);
 
-  return (
-    <li
-      {...props}
-      className={theme.wrapper({ className })}
-      data-disabled={disabled}
-    >
-      {leftIcon && cloneIcon(leftIcon, { className: theme.icon() })}
-      <div className={theme.content()}>
-        <p className={theme.label()} data-disabled={disabled}>
-          {label}
-        </p>
-        {orientation === 'horizontal' && <span className={theme.dot()} />}
-        {description && (
-          <p className={theme.description()} data-disabled={disabled}>
-            {description}
-          </p>
-        )}
-      </div>
-      {renderRightIcon}
-    </li>
-  );
-};
+SelectItem.displayName = 'SelectItem';
+
+export { SelectItem };
diff --git a/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
index b1068db1..9eedfd48 100644
--- a/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
+++ b/packages/frontend/src/components/shared/Select/SelectValue/SelectValue.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import React, { forwardRef, ComponentPropsWithoutRef } from 'react';
 import {
   Overwrite,
   UseMultipleSelectionGetSelectedItemReturnValue,
@@ -35,26 +35,26 @@ export interface SelectValueProps
 /**
  * The SelectValue component is used to display the selected value of a select component
  */
-export const SelectValue = ({
-  className,
-  size,
-  option,
-  onDelete,
-  ...props
-}: SelectValueProps) => {
-  const theme = selectValueTheme();
+const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
+  ({ className, size, option, onDelete, ...props }, ref) => {
+    const theme = selectValueTheme();
 
-  return (
-    <span {...props} className={theme.wrapper({ className, size })}>
-      {option.label}
-      <Button
-        onClick={() => onDelete?.(option)}
-        iconOnly
-        variant="unstyled"
-        size="xs"
-      >
-        <CrossIcon className={theme.icon()} />
-      </Button>
-    </span>
-  );
-};
+    return (
+      <span {...props} ref={ref} className={theme.wrapper({ className, size })}>
+        {option.label}
+        <Button
+          onClick={() => onDelete?.(option)}
+          iconOnly
+          variant="unstyled"
+          size="xs"
+        >
+          <CrossIcon className={theme.icon()} />
+        </Button>
+      </span>
+    );
+  },
+);
+
+SelectValue.displayName = 'SelectValue';
+
+export { SelectValue };