Merge pull request #114 from abusix/ahq2-111-fix-active-state-for-lis…

…tbox-options

chore: update ListboxOption component to use render prop for dynamic styling

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>
     );
 };