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
2026-02-21 06:11:50 -06:00 · 2023-10-19 15:24:51 +05:30
parent 0b8367a262
commit c0793ec8a5
91 changed files with 681 additions and 194 deletions
--- 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