snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

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

@@ -0,0 +1,197 @@
+/**
+ * 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 { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import type { IModule } from "@plane/types";
+import { ComboDropDown } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local imports
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITHOUT_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { ModuleButtonContent } from "./button-content";
+import { ModuleOptions } from "./module-options";
+
+type TModuleDropdownBaseProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  getModuleById: (moduleId: string) => IModule | null;
+  itemClassName?: string;
+  moduleIds?: string[];
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showCount?: boolean;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TModuleDropdownBaseProps) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getModuleById,
+    hideIcon = false,
+    itemClassName = "",
+    moduleIds,
+    multiple,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    renderByDefault = true,
+    showCount = false,
+    showTooltip = false,
+    tabIndex,
+    value,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  // store hooks
+  const { isMobile } = usePlatformOS();
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string & string[]) => {
+    onChange(val);
+    if (!multiple) handleClose();
+  };
+
+  const comboboxProps = {
+    value,
+    onChange: dropdownOnChange,
+    disabled,
+    multiple,
+  };
+
+  useEffect(() => {
+    if (isOpen && inputRef.current && !isMobile) {
+      inputRef.current.focus();
+    }
+  }, [isOpen, isMobile]);
+
+  const comboButton = button ? (
+    <button
+      ref={setReferenceElement}
+      type="button"
+      className={cn("clickable block h-full w-full outline-none hover:bg-layer-1", 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 hover:bg-layer-1",
+        {
+          "cursor-not-allowed text-secondary": disabled,
+          "cursor-pointer": !disabled,
+        },
+        buttonContainerClassName
+      )}
+      onClick={handleOnClick}
+      disabled={disabled}
+      tabIndex={tabIndex}
+    >
+      <DropdownButton
+        className={buttonClassName}
+        isActive={isOpen}
+        tooltipHeading={t("common.module")}
+        tooltipContent={
+          Array.isArray(value)
+            ? `${value
+                .map((moduleId) => getModuleById(moduleId)?.name)
+                .toString()
+                .replaceAll(",", ", ")}`
+            : ""
+        }
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        <ModuleButtonContent
+          disabled={disabled}
+          dropdownArrow={dropdownArrow}
+          dropdownArrowClassName={dropdownArrowClassName}
+          hideIcon={hideIcon}
+          hideText={BUTTON_VARIANTS_WITHOUT_TEXT.includes(buttonVariant)}
+          placeholder={placeholder}
+          showCount={showCount}
+          showTooltip={showTooltip}
+          value={value}
+          onChange={onChange as any}
+          className={itemClassName}
+        />
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+      {...comboboxProps}
+    >
+      {isOpen && projectId && (
+        <ModuleOptions
+          isOpen={isOpen}
+          placement={placement}
+          referenceElement={referenceElement}
+          multiple={multiple}
+          getModuleById={getModuleById}
+          moduleIds={moduleIds}
+          value={value}
+        />
+      )}
+    </ComboDropDown>
+  );
+});

apps/web/core/components/dropdowns/module/button-content.tsx

@@ -0,0 +1,126 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { ChevronDownOutline, CloseOutline, ModuleOutline } from "@makeplane/propel/icons";
+import { Tooltip } from "@makeplane/propel/components/tooltip";
+import { cn } from "@plane/utils";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type ModuleButtonContentProps = {
+  disabled: boolean;
+  dropdownArrow: boolean;
+  dropdownArrowClassName: string;
+  hideIcon: boolean;
+  hideText: boolean;
+  onChange: (moduleIds: string[]) => void;
+  placeholder?: string;
+  showCount: boolean;
+  showTooltip?: boolean;
+  value: string | string[] | null;
+  className?: string;
+};
+
+export function ModuleButtonContent(props: ModuleButtonContentProps) {
+  const {
+    disabled,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon,
+    hideText,
+    onChange,
+    placeholder,
+    showCount,
+    showTooltip = false,
+    value,
+    className,
+  } = props;
+  // store hooks
+  const { getModuleById } = useModule();
+  const { isMobile } = usePlatformOS();
+
+  if (Array.isArray(value))
+    return (
+      <>
+        {showCount ? (
+          <div className="relative flex max-w-full items-center gap-1">
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            {(value.length > 0 || !!placeholder) && (
+              <div className="max-w-40 truncate">
+                {value.length > 0
+                  ? value.length === 1
+                    ? `${getModuleById(value[0])?.name || "module"}`
+                    : `${value.length} Module${value.length === 1 ? "" : "s"}`
+                  : placeholder}
+              </div>
+            )}
+          </div>
+        ) : value.length > 0 ? (
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
+            {value.map((moduleId) => {
+              const moduleDetails = getModuleById(moduleId);
+              return (
+                <div
+                  key={moduleId}
+                  className={cn(
+                    "flex max-w-full items-center gap-1 rounded-sm bg-layer-1 py-1 text-secondary",
+                    className
+                  )}
+                >
+                  {!hideIcon && <ModuleOutline className="h-2.5 w-2.5 flex-shrink-0" />}
+                  {!hideText && (
+                    <Tooltip
+                      label={`Title: ${moduleDetails?.name ?? ""}`}
+                      layout="stacked"
+                      disabled={!showTooltip || isMobile}
+                    >
+                      <span className="max-w-40 truncate text-11 font-medium">{moduleDetails?.name}</span>
+                    </Tooltip>
+                  )}
+                  {!disabled && (
+                    <Tooltip label="Remove" disabled={!showTooltip || isMobile}>
+                      <button
+                        type="button"
+                        className="flex-shrink-0"
+                        onClick={() => {
+                          const newModuleIds = value.filter((m) => m !== moduleId);
+                          onChange(newModuleIds);
+                        }}
+                      >
+                        <CloseOutline className="h-2.5 w-2.5 text-tertiary hover:text-danger-primary" />
+                      </button>
+                    </Tooltip>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <>
+            {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+            <span className="flex-grow truncate text-left">{placeholder}</span>
+          </>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+  else
+    return (
+      <>
+        {!hideIcon && <ModuleOutline className="h-3 w-3 flex-shrink-0" />}
+        {!hideText && (
+          <span className="flex-grow truncate text-left">{value ? getModuleById(value)?.name : placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </>
+    );
+}

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

@@ -0,0 +1,60 @@
+/**
+ * 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 { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useModule } from "@/hooks/store/use-module";
+// types
+import type { TDropdownProps } from "../types";
+// local imports
+import { ModuleDropdownBase } from "./base";
+
+type TModuleDropdownProps = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  projectId: string | undefined;
+  showCount?: boolean;
+  onClose?: () => void;
+  renderByDefault?: boolean;
+  itemClassName?: string;
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string | null) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[] | null;
+      }
+  );
+
+export const ModuleDropdown = observer(function ModuleDropdown(props: TModuleDropdownProps) {
+  const { projectId } = props;
+  // router
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getModuleById, getProjectModuleIds, fetchModules } = useModule();
+  // derived values
+  const moduleIds = projectId ? getProjectModuleIds(projectId) : [];
+
+  const onDropdownOpen = () => {
+    if (!moduleIds && projectId && workspaceSlug) fetchModules(workspaceSlug.toString(), projectId);
+  };
+
+  return (
+    <ModuleDropdownBase
+      {...props}
+      getModuleById={getModuleById}
+      moduleIds={moduleIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});

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

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import type { Placement } from "@popperjs/core";
+import { observer } from "mobx-react";
+import { usePopper } from "react-popper";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ModuleOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import type { IModule } from "@plane/types";
+import { cn, sortBySelectedFirst } from "@plane/utils";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+interface Props {
+  getModuleById: (moduleId: string) => IModule | null;
+  isOpen: boolean;
+  moduleIds?: string[];
+  multiple: boolean;
+  onDropdownOpen?: () => void;
+  placement: Placement | undefined;
+  referenceElement: HTMLButtonElement | null;
+  value?: string[] | string | null;
+}
+
+export const ModuleOptions = observer(function ModuleOptions(props: Props) {
+  const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement, value } = props;
+  // 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 { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const onOpen = () => {
+    onDropdownOpen?.();
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = moduleIds?.map((moduleId) => {
+    const moduleDetails = getModuleById(moduleId);
+    return {
+      value: moduleId,
+      query: `${moduleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{moduleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+  if (!multiple)
+    options?.unshift({
+      value: null,
+      query: t("module.no_module"),
+      content: (
+        <div className="flex items-center gap-2">
+          <ModuleOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("module.no_module")}</span>
+        </div>
+      ),
+    });
+
+  const filteredOptions = sortBySelectedFirst(
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase())),
+    value
+  );
+
+  return (
+    <Combobox.Options as="ul" className="fixed z-10" static>
+      <div
+        className="my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2">
+          <SearchOutline className="h-3.5 w-3.5 text-placeholder" />
+          <Combobox.Input
+            as="input"
+            ref={inputRef}
+            className="w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={t("common.search.label")}
+            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) => (
+                <Combobox.Option
+                  as="li"
+                  key={option.value}
+                  value={option.value}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none",
+                      {
+                        "bg-layer-transparent-hover": active,
+                        "text-primary": selected,
+                        "text-secondary": !selected,
+                      }
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      <span className="flex-grow truncate">{option.content}</span>
+                      {selected && <TickOutline className="h-3.5 w-3.5 flex-shrink-0" />}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 text-placeholder italic">{t("common.search.no_matching_results")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});