@goplusvn/core 0.1.23 → 0.1.24

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.1.24 — Canvas app tông TRẮNG + fix multi-select tràn nút đóng
+
+- **Canvas toàn app hết ngả xám**: `SidebarInset` (layout dọc) và
+  `HorizontalLayout` bỏ lớp phủ `bg-muted/40` → dùng token `bg-background`
+  (app tự quyết tông nền; vinhhoa/wu chuộng trắng). Đây là lớp xám bao mọi
+  trang từng gây gotcha "khung xám bọc POS".
+- **MultiSelect**: hàng "Chọn tất cả / Bỏ chọn / n/N / ✕" bị tràn — nút đóng
+  ✕ đẩy ra ngoài mép panel khi trigger hẹp. Redesign: panel `min-w-[15rem]`,
+  hàng nút gọn (h-7, px-1.5, nhóm phải `shrink-0`, nhóm trái `min-w-0`,
+  `overflow-hidden`), nút đóng đổi từ đỏ (dễ nhầm "xóa") → trung tính.
+
 ## 0.1.23 — Trang RBAC hoàn chỉnh trong core (roles/resources/actions), restyle trắng
 
 3 trang quản trị RBAC trước đây mỗi app tự chép (vinhhoa/wu-vpbank…) nay là trang

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.23",
+  "version": "0.1.24",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -681,7 +681,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
         {open && (
           <div
             ref={dropdownRef}
-            className="absolute z-[100] mt-1 w-full 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 slide-in-from-top-1"
+            className="absolute z-[100] mt-1 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 slide-in-from-top-1"
             style={{
               top: "100%",
               left: 0,
@@ -746,14 +746,15 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                 )}
               </div>
 
-              {/* Action Buttons */}
-              <div className="flex items-center justify-between border-b p-1">
-                <div className="flex items-center">
+              {/* Action Buttons — hàng gọn, không cho tràn: nhóm trái min-w-0,
+                  nhóm phải shrink-0; nút đóng màu trung tính (không phải xóa) */}
+              <div className="flex items-center justify-between gap-1 overflow-hidden border-b p-1">
+                <div className="flex min-w-0 items-center">
                   <Button
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleSelectAll();
@@ -765,7 +766,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     type="button"
                     variant="ghost"
                     size="sm"
-                    className="h-8 px-2 text-xs"
+                    className="h-7 px-1.5 text-xs"
                     onClick={(e) => {
                       e.stopPropagation();
                       handleClearAll();
@@ -774,7 +775,7 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     Bỏ chọn
                   </Button>
                 </div>
-                <div className="flex items-center">
+                <div className="flex shrink-0 items-center">
                   <span
                     className="whitespace-nowrap px-1 text-[11px] tabular-nums text-muted-foreground"
                     title={`Đã chọn ${value.length} / ${
@@ -790,13 +791,13 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
                     size="sm"
                     aria-label="Đóng"
                     title="Đóng"
-                    className="h-8 w-8 shrink-0 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                    className="h-7 w-7 shrink-0 p-0 text-muted-foreground hover:text-foreground"
                     onClick={(e) => {
                       e.stopPropagation();
                       setOpen(false);
                     }}
                   >
-                    <X className="h-4 w-4" />
+                    <X className="h-3.5 w-3.5" />
                   </Button>
                 </div>
               </div>

package/src/ui/layout/horizontal-layout.tsx

@@ -35,7 +35,7 @@ export function HorizontalLayout({
         searchResults={searchResults}
         searchLoading={searchLoading}
       />
-      <div className="w-full min-h-screen flex flex-col bg-muted/40">
+      <div className="w-full min-h-screen flex flex-col bg-background">
         <HorizontalLayoutHeader
           dictionary={dictionary}
           navigation={navigation}

package/src/ui/primitives/sidebar.tsx

@@ -396,7 +396,9 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-muted/40 transition-[margin] duration-200 ease-linear",
+        // Canvas app dùng token bg-background (app tự quyết tông — vinhhoa/wu
+        // muốn nền TRẮNG); trước đây bg-muted/40 phủ xám toàn bộ trang.
+        "relative flex min-h-svh flex-1 flex-col bg-background transition-[margin] duration-200 ease-linear",
         // Inset: content is a card floating with a uniform m-2 gap on ALL sides
         // (no ml-0 override) so there's a small gap between the sidebar and the
         // content/header instead of them touching.