ФУНКЦИИ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: интерактивные карточки и фильтры двусторонней доски внешних контуров

plane-src/packages/ui/src/dropdown/common/input-search.tsx

@@ -44,7 +44,7 @@ export function InputSearch(props: IInputSearch) {
   return (
     <div
       className={cn(
-        "flex items-center gap-1.5 rounded-sm border border-subtle bg-surface-2 px-2",
+        "nodedc-dropdown-search",
         inputContainerClassName
       )}
     >
@@ -53,7 +53,7 @@ export function InputSearch(props: IInputSearch) {
         as="input"
         ref={inputRef}
         className={cn(
-          "w-full bg-transparent py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none",
+          "w-full bg-transparent py-0 text-12 text-secondary placeholder:text-placeholder focus:outline-none",
           inputClassName
         )}
         value={query}

plane-src/packages/ui/src/dropdown/common/options.tsx

@@ -46,7 +46,7 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
           isMobile={isMobile}
         />
       )}
-      <div className={cn("max-h-48 space-y-1 overflow-y-scroll", !disableSearch && "mt-2")}>
+      <div className={cn("max-h-56 space-y-1 overflow-y-auto", !disableSearch && "mt-2")}>
         <>
           {options ? (
             options.length > 0 ? (
@@ -57,9 +57,9 @@ export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSele
                   disabled={option.disabled}
                   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",
+                      "nodedc-dropdown-option",
                       {
-                        "bg-layer-1": active,
+                        "bg-white/6": active,
                         "text-primary": selected,
                         "text-secondary": !selected,
                       },

plane-src/packages/ui/src/dropdown/multi-select.tsx

@@ -7,6 +7,7 @@
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
 import React, { useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -139,35 +140,34 @@ export function MultiSelectDropdown(props: IMultiSelectDropdown) {
         disabled={disabled}
       />
 
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className={cn(
-              "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",
-              optionsContainerClassName
-            )}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <DropdownOptions
-              isOpen={isOpen}
-              query={query}
-              setQuery={setQuery}
-              inputIcon={inputIcon}
-              inputPlaceholder={inputPlaceholder}
-              inputClassName={inputClassName}
-              inputContainerClassName={inputContainerClassName}
-              disableSearch={disableSearch}
-              keyExtractor={keyExtractor}
-              options={sortedOptions}
-              value={value}
-              renderItem={renderItem}
-              loader={loader}
-            />
-          </div>
-        </Combobox.Options>
-      )}
+      {isOpen &&
+        createPortal(
+          <Combobox.Options data-prevent-outside-click className="fixed z-30" static>
+            <div
+              className={cn("nodedc-dropdown-surface my-1 w-56", optionsContainerClassName)}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <DropdownOptions
+                isOpen={isOpen}
+                query={query}
+                setQuery={setQuery}
+                inputIcon={inputIcon}
+                inputPlaceholder={inputPlaceholder}
+                inputClassName={inputClassName}
+                inputContainerClassName={inputContainerClassName}
+                disableSearch={disableSearch}
+                keyExtractor={keyExtractor}
+                options={sortedOptions}
+                value={value}
+                renderItem={renderItem}
+                loader={loader}
+              />
+            </div>
+          </Combobox.Options>,
+          document.body
+        )}
     </Combobox>
   );
 }

plane-src/packages/ui/src/dropdown/single-select.tsx

@@ -7,6 +7,7 @@
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
 import React, { useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -138,36 +139,35 @@ export function Dropdown(props: ISingleSelectDropdown) {
         disabled={disabled}
       />
 
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className={cn(
-              "my-1 w-48 rounded-sm border-[0.5px] border-strong bg-surface-1 px-2 py-2 text-11 shadow-raised-200 focus:outline-none",
-              optionsContainerClassName
-            )}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <DropdownOptions
-              isOpen={isOpen}
-              query={query}
-              setQuery={setQuery}
-              inputIcon={inputIcon}
-              inputPlaceholder={inputPlaceholder}
-              inputClassName={inputClassName}
-              inputContainerClassName={inputContainerClassName}
-              disableSearch={disableSearch}
-              keyExtractor={keyExtractor}
-              options={sortedOptions}
-              value={value}
-              renderItem={renderItem}
-              loader={loader}
-              handleClose={handleClose}
-            />
-          </div>
-        </Combobox.Options>
-      )}
+      {isOpen &&
+        createPortal(
+          <Combobox.Options data-prevent-outside-click className="fixed z-30" static>
+            <div
+              className={cn("nodedc-dropdown-surface my-1 w-56", optionsContainerClassName)}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <DropdownOptions
+                isOpen={isOpen}
+                query={query}
+                setQuery={setQuery}
+                inputIcon={inputIcon}
+                inputPlaceholder={inputPlaceholder}
+                inputClassName={inputClassName}
+                inputContainerClassName={inputContainerClassName}
+                disableSearch={disableSearch}
+                keyExtractor={keyExtractor}
+                options={sortedOptions}
+                value={value}
+                renderItem={renderItem}
+                loader={loader}
+                handleClose={handleClose}
+              />
+            </div>
+          </Combobox.Options>,
+          document.body
+        )}
     </Combobox>
   );
 }