@goplusvn/core 0.1.30 → 0.1.31

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.1.31 — MultiSelect: mặc định 1 DÒNG (hết lệch hàng toolbar)
+
+Wrap-mặc-định (0.1.27) làm trigger CAO LÊN khi chọn ≥2 option → lệch hàng
+toolbar (các control h-9 bên cạnh). Sửa:
+
+- Đảo mặc định `singleLine = true`; muốn wrap thì truyền `singleLine={false}`
+  (chỉ hợp form rộng, không phải toolbar).
+- Chế độ 1 dòng hiện **1 chip đầu + badge "+n"** (thay vì bóp nhiều chip đến
+  mất chữ trong trigger hẹp); title tooltip cho label đầy đủ + danh sách mục
+  còn lại.
+- Chip ở chế độ 1 dòng KHÔNG có nút × riêng (chật) — bỏ chọn qua dropdown
+  hoặc nút × xóa-tất-cả; chế độ wrap giữ × từng chip như cũ.
+
+Đã test trên vinhhoa (link file: local): toolbar đơn bán hàng, sheet Bộ lọc,
+báo cáo sổ quỹ — 3 filter cùng h-9, không còn đẩy lệch hàng.
+
 ## 0.1.30 — Gỡ menu "Thiết bị & phiên đăng nhập" khỏi UserDropdown
 
 Trang phiên đăng nhập chuyển thành trang QUẢN TRỊ (gate quyền) — lối vào đúng

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -47,9 +47,11 @@ interface MultiSelectProps {
    */
   selectedFirst?: boolean;
   /**
-   * Mặc định chip WRAP xuống dòng khi chọn nhiều (trigger cao lên, không tràn
-   * ngang — theo pattern sersavan/shadcn-multi-select-component). Đặt true để
-   * giữ 1 dòng cố định: chip co + cắt bằng overflow (hợp cho toolbar chật).
+   * Mặc định GIỮ 1 DÒNG cố định: hiện 1 chip đầu (cắt chữ, title=label đầy
+   * đủ) + badge "+n" (title=các mục còn lại) — trigger không đổi chiều cao,
+   * không lệch hàng toolbar; chip không có nút × riêng (bỏ chọn qua dropdown
+   * hoặc × xóa-tất-cả). Đặt false để chip WRAP xuống dòng kèm × từng chip
+   * (trigger cao lên — chỉ hợp form rộng rãi, không phải toolbar).
    */
   singleLine?: boolean;
   /** Đóng dropdown ngay sau mỗi lần chọn (mặc định giữ mở để chọn tiếp). */
@@ -179,7 +181,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       disabled = false,
       responsive = false,
       selectedFirst = false,
-      singleLine = false,
+      singleLine = true,
       closeOnSelect = false,
       deduplicateOptions = false,
       chipColor = "colorful",
@@ -562,12 +564,16 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
       [updateValue, value],
     );
 
+    // singleLine: chỉ hiện 1 chip + "+n" — nhiều chip trong trigger hẹp sẽ bị
+    // bóp đến mất chữ (chỉ còn dấu ×), 1 chip cắt chữ + đếm luôn đọc được
+    const chipLimit = singleLine ? 1 : responsiveSettings.maxCount;
+
     const clearExtraOptions = useCallback(
       (e: React.MouseEvent) => {
         e.stopPropagation();
-        updateValue(value.slice(0, responsiveSettings.maxCount));
+        updateValue(value.slice(0, chipLimit));
       },
-      [value, responsiveSettings.maxCount, updateValue],
+      [value, chipLimit, updateValue],
     );
 
     // Imperative API via ref
@@ -604,7 +610,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
 
     const isAllSelected =
       !hasAsync && options.length > 1 && value.length === options.length;
-    const visibleChips = selectedOptions.slice(0, responsiveSettings.maxCount);
+    const visibleChips = selectedOptions.slice(0, chipLimit);
     const extraCount = value.length - visibleChips.length;
 
     const visibleOptions = filteredOptions.slice(
@@ -667,43 +673,58 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
               </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) => (
                   <Badge
                     key={String(opt.value)}
                     variant="secondary"
+                    title={opt.label}
                     className={cn(
-                      "min-w-0 max-w-[8.5rem] shrink gap-1 pr-1 font-normal",
+                      "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>
-                    <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>
+                    {!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"
-                    className="shrink-0 gap-1 border-transparent bg-secondary pr-1 font-normal hover:bg-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}
-                    <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>
+                    {!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>
                 )}
               </>