@rovula/ui 0.0.77 → 0.0.79

package/dist/src/theme/global.css

@@ -2344,16 +2344,20 @@ input[type=number] {
   z-index: 10;
 }
 
+.z-40 {
+  z-index: 40;
+}
+
 .z-50 {
   z-index: 50;
 }
 
-.z-\[100\] {
-  z-index: 100;
+.z-\[1000\] {
+  z-index: 1000;
 }
 
-.z-\[9999\] {
-  z-index: 9999;
+.z-\[100\] {
+  z-index: 100;
 }
 
 .col-span-3 {
@@ -2708,6 +2712,10 @@ input[type=number] {
   width: 2rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
 .w-\[100px\] {
   width: 100px;
 }
@@ -2778,6 +2786,10 @@ input[type=number] {
   min-width: fit-content;
 }
 
+.max-w-2xl {
+  max-width: 42rem;
+}
+
 .max-w-\[300px\] {
   max-width: 300px;
 }
@@ -2790,6 +2802,10 @@ input[type=number] {
   max-width: 32rem;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -3891,6 +3907,11 @@ input[type=number] {
   background-color: color-mix(in srgb, var(--function-default-stroke) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
@@ -5527,6 +5548,11 @@ input[type=number] {
   font-weight: var(--label-label2-weight, 400);
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -5640,6 +5666,10 @@ input[type=number] {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -5893,6 +5923,11 @@ input[type=number] {
   color: rgb(107 114 128 / var(--tw-text-opacity, 1));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
+}
+
 .text-green-500 {
   --tw-text-opacity: 1;
   color: rgb(34 197 94 / var(--tw-text-opacity, 1));
@@ -6029,6 +6064,10 @@ input[type=number] {
   caret-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .opacity-60 {
   opacity: 0.6;
 }
@@ -6539,6 +6578,10 @@ input[type=number] {
   border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover {
+  background-color: var(--dropdown-menu-hover-bg);
+}
+
 .hover\:bg-action-button-icon-active-hover:hover {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--action-button-icon-active-hover-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -6810,6 +6853,10 @@ input[type=number] {
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
 
+.hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover {
+  color: var(--dropdown-menu-hover-text);
+}
+
 .hover\:text-action-button-icon-active-hover:hover {
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-hover-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -8870,6 +8917,10 @@ input[type=number] {
   .md\:right-\[40px\] {
     right: 40px;
   }
+
+  .md\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .\[\&\:has\(\[role\=checkbox\]\)\]\:w-4:has([role=checkbox]) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -3,6 +3,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
+import { MenuItemType } from "../Menu/Menu";
+import Icon from "../Icon/Icon";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -167,3 +169,32 @@ export const CustomOption = {
     );
   },
 } satisfies StoryObj;
+
+// ==================== Advanced Menu Features ====================
+
+export const WithIcons: StoryObj<typeof Dropdown> = {
+  render: () => {
+    const [selectedValue, setSelectedValue] = useState<Options | undefined>();
+
+    const optionsWithIcons: Options[] = [
+      { value: "apple", label: "🍎 Apple" },
+      { value: "banana", label: "🍌 Banana" },
+      { value: "carrot", label: "🥕 Carrot" },
+      { value: "broccoli", label: "🥦 Broccoli" },
+    ];
+
+    return (
+      <div className="flex flex-row gap-4 w-full">
+        <Dropdown
+          id="with-icons"
+          size="lg"
+          label="Select Food"
+          fullwidth
+          options={optionsWithIcons}
+          value={selectedValue}
+          onSelect={(option) => setSelectedValue(option)}
+        />
+      </div>
+    );
+  },
+};

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