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

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

@@ -0,0 +1,180 @@
+/**
+ * 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 { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+// components
+import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// icon
+import { CycleGroupIcon } from "@plane/propel/icons";
+import { CyclesOutline, SearchOutline, TickOutline } from "@makeplane/propel/icons";
+import type { TCycleGroups } from "@plane/types";
+// ui
+// store hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
+
+type DropdownOptions =
+  | {
+      value: string | null;
+      query: string;
+      content: React.ReactNode;
+    }[]
+  | undefined;
+
+type CycleOptionsProps = {
+  projectId: string;
+  referenceElement: HTMLButtonElement | null;
+  placement: Placement | undefined;
+  isOpen: boolean;
+  canRemoveCycle: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleOptions = observer(function CycleOptions(props: CycleOptionsProps) {
+  const { projectId, isOpen, referenceElement, placement, canRemoveCycle, currentCycleId } = props;
+  // i18n
+  const { t } = useTranslation();
+  //state hooks
+  const [query, setQuery] = useState("");
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { getProjectCycleIds, fetchAllCycles, getCycleById } = useCycle();
+  const { isMobile } = usePlatformOS();
+
+  useEffect(() => {
+    if (isOpen) {
+      onOpen();
+      if (!isMobile) {
+        inputRef.current && inputRef.current.focus();
+      }
+    }
+  }, [isOpen, isMobile]);
+
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
+  const cycleIds = (getProjectCycleIds(projectId) ?? [])?.filter((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    if (currentCycleId && currentCycleId === cycleId) return false;
+    return cycleDetails?.status ? (cycleDetails?.status.toLowerCase() != "completed" ? true : false) : true;
+  });
+
+  const onOpen = () => {
+    if (workspaceSlug && !cycleIds) fetchAllCycles(workspaceSlug.toString(), projectId);
+  };
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      setQuery("");
+    }
+  };
+
+  const options: DropdownOptions = cycleIds?.map((cycleId) => {
+    const cycleDetails = getCycleById(cycleId);
+    const cycleStatus = cycleDetails?.status ? (cycleDetails.status.toLocaleLowerCase() as TCycleGroups) : "draft";
+
+    return {
+      value: cycleId,
+      query: `${cycleDetails?.name}`,
+      content: (
+        <div className="flex items-center gap-2">
+          <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5 flex-shrink-0" />
+          <span className="flex-grow truncate">{cycleDetails?.name}</span>
+        </div>
+      ),
+    };
+  });
+
+  if (canRemoveCycle) {
+    options?.unshift({
+      value: null,
+      query: t("cycle.no_cycle"),
+      content: (
+        <div className="flex items-center gap-2">
+          <CyclesOutline className="h-3 w-3 flex-shrink-0" />
+          <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
+        </div>
+      ),
+    });
+  }
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  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 }) =>
+                    `flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 select-none ${
+                      active ? "bg-layer-transparent-hover" : ""
+                    } ${selected ? "text-primary" : "text-secondary"}`
+                  }
+                >
+                  {({ 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_matches_found")}</p>
+            )
+          ) : (
+            <p className="px-1.5 py-1 text-placeholder italic">{t("common.loading")}</p>
+          )}
+        </div>
+      </div>
+    </Combobox.Options>
+  );
+});

apps/web/core/components/dropdowns/cycle/index.tsx

@@ -0,0 +1,157 @@
+/**
+ * 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 { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { ChevronDownOutline, CyclesOutline } from "@makeplane/propel/icons";
+import { ComboDropDown } from "@plane/ui";
+// helpers
+import { cn } from "@plane/utils";
+// hooks
+import { useCycle } from "@/hooks/store/use-cycle";
+import { useDropdown } from "@/hooks/use-dropdown";
+// local components and constants
+import { DropdownButton } from "../buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "../constants";
+import type { TDropdownProps } from "../types";
+import { CycleOptions } from "./cycle-options";
+
+type Props = TDropdownProps & {
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  onChange: (val: string | null) => void;
+  onClose?: () => void;
+  projectId: string | undefined;
+  value: string | null;
+  canRemoveCycle?: boolean;
+  renderByDefault?: boolean;
+  currentCycleId?: string;
+};
+
+export const CycleDropdown = observer(function CycleDropdown(props: Props) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    hideIcon = false,
+    onChange,
+    onClose,
+    placeholder = "",
+    placement,
+    projectId,
+    showTooltip = false,
+    tabIndex,
+    value,
+    canRemoveCycle = true,
+    renderByDefault = true,
+    currentCycleId,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
+  // states
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { getCycleNameById } = useCycle();
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+
+  const selectedName = value ? getCycleNameById(value) : null;
+
+  const { handleClose, handleKeyDown, handleOnClick } = useDropdown({
+    dropdownRef,
+    isOpen,
+    onClose,
+    setIsOpen,
+  });
+
+  const dropdownOnChange = (val: string | null) => {
+    onChange(val);
+    handleClose();
+  };
+
+  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.cycle")}
+        tooltipContent={selectedName ?? placeholder}
+        showTooltip={showTooltip}
+        variant={buttonVariant}
+        renderToolTipByDefault={renderByDefault}
+      >
+        {!hideIcon && <CyclesOutline className="h-3 w-3 flex-shrink-0" />}
+        {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (!!selectedName || !!placeholder) && (
+          <span className="max-w-40 truncate">{selectedName ?? placeholder}</span>
+        )}
+        {dropdownArrow && (
+          <ChevronDownOutline className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
+        )}
+      </DropdownButton>
+    </button>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={value}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && projectId && (
+        <CycleOptions
+          isOpen={isOpen}
+          projectId={projectId}
+          placement={placement}
+          referenceElement={referenceElement}
+          canRemoveCycle={canRemoveCycle}
+          currentCycleId={currentCycleId}
+        />
+      )}
+    </ComboDropDown>
+  );
+});