{
@@ -61,7 +52,7 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
onChange?.(value);
}
}}
- customButton={
+ menuButton={({ open }) => (
<>
{
@@ -92,27 +83,26 @@ export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationS
{(!isLast || showLastChevron) && (
)}
- }
+ )}
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,
+ })
+ }
/>
);
}
diff --git a/plane-src/packages/ui/src/dropdowns/index.ts b/plane-src/packages/ui/src/dropdowns/index.ts
index 7498cf5..fc1800a 100644
--- a/plane-src/packages/ui/src/dropdowns/index.ts
+++ b/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";
diff --git a/plane-src/packages/ui/src/dropdowns/search-selection-dropdown.tsx b/plane-src/packages/ui/src/dropdowns/search-selection-dropdown.tsx
new file mode 100644
index 0000000..c966d74
--- /dev/null
+++ b/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 & {
+ 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 (
+ {
+ setIsOpen(false);
+ onClose?.();
+ }}
+ onOpen={() => {
+ setIsOpen(true);
+ onOpen?.();
+ }}
+ options={renderedOptions}
+ />
+ );
+}