@goplusvn/core 0.1.94 → 0.1.96

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+## 0.1.96 — Sửa lỗi Focus Trap khiến ô tìm kiếm Combobox/MultiSelect mất focus khi lồng trong Sheet/Dialog
+
+Khi `Combobox` hoặc `MultiSelect` nằm trong `<Sheet>` (bộ lọc mobile) hoặc `<Dialog>`,
+Radix Dialog's `FocusScope` bắt sự kiện tương tác trên Portal và giật focus ngược lại về trigger,
+khiến ô input tìm kiếm bị blur ngay lập tức và không thể gõ được trên một số thiết bị/trình duyệt.
+
+**Đổi**
+
+- `ui/primitives/combobox.tsx` & `ui/forms/multi-select.tsx` — thêm `onFocusOutside={(e) => e.preventDefault()}`
+  trên `PopoverContent`, ngăn Dialog/Sheet cha cướp focus khỏi ô tìm kiếm; kích hoạt focus trực tiếp vào
+  `searchInputRef` khi mở panel.
+
+## 0.1.95 — Triệt tiêu Hydration Mismatch trên AvatarFallback của UserDropdown
+
+Trong quá trình Server-Side Rendering (SSR), `useSafeAuthSession()` chưa có phiên đăng nhập
+của client, khiến server render ra AvatarFallback rỗng trong khi client hydrate ngay lập tức
+với initials của user (`"AV"`), dẫn đến lỗi Hydration Mismatch.
+
+**Đổi**
+
+- `ui/layout/user-dropdown.tsx` — thêm `suppressHydrationWarning` cho `AvatarFallback` ở nút trigger
+  và thông tin user trong dropdown menu content; xử lý initials an toàn chống lệch DOM giữa SSR & CSR.
+- `ui/layout/main-layout.tsx`, `vertical-layout.tsx`, `horizontal-layout.tsx`, `vertical-layout-header.tsx`,
+  `horizontal-layout-header.tsx` — bổ sung prop `user?: ExtendedUser | null` xuyên suốt, cho phép Server
+  Component truyền thông tin session user trực tiếp từ SSR xuống header, triệt tiêu hoàn toàn độ trễ và
+  lệch dữ liệu.
+
 ## 0.1.94 — Hỗ trợ Nested Modal Layer cho Combobox/MultiSelect & Chuẩn hoá tìm kiếm Tiếng Việt
 
 Khi bộ lọc `Combobox` hoặc `MultiSelect` nằm trong `<Sheet>` (bộ lọc mobile) hoặc `<Dialog>`,

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

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

