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

plane-src/packages/ui/src/dropdowns/index.ts

@@ -6,6 +6,7 @@
 
 export * from "./context-menu";
 export * from "./action-dropdown";
+export * from "./search-selection-dropdown";
 export * from "./custom-menu";
 export * from "./custom-select";
 export * from "./custom-search-select";

plane-src/packages/ui/src/dropdowns/search-selection-dropdown.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type { ReactNode } from "react";
+import { useMemo, useState } from "react";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { CustomSearchSelect } from "./custom-search-select";
+import type { IDropdownProps } from "./helper";
+
+export type TSearchSelectionDropdownOption = ICustomSearchSelectOption & {
+  shouldRender?: boolean;
+};
+
+type TSearchSelectionDropdownBaseProps = Omit<IDropdownProps, "customButton" | "customButtonClassName"> & {
+  footerOption?: ReactNode;
+  menuButton?: ReactNode | ((props: { open: boolean }) => ReactNode);
+  menuButtonWrapperClassName?: string | ((props: { open: boolean }) => string);
+  noResultsMessage?: string;
+  onChange: (value: any) => void;
+  onClose?: () => void;
+  options?: TSearchSelectionDropdownOption[];
+};
+
+type TSingleValueProps = {
+  multiple?: false;
+  value: any;
+};
+
+type TMultipleValuesProps = {
+  multiple: true;
+  value: any[] | null;
+};
+
+type Props = TSearchSelectionDropdownBaseProps & (TSingleValueProps | TMultipleValuesProps);
+
+export function SearchSelectionDropdown(props: Props) {
+  const {
+    defaultOpen = false,
+    menuButton,
+    menuButtonWrapperClassName,
+    onOpen,
+    onClose,
+    options,
+    ...rest
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const renderedOptions = useMemo(
+    () => options?.filter((option) => option.shouldRender !== false),
+    [options]
+  );
+
+  const resolvedMenuButton = typeof menuButton === "function" ? menuButton({ open: isOpen }) : menuButton;
+  const resolvedMenuButtonWrapperClassName =
+    typeof menuButtonWrapperClassName === "function"
+      ? menuButtonWrapperClassName({ open: isOpen })
+      : menuButtonWrapperClassName;
+
+  return (
+    <CustomSearchSelect
+      {...rest}
+      customButton={resolvedMenuButton}
+      customButtonClassName={menuButton ? resolvedMenuButtonWrapperClassName : undefined}
+      defaultOpen={defaultOpen}
+      onClose={() => {
+        setIsOpen(false);
+        onClose?.();
+      }}
+      onOpen={() => {
+        setIsOpen(true);
+        onOpen?.();
+      }}
+      options={renderedOptions}
+    />
+  );
+}