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

plane-src/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx

@@ -5,9 +5,8 @@
  */
 
 import * as React from "react";
-import { useState } from "react";
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { CustomSearchSelect } from "../dropdowns";
+import { SearchSelectionDropdown } from "../dropdowns";
 import { cn } from "../utils";
 import { Breadcrumbs } from "./breadcrumbs";
 
@@ -42,18 +41,10 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
     rotateChevronWhenLast = true,
     showLastChevron = true,
   } = props;
-  // state
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const shouldOpenOnItemClick = openOnLabelClick || !handleOnClick;
 
   return (
-    <CustomSearchSelect
-      onOpen={() => {
-        setIsDropdownOpen(true);
-      }}
-      onClose={() => {
-        setIsDropdownOpen(false);
-      }}
+    <SearchSelectionDropdown
       options={navigationItems}
       value={selectedItem}
       onChange={(value: string) => {
@@ -61,7 +52,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
           onChange?.(value);
         }
       }}
-      customButton={
+      menuButton={({ open }) => (
         <>
           <div
             onClick={(e) => {
@@ -92,27 +83,26 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
           {(!isLast || showLastChevron) && (
             <Breadcrumbs.Separator
               className={cn("rounded-r-sm", {
-                "bg-layer-1": isDropdownOpen && !isLast,
+                "bg-layer-1": open && !isLast,
                 "hover:bg-layer-1": !isLast,
               })}
               containerClassName="p-0"
               iconClassName={cn("group-hover:rotate-90 hover:text-primary", {
-                "text-primary": isDropdownOpen,
-                "rotate-90": isDropdownOpen || (isLast && rotateChevronWhenLast),
+                "text-primary": open,
+                "rotate-90": open || (isLast && rotateChevronWhenLast),
               })}
               showDivider={!isLast}
             />
           )}
         </>
-      }
+      )}
       disabled={navigationDisabled}
       className="h-full rounded-sm"
-      customButtonClassName={cn(
-        "group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2",
-        {
-          "bg-surface-2": isDropdownOpen,
-        }
-      )}
+      menuButtonWrapperClassName={({ open }) =>
+        cn("group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2", {
+          "bg-surface-2": open,
+        })
+      }
     />
   );
 }