chore: swap dropdown component with plane/ui component (#2480)

* chore: swap custom menu component with plane/ui component * chore: swap custom select component with plane/ui component * chore: swap custom search select component with plane/ui component
2023-10-19 15:24:51 +05:30 · 2023-10-19 15:24:51 +05:30 · c0793ec8a5
commit c0793ec8a5
parent 0b8367a262
91 changed files with 681 additions and 194 deletions
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@ -0,0 +1,152 @@
+import * as React from "react";
+
+// react-poppper
+import { usePopper } from "react-popper";
+// headless ui
+import { Menu } from "@headlessui/react";
+// type
+import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
+// icons
+import { ChevronDown, MoreHorizontal } from "lucide-react";
+
+const CustomMenu = (props: ICustomMenuDropdownProps) => {
+  const {
+    buttonClassName = "",
+    customButtonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    ellipsis = false,
+    label,
+    maxHeight = "md",
+    noBorder = false,
+    noChevron = false,
+    optionsClassName = "",
+    verticalEllipsis = false,
+    width = "auto",
+    menuButtonOnClick,
+  } = props;
+
+  const [referenceElement, setReferenceElement] =
+    React.useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] =
+    React.useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+  return (
+    <Menu as="div" className={`relative w-min text-left ${className}`}>
+      {({ open }) => (
+        <>
+          {customButton ? (
+            <Menu.Button as={React.Fragment}>
+              <button
+                ref={setReferenceElement}
+                type="button"
+                onClick={menuButtonOnClick}
+                className={customButtonClassName}
+              >
+                {customButton}
+              </button>
+            </Menu.Button>
+          ) : (
+            <>
+              {ellipsis || verticalEllipsis ? (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    onClick={menuButtonOnClick}
+                    disabled={disabled}
+                    className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
+                      disabled
+                        ? "cursor-not-allowed"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    <MoreHorizontal
+                      className={`h-3.5 w-3.5 ${
+                        verticalEllipsis ? "rotate-90" : ""
+                      }`}
+                    />
+                  </button>
+                </Menu.Button>
+              ) : (
+                <Menu.Button as={React.Fragment}>
+                  <button
+                    ref={setReferenceElement}
+                    type="button"
+                    className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
+                      open
+                        ? "bg-custom-background-90 text-custom-text-100"
+                        : "text-custom-text-200"
+                    } ${
+                      noBorder
+                        ? ""
+                        : "border border-custom-border-300 shadow-sm focus:outline-none"
+                    } ${
+                      disabled
+                        ? "cursor-not-allowed text-custom-text-200"
+                        : "cursor-pointer hover:bg-custom-background-80"
+                    } ${buttonClassName}`}
+                  >
+                    {label}
+                    {!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
+                  </button>
+                </Menu.Button>
+              )}
+            </>
+          )}
+          <Menu.Items>
+            <div
+              className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
+                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}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              {children}
+            </div>
+          </Menu.Items>
+        </>
+      )}
+    </Menu>
+  );
+};
+
+const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+  const { children, onClick, className = "" } = props;
+  return (
+    <Menu.Item as="div">
+      {({ active, close }) => (
+        <button
+          type="button"
+          className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
+            active ? "bg-custom-background-80" : ""
+          } ${className}`}
+          onClick={onClick}
+        >
+          {children}
+        </button>
+      )}
+    </Menu.Item>
+  );
+};
+
+CustomMenu.MenuItem = MenuItem;
+
+export { CustomMenu };
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@ -0,0 +1,204 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown, Search } from "lucide-react";
+// types
+import { ICustomSearchSelectProps } from "./helper";
+
+export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    className = "",
+    customButton,
+    placement,
+    disabled = false,
+    footerOption,
+    input = false,
+    label,
+    maxHeight = "md",
+    multiple = false,
+    noChevron = false,
+    onChange,
+    options,
+    onOpen,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [query, setQuery] = useState("");
+
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options?.filter((option) =>
+          option.query.toLowerCase().includes(query.toLowerCase())
+        );
+
+  const comboboxProps: any = {
+    value,
+    onChange,
+    disabled,
+  };
+
+  if (multiple) comboboxProps.multiple = true;
+
+  return (
+    <Combobox
+      as="div"
+      className={`relative flex-shrink-0 text-left ${className}`}
+      {...comboboxProps}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open && onOpen) onOpen();
+
+        return (
+          <>
+            {customButton ? (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full text-xs ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }  ${customButtonClassName}`}
+                >
+                  {customButton}
+                </button>
+              </Combobox.Button>
+            ) : (
+              <Combobox.Button as={React.Fragment}>
+                <button
+                  ref={setReferenceElement}
+                  type="button"
+                  className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                    input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+                  } ${
+                    disabled
+                      ? "cursor-not-allowed text-custom-text-200"
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  } ${buttonClassName}`}
+                >
+                  {label}
+                  {!noChevron && !disabled && (
+                    <ChevronDown className="h-3 w-3" aria-hidden="true" />
+                  )}
+                </button>
+              </Combobox.Button>
+            )}
+            <Combobox.Options as={React.Fragment}>
+              <div
+                className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+                  width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
+                } ${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" />
+                  <Combobox.Input
+                    className="w-full bg-transparent py-1 px-2 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..."
+                    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`}
+                >
+                  {filteredOptions ? (
+                    filteredOptions.length > 0 ? (
+                      filteredOptions.map((option) => (
+                        <Combobox.Option
+                          key={option.value}
+                          value={option.value}
+                          className={({ active, selected }) =>
+                            `flex items-center justify-between gap-2 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"
+                            }`
+                          }
+                        >
+                          {({ active, 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"
+                                  }`}
+                                />
+                              )}
+                            </>
+                          )}
+                        </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-center text-custom-text-200">
+                      Loading...
+                    </p>
+                  )}
+                </div>
+                {footerOption}
+              </div>
+            </Combobox.Options>
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@ -0,0 +1,135 @@
+import React, { useState } from "react";
+
+// react-popper
+import { usePopper } from "react-popper";
+// headless ui
+import { Listbox } from "@headlessui/react";
+// icons
+import { Check, ChevronDown } from "lucide-react";
+// types
+import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+
+const CustomSelect = (props: ICustomSelectProps) => {
+  const {
+    customButtonClassName = "",
+    buttonClassName = "",
+    placement,
+    children,
+    className = "",
+    customButton,
+    disabled = false,
+    input = false,
+    label,
+    maxHeight = "md",
+    noChevron = false,
+    onChange,
+    optionsClassName = "",
+    value,
+    width = "auto",
+  } = props;
+  const [referenceElement, setReferenceElement] =
+    useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
+    null
+  );
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+  });
+
+  return (
+    <Listbox
+      as="div"
+      value={value}
+      onChange={onChange}
+      className={`relative flex-shrink-0 text-left ${className}`}
+      disabled={disabled}
+    >
+      <>
+        {customButton ? (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full text-xs ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              }  ${customButtonClassName}`}
+            >
+              {customButton}
+            </button>
+          </Listbox.Button>
+        ) : (
+          <Listbox.Button as={React.Fragment}>
+            <button
+              ref={setReferenceElement}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
+                input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
+              } ${
+                disabled
+                  ? "cursor-not-allowed text-custom-text-200"
+                  : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {label}
+              {!noChevron && !disabled && (
+                <ChevronDown className="h-3 w-3" aria-hidden="true" />
+              )}
+            </button>
+          </Listbox.Button>
+        )}
+      </>
+      <Listbox.Options>
+        <div
+          className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
+            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}`}
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="space-y-1 p-2">{children}</div>
+        </div>
+      </Listbox.Options>
+    </Listbox>
+  );
+};
+
+const Option = (props: ICustomSelectItemProps) => {
+  const { children, value, className } = props;
+  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}`
+      }
+    >
+      {({ 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" />}
+        </div>
+      )}
+    </Listbox.Option>
+  );
+};
+
+CustomSelect.Option = Option;
+
+export { CustomSelect };
--- a/packages/ui/src/dropdowns/helper.tsx
+++ b/packages/ui/src/dropdowns/helper.tsx
@ -0,0 +1,69 @@
+import { Placement } from "@blueprintjs/popover2";
+
+export interface IDropdownProps {
+  customButtonClassName?: string;
+  buttonClassName?: string;
+  className?: string;
+  customButton?: JSX.Element;
+  disabled?: boolean;
+  input?: boolean;
+  label?: string | JSX.Element;
+  maxHeight?: "sm" | "rg" | "md" | "lg";
+  noChevron?: boolean;
+  onOpen?: () => void;
+  optionsClassName?: string;
+  width?: "auto" | string;
+  placement?: Placement;
+}
+
+export interface ICustomMenuDropdownProps extends IDropdownProps {
+  children: React.ReactNode;
+  ellipsis?: boolean;
+  noBorder?: boolean;
+  verticalEllipsis?: boolean;
+  menuButtonOnClick?: (...args: any) => void;
+}
+
+export interface ICustomSelectProps extends IDropdownProps {
+  children: React.ReactNode;
+  value: any;
+  onChange: any;
+}
+
+interface CustomSearchSelectProps {
+  footerOption?: JSX.Element;
+  onChange: any;
+  options:
+    | {
+        value: any;
+        query: string;
+        content: React.ReactNode;
+      }[]
+    | undefined;
+}
+
+interface SingleValueProps {
+  multiple?: false;
+  value: any;
+}
+
+interface MultipleValuesProps {
+  multiple?: true;
+  value: any[] | null;
+}
+
+export type ICustomSearchSelectProps = IDropdownProps &
+  CustomSearchSelectProps &
+  (SingleValueProps | MultipleValuesProps);
+
+export interface ICustomMenuItemProps {
+  children: React.ReactNode;
+  onClick?: (args?: any) => void;
+  className?: string;
+}
+
+export interface ICustomSelectItemProps {
+  children: React.ReactNode;
+  value: any;
+  className?: string;
+}
--- a/packages/ui/src/dropdowns/index.tsx
+++ b/packages/ui/src/dropdowns/index.tsx
@ -0,0 +1,3 @@
+export * from "./custom-menu";
+export * from "./custom-select";
+export * from "./custom-search-select";
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@ -6,3 +6,4 @@ export * from "./loader";
 export * from "./tooltip";
 export * from "./icons";
 export * from "./breadcrumbs";
+export * from "./dropdowns";
--- a/web/components/analytics/custom-analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@ -1,5 +1,5 @@
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // types
 import { IProject } from "types";

--- a/web/components/analytics/custom-analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@ -1,7 +1,7 @@
 import { useRouter } from "next/router";

 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { IAnalyticsParams, TXAxisValues } from "types";
 // constants
--- a/web/components/analytics/custom-analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@ -1,7 +1,7 @@
 import { useRouter } from "next/router";

 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TXAxisValues } from "types";
 // constants
--- a/web/components/analytics/custom-analytics/select/y-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/y-axis.tsx
@ -1,5 +1,5 @@
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // types
 import { TYAxisValues } from "types";
 // constants
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@ -1,8 +1,7 @@
 import React, { useState } from "react";

 // component
-import { CustomSelect } from "components/ui";
-import { ToggleSwitch } from "@plane/ui";
+import { CustomSelect, ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
 import { ArchiveRestore } from "lucide-react";
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@ -2,9 +2,8 @@ import React, { useState } from "react";
 import useSWR from "swr";
 import { useRouter } from "next/router";
 // component
-import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { SelectMonthModal } from "components/automation";
-import { ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
+import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
 // icons
 import { ArchiveX } from "lucide-react";
 // services
--- a/web/components/core/filters/date-filter-select.tsx
+++ b/web/components/core/filters/date-filter-select.tsx
@ -1,9 +1,8 @@
 import React from "react";

 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 // icons
-import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
 import { CalendarDays } from "lucide-react";
 // fetch-keys

--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@ -2,7 +2,7 @@ import { FC } from "react";
 // constants
 import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";

 type Props = {
  value: I_THEME_OPTION | null;
--- a/web/components/cycles/cycles-board-card.tsx
+++ b/web/components/cycles/cycles-board-card.tsx
@ -10,9 +10,8 @@ import { SingleProgressStats } from "components/core";
 import { CycleCreateEditModal } from "./cycle-create-edit-modal";
 import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
-import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
  AlarmClock,
--- a/web/components/cycles/cycles-list-item.tsx
+++ b/web/components/cycles/cycles-list-item.tsx
@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
 import { CycleCreateEditModal } from "./cycle-create-edit-modal";
 import { CycleDeleteModal } from "./cycle-delete-modal";
 // ui
-import { RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
  AlarmClock,
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@ -13,8 +13,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { CycleDeleteModal } from "components/cycles/cycle-delete-modal";
 // ui
-import { CustomMenu, CustomRangeDatePicker } from "components/ui";
-import { Loader, ProgressBar } from "@plane/ui";
+import { CustomRangeDatePicker } from "components/ui";
+import { CustomMenu, Loader, ProgressBar } from "@plane/ui";
 // icons
 import {
  CalendarDays,
--- a/web/components/cycles/single-cycle-card.tsx
+++ b/web/components/cycles/single-cycle-card.tsx
@ -10,8 +10,7 @@ import useToast from "hooks/use-toast";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 import { AssigneesList } from "components/ui/avatar";
 // icons
 import {
--- a/web/components/cycles/single-cycle-list.tsx
+++ b/web/components/cycles/single-cycle-list.tsx
@ -6,8 +6,7 @@ import { useRouter } from "next/router";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
+import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
 // icons
 import {
  AlarmClock,
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@ -10,8 +10,7 @@ import useProjectDetails from "hooks/use-project-details";
 // components
 import { DeleteEstimateModal } from "components/estimates";
 // ui
-import { Button } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { Button, CustomMenu } from "@plane/ui";
 //icons
 import { Pencil, Trash2 } from "lucide-react";
 // helpers
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@ -9,8 +9,7 @@ import { ProjectExportService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Button } from "@plane/ui";
-import { CustomSearchSelect } from "components/ui";
+import { Button, CustomSearchSelect } from "@plane/ui";
 // types
 import { IUser, IImporterService } from "types";

--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@ -7,8 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { Button, ToggleSwitch } from "@plane/ui";
-import { CustomSearchSelect } from "components/ui";
+import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@ -4,7 +4,7 @@ import useSWRInfinite from "swr/infinite";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@ -5,8 +5,8 @@ import useSWR from "swr";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // ui
-import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
-import { Input } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@ -8,8 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // icons
 import { Plus } from "lucide-react";
 // components
-import { CustomSelect } from "components/ui";
-import { Input } from "@plane/ui";
+import { CustomSelect, Input } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";

--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@ -7,8 +7,8 @@ import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 // services
 import { WorkspaceService } from "services/workspace.service";
 // components
-import { CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-import { Input, ToggleSwitch } from "@plane/ui";
+import { Avatar } from "components/ui";
+import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { IJiraImporterForm } from "types";

--- a/web/components/integration/single-import.tsx
+++ b/web/components/integration/single-import.tsx
@ -1,5 +1,5 @@
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { Trash2 } from "lucide-react";
 // helpers
--- a/web/components/issues/comment/comment-card.tsx
+++ b/web/components/issues/comment/comment-card.tsx
@ -8,7 +8,7 @@ import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-re
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
 // helpers
@ -156,7 +156,6 @@ export const CommentCard: React.FC<Props> = ({
            <>
              {comment.access === "INTERNAL" ? (
                <CustomMenu.MenuItem
-                  renderAs="button"
                  onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                  className="flex items-center gap-1"
                >
@ -165,7 +164,6 @@ export const CommentCard: React.FC<Props> = ({
                </CustomMenu.MenuItem>
              ) : (
                <CustomMenu.MenuItem
-                  renderAs="button"
                  onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                  className="flex items-center gap-1"
                >
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@ -22,8 +22,8 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input, ToggleSwitch } from "@plane/ui";
+import {} from "components/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { Sparkle, X } from "lucide-react";
 // types
@ -578,15 +578,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                  <CustomMenu ellipsis>
                    {watch("parent") ? (
                      <>
-                        <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
+                        <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                          Change parent issue
                        </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
+                        <CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
                          Remove parent issue
                        </CustomMenu.MenuItem>
                      </>
                    ) : (
-                      <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
+                      <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
                        Select Parent Issue
                      </CustomMenu.MenuItem>
                    )}
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@ -24,8 +24,7 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input, ToggleSwitch } from "@plane/ui";
+import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { LayoutPanelTop, Sparkle, X } from "lucide-react";
 // types
@ -533,27 +532,15 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
                    >
                      {watch("parent") ? (
                        <>
-                          <CustomMenu.MenuItem
-                            renderAs="button"
-                            className="!p-1"
-                            onClick={() => setParentIssueListModalOpen(true)}
-                          >
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
                            Change parent issue
                          </CustomMenu.MenuItem>
-                          <CustomMenu.MenuItem
-                            renderAs="button"
-                            className="!p-1"
-                            onClick={() => setValue("parent", null)}
-                          >
+                          <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
                            Remove parent issue
                          </CustomMenu.MenuItem>
                        </>
                      ) : (
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          className="!p-1"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
+                        <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
                          Select Parent Issue
                        </CustomMenu.MenuItem>
                      )}
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@ -22,7 +22,7 @@ import {
  SpreadsheetUpdatedOnColumn,
 } from "components/issues";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import {
  IIssue,
@ -101,10 +101,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
          }
          width="xl"
        >
-          <CustomMenu.MenuItem
-            renderAs="button"
-            onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}
-          >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
            <div
              className={`flex gap-1.5 px-1 items-center justify-between ${
                selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
@ -124,10 +121,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
              )}
            </div>
          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem
