feat: init

apps/web/core/components/dropdowns/member/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { observer } from "mobx-react";
+import type { LucideIcon } from "lucide-react";
+import { Users } from "lucide-react";
+// plane ui
+import { Avatar, AvatarGroup } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
+// plane utils
+// helpers
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type AvatarProps = {
+  showTooltip: boolean;
+  userIds: string | string[] | null;
+  icon?: LucideIcon;
+  size?: "sm" | "md" | "base" | "lg" | number;
+};
+
+export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
+  const { showTooltip, userIds, icon: Icon, size = "md" } = props;
+  // store hooks
+  const { getUserDetails } = useMember();
+
+  if (Array.isArray(userIds)) {
+    if (userIds.length > 0)
+      return (
+        <AvatarGroup size={size} showTooltip={!showTooltip}>
+          {userIds.map((userId) => {
+            const userDetails = getUserDetails(userId);
+
+            if (!userDetails) return;
+            return <Avatar key={userId} src={getFileURL(userDetails.avatar_url)} name={userDetails.display_name} />;
+          })}
+        </AvatarGroup>
+      );
+  } else {
+    if (userIds) {
+      const userDetails = getUserDetails(userIds);
+      return (
+        <Avatar
+          src={getFileURL(userDetails?.avatar_url ?? "")}
+          name={userDetails?.display_name}
+          size={size}
+          showTooltip={!showTooltip}
+        />
+      );
+    }
+  }
+
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
+});

apps/web/core/components/dropdowns/member/base.tsx

