chore: drop-downs improvements and bug fixes (makeplane#3433)

* chore: dropdowns should close on selecting an option

* style: @plane/ui dropdown styling

* refactor: @plane/ui dropdowns

* fix: build errors

* fix: list layout dropdowns positioning

* fix: priority dropdown text in dark mode

packages/ui/src/dropdowns/custom-menu.tsx

@@ -1,17 +1,15 @@
 import * as React from "react";
 import ReactDOM from "react-dom";
-// react-popper
+import { Menu } from "@headlessui/react";
 import { usePopper } from "react-popper";
+import { ChevronDown, MoreHorizontal } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Menu } from "@headlessui/react";
-// type
-import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
-// icons
-import { ChevronDown, MoreHorizontal } from "lucide-react";
+// helpers
 import { cn } from "../../helpers";
+// types
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
 
 const CustomMenu = (props: ICustomMenuDropdownProps) => {
   const {
@@ -29,7 +27,6 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     noChevron = false,
     optionsClassName = "",
     verticalEllipsis = false,
-    width = "auto",
     portalElement,
     menuButtonOnClick,
     tabIndex,
@@ -63,17 +60,16 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       static
     >
       <div
-        className={`my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${
-          maxHeight === "lg"
-            ? "max-h-60"
-            : maxHeight === "md"
-              ? "max-h-48"
-              : maxHeight === "rg"
-                ? "max-h-36"
-                : maxHeight === "sm"
-                  ? "max-h-28"
-                  : ""
-        } ${width === "auto" ? "min-w-[12rem] whitespace-nowrap" : width} ${optionsClassName}`}
+        className={cn(
+          "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+          {
+            "max-h-60": maxHeight === "lg",
+            "max-h-48": maxHeight === "md",
+            "max-h-36": maxHeight === "rg",
+            "max-h-28": maxHeight === "sm",
+          },
+          optionsClassName
+        )}
         ref={setPopperElement}
         style={styles.popper}
         {...attributes.popper}
@@ -92,7 +88,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={`relative w-min text-left ${className}`}
+      className={cn("relative w-min text-left", className)}
       onKeyDown={handleKeyDown}
     >
       {({ open }) => (

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+import { Check, ChevronDown, Search } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Combobox } from "@headlessui/react";
-// icons
-import { Check, ChevronDown, Search } from "lucide-react";
+// helpers
+import { cn } from "../../helpers";
 // types
 import { ICustomSearchSelectProps } from "./helper";
 
@@ -31,7 +29,6 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
     onOpen,
     optionsClassName = "",
     value,
-    width = "auto",
     tabIndex,
   } = props;
   const [query, setQuery] = useState("");
@@ -70,7 +67,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
       as="div"
       ref={dropdownRef}
       tabIndex={tabIndex}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
       onKeyDown={handleKeyDown}
       {...comboboxProps}
     >
@@ -114,75 +111,65 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
               </Combobox.Button>
             )}
             {isOpen && (
-              <Combobox.Options as={React.Fragment} static>
+              <Combobox.Options className="fixed z-10" static>
                 <div
-                  className={`z-10 my-1 min-w-[10rem] rounded-md border border-custom-border-300 bg-custom-background-90 p-2 text-xs shadow-custom-shadow-rg focus:outline-none ${
-                    width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
-                  } ${optionsClassName}`}
+                  className={cn(
+                    "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
+                    optionsClassName
+                  )}
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
                 >
-                  <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
-                    <Search className="h-3 w-3 text-custom-text-200" />
+                  <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+                    <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
                     <Combobox.Input
-                      className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                      className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                       value={query}
                       onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Type to search..."
+                      placeholder="Search"
                       displayValue={(assigned: any) => assigned?.name}
                     />
                   </div>
                   <div
-                    className={`mt-2 space-y-1 ${
-                      maxHeight === "lg"
-                        ? "max-h-60"
-                        : maxHeight === "md"
-                          ? "max-h-48"
-                          : maxHeight === "rg"
-                            ? "max-h-36"
-                            : maxHeight === "sm"
-                              ? "max-h-28"
-                              : ""
-                    } overflow-y-scroll`}
+                    className={cn("mt-2 space-y-1 overflow-y-scroll", {
+                      "max-h-60": maxHeight === "lg",
+                      "max-h-48": maxHeight === "md",
+                      "max-h-36": maxHeight === "rg",
+                      "max-h-28": maxHeight === "sm",
+                    })}
                   >
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option) => (
                           <Combobox.Option
                             key={option.value}
                             value={option.value}
-                            className={({ active, selected }) =>
-                              `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
-                                active || selected ? "bg-custom-background-80" : ""
-                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            className={({ active }) =>
+                              cn(
+                                "w-full truncate flex items-center justify-between gap-2 rounded px-1 py-1.5 cursor-pointer select-none",
+                                {
+                                  "bg-custom-background-80": active,
+                                }
+                              )
                             }
+                            onClick={() => {
+                              if (!multiple) closeDropdown();
+                            }}
                           >
-                            {({ active, selected }) => (
+                            {({ selected }) => (
                               <>
-                                {option.content}
-                                {multiple ? (
-                                  <div
-                                    className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
-                                      active || selected ? "opacity-100" : "opacity-0"
-                                    }`}
-                                  >
-                                    <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                  </div>
-                                ) : (
-                                  <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
-                                )}
+                                <span className="flex-grow truncate">{option.content}</span>
+                                {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
                               </>
                             )}
                           </Combobox.Option>
                         ))
                       ) : (
-                        <span className="flex items-center gap-2 p-1">
-                          <p className="text-left text-custom-text-200 ">No matching results</p>
-                        </span>
+                        <p className="text-custom-text-400 italic py-1 px-1.5">No matches found</p>
                       )
                     ) : (
-                      <p className="text-center text-custom-text-200">Loading...</p>
+                      <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
                     )}
                   </div>
                   {footerOption}

