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

2026-04-22 13:48:28 +03:00 · 2026-04-22 13:48:28 +03:00 · 8fa5de24eb
parent a49e18d0e5
commit 8fa5de24eb
13 changed files with 127 additions and 59 deletions
--- a/plane-src/apps/web/core/components/analytics/select/duration.tsx
+++ b/plane-src/apps/web/core/components/analytics/select/duration.tsx
@ -11,8 +11,8 @@ import { Calendar } from "lucide-react";
 // plane package imports
 import { ANALYTICS_DURATION_FILTER_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { CustomSearchSelect } from "@plane/ui";
 // types
+import { SelectionDropdown } from "@/components/common/selection-dropdown";
 import type { TDropdownProps } from "@/components/dropdowns/types";

 type Props = TDropdownProps & {
@ -31,25 +31,21 @@ function DurationDropdown({ placeholder = "Duration", onChange, value }: Props)
  useTranslation();

  const options = ANALYTICS_DURATION_FILTER_OPTIONS.map((option) => ({
-    value: option.value,
-    query: option.name,
-    content: (
-      <div className="flex max-w-[300px] items-center gap-2">
-        <span className="flex-grow truncate">{option.name}</span>
-      </div>
-    ),
+    key: option.value,
+    title: option.name,
+    isChecked: value === option.value,
+    onClick: () => onChange(option.value),
  }));
  return (
-    <CustomSearchSelect
-      value={value ? [value] : []}
-      onChange={onChange}
+    <SelectionDropdown
      options={options}
-      label={
+      menuButton={
        <div className="flex items-center gap-2 p-1">
          <Calendar className="h-4 w-4" />
          {value ? ANALYTICS_DURATION_FILTER_OPTIONS.find((opt) => opt.value === value)?.name : placeholder}
        </div>
      }
+      menuButtonWrapperClassName="flex items-center rounded-full border-0 outline-none"
    />
  );
 }
--- a/plane-src/apps/web/core/components/analytics/select/project.tsx
+++ b/plane-src/apps/web/core/components/analytics/select/project.tsx
@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 import { getButtonStyling } from "@plane/propel/button";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ChevronDownIcon, ProjectIcon } from "@plane/propel/icons";
-import { CustomSearchSelect } from "@plane/ui";
+import { SearchSelectionDropdown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@ -44,12 +44,12 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
  });

  return (
-    <CustomSearchSelect
+    <SearchSelectionDropdown
      value={value ?? []}
      onChange={(val: string[]) => onChange(val)}
      options={options}
      className="border-none p-0"
-      customButton={
+      menuButton={
        <div className={cn(getButtonStyling("secondary", "lg"), "gap-2")}>
          <ProjectIcon className="h-4 w-4" />
          {value && value.length > 3
@ -63,7 +63,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
          <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
        </div>
      }
-      customButtonClassName="border-none p-0 bg-transparent hover:bg-transparent w-auto h-auto"
+      menuButtonWrapperClassName="h-auto w-auto border-none bg-transparent p-0 hover:bg-transparent"
      multiple
    />
  );
--- a/plane-src/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/plane-src/apps/web/core/components/automation/auto-close-automation.tsx
@ -13,7 +13,7 @@ import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel, EIc
 import { useTranslation } from "@plane/i18n";
 import { StateGroupIcon, StatePropertyIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
-import { CustomSelect, CustomSearchSelect, ToggleSwitch, Loader } from "@plane/ui";
+import { CustomSelect, Loader, SearchSelectionDropdown, ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "@/components/automation";
 import { SettingsControlItem } from "@/components/settings/control-item";
 // hooks
@ -151,7 +151,7 @@ export const AutoCloseAutomation = observer(function AutoCloseAutomation(props:
                    {t("project_settings.automations.auto-close.auto_close_status")}
                  </div>
                  <div className="w-1/2">
-                    <CustomSearchSelect
+                    <SearchSelectionDropdown
                      value={currentProjectDetails?.default_state ?? defaultState}
                      label={
                        <div className="flex items-center gap-2">
--- a/plane-src/apps/web/core/components/exporter/export-form.tsx
+++ b/plane-src/apps/web/core/components/exporter/export-form.tsx
@ -21,7 +21,7 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 // import { Tooltip } from "@plane/propel/tooltip";
 // import { EIssuesStoreType } from "@plane/types";
 import type { TWorkItemFilterExpression } from "@plane/types";
-import { CustomSearchSelect, CustomSelect } from "@plane/ui";
+import { CustomSelect, SearchSelectionDropdown } from "@plane/ui";
 // import { WorkspaceLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/workspace-level";
 // import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
 import { useProject } from "@/hooks/store/use-project";
@ -155,7 +155,7 @@ export const ExportForm = observer(function ExportForm(props: Props) {
              name="project"
              disabled={!isMember && (!hasProjects || !canPerformAnyCreateAction)}
              render={({ field: { value, onChange } }) => (
-                <CustomSearchSelect
+                <SearchSelectionDropdown
                  value={value ?? []}
                  onChange={(val: string[]) => onChange(val)}
                  options={options}
--- a/plane-src/apps/web/core/components/exporter/export-modal.tsx
+++ b/plane-src/apps/web/core/components/exporter/export-modal.tsx
@ -14,7 +14,7 @@ import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IImporterService } from "@plane/types";
 // ui
-import { Checkbox, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Checkbox, EModalPosition, EModalWidth, ModalCore, SearchSelectionDropdown } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUser } from "@/hooks/store/user";
@ -122,7 +122,7 @@ export const Exporter = observer(function Exporter(props: Props) {
          </span>
        </div>
        <div>
-          <CustomSearchSelect
+          <SearchSelectionDropdown
            value={value ?? []}
            onChange={(val: string[]) => onChange(val)}
            options={options}
--- a/plane-src/apps/web/core/components/global/timezone-select.tsx
+++ b/plane-src/apps/web/core/components/global/timezone-select.tsx
@ -6,7 +6,7 @@

 import { observer } from "mobx-react";
 // plane imports
-import { CustomSearchSelect } from "@plane/ui";
+import { SearchSelectionDropdown } from "@plane/ui";
 import { cn } from "@plane/utils";
 // hooks
 import useTimezone from "@/hooks/use-timezone";
@ -39,7 +39,7 @@ export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneS

  return (
    <div>
-      <CustomSearchSelect
+      <SearchSelectionDropdown
        value={value}
        label={value && selectedValue ? selectedValue(value) : label}
        options={isDisabled || disabled ? [] : timezones}
--- a/plane-src/apps/web/core/components/integration/github/select-repository.tsx
+++ b/plane-src/apps/web/core/components/integration/github/select-repository.tsx
@ -10,7 +10,7 @@ import useSWRInfinite from "swr/infinite";
 import type { IWorkspaceIntegration } from "@plane/types";
 // services
 // ui
-import { CustomSearchSelect } from "@plane/ui";
+import { SearchSelectionDropdown } from "@plane/ui";
 // helpers
 import { truncateText } from "@plane/utils";
 import { ProjectService } from "@/services/project";
@ -62,7 +62,7 @@ export function SelectRepository(props: Props) {
  if (userRepositories.length < 1) return null;

  return (
-    <CustomSearchSelect
+    <SearchSelectionDropdown
      value={value}
      options={options}
      onChange={(val: string) => {
--- a/plane-src/apps/web/core/components/navigation/project-header.tsx
+++ b/plane-src/apps/web/core/components/navigation/project-header.tsx
@ -9,7 +9,7 @@ import { observer } from "mobx-react";
 // plane imports
 import { ProjectIcon } from "@plane/propel/icons";
 import type { ICustomSearchSelectOption } from "@plane/types";
-import { CustomSearchSelect } from "@plane/ui";
+import { SearchSelectionDropdown } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
@ -100,13 +100,13 @@ export const ProjectHeader = observer(function ProjectHeader(props: TProjectHead
  if (!currentProjectDetails) return null;

  return (
-    <CustomSearchSelect
+    <SearchSelectionDropdown
      options={switcherOptions}
      value={currentProjectDetails.id}
      onChange={handleProjectChange}
-      customButton={currentProjectDetails ? <ProjectHeaderButton project={currentProjectDetails} /> : null}
+      menuButton={currentProjectDetails ? <ProjectHeaderButton project={currentProjectDetails} /> : null}
      className="h-full rounded"
-      customButtonClassName="group flex items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full"
+      menuButtonWrapperClassName="group flex h-full cursor-pointer items-center gap-0.5 rounded-sm outline-none hover:bg-surface-2"
    />
  );
 });
--- a/plane-src/apps/web/core/components/project/member-select.tsx
+++ b/plane-src/apps/web/core/components/project/member-select.tsx
@ -11,7 +11,7 @@ import { Ban } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { EUserProjectRoles } from "@plane/types";
 // plane ui
-import { Avatar, CustomSearchSelect } from "@plane/ui";
+import { Avatar, SearchSelectionDropdown } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@ -62,7 +62,7 @@ export const MemberSelect = observer(function MemberSelect(props: Props) {
  const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null;

  return (
-    <CustomSearchSelect
+    <SearchSelectionDropdown
      value={value}
      label={
        <div className="flex h-3.5 items-center gap-2">
--- a/plane-src/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/plane-src/apps/web/core/components/project/send-project-invitation-modal.tsx
@ -13,7 +13,7 @@ import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { PlusIcon, CloseIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Avatar, CustomSelect, CustomSearchSelect, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { Avatar, CustomSelect, EModalPosition, EModalWidth, ModalCore, SearchSelectionDropdown } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
@ -193,10 +193,10 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                    render={({ field: { value, onChange } }) => {
                      const selectedMember = getWorkspaceMemberDetails(value);
                      return (
-                        <CustomSearchSelect
+                        <SearchSelectionDropdown
                          value={value}
-                          customButton={
-                            <button className="shadow-sm flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
+                          menuButton={
+                            <>
                              {value && value !== "" ? (
                                <div className="flex items-center gap-2">
                                  <Avatar
@ -211,8 +211,9 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
                                </div>
                              )}
                              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                            </button>
+                            </>
                          }
+                          menuButtonWrapperClassName="shadow-sm flex w-full items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none"
                          onChange={(val: string) => {
                            onChange(val);
                            // Update the role to the workspace role when member ID changes
--- a/plane-src/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
+++ b/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,
+        })
+      }
    />
  );
 }
--- 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";
--- a/plane-src/packages/ui/src/dropdowns/search-selection-dropdown.tsx
+++ 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<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}
+    />
+  );
+}