@goplusvn/core 0.1.90 → 0.1.92

package/src/ui/forms/multi-select.tsx

@@ -6,7 +6,14 @@ import { Check, ChevronsUpDown, Loader2, Search, X } from "lucide-react";
 
 import { cn } from "../../utils";
 
-import { Badge, Button, Input } from "../primitives";
+import {
+  Badge,
+  Button,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "../primitives";
 
 type OptionValue = string | number | boolean;
 
@@ -134,10 +141,7 @@ const stripAccents = (str: string) =>
  * Tìm vị trí khớp (không dấu, không phân biệt hoa thường) của query trong
  * label GỐC — trả về [start, end) trên chuỗi gốc để highlight.
  */
-function findMatchRange(
-  label: string,
-  query: string,
-): [number, number] | null {
+function findMatchRange(label: string, query: string): [number, number] | null {
   const q = stripAccents(query.trim().toLowerCase());
   if (!q || !label) return null;
   let stripped = "";
@@ -196,8 +200,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const [internalValue, setInternalValue] =
       useState<OptionValue[]>(defaultValue);
     const [open, setOpen] = useState(false);
-    // Mở lên trên khi sát đáy viewport (dropdown ~360px bị cắt nếu luôn mở xuống)
-    const [dropUp, setDropUp] = useState(false);
     const [searchValue, setSearchValue] = useState("");
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     // Snapshot selection tại thời điểm MỞ dropdown (cho selectedFirst)
@@ -225,7 +227,6 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     // Refs
     const containerRef = useRef<HTMLDivElement>(null);
     const searchInputRef = useRef<HTMLInputElement>(null);
-    const dropdownRef = useRef<HTMLDivElement>(null);
     const listRef = useRef<HTMLDivElement>(null);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
@@ -308,8 +309,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       setIsLoading(true);
       const timer = setTimeout(
         () => {
-          loadOptionsRef
-            .current!(searchValue)
+          loadOptionsRef.current!(searchValue)
             .then((opts) => {
               if (seq !== loadSeqRef.current) return;
               setRemoteOptions(opts);
@@ -440,42 +440,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       }
     }, [open]);
 
-    // Close dropdown when clicking outside
-    useEffect(() => {
-      if (!open) return;
-
-      const handleClickOutside = (event: MouseEvent) => {
-        const target = event.target as HTMLElement;
-        if (
-          containerRef.current &&
-          !containerRef.current.contains(target) &&
-          dropdownRef.current &&
-          !dropdownRef.current.contains(target)
-        ) {
-          // Don't close if clicking inside dialog
-          if (target.closest('[data-slot="dialog-content"]')) {
-            return;
-          }
-          setOpen(false);
-        }
-      };
-
-      const handleEscape = (event: KeyboardEvent) => {
-        if (event.key === "Escape" && open) {
-          event.stopPropagation();
-          setOpen(false);
-        }
-      };
-
-      // Use capture phase to catch events before Dialog
-      document.addEventListener("mousedown", handleClickOutside, true);
-      document.addEventListener("keydown", handleEscape, true);
-
-      return () => {
-        document.removeEventListener("mousedown", handleClickOutside, true);
-        document.removeEventListener("keydown", handleEscape, true);
-      };
-    }, [open]);
+    // Click-ra-ngoài + Escape do DismissableLayer của Radix Popover lo (panel
+    // đã đi qua Portal). Không tự nghe document nữa: hai lớp cùng đóng dễ
+    // đá nhau, và bộ nghe cũ còn phải chừa ngoại lệ cho dialog.
 
     // Accessibility announcements
     useEffect(() => {
@@ -508,9 +475,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     const handleSelect = useCallback(
       (optionValue: OptionValue) => {
         // Check if option is disabled
-        const option = filteredOptions.find(
-          (opt) => opt.value === optionValue,
-        );
+        const option = filteredOptions.find((opt) => opt.value === optionValue);
         if (option?.disabled) {
           return; // Don't allow selecting disabled options
         }
@@ -602,9 +567,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     // Các mục đã chọn kèm label (fallback String(value) nếu chưa biết label)
     const selectedOptions = useMemo(
       () =>
-        value.map(
-          (v) => knownOptions.get(v) ?? { value: v, label: String(v) },
-        ),
+        value.map((v) => knownOptions.get(v) ?? { value: v, label: String(v) }),
       [value, knownOptions],
     );
 
@@ -619,146 +582,158 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
     );
 
     return (
-      <div ref={containerRef} className="relative w-full min-w-0 max-w-full">
-        {/* Screen Reader Live Regions */}
-        <div className="sr-only">
-          <div aria-live="polite" aria-atomic="true" role="status">
-            {politeMessage}
-          </div>
-          <div aria-live="assertive" aria-atomic="true" role="alert">
-            {assertiveMessage}
+      <Popover
+        open={open}
+        onOpenChange={(next) => {
+          if (disabled && next) return;
+          if (next && selectedFirst) setOpenSnapshot([...value]);
+          setOpen(next);
+        }}
+      >
+        <div ref={containerRef} className="relative w-full min-w-0 max-w-full">
+          {/* Screen Reader Live Regions */}
+          <div className="sr-only">
+            <div aria-live="polite" aria-atomic="true" role="status">
+              {politeMessage}
+            </div>
+            <div aria-live="assertive" aria-atomic="true" role="alert">
+              {assertiveMessage}
+            </div>
           </div>
-        </div>
 
-        <Button
-          ref={buttonRef}
-          type="button"
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn(
-            "w-full max-w-full justify-between overflow-hidden h-auto min-h-9 px-3 py-1.5",
-            responsiveSettings.compactMode && "min-h-8 text-sm",
-            className,
-          )}
-          id={id}
-          onClick={(e) => {
-            e.stopPropagation();
-            if (!open) {
-              if (selectedFirst) setOpenSnapshot([...value]);
-              const rect = containerRef.current?.getBoundingClientRect();
-              if (rect) {
-                const spaceBelow = window.innerHeight - rect.bottom;
-                setDropUp(spaceBelow < 360 && rect.top > spaceBelow);
-              }
-            }
-            setOpen(!open);
-          }}
-        >
-          <div
-            className={cn(
-              "flex min-w-0 max-w-full items-center gap-1",
-              singleLine ? "flex-nowrap overflow-hidden" : "flex-wrap",
-            )}
-          >
-            {value.length === 0 ? (
-              <span className="text-muted-foreground">{placeholder}</span>
-            ) : isAllSelected ? (
-              <Badge
-                variant="secondary"
-                className="mr-1 min-w-0 shrink border-transparent bg-secondary font-normal hover:bg-secondary"
+          <PopoverTrigger asChild>
+            <Button
+              ref={buttonRef}
+              type="button"
+              variant="outline"
+              role="combobox"
+              aria-expanded={open}
+              disabled={disabled}
+              className={cn(
+                "w-full max-w-full justify-between overflow-hidden h-auto min-h-9 px-3 py-1.5",
+                responsiveSettings.compactMode && "min-h-8 text-sm",
+                className,
+              )}
+              id={id}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              <div
+                className={cn(
+                  "flex min-w-0 max-w-full items-center gap-1",
+                  singleLine ? "flex-nowrap overflow-hidden" : "flex-wrap",
+                )}
               >
-                <span className="truncate">Tất cả lựa chọn ({options.length})</span>
-              </Badge>
-            ) : (
-              <>
-                {/* singleLine: chip KHÔNG có nút × riêng (trigger hẹp, chữ cần
-                    chỗ) — bỏ chọn bằng dropdown hoặc × xóa-tất-cả */}
-                {visibleChips.map((opt, chipIndex) => (
+                {value.length === 0 ? (
+                  <span className="text-muted-foreground">{placeholder}</span>
+                ) : isAllSelected ? (
                   <Badge
-                    key={String(opt.value)}
                     variant="secondary"
-                    title={opt.label}
-                    className={cn(
-                      "min-w-0 shrink gap-1 font-normal",
-                      singleLine ? "max-w-full" : "max-w-[8.5rem] pr-1",
-                      chipColor === "neutral"
-                        ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
-                        : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
-                    )}
+                    className="mr-1 min-w-0 shrink border-transparent bg-secondary font-normal hover:bg-secondary"
                   >
-                    <span className="truncate">{opt.label}</span>
-                    {!singleLine && (
-                      <span
-                        role="button"
-                        aria-label={`Bỏ chọn ${opt.label}`}
-                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
-                        onClick={(e) => handleRemove(opt.value, e)}
-                      >
-                        <X className="h-3 w-3" />
-                      </span>
-                    )}
+                    <span className="truncate">
+                      Tất cả lựa chọn ({options.length})
+                    </span>
                   </Badge>
-                ))}
-                {extraCount > 0 && (
-                  <Badge
-                    variant="secondary"
-                    title={selectedOptions
-                      .slice(chipLimit)
-                      .map((o) => o.label)
-                      .join(", ")}
-                    className={cn(
-                      "shrink-0 gap-1 border-transparent bg-secondary font-normal hover:bg-secondary",
-                      !singleLine && "pr-1",
-                    )}
-                  >
-                    +{extraCount}
-                    {!singleLine && (
-                      <span
-                        role="button"
-                        aria-label="Bỏ các mục vượt quá"
-                        title="Bỏ các mục vượt quá"
-                        className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-                        onClick={clearExtraOptions}
+                ) : (
+                  <>
+                    {/* singleLine: chip KHÔNG có nút × riêng (trigger hẹp, chữ cần
+                    chỗ) — bỏ chọn bằng dropdown hoặc × xóa-tất-cả */}
+                    {visibleChips.map((opt, chipIndex) => (
+                      <Badge
+                        key={String(opt.value)}
+                        variant="secondary"
+                        title={opt.label}
+                        className={cn(
+                          "min-w-0 shrink gap-1 font-normal",
+                          singleLine ? "max-w-full" : "max-w-[8.5rem] pr-1",
+                          chipColor === "neutral"
+                            ? "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary"
+                            : CHIP_COLORS[chipIndex % CHIP_COLORS.length],
+                        )}
+                      >
+                        <span className="truncate">{opt.label}</span>
+                        {!singleLine && (
+                          <span
+                            role="button"
+                            aria-label={`Bỏ chọn ${opt.label}`}
+                            className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100"
+                            onClick={(e) => handleRemove(opt.value, e)}
+                          >
+                            <X className="h-3 w-3" />
+                          </span>
+                        )}
+                      </Badge>
+                    ))}
+                    {extraCount > 0 && (
+                      <Badge
+                        variant="secondary"
+                        title={selectedOptions
+                          .slice(chipLimit)
+                          .map((o) => o.label)
+                          .join(", ")}
+                        className={cn(
+                          "shrink-0 gap-1 border-transparent bg-secondary font-normal hover:bg-secondary",
+                          !singleLine && "pr-1",
+                        )}
                       >
-                        <X className="h-3 w-3" />
-                      </span>
+                        +{extraCount}
+                        {!singleLine && (
+                          <span
+                            role="button"
+                            aria-label="Bỏ các mục vượt quá"
+                            title="Bỏ các mục vượt quá"
+                            className="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+                            onClick={clearExtraOptions}
+                          >
+                            <X className="h-3 w-3" />
+                          </span>
+                        )}
+                      </Badge>
                     )}
-                  </Badge>
+                  </>
                 )}
-              </>
-            )}
-          </div>
-          <div className="ml-2 flex items-center space-x-1">
-            {value.length > 0 && (
-              <div
-                role="button"
-                aria-label="Bỏ chọn tất cả"
-                className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  updateValue([]);
-                }}
-              >
-                <X className="h-3 w-3" />
               </div>
-            )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </div>
-        </Button>
-
-        {open && (
-          <div
-            ref={dropdownRef}
-            className={cn(
-              "absolute left-0 z-[100] w-full min-w-[15rem] rounded-md border bg-popover/95 backdrop-blur-md text-popover-foreground shadow-lg shadow-black/5 animate-in fade-in-0 zoom-in-95",
-              dropUp
-                ? "bottom-full mb-1 slide-in-from-bottom-1"
-                : "top-full mt-1 slide-in-from-top-1",
-            )}
+              <div className="ml-2 flex items-center space-x-1">
+                {value.length > 0 && (
+                  <div
+                    role="button"
+                    aria-label="Bỏ chọn tất cả"
+                    className="flex h-5 w-5 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      updateValue([]);
+                    }}
+                  >
+                    <X className="h-3 w-3" />
+                  </div>
+                )}
+                <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+              </div>
+            </Button>
+          </PopoverTrigger>
+
+          {/*
+          Panel qua Portal của Radix + tự lật lên trên khi thiếu chỗ (trước đây
+          là `absolute` nên bị CẮT ở mép thân dialog `overflow-y-auto`).
+          `--radix-popover-content-available-height` giữ panel luôn nằm trong
+          màn hình, không cần đo tay như biến `dropUp` cũ.
+        */}
+          <PopoverContent
+            align="start"
+            sideOffset={4}
+            collisionPadding={8}
+            onOpenAutoFocus={(e) => {
+              e.preventDefault();
+              searchInputRef.current?.focus();
+            }}
+            className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] flex-col overflow-hidden rounded-md border bg-popover/95 p-0 text-popover-foreground shadow-lg shadow-black/5 backdrop-blur-md"
+            style={{
+              maxHeight: "var(--radix-popover-content-available-height, 24rem)",
+            }}
           >
-            <div className="flex flex-col">
+            <div className="flex min-h-0 flex-1 flex-col">
               {/* Search Input */}
               <div className="flex items-center border-b px-2.5 py-1">
                 {isLoading ? (
@@ -884,7 +859,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               {/* Options List */}
               <div
                 ref={listRef}
-                className="max-h-[250px] overflow-y-auto overflow-x-hidden"
+                className="min-h-0 max-h-[250px] flex-1 overflow-y-auto overflow-x-hidden overscroll-contain"
                 onScroll={(e) => {
                   if (isVirtual) setScrollTop(e.currentTarget.scrollTop);
                 }}
@@ -927,8 +902,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                         const optionIndex = virtualRange.start + i;
                         const isSelected = value.includes(option.value);
                         const isDisabled = option.disabled || false;
-                        const isHighlighted =
-                          optionIndex === highlightedIndex;
+                        const isHighlighted = optionIndex === highlightedIndex;
                         return (
                           <div
                             key={String(option.value)}
@@ -1003,9 +977,9 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 )}
               </div>
             </div>
-          </div>
-        )}
-      </div>
+          </PopoverContent>
+        </div>
+      </Popover>
     );
   },
 );

package/src/ui/primitives/__tests__/combobox-portal.test.tsx

@@ -0,0 +1,91 @@
+import { describe, expect, it, vi, beforeAll } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+import { Combobox } from "../combobox";
+
+/**
+ * Panel của Combobox PHẢI nằm ngoài hộp cuộn của form/dialog.
+ *
+ * Lỗi cũ: panel là `position: absolute` con của trigger, nên khi combo nằm
+ * trong CrudDialog (thân dialog `overflow-y-auto`) thì danh sách bị CẮT ở mép
+ * dialog — chọn combo chỉ thấy 1-2 dòng đầu. Test này khoá lại: panel đi qua
+ * Portal (con của body), không phải con của hộp cuộn.
+ */
+
+beforeAll(() => {
+  // Radix Popper cần các API này; jsdom không có.
+  if (!globalThis.ResizeObserver) {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  }
+  if (!Element.prototype.hasPointerCapture) {
+    Element.prototype.hasPointerCapture = () => false;
+    Element.prototype.setPointerCapture = () => {};
+    Element.prototype.releasePointerCapture = () => {};
+  }
+  if (!Element.prototype.scrollIntoView) {
+    Element.prototype.scrollIntoView = () => {};
+  }
+});
+
+const OPTIONS = [
+  { value: "pending", label: "Chờ duyệt" },
+  { value: "approved", label: "Đã duyệt" },
+  { value: "rejected", label: "Từ chối" },
+];
+
+function renderInScrollBox(onValueChange = vi.fn()) {
+  const utils = render(
+    <div data-testid="scroll-box" style={{ overflowY: "auto", height: 200 }}>
+      <Combobox
+        options={OPTIONS}
+        value="approved"
+        onValueChange={onValueChange}
+        placeholder="Chọn trạng thái"
+        searchPlaceholder="Search trạng thái..."
+      />
+    </div>,
+  );
+  return { ...utils, onValueChange };
+}
+
+describe("Combobox", () => {
+  it("mở panel ra ngoài hộp cuộn (portal), không bị hộp cha cắt", async () => {
+    renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    const scrollBox = screen.getByTestId("scroll-box");
+
+    expect(scrollBox.contains(search)).toBe(false);
+    expect(document.body.contains(search)).toBe(true);
+  });
+
+  it("lọc theo từ khoá và chọn được option", async () => {
+    const { onValueChange } = renderInScrollBox();
+    fireEvent.click(screen.getByRole("combobox"));
+
+    const search = await screen.findByPlaceholderText("Search trạng thái...");
+    fireEvent.change(search, { target: { value: "chờ" } });
+
+    await waitFor(() => expect(screen.queryByText("Từ chối")).toBeNull());
+
+    fireEvent.click(screen.getByText("Chờ duyệt"));
+    expect(onValueChange).toHaveBeenCalledWith("pending");
+  });
+
+  it("nút xoá trên trigger trả về undefined mà không mở panel", async () => {
+    const { onValueChange } = renderInScrollBox();
+    const clear = screen
+      .getByRole("combobox")
+      .querySelector('[role="button"]') as HTMLElement;
+
+    fireEvent.click(clear);
+
+    expect(onValueChange).toHaveBeenCalledWith(undefined);
+    expect(screen.queryByPlaceholderText("Search trạng thái...")).toBeNull();
+  });
+});