From 61e7d3c1b3da4f730500868b2de41f2f67bd4456 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.fischer@abusix.com>
Date: Tue, 27 Feb 2024 13:13:22 +0100
Subject: [PATCH] chore: update ListboxOption component to use render prop for
 dynamic styling

---
 .../form-field/listbox/listbox-option.tsx     | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/form-field/listbox/listbox-option.tsx b/src/components/form-field/listbox/listbox-option.tsx
index 86249d47..ee62fcf3 100644
--- a/src/components/form-field/listbox/listbox-option.tsx
+++ b/src/components/form-field/listbox/listbox-option.tsx
@@ -7,10 +7,9 @@ import { classNames } from "../../../util/class-names";
 const listboxOptionStyles = {
     base: "relative cursor-pointer px-3 py-2 ",
     selected:
-        "ui-selected:bg-primary-100 ui-selected:text-primary-500 ui-selected:before:absolute ui-selected:before:bottom-0 ui-selected:before:left-0 ui-selected:before:top-0 ui-selected:before:block ui-selected:before:w-[2px] ui-selected:before:rounded-r-md ui-selected:before:bg-primary-400",
-    active: "ui-active:bg-neutral-50 ui-active:ui-selected:bg-primary-100",
-    disabled:
-        "ui-disabled:cursor-not-allowed ui-disabled:bg-neutral-50 ui-disabled:text-neutral-400",
+        "bg-primary-100 text-primary-500 before:absolute before:bottom-0 before:left-0 before:top-0 before:block before:w-[2px] before:rounded-r-md before:bg-primary-400",
+    active: "bg-neutral-50 bg-primary-100",
+    disabled: "cursor-not-allowed bg-neutral-50 text-neutral-400",
 };
 
 export interface ListboxOptionProps<TValue> {
@@ -22,16 +21,18 @@ export interface ListboxOptionProps<TValue> {
 const ListboxOption = <TValue,>({ value, disabled, children }: ListboxOptionProps<TValue>) => {
     return (
         <Listbox.Option value={value} as={Fragment} disabled={disabled}>
-            <li
-                className={classNames(
-                    listboxOptionStyles.base,
-                    listboxOptionStyles.selected,
-                    listboxOptionStyles.active,
-                    listboxOptionStyles.disabled
-                )}
-            >
-                {children}
-            </li>
+            {({ active, selected }) => (
+                <li
+                    className={classNames(
+                        listboxOptionStyles.base,
+                        active && listboxOptionStyles.active,
+                        selected && listboxOptionStyles.selected,
+                        disabled && listboxOptionStyles.disabled
+                    )}
+                >
+                    {children}
+                </li>
+            )}
         </Listbox.Option>
     );
 };