@rovula/ui 0.0.78 → 0.0.80

package/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,5 @@
 import React, {
   CSSProperties,
-  Fragment,
   ReactNode,
   forwardRef,
   useCallback,
@@ -9,10 +8,12 @@ import React, {
   useMemo,
   useRef,
   useState,
+  Fragment,
 } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
+import { Menu, MenuItemType, MenuOption } from "../Menu/Menu";
 
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
@@ -36,6 +37,7 @@ export type DropdownProps = {
   size?: "sm" | "md" | "lg";
   rounded?: "none" | "normal" | "full";
   variant?: "flat" | "outline" | "underline";
+  defaultMenuItemType?: MenuOption["type"];
   helperText?: string;
   errorMessage?: string;
   filterMode?: boolean;
@@ -71,6 +73,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       size = "md",
       rounded = "normal",
       variant = "outline",
+      defaultMenuItemType = "checkbox",
       helperText,
       errorMessage,
       fullwidth = true,
@@ -211,66 +214,82 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
         });
       }
 
-      return (
-        <ul
-          className={cn(
-            "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-[9999] max-h-60 overflow-y-auto",
-            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
-            optionContainerClassName
-          )}
-          style={dropdownStyles}
-          ref={dropdownRef}
-        >
-          {optionsFiltered.map((option) => {
-            if (option.renderLabel) {
-              return (
-                <Fragment key={option.value}>
-                  {option.renderLabel({
-                    value: option.value,
-                    label: option.label,
-                    handleOnClick: () => handleOptionClick(option),
-                    className: cn(
-                      `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`,
-                      optionItemClassName,
-                      {
-                        "bg-base-popup-highligh":
-                          selectedOption?.value === option.value,
-                      }
-                    ),
-                  })}
-                </Fragment>
-              );
-            }
-            return (
-              <li
-                key={option.value}
-                onMouseDown={() => {
-                  handleOptionClick(option);
-                }}
-                className={cn(
-                  `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`,
-                  optionItemClassName,
-                  {
-                    "bg-base-popup-highligh":
-                      selectedOption?.value === option.value,
-                  }
-                )}
-              >
-                {option.label}
-              </li>
-            );
-          })}
-          {optionsFiltered.length === 0 && (
-            <li
+      // Convert options to MenuItemType
+      let finalMenuItems: MenuItemType[];
+
+      finalMenuItems = optionsFiltered.map((option) => {
+        if (option.renderLabel) {
+          return {
+            type: "custom",
+            render: () => (
+              <Fragment key={option.value}>
+                {option.renderLabel!({
+                  value: option.value,
+                  label: option.label,
+                  handleOnClick: () => handleOptionClick(option),
+                  className: cn(
+                    "relative flex gap-3 cursor-pointer select-none box-border items-center py-4 pl-9 pr-4 typography-subtitile4 outline-none transition-colors",
+                    "bg-[var(--dropdown-menu-default-bg)] text-[var(--dropdown-menu-default-text)]",
+                    "active:opacity-75",
+                    "hover:bg-[var(--dropdown-menu-hover-bg)] hover:text-[var(--dropdown-menu-hover-text)]",
+                    {
+                      "bg-[var(--dropdown-menu-selected-bg)] text-[var(--dropdown-menu-selected-text)] typography-subtitile5":
+                        selectedOption?.value === option.value,
+                    },
+                    optionItemClassName
+                  ),
+                })}
+              </Fragment>
+            ),
+          };
+        }
+
+        return {
+          type: "item",
+          item: {
+            type: defaultMenuItemType,
+            value: option.value,
+            label: option.label,
+          },
+        };
+      });
+
+      // Add "not found" message if no results
+      if (finalMenuItems.length === 0) {
+        finalMenuItems.push({
+          type: "custom",
+          render: () => (
+            <div
+              key="not-found"
               className={cn(
                 "px-4 py-14 text-center text-input-text",
                 optionNotFoundItemClassName
               )}
             >
               Not found
-            </li>
+            </div>
+          ),
+        });
+      }
+
+      return (
+        <Menu
+          ref={dropdownRef as any}
+          items={finalMenuItems}
+          selectedValues={selectedOption?.value ? [selectedOption.value] : []}
+          onSelect={(value) => {
+            const option = optionsFiltered.find((opt) => opt.value === value);
+            if (option) {
+              handleOptionClick(option);
+            }
+          }}
+          className={cn(
+            "absolute mt-1 w-full max-h-60 overflow-y-auto",
+            !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"),
+            optionContainerClassName
           )}
-        </ul>
+          style={dropdownStyles}
+        />
       );
     };