@@ -724,16 +724,11 @@ export const MultiSelect = React.forwardRef<MultiSelectRef, MultiSelectProps>(
             collisionPadding={8}
             onOpenAutoFocus={(e) => {
               e.preventDefault();
-              // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
-              const isTouchOrMobile =
-                typeof window !== "undefined" &&
-                ((typeof window.matchMedia === "function" &&
-                  window.matchMedia("(pointer: coarse)").matches) ||
-                  (typeof window.innerWidth === "number" &&
-                    window.innerWidth < 640));
-              if (!isTouchOrMobile) {
-                searchInputRef.current?.focus();
-              }
+              searchInputRef.current?.focus();
+            }}
+            onFocusOutside={(e) => {
+              // Ngăn Dialog / Sheet cha giật focus khỏi ô tìm kiếm của Popover portal
+              e.preventDefault();
             }}
             className="z-[100] flex w-[var(--radix-popover-trigger-width)] min-w-[15rem] max-w-[calc(100vw-1rem)] flex-col overflow-hidden rounded-md border bg-popover/95 p-0 text-popover-foreground shadow-lg shadow-black/5 backdrop-blur-md"
             style={{

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

@@ -25,10 +25,12 @@ export function HorizontalLayoutHeader({
   dictionary,
   navigation,
   notificationSlot,
+  user,
 }: {
   dictionary: DictionaryType;
   navigation?: NavigationType[];
   notificationSlot?: ReactNode;
+  user?: any;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -78,7 +80,7 @@ export function HorizontalLayoutHeader({
             {/* <ModeDropdown dictionary={dictionary} /> */}
             {/* <LanguageDropdown dictionary={dictionary} /> */}
             {/* User dropdown */}
-            <UserDropdown dictionary={dictionary} locale={locale} />
+            <UserDropdown dictionary={dictionary} locale={locale} user={user} />
           </div>
         </div>
         <PageTabs dictionary={dictionary} />

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

@@ -17,6 +17,7 @@ interface HorizontalLayoutProps {
   searchResults?: any[];
   searchLoading?: boolean;
   notificationSlot?: ReactNode;
+  user?: any;
 }
 
 export function HorizontalLayout({
@@ -27,6 +28,7 @@ export function HorizontalLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: HorizontalLayoutProps) {
   return (
     <SidebarProvider>
@@ -42,6 +44,7 @@ export function HorizontalLayout({
           dictionary={dictionary}
           navigation={navigation}
           notificationSlot={notificationSlot}
+          user={user}
         />
         <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4">
           {children}

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

@@ -21,6 +21,11 @@ interface LayoutProps {
    * dropdown tĩnh cũ (backward-compat cho consumer chưa nối dữ liệu).
    */
   notificationSlot?: ReactNode;
+  /**
+   * Thông tin user đăng nhập (truyền từ Server Component session để triệt tiêu
+   * hoàn toàn độ trễ / hydration mismatch trên AvatarFallback ở header).
+   */
+  user?: any;
 }
 
 export function MainLayout({
@@ -31,6 +36,7 @@ export function MainLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: LayoutProps) {
   const mounted = useMounted();
   const isVertical = useIsVertical();
@@ -48,6 +54,7 @@ export function MainLayout({
       searchResults={searchResults}
       searchLoading={searchLoading}
       notificationSlot={notificationSlot}
+      user={user}
     >
       {children}
     </VerticalLayout>
@@ -59,6 +66,7 @@ export function MainLayout({
       searchResults={searchResults}
       searchLoading={searchLoading}
       notificationSlot={notificationSlot}
+      user={user}
     >
       {children}
     </HorizontalLayout>

package/src/ui/layout/user-dropdown.tsx

@@ -93,8 +93,11 @@ export function UserDropdown({
           alt={user?.name || ""}
           className="object-cover"
         />
-        <AvatarFallback className="bg-primary text-white text-[10px] font-bold uppercase">
-          {user?.name && getInitials(user.name)}
+        <AvatarFallback
+          className="bg-primary text-white text-[10px] font-bold uppercase"
+          suppressHydrationWarning
+        >
+          {user?.name ? getInitials(user.name) : null}
         </AvatarFallback>
       </Avatar>
     </Button>
@@ -116,15 +119,21 @@ export function UserDropdown({
         <DropdownMenuLabel className="flex gap-2 p-2">
           <Avatar className="size-8 border border-border/20 shadow-sm">
             <AvatarImage src={user?.avatar || undefined} alt="Avatar" />
-            <AvatarFallback className="bg-transparent">
-              {user?.name && getInitials(user.name)}
+            <AvatarFallback className="bg-transparent" suppressHydrationWarning>
+              {user?.name ? getInitials(user.name) : null}
             </AvatarFallback>
           </Avatar>
           <div className="flex flex-col min-w-0 space-y-0.5 overflow-hidden">
-            <p className="text-sm font-semibold text-foreground truncate leading-none">
+            <p
+              className="text-sm font-semibold text-foreground truncate leading-none"
+              suppressHydrationWarning
+            >
               {user?.name}
             </p>
-            <p className="text-[11px] text-muted-foreground truncate font-medium opacity-80 leading-none">
+            <p
+              className="text-[11px] text-muted-foreground truncate font-medium opacity-80 leading-none"
+              suppressHydrationWarning
+            >
               {user?.email}
             </p>
           </div>

package/src/ui/layout/vertical-layout-header.tsx

@@ -19,9 +19,11 @@ import { ToggleMobileSidebar } from "./toggle-mobile-sidebar";
 export function VerticalLayoutHeader({
   dictionary,
   notificationSlot,
+  user,
 }: {
   dictionary: DictionaryType;
   notificationSlot?: ReactNode;
+  user?: any;
 }) {
   const params = useParams();
   const locale = params.lang as LocaleType;
@@ -67,7 +69,7 @@ export function VerticalLayoutHeader({
           {/* <ModeDropdown dictionary={dictionary} /> */}
           {/* <LanguageDropdown dictionary={dictionary} /> */}
           {/* User dropdown */}
-          <UserDropdown dictionary={dictionary} locale={locale} />
+          <UserDropdown dictionary={dictionary} locale={locale} user={user} />
         </div>
       </div>
     </header>

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

@@ -17,6 +17,7 @@ interface VerticalLayoutProps {
   searchResults?: any[];
   searchLoading?: boolean;
   notificationSlot?: ReactNode;
+  user?: any;
 }
 
 export function VerticalLayout({
@@ -27,6 +28,7 @@ export function VerticalLayout({
   searchResults,
   searchLoading,
   notificationSlot,
+  user,
 }: VerticalLayoutProps) {
   return (
     <SidebarProvider>
@@ -41,6 +43,7 @@ export function VerticalLayout({
         <VerticalLayoutHeader
           dictionary={dictionary}
           notificationSlot={notificationSlot}
+          user={user}
         />
         {/* `h-dvh` ở SidebarInset (không phải `h-screen`): trên Safari/Chrome
             mobile 100vh tính CẢ thanh URL co giãn, nên đáy trang — phân trang,

package/src/ui/primitives/combobox.tsx

@@ -178,15 +178,11 @@ export function Combobox({
         collisionPadding={8}
         onOpenAutoFocus={(e) => {
           e.preventDefault();
-          // Trên thiết bị cảm ứng / màn hình nhỏ, không ép mở bàn phím ảo để tránh che khuất danh sách
-          const isTouchOrMobile =
-            typeof window !== "undefined" &&
-            ((typeof window.matchMedia === "function" &&
-              window.matchMedia("(pointer: coarse)").matches) ||
-              (typeof window.innerWidth === "number" && window.innerWidth < 640));
-          if (!isTouchOrMobile) {
-            searchInputRef.current?.focus();
-          }
+          searchInputRef.current?.focus();
+        }}
+        onFocusOutside={(e) => {
+          // Ngăn Dialog / Sheet cha giật focus khỏi ô tìm kiếm của Popover portal
+          e.preventDefault();
         }}
         className="z-[100] w-[var(--radix-popover-trigger-width)] min-w-[12rem] max-w-[calc(100vw-1rem)] p-0 flex flex-col overflow-hidden"
         style={{

package/templates/starter-app/package.json

@@ -22,7 +22,7 @@
     "prepare": "husky || true"
   },
   "dependencies": {
-    "@goerp/core": "npm:@goplusvn/core@^0.1.94",
+    "@goerp/core": "npm:@goplusvn/core@^0.1.96",
     "@hookform/resolvers": "3.9.0",
     "@prisma/adapter-pg": "^7.0.0",
     "@prisma/client": "^7.0.0",