UI - TASKER: stabilize member controls
This commit is contained in:
DCCONSTRUCTIONS
parent
4ffcd64ddc
commit
854a596149
|
|
@ -11,7 +11,7 @@ import type { IWorkspaceMember, TProjectMembership } from "@plane/types";
|
|||
import { renderFormattedDate } from "@plane/utils";
|
||||
// components
|
||||
import { MemberHeaderColumn } from "@/components/project/member-header-column";
|
||||
import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
|
||||
import { AccountTypeColumn, NameColumn, ProjectMemberActionsColumn } from "@/components/project/settings/member-columns";
|
||||
// hooks
|
||||
import { useMember } from "@/hooks/store/use-member";
|
||||
import { useUser, useUserPermissions } from "@/hooks/store/user";
|
||||
|
|
@ -21,6 +21,9 @@ export interface RowData extends Pick<TProjectMembership, "original_role"> {
|
|||
member: IWorkspaceMember;
|
||||
}
|
||||
|
||||
const stickyNameHeaderClassName = "nodedc-settings-table-sticky left-0 z-20 min-w-max";
|
||||
const stickyNameCellClassName = "nodedc-settings-table-sticky left-0 z-10 min-w-max";
|
||||
|
||||
type TUseProjectColumnsProps = {
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
|
|
@ -60,13 +63,16 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
|
|||
{
|
||||
key: "Full Name",
|
||||
content: "Full name",
|
||||
thClassName: "text-left",
|
||||
thClassName: stickyNameHeaderClassName,
|
||||
tdClassName: stickyNameCellClassName,
|
||||
thRender: () => (
|
||||
<MemberHeaderColumn
|
||||
property="full_name"
|
||||
displayFilters={displayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
/>
|
||||
<div className="w-max min-w-[8.5rem] pr-3">
|
||||
<MemberHeaderColumn
|
||||
property="full_name"
|
||||
displayFilters={displayFilters}
|
||||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
tdRender: (rowData: RowData) => (
|
||||
<NameColumn
|
||||
|
|
@ -88,7 +94,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
|
|||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
/>
|
||||
),
|
||||
tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
|
||||
tdRender: (rowData: RowData) => <div className="min-w-[7.5rem] pr-3">{rowData.member.display_name}</div>,
|
||||
},
|
||||
{
|
||||
key: "Email",
|
||||
|
|
@ -100,7 +106,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
|
|||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
/>
|
||||
),
|
||||
tdRender: (rowData: RowData) => <div className="w-48 text-secondary">{rowData.member.email}</div>,
|
||||
tdRender: (rowData: RowData) => <div className="min-w-[10.5rem] pr-3 text-secondary">{rowData.member.email}</div>,
|
||||
},
|
||||
{
|
||||
key: "Account Type",
|
||||
|
|
@ -131,7 +137,22 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
|
|||
handleDisplayFilterUpdate={handleDisplayFilterUpdate}
|
||||
/>
|
||||
),
|
||||
tdRender: (rowData: RowData) => <div>{renderFormattedDate(rowData?.member?.joining_date)}</div>,
|
||||
tdRender: (rowData: RowData) => (
|
||||
<div className="min-w-[7rem] pr-3">{renderFormattedDate(rowData?.member?.joining_date)}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: "Actions",
|
||||
content: <span className="sr-only">Действия</span>,
|
||||
tdRender: (rowData: RowData) => (
|
||||
<ProjectMemberActionsColumn
|
||||
rowData={rowData}
|
||||
workspaceSlug={workspaceSlug}
|
||||
isAdmin={isAdmin}
|
||||
currentUser={currentUser}
|
||||
setRemoveMemberModal={setRemoveMemberModal}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -77,16 +77,19 @@ export const ProjectMemberListItem = observer(function ProjectMemberListItem(pro
|
|||
onSubmit={() => handleRemove(removeMemberModal.member.id)}
|
||||
/>
|
||||
)}
|
||||
<Table
|
||||
columns={columns}
|
||||
data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
|
||||
keyExtractor={(rowData) => rowData?.member.id ?? ""}
|
||||
tHeadClassName="border-b border-subtle"
|
||||
thClassName="text-left font-medium divide-x-0 text-placeholder"
|
||||
tBodyClassName="divide-y-0"
|
||||
tBodyTrClassName="divide-x-0 p-4 h-[40px] text-secondary"
|
||||
tHeadTrClassName="divide-x-0"
|
||||
/>
|
||||
<div className="horizontal-scrollbar scrollbar-sm w-full overflow-x-auto overflow-y-hidden rounded-[1.2rem]">
|
||||
<Table
|
||||
columns={columns}
|
||||
data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
|
||||
keyExtractor={(rowData) => rowData?.member.id ?? ""}
|
||||
tableClassName="nodedc-settings-table-surface w-max table-auto border-separate border-spacing-0 overflow-visible"
|
||||
tHeadClassName="border-b border-white/6"
|
||||
thClassName="text-left font-medium divide-x-0 text-placeholder"
|
||||
tBodyClassName="divide-y-0"
|
||||
tBodyTrClassName="divide-x-0 h-11 px-4 text-secondary"
|
||||
tHeadTrClassName="divide-x-0"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ export const ProjectMemberList = observer(function ProjectMemberList(props: TPro
|
|||
{!projectMemberIds ? (
|
||||
<MembersSettingsLoader />
|
||||
) : (
|
||||
<div className="nodedc-settings-card overflow-scroll px-1 py-1">
|
||||
<div className="nodedc-settings-card overflow-hidden px-1 py-1">
|
||||
{searchedProjectMembers.length !== 0 && (
|
||||
<ProjectMemberListItem
|
||||
memberDetails={memberDetails ?? []}
|
||||
|
|
|
|||
|
|
@ -54,8 +54,8 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
// store hooks
|
||||
const { getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
|
||||
const {
|
||||
project: { getProjectMemberDetails, bulkAddMembersToProject },
|
||||
workspace: { workspaceMemberIds, getWorkspaceMemberDetails },
|
||||
project: { getProjectMemberDetails, bulkAddMembersToProject, fetchProjectMembers },
|
||||
workspace: { workspaceMemberIds, getWorkspaceMemberDetails, fetchWorkspaceMembers },
|
||||
} = useMember();
|
||||
// form info
|
||||
const {
|
||||
|
|
@ -78,6 +78,15 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
return !isInvited;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen || !workspaceSlug || !projectId) return;
|
||||
|
||||
void Promise.all([
|
||||
fetchWorkspaceMembers(workspaceSlug.toString()),
|
||||
fetchProjectMembers(workspaceSlug.toString(), projectId.toString(), true),
|
||||
]).catch(console.error);
|
||||
}, [fetchProjectMembers, fetchWorkspaceMembers, isOpen, projectId, workspaceSlug]);
|
||||
|
||||
const onSubmit = async (formData: FormValues) => {
|
||||
if (!workspaceSlug || !projectId || isSubmitting) return;
|
||||
|
||||
|
|
@ -133,19 +142,22 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
const memberDetails = getWorkspaceMemberDetails(userId);
|
||||
|
||||
if (!memberDetails?.member) return;
|
||||
|
||||
const displayName = memberDetails.member.display_name || memberDetails.member.email || "";
|
||||
const fullName = [memberDetails.member.first_name, memberDetails.member.last_name].filter(Boolean).join(" ");
|
||||
const secondaryLabel = fullName && fullName !== displayName ? ` (${fullName})` : "";
|
||||
|
||||
return {
|
||||
value: `${memberDetails?.member.id}`,
|
||||
query: `${memberDetails?.member.first_name} ${
|
||||
memberDetails?.member.last_name
|
||||
} ${memberDetails?.member.display_name.toLowerCase()}`,
|
||||
value: `${memberDetails.member.id}`,
|
||||
query: `${displayName} ${fullName} ${memberDetails.member.email ?? ""}`.toLowerCase(),
|
||||
content: (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="shrink-0 pt-0.5">
|
||||
<Avatar name={memberDetails?.member.display_name} src={getFileURL(memberDetails?.member.avatar_url)} />
|
||||
<Avatar name={displayName} src={getFileURL(memberDetails.member.avatar_url)} />
|
||||
</div>
|
||||
<div className="truncate">
|
||||
{memberDetails?.member.display_name} (
|
||||
{memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
|
||||
{displayName}
|
||||
{secondaryLabel}
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
|
|
@ -226,8 +238,9 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
EUserPermissions[newValue as keyof typeof EUserPermissions]
|
||||
);
|
||||
}}
|
||||
noResultsMessage="Нет доступных участников workspace"
|
||||
options={options}
|
||||
optionsClassName="w-48"
|
||||
optionsClassName="min-w-[24rem]"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
|
@ -249,25 +262,29 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
<SelectionDropdown
|
||||
options={Object.entries(checkCurrentOptionWorkspaceRole(watch(`members.${index}.member_id`)))
|
||||
.filter(([key]) => parseInt(key) <= (currentProjectRole ?? EUserPermissions.GUEST))
|
||||
.map(([key, label]) => ({
|
||||
key,
|
||||
title: label,
|
||||
isChecked: String(field.value) === key,
|
||||
onClick: () =>
|
||||
setValue(
|
||||
`members.${index}.role`,
|
||||
EUserPermissions[ROLE[parseInt(key)].toUpperCase() as keyof typeof EUserPermissions]
|
||||
),
|
||||
}))}
|
||||
.map(([key, label]) => {
|
||||
const roleKey = parseInt(key) as keyof typeof ROLE;
|
||||
|
||||
return {
|
||||
key,
|
||||
title: label,
|
||||
isChecked: String(field.value) === key,
|
||||
onClick: () =>
|
||||
setValue(
|
||||
`members.${index}.role`,
|
||||
EUserPermissions[ROLE[roleKey].toUpperCase() as keyof typeof EUserPermissions]
|
||||
),
|
||||
};
|
||||
})}
|
||||
menuButton={
|
||||
<div className="shadow-sm flex w-24 items-center justify-between gap-1 rounded-md border border-subtle px-3 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
|
||||
<div className="shadow-sm flex min-w-[7.5rem] items-center justify-between gap-1 rounded-md border border-subtle px-4 py-2.5 text-left text-13 text-secondary duration-300 hover:bg-layer-1 hover:text-primary focus:outline-none">
|
||||
<span className="capitalize">
|
||||
{field.value ? ROLE[field.value] : t("project_invitation_modal.select_role")}
|
||||
</span>
|
||||
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
|
||||
</div>
|
||||
}
|
||||
menuButtonWrapperClassName="w-24"
|
||||
menuButtonWrapperClassName="min-w-[7.5rem]"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -302,10 +319,10 @@ export const SendProjectInvitationModal = observer(function SendProjectInvitatio
|
|||
{t("common.add_more")}
|
||||
</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="secondary" size="lg" onClick={handleClose}>
|
||||
<Button variant="secondary" size="lg" onClick={handleClose} className="min-w-[7.5rem] px-6">
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
|
||||
<Button variant="primary" size="lg" type="submit" loading={isSubmitting} className="min-w-[12rem] px-6">
|
||||
{isSubmitting
|
||||
? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
|
||||
: `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
|
||||
|
|
|
|||
|
|
@ -7,14 +7,12 @@
|
|||
import { observer } from "mobx-react";
|
||||
import Link from "next/link";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { CircleMinus } from "lucide-react";
|
||||
import { Disclosure } from "@headlessui/react";
|
||||
// plane imports
|
||||
import { ROLE, EUserPermissions, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
|
||||
import { ChevronDownIcon, TrashIcon } from "@plane/propel/icons";
|
||||
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
|
||||
import type { EUserProjectRoles, IUser, IWorkspaceMember, TProjectMembership } from "@plane/types";
|
||||
import { ActionDropdown } from "@plane/ui";
|
||||
import { getFileURL } from "@plane/utils";
|
||||
import { cn, getFileURL } from "@plane/utils";
|
||||
import { SelectionDropdown } from "@/components/common/selection-dropdown";
|
||||
// hooks
|
||||
import { useMember } from "@/hooks/store/use-member";
|
||||
|
|
@ -39,61 +37,69 @@ type AccountTypeProps = {
|
|||
projectId: string;
|
||||
};
|
||||
|
||||
const PROJECT_ROLE_LABELS: Record<EUserPermissions, string> = {
|
||||
[EUserPermissions.GUEST]: "Гость",
|
||||
[EUserPermissions.MEMBER]: "Участник",
|
||||
[EUserPermissions.ADMIN]: "Админ",
|
||||
};
|
||||
|
||||
const getProjectRoleLabel = (role: EUserPermissions | EUserProjectRoles | undefined) => {
|
||||
const normalizedRole = Number(role) as EUserPermissions;
|
||||
return role ? (PROJECT_ROLE_LABELS[normalizedRole] ?? "Не назначено") : "Не назначено";
|
||||
};
|
||||
|
||||
export function NameColumn(props: NameProps) {
|
||||
const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
|
||||
const { rowData, workspaceSlug } = props;
|
||||
// derived values
|
||||
const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
|
||||
const fullName = [first_name, last_name].filter(Boolean).join(" ") || display_name || email;
|
||||
|
||||
return (
|
||||
<Disclosure>
|
||||
{({}) => (
|
||||
<div className="group relative">
|
||||
<div className="flex w-72 items-center gap-2">
|
||||
<div className="flex flex-1 items-center gap-x-2 gap-y-2">
|
||||
{avatar_url && avatar_url.trim() !== "" ? (
|
||||
<Link href={`/${workspaceSlug}/profile/${id}`}>
|
||||
<span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
|
||||
<img
|
||||
src={getFileURL(avatar_url)}
|
||||
className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
|
||||
alt={display_name || email}
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/${workspaceSlug}/profile/${id}`}>
|
||||
<span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-on-color capitalize">
|
||||
{(email ?? display_name ?? "?")[0]}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
{first_name} {last_name}
|
||||
</div>
|
||||
{(isAdmin || id === currentUser?.id) && (
|
||||
<ActionDropdown
|
||||
placement="bottom-end"
|
||||
buttonClassName="p-0.5 opacity-0 transition-opacity group-hover:opacity-100"
|
||||
items={[
|
||||
{
|
||||
key: "remove-member",
|
||||
action: () => setRemoveMemberModal(rowData),
|
||||
customContent: (
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-x-1 font-medium text-danger-primary"
|
||||
data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
|
||||
>
|
||||
<CircleMinus className="size-3.5 flex-shrink-0" />
|
||||
{rowData.member?.id === currentUser?.id ? "Leave " : "Remove "}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-max min-w-[8.5rem] items-center gap-x-2 gap-y-2 pr-3">
|
||||
{avatar_url && avatar_url.trim() !== "" ? (
|
||||
<Link href={`/${workspaceSlug}/profile/${id}`}>
|
||||
<span className="relative flex size-6 items-center justify-center rounded-full text-on-color capitalize">
|
||||
<img
|
||||
src={getFileURL(avatar_url)}
|
||||
className="absolute top-0 left-0 h-full w-full rounded-full object-cover"
|
||||
alt={display_name || email}
|
||||
/>
|
||||
</span>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={`/${workspaceSlug}/profile/${id}`}>
|
||||
<span className="relative flex size-6 items-center justify-center rounded-full bg-layer-3 text-11 text-tertiary capitalize">
|
||||
{(email ?? display_name ?? "?")[0]}
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
</Disclosure>
|
||||
<span className="truncate">{fullName}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProjectMemberActionsColumn(props: NameProps) {
|
||||
const { rowData, isAdmin, currentUser, setRemoveMemberModal } = props;
|
||||
const { display_name, email, id } = rowData.member;
|
||||
const canRemoveMember = isAdmin || id === currentUser?.id;
|
||||
const isCurrentUser = id === currentUser?.id;
|
||||
const label = isCurrentUser ? "Покинуть проект" : `Удалить ${display_name || email}`;
|
||||
|
||||
return (
|
||||
<div className="flex w-12 justify-end">
|
||||
{canRemoveMember && (
|
||||
<button
|
||||
aria-label={label}
|
||||
className="nodedc-external-icon-button"
|
||||
data-ph-element={MEMBER_TRACKER_ELEMENTS.PROJECT_MEMBER_TABLE_CONTEXT_MENU}
|
||||
title={label}
|
||||
type="button"
|
||||
onClick={() => setRemoveMemberModal(rowData)}
|
||||
>
|
||||
<TrashIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -112,7 +118,7 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
|
|||
formState: { errors },
|
||||
} = useForm();
|
||||
// derived values
|
||||
const roleLabel = ROLE[rowData.original_role ?? EUserPermissions.GUEST];
|
||||
const roleLabel = getProjectRoleLabel(rowData.original_role ?? EUserPermissions.GUEST);
|
||||
const isCurrentUser = currentUser?.id === rowData.member.id;
|
||||
const isRowDataWorkspaceAdmin = [EUserPermissions.ADMIN].includes(
|
||||
Number(getWorkspaceMemberDetails(rowData.member.id)?.role) ?? EUserPermissions.GUEST
|
||||
|
|
@ -154,39 +160,55 @@ export const AccountTypeColumn = observer(function AccountTypeColumn(props: Acco
|
|||
rules={{ required: "Role is required." }}
|
||||
render={() => (
|
||||
<SelectionDropdown
|
||||
options={Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key, label]) => ({
|
||||
key,
|
||||
title: label,
|
||||
isChecked: String(rowData.original_role) === key,
|
||||
onClick: async () => {
|
||||
if (!workspaceSlug) return;
|
||||
await updateMemberRole(workspaceSlug.toString(), projectId.toString(), rowData.member.id, key).catch(
|
||||
(err) => {
|
||||
dropdownClassName="!p-2"
|
||||
dropdownContentClassName="!w-44"
|
||||
options={Object.entries(checkCurrentOptionWorkspaceRole(rowData.member.id)).map(([key]) => {
|
||||
const role = Number(key) as EUserPermissions;
|
||||
|
||||
return {
|
||||
key,
|
||||
title: getProjectRoleLabel(role),
|
||||
isChecked: String(rowData.original_role) === key,
|
||||
onClick: async () => {
|
||||
if (!workspaceSlug) return;
|
||||
await updateMemberRole(
|
||||
workspaceSlug.toString(),
|
||||
projectId.toString(),
|
||||
rowData.member.id,
|
||||
Number(key) as EUserProjectRoles
|
||||
).catch((err) => {
|
||||
console.log(err, "err");
|
||||
const error = err.error;
|
||||
const errorString = Array.isArray(error) ? error[0] : error;
|
||||
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "You can’t change this role yet.",
|
||||
message: errorString ?? "An error occurred while updating member role. Please try again.",
|
||||
title: "Ошибка",
|
||||
message: errorString ?? "Не удалось обновить роль участника. Попробуйте ещё раз.",
|
||||
});
|
||||
}
|
||||
);
|
||||
},
|
||||
}))}
|
||||
menuButton={
|
||||
<div className="flex">
|
||||
<span>{roleLabel}</span>
|
||||
});
|
||||
},
|
||||
};
|
||||
})}
|
||||
menuButton={({ open }) => (
|
||||
<div
|
||||
className={cn(
|
||||
"nodedc-settings-chip flex min-h-10 min-w-[9rem] items-center justify-between gap-2 px-4 py-2 text-caption-sm-medium",
|
||||
errors.role ? "border-danger-strong" : ""
|
||||
)}
|
||||
>
|
||||
<span className="truncate">{roleLabel}</span>
|
||||
<ChevronDownIcon className={cn("h-3 w-3 transition-transform", open ? "rotate-180" : "")} />
|
||||
</div>
|
||||
}
|
||||
menuButtonWrapperClassName={`w-32 rounded-md p-0 !justify-start !px-0 hover:bg-surface-1 ${errors.role ? "border-danger-strong" : "border-none"}`}
|
||||
)}
|
||||
menuButtonWrapperClassName="flex rounded-[1.25rem] border-0 outline-none"
|
||||
placement="bottom-end"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex w-32">
|
||||
<span>{roleLabel}</span>
|
||||
<div className="nodedc-settings-chip flex min-h-10 min-w-[9rem] items-center px-4 py-2 text-caption-sm-medium">
|
||||
<span className="truncate">{roleLabel}</span>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export function CustomSearchSelect(props: ICustomSearchSelectProps) {
|
|||
<Combobox.Options data-prevent-outside-click static>
|
||||
<div
|
||||
className={cn(
|
||||
"nodedc-dropdown-surface z-30 my-1 min-w-48 overflow-y-scroll whitespace-nowrap focus:outline-none",
|
||||
"nodedc-dropdown-surface z-[760] my-1 min-w-48 overflow-y-scroll whitespace-nowrap focus:outline-none",
|
||||
optionsClassName
|
||||
)}
|
||||
ref={setPopperElement}
|
||||
|
|
|
|||
Loading…
Reference in New Issue