АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: миграция form и settings select-пикеров на SelectionDropdown

plane-src/apps/web/ce/components/projects/create/attributes.tsx

@@ -9,7 +9,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import type { IProject } from "@plane/types";
-import { CustomSelect } from "@plane/ui";
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 import { getTabIndex } from "@plane/utils";
 // components
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
@@ -36,10 +36,22 @@ function ProjectAttributes(props: Props) {
 
           return (
             <div className="h-7 flex-shrink-0" tabIndex={getIndex("network")}>
-              <CustomSelect
-                value={value}
-                onChange={onChange}
-                label={
+              <SelectionDropdown
+                options={NETWORK_CHOICES.map((network) => ({
+                  key: String(network.key),
+                  title: (
+                    <div className="flex items-start gap-2">
+                      <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
+                      <div className="-mt-1">
+                        <p>{t(network.i18n_label)}</p>
+                        <p className="text-11 text-placeholder">{t(network.description)}</p>
+                      </div>
+                    </div>
+                  ),
+                  isChecked: value === network.key,
+                  onClick: () => onChange(network.key),
+                }))}
+                menuButton={
                   <div className="flex h-full items-center gap-1">
                     {currentNetwork ? (
                       <>
@@ -52,23 +64,9 @@ function ProjectAttributes(props: Props) {
                   </div>
                 }
                 placement="bottom-start"
-                className="h-10"
-                buttonClassName={projectAttributeChipClassName}
-                noChevron
+                menuButtonWrapperClassName={projectAttributeChipClassName}
                 tabIndex={getIndex("network")}
-              >
-                {NETWORK_CHOICES.map((network) => (
-                  <CustomSelect.Option key={network.key} value={network.key}>
-                    <div className="flex items-start gap-2">
-                      <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
-                      <div className="-mt-1">
-                        <p>{t(network.i18n_label)}</p>
-                        <p className="text-11 text-placeholder">{t(network.description)}</p>
-                      </div>
-                    </div>
-                  </CustomSelect.Option>
-                ))}
-              </CustomSelect>
+              />
             </div>
           );
         }}