fix(c): dropdown tweaks

Author: brianorwhatever

src/components/dropdown/Dropdown.tsx

@@ -1,44 +1,83 @@
 import * as React from "react";
-import { Menu } from "@headlessui/react";
+import { Menu, Transition, Portal } from "@headlessui/react";
 import { cn } from "../../utils/cn";
 import { ZINDEX } from "../../utils/z-index";
 
 export interface DropdownProps {
   trigger: React.ReactNode;
   children: React.ReactNode;
   align?: "left" | "right";
+  direction?: "up" | "down";
   className?: string;
 }
 
 export const Dropdown: React.FC<DropdownProps> = ({
   trigger,
   children,
   align = "left",
+  direction = "down",
   className,
 }) => {
+  const buttonRef = React.useRef<HTMLDivElement>(null);
+
+  const updatePosition = React.useCallback((open: boolean) => {
+    if (!buttonRef.current || !open) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    
+    document.documentElement.style.setProperty('--x', `${rect.left}px`);
+    document.documentElement.style.setProperty('--rx', `${window.innerWidth - rect.right}px`);
+    document.documentElement.style.setProperty('--y', `${rect.bottom + 8}px`);
+    document.documentElement.style.setProperty('--by', `${window.innerHeight - rect.top + 8}px`);
+  }, []);
+
   return (
-    <Menu as="div" className="relative inline-block text-left">
-      <Menu.Button className="inline-flex cursor-pointer">
-        {trigger}
-      </Menu.Button>
+    <Menu>
+      {({ open }) => (
+        <div className="relative inline-block text-left">
+          <div ref={buttonRef}>
+            <Menu.Button 
+              className="inline-flex cursor-pointer"
+              onClick={() => updatePosition(true)}
+            >
+              {trigger}
+            </Menu.Button>
+          </div>
 
-      <Menu.Items
-        className={cn(
-          "absolute mt-2 rounded-lg shadow-lg",
-          "bg-white dark:bg-gray-800",
-          "border border-gray-200 dark:border-gray-700",
-          "focus:outline-none",
-          "min-w-[8rem] py-1",
-          {
-            "left-0": align === "left",
-            "right-0": align === "right",
-          },
-          className
-        )}
-        style={{ zIndex: ZINDEX.dropdown }}
-      >
-        {children}
-      </Menu.Items>
+          <Portal>
+            <Transition
+              show={open}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+              beforeEnter={() => updatePosition(true)}
+              afterLeave={() => updatePosition(false)}
+            >
+              <Menu.Items
+                className={cn(
+                  "fixed rounded-lg shadow-lg",
+                  "bg-white dark:bg-gray-800",
+                  "border border-gray-200 dark:border-gray-700",
+                  "focus:outline-none",
+                  "min-w-[8rem] py-1",
+                  "z-[100]",
+                  className
+                )}
+                style={{
+                  left: align === "left" ? "var(--x)" : "unset",
+                  right: align === "right" ? "var(--rx)" : "unset",
+                  top: direction === "down" ? "var(--y)" : "unset",
+                  bottom: direction === "up" ? "var(--by)" : "unset",
+                }}
+              >
+                {children}
+              </Menu.Items>
+            </Transition>
+          </Portal>
+        </div>
+      )}
     </Menu>
   );
 };

src/docs/pages/components/DropdownPage.tsx

@@ -24,6 +24,12 @@ export const DropdownPage = () => {
       type: "string",
       description: "Additional CSS classes for the dropdown menu",
     },
+    {
+      name: "direction",
+      type: "'up' | 'down'",
+      defaultValue: "down",
+      description: "The direction the dropdown opens",
+    },
   ];
 
   const dropdownItemProps = [
@@ -80,7 +86,7 @@ const MyComponent = () => (
             title="Right Aligned"
             description="Dropdown menu aligned to the right"
             code={`<Dropdown
-  trigger={<Button>Long Buttn with a Right Menu</Button>}
+  trigger={<Button>Long Button with a Right Menu</Button>}
   align="right"
 >
   <DropdownItem>Option 1</DropdownItem>
@@ -89,7 +95,7 @@ const MyComponent = () => (
           >
             <div className="text-right">
               <Dropdown
-                trigger={<Button>Long Buttn with a Right Menu</Button>}
+                trigger={<Button>Long Button with a Right Menu</Button>}
                 align="right"
               >
                 <DropdownItem>Option 1</DropdownItem>
@@ -175,6 +181,28 @@ const MyComponent = () => (
               </DropdownItem>
             </Dropdown>
           </ComponentDemo>
+
+          <ComponentDemo
+            title="Upward Direction"
+            description="Dropdown that opens upward"
+            code={`<Dropdown
+  trigger={<Button>Upward Menu</Button>}
+  direction="up"
+>
+  <DropdownItem>Option 1</DropdownItem>
+  <DropdownItem>Option 2</DropdownItem>
+</Dropdown>`}
+          >
+            <div className="mt-32">
+              <Dropdown
+                trigger={<Button>Upward Menu</Button>}
+                direction="up"
+              >
+                <DropdownItem>Option 1</DropdownItem>
+                <DropdownItem>Option 2</DropdownItem>
+              </Dropdown>
+            </div>
+          </ComponentDemo>
         </div>
       </section>