fix: combobox bug

feat: copybutton icon changed, responsive changes, switchbutton padding removed
mvriu5 · Aug 3, 2024 · b76818b · b76818b
1 parent 2c4ad18
commit b76818b
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "griller",
   "license": "MIT",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "private": false,
   "repository": {
     "url": "https://github.com/mvriu5/griller"

diff --git a/src/app/lab/page.tsx b/src/app/lab/page.tsx
@@ -53,7 +53,7 @@ export default function Home() {
 
     return (
         <motion.div
-            className={"h-full flex flex-col justify-between space-y-4 p-4 lg:px-40 lg:py-16 2xl:px-96 2xl:py-32"}
+            className={"flex flex-col justify-between space-y-4 p-4 lg:px-40 lg:py-16 2xl:px-96 2xl:py-32"}
             initial={{opacity: 0, filter: 'blur(10px)', y: 50}}
             animate={{opacity: 1, filter: 'blur(0px)', y: 0}}
             transition={{duration: 0.65}}
@@ -75,7 +75,7 @@ export default function Home() {
                     </span>
                 </div>
 
-                <div className={"grid grid-cols-1 space-y-8 2xl:space-y-0 2xl:grid-cols-2 2xl:space-x-16 pt-4 pb-52"}>
+                <div className={"grid grid-cols-1 space-y-8 xl:space-y-0 xl:grid-cols-2 xl:space-x-16 pt-4 pb-52"}>
                     <div className={"flex flex-col space-y-2"}>
                         <span className={"text-sm text-zinc-700 font-medium"}>Customize</span>
                         <div className={"h-max flex flex-col rounded-lg border border-zinc-200 bg-zinc-50"}>

diff --git a/src/lib/combobox.tsx b/src/lib/combobox.tsx
@@ -28,6 +28,8 @@ const Combobox = forwardRef<ComboRef, ComboProps>(({ title, values, label, preSe
     const [open, setOpen] = useState<boolean>(false);
     const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
     const itemRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const portalRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
         if (open && itemRef.current) {
@@ -36,9 +38,12 @@ const Combobox = forwardRef<ComboRef, ComboProps>(({ title, values, label, preSe
         }
     }, [open]);
 
-    const menuRef = useOutsideClick((e) => {
-        e.stopPropagation();
-        setOpen(false);
+    useOutsideClick((e) => {
+        if ((menuRef.current && !menuRef.current.contains(e.target as Node)) &&
+            (portalRef.current && !portalRef.current.contains(e.target as Node)))
+        {
+            setOpen(false);
+        }
     });
 
     useImperativeHandle(ref, () => ({
@@ -58,36 +63,37 @@ const Combobox = forwardRef<ComboRef, ComboProps>(({ title, values, label, preSe
 
             {label && <span className={"text-zinc-500 text-xs px-1"}>{label}</span>}
 
-            <div className={"w-max flex flex-row items-center space-x-8 justify-between px-2 py-1 bg-zinc-100 border border-zinc-200 rounded-lg text-zinc-500 text-sm cursor-pointer"}
-                 onClick={() => setOpen(!open)}
-                 ref={itemRef}
-            >
-                <span>{value}</span>
-                {open ? <ChevronDown size={16}/> : <ChevronUp size={16}/>}
-            </div>
-
-            {open &&
-                <ComboboxPortal>
-                    <div className={"absolute z-50 w-max p-1 space-y-1 bg-zinc-100 border border-zinc-200 rounded-lg"}
-                         style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
-                         ref={menuRef}
-                    >
-                        {values.map((item, index) => (
-                            <div key={index}
-                                 className={cn(
-                                     "flex flex-row items-center space-x-2 px-1.5 py-0.5 w-full rounded-lg hover:bg-zinc-200 cursor-pointer",
-                                     value === item ? "bg-zinc-200" : ""
-                                 )}
-                                 onClick={() => handleValueChange(item)}
-                            >
-                                <span className={"text-zinc-500 text-sm"}>{item}</span>
-                                {value === item && <Check size={16} className={"text-zinc-500"}/>}
-                            </div>
-                        ))}
-                    </div>
-                </ComboboxPortal>
-            }
+            <div className={"flex flex-col space-y-1"} ref={menuRef}>
+                <div className={"w-max flex flex-row items-center space-x-8 justify-between px-2 py-1 bg-zinc-100 border border-zinc-200 rounded-lg text-zinc-500 text-sm cursor-pointer"}
+                     onClick={() => setOpen(!open)}
+                     ref={itemRef}
+                >
+                    <span>{value}</span>
+                    {open ? <ChevronDown size={16}/> : <ChevronUp size={16}/>}
+                </div>
 
+                {open &&
+                    <ComboboxPortal>
+                        <div className={"absolute z-50 w-max p-1 space-y-1 bg-zinc-100 border border-zinc-200 rounded-lg"}
+                             style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
+                             ref={portalRef}
+                        >
+                            {values.map((item, index) => (
+                                <div key={index}
+                                     className={cn(
+                                         "flex flex-row items-center space-x-2 px-1.5 py-0.5 w-full rounded-lg hover:bg-zinc-200 cursor-pointer",
+                                         value === item ? "bg-zinc-200" : ""
+                                     )}
+                                     onClick={() => handleValueChange(item)}
+                                >
+                                    <span className={"text-zinc-500 text-sm"}>{item}</span>
+                                    {value === item && <Check size={16} className={"text-zinc-500"}/>}
+                                </div>
+                            ))}
+                        </div>
+                    </ComboboxPortal>
+                }
+            </div>
         </div>
     );
 });

diff --git a/src/lib/copybutton.tsx b/src/lib/copybutton.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import React, {HTMLAttributes, useEffect, useState} from "react";
-import {Check, Clipboard} from "lucide-react";
+import {Check, Copy} from "lucide-react";
 import {AnimatePresence, motion} from "framer-motion";
 
 interface CopyButtonProps extends HTMLAttributes<HTMLDivElement> {
@@ -46,7 +46,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({ copyText, className, ...props }
                         exit={{ opacity: 0, scale: 0.4, y: '100%' }}
                         transition={{ duration: 0.2 }}
                     >
-                        <Clipboard size={14} />
+                        <Copy size={14} />
                     </motion.div>
                 )}
             </AnimatePresence>

diff --git a/src/lib/switchbutton.tsx b/src/lib/switchbutton.tsx
@@ -29,13 +29,13 @@ const SwitchButton = forwardRef<SwitchButtonRef, SwitchButtonProps>(({ label, ti
         <div className={"flex flex-col space-y-1"}>
             {label && <span className={"text-xs text-zinc-500 truncate"}>{label}</span>}
 
-            <div className={"w-max flex flex-row space-x-1 p-0.5 rounded-lg border border-zinc-200 bg-zinc-100"}>
-                <div className={cn("px-1 py-0.5 text-sm text-zinc-400 cursor-pointer rounded-lg", !value && "bg-zinc-200 text-zinc-600")}
+            <div className={"w-max flex flex-row space-x-1 rounded-lg border border-zinc-200 bg-zinc-100"}>
+                <div className={cn("px-1.5 py-1 text-sm text-zinc-400 cursor-pointer rounded-lg", !value && "bg-zinc-200 text-zinc-600")}
                     onClick={() => handleChange(!value)}
                 >
                     <span>{titleOne}</span>
                 </div>
-                <div className={cn("px-1 py-0.5 text-sm text-zinc-400 cursor-pointer rounded-lg", value && "bg-zinc-200 text-zinc-600")}
+                <div className={cn("px-1.5 py-1 text-sm text-zinc-400 cursor-pointer rounded-lg", value && "bg-zinc-200 text-zinc-600")}
                      onClick={() => handleChange(!value)}
                 >
                     <span>{titleTwo}</span>