-            renderAs="button"
-            onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}
-          >
+          <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
            <div
              className={`flex gap-1.5 px-1 items-center justify-between ${
                selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
@ -152,7 +146,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
            displayFilters?.order_by !== "-created_at" &&
            selectedMenuItem.includes(property) && (
              <CustomMenu.MenuItem
-                renderAs="button"
                className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
                key={property}
                onClick={() => handleOrderBy("-created_at", property)}
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@ -8,8 +8,7 @@ import {
  // ListInlineCreateIssueForm,
  SpreadsheetIssuesColumn,
 } from "components/issues";
-import { CustomMenu } from "components/ui";
-import { Spinner } from "@plane/ui";
+import { CustomMenu, Spinner } from "@plane/ui";
 // types
 import {
  IIssue,
--- a/web/components/issues/main-content.tsx
+++ b/web/components/issues/main-content.tsx
@ -22,9 +22,8 @@ import {
 } from "components/issues";
 import { SubIssuesRoot } from "./sub-issues";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu, LayersIcon } from "@plane/ui";
 // icons
-import { LayersIcon } from "@plane/ui";
 import { MinusCircle } from "lucide-react";
 // types
 import { IIssue, IIssueComment } from "types";
@ -138,8 +137,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                    {siblingIssuesList.map((issue) => (
                      <CustomMenu.MenuItem
                        key={issue.id}
-                        renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
+                        onClick={() =>
+                          router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
+                        }
                        className="flex items-center gap-2 py-2"
                      >
                        <LayersIcon className="h-4 w-4" />
@ -154,7 +154,6 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
                )
              ) : null}
              <CustomMenu.MenuItem
-                renderAs="button"
                onClick={() => submitChanges({ parent: null })}
                className="flex items-center gap-2 text-red-500 py-2"
              >
--- a/web/components/issues/peek-overview/header.tsx
+++ b/web/components/issues/peek-overview/header.tsx
@ -3,9 +3,8 @@ import Link from "next/link";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect, FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
 // icons
-import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
 import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@ -5,7 +5,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 import { User2 } from "lucide-react";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
--- a/web/components/issues/select/estimate.tsx
+++ b/web/components/issues/select/estimate.tsx
@ -1,7 +1,7 @@
 import React from "react";

 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";
 // fetch-keys
--- a/web/components/issues/select/priority.tsx
+++ b/web/components/issues/select/priority.tsx
@ -1,9 +1,7 @@
 import React from "react";

 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "@plane/ui";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
--- a/web/components/issues/select/project.tsx
+++ b/web/components/issues/select/project.tsx
@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
 // icons
--- a/web/components/issues/select/state.tsx
+++ b/web/components/issues/select/state.tsx
@ -7,9 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectStateService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 // icons
-import { DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
 import { Plus } from "lucide-react";
 // helpers
 import { getStatesList } from "helpers/state.helper";
--- a/web/components/issues/sidebar-select/assignee.tsx
+++ b/web/components/issues/sidebar-select/assignee.tsx
@ -7,7 +7,7 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { CustomSearchSelect } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 import { AssigneesList, Avatar } from "components/ui/avatar";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@ -8,8 +8,7 @@ import useSWR, { mutate } from "swr";
 import { IssueService } from "services/issue";
 import { CycleService } from "services/cycle.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, Tooltip } from "@plane/ui";
+import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
--- a/web/components/issues/sidebar-select/estimate.tsx
+++ b/web/components/issues/sidebar-select/estimate.tsx
@ -3,7 +3,7 @@ import React from "react";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect } from "components/ui";
+import { CustomSelect } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";

--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@ -4,8 +4,7 @@ import useSWR, { mutate } from "swr";
 // services
 import { ModuleService } from "services/module.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, Tooltip } from "@plane/ui";
+import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
--- a/web/components/issues/sidebar-select/priority.tsx
+++ b/web/components/issues/sidebar-select/priority.tsx
@ -1,9 +1,7 @@
 import React from "react";

 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { PriorityIcon } from "@plane/ui";
+import { CustomSelect, PriorityIcon } from "@plane/ui";
 // types
 import { TIssuePriorities } from "types";
 // constants
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@ -7,8 +7,7 @@ import useSWR from "swr";
 // services
 import { ProjectStateService } from "services/project";
 // ui
-import { CustomSelect } from "components/ui";
-import { Spinner, StateGroupIcon } from "@plane/ui";
+import { CustomSelect, Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
 import { getStatesList } from "helpers/state.helper";
 import { addSpaceIfCamelCase } from "helpers/string.helper";
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@ -10,8 +10,7 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // types
 import { IUser, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@ -11,7 +11,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { SubIssuesRootList } from "./issues-list";
 import { ProgressBar } from "./progressbar";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // hooks
 import { useProjectMyMembership } from "contexts/project-member.context";
 import useToast from "hooks/use-toast";
--- a/web/components/issues/view-select/assignee.tsx
+++ b/web/components/issues/view-select/assignee.tsx
@ -3,8 +3,8 @@ import { useRouter } from "next/router";
 // services
 import { TrackEventService } from "services/track_event.service";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect, Tooltip } from "@plane/ui";
 import { User2 } from "lucide-react";
 // types
 import { IUser, IIssue } from "types";
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@ -2,8 +2,7 @@ import React from "react";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomSelect, Tooltip } from "@plane/ui";
 // icons
 import { Triangle } from "lucide-react";
 // types
--- a/web/components/issues/view-select/label.tsx
+++ b/web/components/issues/view-select/label.tsx
@ -6,8 +6,7 @@ import { IssueLabelService } from "services/issue";
 // component
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomSearchSelect } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomSearchSelect, Tooltip } from "@plane/ui";
 // icons
 import { Plus, Tag } from "lucide-react";
 // types
--- a/web/components/issues/view-select/priority.tsx
+++ b/web/components/issues/view-select/priority.tsx
@ -3,8 +3,7 @@ import { useRouter } from "next/router";
 // services
 import { TrackEventService } from "services/track_event.service";
 // ui
-import { CustomSelect } from "components/ui";
-import { Tooltip, PriorityIcon } from "@plane/ui";
+import { CustomSelect, Tooltip, PriorityIcon } from "@plane/ui";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@ -9,7 +9,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // services
 import { IssueLabelService } from "services/issue";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
 // types
--- a/web/components/labels/single-label.tsx
+++ b/web/components/labels/single-label.tsx
@ -3,7 +3,7 @@ import React, { useRef, useState } from "react";
 //hook
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 //icons
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@ -4,7 +4,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle } from "lucide-react";
 // fetch-keys
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@ -4,9 +4,9 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
+import { AssigneesList, Avatar } from "components/ui";
 // icons
-import { UserGroupIcon } from "@plane/ui";
+import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";

--- a/web/components/modules/select/status.tsx
+++ b/web/components/modules/select/status.tsx
@ -3,9 +3,7 @@ import React from "react";
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
 // ui
-import { CustomSelect } from "components/ui";
-// icons
-import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
+import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
 import type { IModule } from "types";
 // constants
--- a/web/components/modules/sidebar-select/select-lead.tsx
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@ -4,7 +4,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icons
 import { UserCircle2 } from "lucide-react";
 // fetch-keys
--- a/web/components/modules/sidebar-select/select-members.tsx
+++ b/web/components/modules/sidebar-select/select-members.tsx
@ -7,8 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
-import { UserGroupIcon } from "@plane/ui";
+import { AssigneesList, Avatar } from "components/ui";
+import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
 // icons
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
--- a/web/components/modules/sidebar-select/select-status.tsx
+++ b/web/components/modules/sidebar-select/select-status.tsx
@ -3,8 +3,7 @@ import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
 // ui
-import { DoubleCircleIcon } from "@plane/ui";
-import { CustomSelect } from "components/ui";
+import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
 import { IModule } from "types";
 // common
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@ -14,8 +14,7 @@ import useToast from "hooks/use-toast";
 import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { CustomMenu, CustomSelect } from "components/ui";
-import { Loader, ProgressBar } from "@plane/ui";
+import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
 // icon
 import {
  AlertCircle,
--- a/web/components/modules/single-module-card.tsx
+++ b/web/components/modules/single-module-card.tsx
@ -9,8 +9,8 @@ import useToast from "hooks/use-toast";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList, CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { AssigneesList } from "components/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
 // helpers
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";

 // icons
-import { CustomMenu } from "components/ui";
-import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";

 // helper
@ -219,7 +218,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
            {snoozeOptions.map((item) => (
              <CustomMenu.MenuItem
                key={item.label}
-                renderAs="button"
                onClick={(e) => {
                  e.stopPropagation();

--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@ -1,8 +1,7 @@
 import React from "react";

 // components
-import { CustomMenu } from "components/ui";
-import { ArchiveIcon, Tooltip } from "@plane/ui";
+import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";

 //icon
 import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
@ -102,14 +101,13 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
              </div>
            }
          >
-            <CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}>
+            <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
              <div className="flex items-center gap-2">
                <CheckCheck className="h-3.5 w-3.5" />
                Mark all as read
              </div>
            </CustomMenu.MenuItem>
            <CustomMenu.MenuItem
-              renderAs="button"
              onClick={() => {
                setArchived(false);
                setReadNotification(false);
@ -122,7 +120,6 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
              </div>
            </CustomMenu.MenuItem>
            <CustomMenu.MenuItem
-              renderAs="button"
              onClick={() => {
                setSnoozed(false);
                setReadNotification(false);
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@ -7,8 +7,8 @@ import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { Button } from "@plane/ui";
-import { CustomDatePicker, CustomSelect } from "components/ui";
+import { Button, CustomSelect } from "@plane/ui";
+import { CustomDatePicker } from "components/ui";
 import { X } from "lucide-react";
 // types
 import type { IUserNotification } from "types";
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
 // services
 import { UserService } from "services/user.service";
 // ui
-import { CustomSearchSelect, CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
 // types
 import { IUser } from "types";
 // fetch-keys
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@ -17,8 +17,7 @@ import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
-import { CustomMenu } from "components/ui";
-import { LayersIcon, TextArea } from "@plane/ui";
+import { CustomMenu, LayersIcon, TextArea } from "@plane/ui";
 // icons
 import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
 // helpers
@ -304,7 +303,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                {...provided.dragHandleProps}
              >
                <MoreVertical className="h-4" />
-                <MoreVertical className="-ml-2.5 h-4" />
+                <MoreVertical className="-ml-5 h-4" />
              </button>
              <div
                ref={actionSectionRef}
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@ -7,8 +7,7 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu } from "components/ui";
-import { Tooltip } from "@plane/ui";
+import { CustomMenu, Tooltip } from "@plane/ui";
 // icons
 import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
 // helpers
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@ -10,8 +10,7 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu } from "components/ui";
-import { ToggleSwitch, Tooltip } from "@plane/ui";
+import { CustomMenu, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDown, Kanban, List } from "lucide-react";
 // helpers
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@ -8,8 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, TextArea } from "@plane/ui";
+import { Avatar } from "components/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
--- a/web/components/project/form.tsx
+++ b/web/components/project/form.tsx
@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 // components
 import EmojiIconPicker from "components/emoji-icon-picker";
 import { ImagePickerPopover } from "components/core";
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // types
 import { IProject, IWorkspace } from "types";
 // helpers
--- a/web/components/project/member-select.tsx
+++ b/web/components/project/member-select.tsx
@ -7,7 +7,8 @@ import useSWR from "swr";
 // services
 import { ProjectService } from "services/project";
 // ui
-import { Avatar, CustomSearchSelect } from "components/ui";
+import { Avatar } from "components/ui";
+import { CustomSearchSelect } from "@plane/ui";
 // icon
 import { Ban } from "lucide-react";
 // fetch-keys
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@ -8,8 +8,8 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";

 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/ui";
-import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
+import { Avatar } from "components/ui";
 //icons
 import { ChevronDown, Plus, X } from "lucide-react";
 // services
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
 import { TwitterPicker } from "react-color";
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomMenu, Input } from "@plane/ui";
 // icons
 import { Component, Pencil } from "lucide-react";
 // types
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@ -17,7 +17,6 @@ import {
  LogOut,
  ChevronDown,
 } from "lucide-react";
-import { Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
 // hooks
 import useToast from "hooks/use-toast";
 // helpers
@ -27,7 +26,7 @@ import { IProject } from "types";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { CustomMenu } from "components/ui";
+import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
 import { LeaveProjectModal, DeleteProjectModal } from "components/project";
 import { PublishProjectModal } from "components/project/publish-project";

--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@ -9,8 +9,7 @@ import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, TextArea } from "@plane/ui";
+import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@ -15,8 +15,7 @@ import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input, Tooltip } from "@plane/ui";
+import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
 // types
 import type { IUser, IState, IStateResponse } from "types";
 // fetch-keys
--- a/web/components/views/view-list-item.tsx
+++ b/web/components/views/view-list-item.tsx
@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { DeleteProjectViewModal } from "components/views";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
 // types
--- a/web/components/web-view/comment-card.tsx
+++ b/web/components/web-view/comment-card.tsx
@ -9,7 +9,7 @@ import { FileService } from "services/file.service";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 import { CommentReaction } from "components/issues";
 import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";

@ -155,7 +155,6 @@ export const CommentCard: React.FC<Props> = (props) => {
            <>
              {comment.access === "INTERNAL" ? (
                <CustomMenu.MenuItem
-                  renderAs="button"
                  onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
                  className="flex items-center gap-1"
                >
@ -164,7 +163,6 @@ export const CommentCard: React.FC<Props> = (props) => {
                </CustomMenu.MenuItem>
              ) : (
                <CustomMenu.MenuItem
-                  renderAs="button"
                  onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
                  className="flex items-center gap-1"
                >
--- a/web/components/workspace/completed-issues-graph.tsx
+++ b/web/components/workspace/completed-issues-graph.tsx
@ -1,5 +1,6 @@
 // ui
-import { CustomMenu, LineGraph } from "components/ui";
+import { LineGraph } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // constants
 import { MONTHS } from "constants/project";

--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@ -6,8 +6,7 @@ import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // types
 import { IUser, IWorkspace } from "types";
 // fetch-keys
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@ -7,8 +7,7 @@ import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect } from "components/ui";
-import { Button, Input } from "@plane/ui";
+import { Button, CustomSelect, Input } from "@plane/ui";
 // icons
 import { Plus, X } from "lucide-react";
 // types
--- a/web/components/workspace/views/view-list-item.tsx
+++ b/web/components/workspace/views/view-list-item.tsx
@ -6,7 +6,7 @@ import { useState } from "react";
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
 // ui
-import { CustomMenu } from "components/ui";
+import { CustomMenu } from "@plane/ui";
 // icons
 import { Pencil, Sparkles, Trash2 } from "lucide-react";
 // helpers
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@ -14,8 +14,7 @@ import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { Button, Input, Spinner } from "@plane/ui";
-import { CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
 // icons
 import { User2, UserCircle2 } from "lucide-react";
 // types
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@ -19,8 +19,7 @@ import { CycleService } from "services/cycle.service";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { BreadcrumbItem, Breadcrumbs, ContrastIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, ContrastIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // images
 import emptyCycle from "public/empty-state/cycle.svg";
@ -126,8 +125,7 @@ const SingleCycle: React.FC = () => {
            {cycles?.map((cycle) => (
              <CustomMenu.MenuItem
                key={cycle.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
+                onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
              >
                {truncateText(cycle.name, 40)}
              </CustomMenu.MenuItem>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@ -15,8 +15,7 @@ import { ModuleDetailsSidebar } from "components/modules";
 import { ModuleLayoutRoot } from "components/issues";
 import { ModuleIssuesHeader } from "components/headers";
 // ui
-import { BreadcrumbItem, Breadcrumbs, DiceIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, DiceIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // images
 import emptyModule from "public/empty-state/module.svg";
@ -121,8 +120,7 @@ const SingleModule: React.FC = () => {
            {modules?.map((module) => (
              <CustomMenu.MenuItem
                key={module.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`}