packages/ui/src/dropdowns/custom-select.tsx

@@ -1,14 +1,12 @@
 import React, { useRef, useState } from "react";
-
-// react-popper
 import { usePopper } from "react-popper";
+import { Listbox } from "@headlessui/react";
+import { Check, ChevronDown } from "lucide-react";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import useOutsideClickDetector from "../hooks/use-outside-click-detector";
-// headless ui
-import { Listbox } from "@headlessui/react";
-// icons
-import { Check, ChevronDown } from "lucide-react";
+// helpers
+import { cn } from "../../helpers";
 // types
 import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
@@ -28,7 +26,6 @@ const CustomSelect = (props: ICustomSelectProps) => {
     onChange,
     optionsClassName = "",
     value,
-    width = "auto",
     tabIndex,
   } = props;
   // states
@@ -57,7 +54,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
       tabIndex={tabIndex}
       value={value}
       onChange={onChange}
-      className={`relative flex-shrink-0 text-left ${className}`}
+      className={cn("relative flex-shrink-0 text-left", className)}
       onKeyDown={handleKeyDown}
       disabled={disabled}
     >
@@ -94,24 +91,23 @@ const CustomSelect = (props: ICustomSelectProps) => {
         )}
       </>
       {isOpen && (
-        <Listbox.Options static>
+        <Listbox.Options className="fixed z-10" onClick={() => closeDropdown()} static>
           <div
-            className={`z-10 my-1 overflow-y-auto rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none ${
-              maxHeight === "lg"
-                ? "max-h-60"
-                : maxHeight === "md"
-                  ? "max-h-48"
-                  : maxHeight === "rg"
-                    ? "max-h-36"
-                    : maxHeight === "sm"
-                      ? "max-h-28"
-                      : ""
-            } ${width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width} ${optionsClassName}`}
+            className={cn(
+              "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
+              {
+                "max-h-60": maxHeight === "lg",
+                "max-h-48": maxHeight === "md",
+                "max-h-36": maxHeight === "rg",
+                "max-h-28": maxHeight === "sm",
+              },
+              optionsClassName
+            )}
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <div className="space-y-1 p-2">{children}</div>
+            {children}
           </div>
         </Listbox.Options>
       )}