@@ -0,0 +1,184 @@
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import type { LucideIcon } from "lucide-react";
+import { ChevronDown } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IUserLite } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import { ButtonAvatars } from "./avatar";
+import { MemberOptions } from "./member-options";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownBaseProps = {
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  icon?: LucideIcon;
+  memberIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((props) => {
+  const { t } = useTranslation();
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getUserDetails,
+    hideIcon = false,
+    icon,
+    memberIds,
+    multiple,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    optionsClassName = "",
+    placeholder = t("members"),
+    placement,
+    renderByDefault = true,
+    showTooltip = false,
+    showUserDetails = false,
+    tabIndex,
+    tooltipContent,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  const comboboxProps = {
+    value,
+    onChange,
+    disabled,
+    multiple,
+  };
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const getDisplayName = (value: string | string[] | null, showUserDetails: boolean, placeholder: string = "") => {
+    if (Array.isArray(value)) {
+      if (value.length > 0) {
+        if (value.length === 1) {
+          return getUserDetails(value[0])?.display_name || placeholder;
+        } else {
+          return showUserDetails ? `${value.length} ${t("members").toLocaleLowerCase()}` : "";
+        }
+      } else {
+        return placeholder;
+      }
+    } else {
+      if (showUserDetails && value) {
+        return getUserDetails(value)?.display_name || placeholder;
+      } else {
+        return placeholder;
+      }
+    }
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-custom-text-200": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          <DropdownButton
+            className={cn("text-xs", buttonClassName)}
+            isActive={isOpen}
+            tooltipHeading={placeholder}
+            tooltipContent={
+              tooltipContent ?? `${value?.length ?? 0} ${value?.length !== 1 ? t("assignees") : t("assignee")}`
+            }
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {!hideIcon && <ButtonAvatars showTooltip={showTooltip} userIds={value} icon={icon} />}
+            {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+              <span className="flex-grow truncate leading-5">
+                {getDisplayName(value, showUserDetails, placeholder)}
+              </span>
+            )}
+            {dropdownArrow && (
+              <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      {...comboboxProps}
+      className={cn("h-full", className)}
+      onChange={dropdownOnChange}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <MemberOptions
+          getUserDetails={getUserDetails}
+          isOpen={isOpen}
+          memberIds={memberIds}
+          onDropdownOpen={onDropdownOpen}
+          optionsClassName={optionsClassName}
+          placement={placement}
+          referenceElement={referenceElement}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/member/dropdown.tsx

@@ -0,0 +1,48 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import type { LucideIcon } from "lucide-react";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+// local imports
+import { MemberDropdownBase } from "./base";
+import type { MemberDropdownProps } from "./types";
+
+type TMemberDropdownProps = {
+  icon?: LucideIcon;
+  memberIds?: string[];
+  onClose?: () => void;
+  optionsClassName?: string;
+  projectId?: string;
+  renderByDefault?: boolean;
+} & MemberDropdownProps;
+
+export const MemberDropdown: React.FC<TMemberDropdownProps> = observer((props) => {
+  const { memberIds: propsMemberIds, projectId } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const {
+    getUserDetails,
+    project: { getProjectMemberIds, fetchProjectMembers },
+    workspace: { workspaceMemberIds },
+  } = useMember();
+
+  const memberIds = propsMemberIds
+    ? propsMemberIds
+    : projectId
+      ? getProjectMemberIds(projectId, false)
+      : workspaceMemberIds;
+
+  const onDropdownOpen = () => {
+    if (!memberIds && projectId && workspaceSlug) fetchProjectMembers(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <MemberDropdownBase
+      {...props}
+      getUserDetails={getUserDetails}
+      memberIds={memberIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

apps/web/core/components/dropdowns/member/member-options.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { createPortal } from "react-dom";
+import { usePopper } from "react-popper";
+import { Check, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { SuspendedUserIcon } from "@plane/propel/icons";
+import { EPillSize, EPillVariant, Pill } from "@plane/propel/pill";
+import type { IUserLite } from "@plane/types";
+import { Avatar } from "@plane/ui";
+import { cn, getFileURL } from "@plane/utils";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+interface Props {
+  className?: string;
+  getUserDetails: (userId: string) => IUserLite | undefined;
+  isOpen: boolean;
+  memberIds?: string[];
+  onDropdownOpen?: () => void;
+  optionsClassName?: string;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+}
+
+export const MemberOptions: React.FC<Props> = observer((props: Props) => {
+  const {
+    getUserDetails,
+    isOpen,
+    memberIds,
+    onDropdownOpen,
+    optionsClassName = "",
+    placement,
+    referenceElement,
+  } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // refs
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    workspace: { isUserSuspended },
+  } = useMember();
+  const { isMobile } = usePlatformOS();
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      onDropdownOpen?.();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options = memberIds
+    ?.map((userId) => {
+      const userDetails = getUserDetails(userId);
+      return {
+        value: userId,
+        query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
+        content: (
+          <div className="flex items-center gap-2">
+            <div className="w-4">
+              {isUserSuspended(userId, workspaceSlug?.toString()) ? (
+                <SuspendedUserIcon className="h-3.5 w-3.5 text-custom-text-400" />
+              ) : (
+                <Avatar name={userDetails?.display_name} src={getFileURL(userDetails?.avatar_url ?? "")} />
+              )}
+            </div>
+            <span
+              className={cn(
+                "flex-grow truncate",
+                isUserSuspended(userId, workspaceSlug?.toString()) ? "text-custom-text-400" : ""
+              )}
+            >
+              {currentUser?.id === userId ? t("you") : userDetails?.display_name}
+            </span>
+          </div>
+        ),
+      };
+    })
+    .filter((o) => !!o);
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
+
+  return createPortal(
+    <Combobox.Options data-prevent-outside-click static>
+      <div
+        className={cn(
+          "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-30",
+          optionsClassName
+        )}
+        ref={setPopperElement}
+        style={{
+          ...styles.popper,
+        }}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2">
+          <Search className="h-3.5 w-3.5 text-custom-text-400" strokeWidth={1.5} />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("search")}
+            displayValue={(assigned: any) => assigned?.name}
+            onKeyDown={searchInputKeyDown}
+          />
+        </div>
+        <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              filteredOptions.map(
+                (option) =>
+                  option && (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        cn(
+                          "flex w-full select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                          active && "bg-custom-background-80",
+                          selected ? "text-custom-text-100" : "text-custom-text-200",
+                          isUserSuspended(option.value, workspaceSlug?.toString())
+                            ? "cursor-not-allowed"
+                            : "cursor-pointer"
+                        )
+                      }
+                      disabled={isUserSuspended(option.value, workspaceSlug?.toString())}
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                          {isUserSuspended(option.value, workspaceSlug?.toString()) && (
+                            <Pill variant={EPillVariant.DEFAULT} size={EPillSize.XS} className="border-none">
+                              Suspended
+                            </Pill>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  )
+              )
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>,
+    document.body
+  );
+});

apps/web/core/components/dropdowns/member/types.d.ts

@@ -0,0 +1,22 @@
+import type { TDropdownProps } from "../types";
+
+export type MemberDropdownProps = TDropdownProps & {
+  button?: React.ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  placeholder?: string;
+  tooltipContent?: string;
+  onClose?: () => void;
+  showUserDetails?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );