From 8fa5de24ebefd9325b27589b2c9c6f4038035e07 Mon Sep 17 00:00:00 2001 From: DCCONSTRUCTIONS Date: Wed, 22 Apr 2026 13:48:28 +0300 Subject: [PATCH] =?UTF-8?q?=D0=90=D0=A0=D0=A5=20-=20=D0=9C=D0=95=D0=96?= =?UTF-8?q?=D0=9F=D0=A0=D0=9E=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A?= =?UTF-8?q?=D0=9E=D0=9C=D0=9C=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98?= =?UTF-8?q?=D0=AF:=20=D0=BC=D0=B8=D0=B3=D1=80=D0=B0=D1=86=D0=B8=D1=8F=20se?= =?UTF-8?q?archable=20select-=D0=BF=D0=B8=D0=BA=D0=B5=D1=80=D0=BE=D0=B2=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BE=D0=B1=D1=89=D0=B8=D0=B9=20=D0=BA=D0=B0?= =?UTF-8?q?=D0=BD=D0=BE=D0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/analytics/select/duration.tsx | 20 ++--- .../components/analytics/select/project.tsx | 8 +- .../automation/auto-close-automation.tsx | 4 +- .../core/components/exporter/export-form.tsx | 4 +- .../core/components/exporter/export-modal.tsx | 4 +- .../components/global/timezone-select.tsx | 4 +- .../integration/github/select-repository.tsx | 4 +- .../components/navigation/project-header.tsx | 8 +- .../core/components/project/member-select.tsx | 4 +- .../project/send-project-invitation-modal.tsx | 11 +-- .../navigation-search-dropdown.tsx | 34 +++----- plane-src/packages/ui/src/dropdowns/index.ts | 1 + .../dropdowns/search-selection-dropdown.tsx | 80 +++++++++++++++++++ 13 files changed, 127 insertions(+), 59 deletions(-) create mode 100644 plane-src/packages/ui/src/dropdowns/search-selection-dropdown.tsx diff --git a/plane-src/apps/web/core/components/analytics/select/duration.tsx b/plane-src/apps/web/core/components/analytics/select/duration.tsx index 695e5c1..2257457 100644 --- 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: ( -
- {option.name} -
- ), + key: option.value, + title: option.name, + isChecked: value === option.value, + onClick: () => onChange(option.value), })); return ( - {value ? ANALYTICS_DURATION_FILTER_OPTIONS.find((opt) => opt.value === value)?.name : placeholder} } + menuButtonWrapperClassName="flex items-center rounded-full border-0 outline-none" /> ); } diff --git a/plane-src/apps/web/core/components/analytics/select/project.tsx b/plane-src/apps/web/core/components/analytics/select/project.tsx index 7bdbbdd..5c1d20a 100644 --- 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 ( - onChange(val)} options={options} className="border-none p-0" - customButton={ + menuButton={
{value && value.length > 3 @@ -63,7 +63,7 @@ export const ProjectSelect = observer(function ProjectSelect(props: Props) {
} - 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 /> ); diff --git a/plane-src/apps/web/core/components/automation/auto-close-automation.tsx b/plane-src/apps/web/core/components/automation/auto-close-automation.tsx index 48c7203..9857511 100644 --- 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")}
- diff --git a/plane-src/apps/web/core/components/exporter/export-form.tsx b/plane-src/apps/web/core/components/exporter/export-form.tsx index 8fde52e..04bb6f8 100644 --- 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 } }) => ( - onChange(val)} options={options} diff --git a/plane-src/apps/web/core/components/exporter/export-modal.tsx b/plane-src/apps/web/core/components/exporter/export-modal.tsx index bf840de..ad0eaa0 100644 --- 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) {
- onChange(val)} options={options} diff --git a/plane-src/apps/web/core/components/global/timezone-select.tsx b/plane-src/apps/web/core/components/global/timezone-select.tsx index a4d692a..44fa2c4 100644 --- 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 (
- { diff --git a/plane-src/apps/web/core/components/navigation/project-header.tsx b/plane-src/apps/web/core/components/navigation/project-header.tsx index 134c8d3..f7534c8 100644 --- 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 ( - : null} + menuButton={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" /> ); }); diff --git a/plane-src/apps/web/core/components/project/member-select.tsx b/plane-src/apps/web/core/components/project/member-select.tsx index 2a9b67f..c299d3a 100644 --- 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 ( - diff --git 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 index 2a06726..f87e842 100644 --- 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 ( - + menuButton={ + <> {value && value !== "" ? (
)}