АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: миграция простых CustomSelect-пикеров на SelectionDropdown

plane-src/apps/web/ce/components/projects/external-contours/issue-header.tsx

@@ -23,8 +23,9 @@ import {
 } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TExternalContourRequest, TNameDescriptionLoader } from "@plane/types";
-import { ControlLink, CustomSelect, Header, Row, Tooltip } from "@plane/ui";
+import { ControlLink, Header, Row, Tooltip } from "@plane/ui";
 import { copyUrlToClipboard, generateWorkItemLink } from "@plane/utils";
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 import { NameDescriptionUpdateStatus } from "@/components/issues/issue-update-status";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectExternalContoursBoard } from "@/hooks/store/use-project-external-contours-board";
@@ -228,19 +229,20 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
           )}
 
           {currentMode && !embedIssue && (
-            <CustomSelect
-              value={currentMode}
-              onChange={(value: TExternalContourPeekMode) => setPeekMode(value)}
-              customButton={
+            <SelectionDropdown
+              menuButton={
                 <Tooltip tooltipContent={t("common.toggle_peek_view_layout")}>
-                  <button type="button">
+                  <span>
                     <currentMode.icon className="h-4 w-4 text-tertiary hover:text-secondary" />
-                  </button>
+                  </span>
                 </Tooltip>
               }
-            >
-              {PEEK_OPTIONS.map((mode) => (
-                <CustomSelect.Option key={mode.key} value={mode.key}>
+              menuButtonWrapperClassName="flex items-center"
+              options={PEEK_OPTIONS.map((mode) => ({
+                key: mode.key,
+                isChecked: currentMode.key === mode.key,
+                onClick: () => setPeekMode(mode.key),
+                title: (
                   <div
                     className={`flex items-center gap-1.5 ${
                       currentMode.key === mode.key ? "text-secondary" : "text-placeholder hover:text-secondary"
@@ -249,9 +251,9 @@ export const ExternalContoursIssueActionsHeader = observer(function ExternalCont
                     <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
                     {t(mode.i18n_title)}
                   </div>
-                </CustomSelect.Option>
-              ))}
-            </CustomSelect>
+                ),
+              }))}
+            />
           )}
 
           {issue?.project_id && issue.sequence_id && (