@@ -124,16 +120,20 @@ const Option = (props: ICustomSelectItemProps) => {
   return (
     <Listbox.Option
       value={value}
-      className={({ active, selected }) =>
-        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-          active || selected ? "bg-custom-background-80" : ""
-        } ${selected ? "text-custom-text-100" : "text-custom-text-200"} ${className}`
+      className={({ active }) =>
+        cn(
+          "cursor-pointer select-none truncate rounded px-1 py-1.5 text-custom-text-200",
+          {
+            "bg-custom-background-80": active,
+          },
+          className
+        )
       }
     >
       {({ selected }) => (
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-2">{children}</div>
-          {selected && <Check className="h-4 w-4 flex-shrink-0" />}
+          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
         </div>
       )}
     </Listbox.Option>

packages/ui/src/dropdowns/helper.tsx

@@ -13,7 +13,6 @@ export interface IDropdownProps {
   noChevron?: boolean;
   onOpen?: () => void;
   optionsClassName?: string;
-  width?: "auto" | string;
   placement?: Placement;
   tabIndex?: number;
 }

web/components/analytics/custom-analytics/select/project.tsx

@@ -21,9 +21,9 @@ export const SelectProject: React.FC<Props> = observer((props) => {
       value: projectDetails?.id,
       query: `${projectDetails?.name} ${projectDetails?.identifier}`,
       content: (
-        <div className="flex items-center gap-2">
-          <span className="text-[0.65rem] text-custom-text-200">{projectDetails?.identifier}</span>
-          {projectDetails?.name}
+        <div className="flex items-center gap-2 truncate">
+          <span className="text-[0.65rem] text-custom-text-200 flex-shrink-0">{projectDetails?.identifier}</span>
+          <span className="flex-grow truncate">{projectDetails?.name}</span>
         </div>
       ),
     };
@@ -42,7 +42,6 @@ export const SelectProject: React.FC<Props> = observer((props) => {
               .join(", ")
           : "All projects"
       }
-      optionsClassName="min-w-full max-w-[20rem]"
       multiple
     />
   );

web/components/analytics/custom-analytics/select/segment.tsx

@@ -28,7 +28,6 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
         </span>
       }
       onChange={onChange}
-      width="w-full"
       maxHeight="lg"
     >
       <CustomSelect.Option value={null}>No value</CustomSelect.Option>

web/components/analytics/custom-analytics/select/x-axis.tsx

@@ -24,7 +24,6 @@ export const SelectXAxis: React.FC<Props> = (props) => {
       value={value}
       label={<span>{ANALYTICS_X_AXIS_VALUES.find((v) => v.value === value)?.label}</span>}
       onChange={onChange}
-      width="w-full"
       maxHeight="lg"
     >
       {ANALYTICS_X_AXIS_VALUES.map((item) => {

web/components/analytics/custom-analytics/select/y-axis.tsx

@@ -15,7 +15,7 @@ export const SelectYAxis: React.FC<Props> = ({ value, onChange }) => (
     value={value}
     label={<span>{ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === value)?.label ?? "None"}</span>}
     onChange={onChange}
-    width="w-full"
+    maxHeight="lg"
   >
     {ANALYTICS_Y_AXIS_VALUES.map((item) => (
       <CustomSelect.Option key={item.value} value={item.value}>

web/components/automation/auto-archive-automation.tsx

@@ -79,7 +79,6 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                       handleChange({ archive_in: val });
                     }}
                     input
-                    width="w-full"
                     disabled={!isAdmin}
                   >
                     <>

web/components/automation/auto-close-automation.tsx

@@ -106,7 +106,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                         handleChange({ close_in: val });
                       }}
                       input
-                      width="w-full"
                       disabled={!isAdmin}
                     >
                       <>
@@ -161,7 +160,6 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                       }}
                       options={options}
                       disabled={!multipleOptions}
-                      width="w-full"
                       input
                     />
                   </div>