UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: полировка внешних контуров и дизайн-кода

2026-04-20 14:37:14 +03:00
parent 9553c81752
commit 1cf05aad72
6 changed files with 194 additions and 94 deletions
@@ -5,6 +5,7 @@
 */

 import { Fragment, useState } from "react";
+import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
 import { Loader } from "lucide-react";
@@ -78,6 +79,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    strategy: "fixed",
    placement: "bottom-start",
    modifiers: [
      {
@@ -129,90 +131,93 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
          <button
            ref={setReferenceElement}
            type="button"
-            className="flex h-7.5 items-center rounded-sm border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap outline-none hover:bg-layer-transparent-hover active:bg-layer-transparent-active"
+            className="flex h-7.5 items-center rounded-[1rem] border-0 bg-transparent py-0.5 pl-0 pr-2 text-body-xs-medium text-placeholder whitespace-nowrap shadow-none outline-none"
            onClick={() => !projectLabels && fetchLabels()}
          >
            {label}
          </button>
        </Combobox.Button>

-        <Combobox.Options className="fixed z-10">
-          <div
-            className={`nodedc-dropdown-surface z-10 my-1 w-52 whitespace-nowrap`}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div>
-              <div className="nodedc-dropdown-search">
-                <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
-                <Combobox.Input
-                  className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  placeholder={t("common.search.label")}
-                  displayValue={(assigned: any) => assigned?.name}
-                  onKeyDown={searchInputKeyDown}
-                  tabIndex={baseTabIndex}
-                />
-              </div>
-            </div>
-            <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
-              {isLoading ? (
-                <p className="text-center text-secondary">{t("common.loading")}</p>
-              ) : filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    className={({ selected }) =>
-                      `nodedc-dropdown-option cursor-pointer ${
-                        selected ? "text-primary" : "text-secondary"
-                      }`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && (
-                          <div className="flex-shrink-0">
-                            <CheckIcon className={`h-3.5 w-3.5`} />
-                          </div>
+        {typeof document !== "undefined" &&
+          createPortal(
+            <Combobox.Options className="fixed z-[760]" static>
+              <div
+                className="nodedc-dropdown-surface nodedc-external-popup-anchor z-10 my-1 w-56 whitespace-nowrap"
+                ref={setPopperElement}
+                style={styles.popper}
+                {...attributes.popper}
+              >
+                <div>
+                  <div className="nodedc-dropdown-search">
+                    <SearchIcon className="h-3.5 w-3.5 text-tertiary" />
+                    <Combobox.Input
+                      className="w-full bg-transparent px-0 py-0 text-12 text-secondary placeholder:text-placeholder outline-none focus:outline-none"
+                      value={query}
+                      onChange={(e) => setQuery(e.target.value)}
+                      placeholder={t("common.search.label")}
+                      displayValue={(assigned: any) => assigned?.name}
+                      onKeyDown={searchInputKeyDown}
+                      tabIndex={baseTabIndex}
+                    />
+                  </div>
+                </div>
+                <div className={`vertical-scrollbar mt-2 scrollbar-sm max-h-56 space-y-1 overflow-y-auto`}>
+                  {isLoading ? (
+                    <p className="px-2 py-2 text-center text-secondary">{t("common.loading")}</p>
+                  ) : filteredOptions.length > 0 ? (
+                    filteredOptions.map((option) => (
+                      <Combobox.Option
+                        key={option.value}
+                        value={option.value}
+                        className={({ selected }) =>
+                          `nodedc-dropdown-option cursor-pointer ${
+                            selected ? "text-primary" : "text-secondary"
+                          }`
+                        }
+                      >
+                        {({ selected }) => (
+                          <>
+                            {option.content}
+                            {selected && (
+                              <div className="flex-shrink-0">
+                                <CheckIcon className={`h-3.5 w-3.5`} />
+                              </div>
+                            )}
+                          </>
                        )}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : submitting ? (
-                <Loader className="spin h-3.5 w-3.5" />
-              ) : canCreateLabel ? (
-                <Combobox.Option
-                  value={query}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (!query.length) return;
-                    handleAddLabel(query);
-                  }}
-                  className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
-                >
-                  {query.length ? (
-                    <>
-                      {/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
-                      labels
-                    </>
+                      </Combobox.Option>
+                    ))
+                  ) : submitting ? (
+                    <Loader className="spin mx-auto h-3.5 w-3.5" />
+                  ) : canCreateLabel ? (
+                    <Combobox.Option
+                      value={query}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (!query.length) return;
+                        handleAddLabel(query);
+                      }}
+                      className={`rounded-[0.9rem] px-2 py-2 text-left text-secondary ${query.length ? "cursor-pointer hover:bg-white/6" : "cursor-default"}`}
+                    >
+                      {query.length ? (
+                        <>
+                          + {t("label.create.type")} <span className="text-primary">&quot;{query}&quot;</span>
+                        </>
+                      ) : (
+                        t("label.create.type")
+                      )}
+                    </Combobox.Option>
                  ) : (
-                    t("label.create.type")
+                    <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
+                      {t("common.search.no_matching_results")}
+                    </p>
                  )}
-                </Combobox.Option>
-                ) : (
-                  <p className="rounded-[0.9rem] px-2 py-2 text-left text-secondary">
-                    {t("common.search.no_matching_results")}
-                  </p>
-                )}
+                </div>
              </div>
-          </div>
-        </Combobox.Options>
+            </Combobox.Options>,
+            document.body
+          )}
      </Combobox>
    </>
  );