+                onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
              >
                {truncateText(module.name, 40)}
              </CustomMenu.MenuItem>
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@ -28,9 +28,8 @@ import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
-import { CustomSearchSelect } from "components/ui";
 import { EmptyState } from "components/common";
-import { BreadcrumbItem, Breadcrumbs, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // images
 import emptyPage from "public/empty-state/page.svg";
 // icons
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@ -19,8 +19,7 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
 import { MemberSelect } from "components/project";
 import { ProjectSettingHeader } from "components/headers";
 // ui
-import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect } from "components/ui";
+import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@ -11,8 +11,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { ProjectViewLayoutRoot } from "components/issues";
 // ui
-import { BreadcrumbItem, Breadcrumbs, PhotoFilterIcon } from "@plane/ui";
-import { CustomMenu } from "components/ui";
+import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
 import { EmptyState } from "components/common";
 // icons
 // images
@ -77,8 +76,7 @@ const SingleView: React.FC = () => {
          {views?.map((view) => (
            <CustomMenu.MenuItem
              key={view.id}
-              renderAs="a"
-              href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+              onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
            >
              {truncateText(view.name, 40)}
            </CustomMenu.MenuItem>
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@ -20,8 +20,7 @@ import { DeleteWorkspaceModal } from "components/workspace";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { CustomSelect } from "components/ui";
-import { Button, Input, Spinner } from "@plane/ui";
+import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
 // icons
 import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
 // types
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@ -18,8 +18,7 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { WorkspaceSettingHeader } from "components/headers";
 // ui
-import { Button, Loader } from "@plane/ui";
-import { CustomMenu, CustomSelect } from "components/ui";
+import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
 // icons
 import { ChevronDown, X } from "lucide-react";
 // types