fix: broken clickoutside & example custom page

.changeset/beige-meals-deliver.md

@@ -0,0 +1,5 @@
+---
+"@premieroctet/next-admin": patch
+---
+
+fix: broken clickoutside & example custom page

apps/example/app/[locale]/admin/custom/page.tsx

@@ -31,36 +31,25 @@ const CustomPage = async () => {
       }}
     >
       <div className="p-10">
-        <h1 className="mb-4 text-xl font-bold leading-7 text-gray-900 dark:text-gray-300 sm:truncate sm:text-3xl sm:tracking-tight">
+        <h1 className="mb-4 text-xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight dark:text-gray-300">
           Dashboard
         </h1>
         <div className="mt-2">
           <div>
             <dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Users
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  8
-                </dd>
-              </div>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Posts
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  59
-                </dd>
-              </div>
-              <div className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow dark:bg-gray-800 sm:p-6">
-                <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
-                  Total Categories
-                </dt>
-                <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
-                  1
-                </dd>
-              </div>
+              {stats.map((item) => (
+                <div
+                  key={item.name}
+                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-gray-800"
+                >
+                  <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
+                    {item.name}
+                  </dt>
+                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
+                    {item.stat}
+                  </dd>
+                </div>
+              ))}
             </dl>
           </div>
         </div>

apps/example/pages/pagerouter/admin/custom/index.tsx

@@ -48,12 +48,12 @@ const CustomPage = ({
               {stats.map((item) => (
                 <div
                   key={item.name}
-                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6"
+                  className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6 dark:bg-gray-800"
                 >
-                  <dt className="truncate text-sm font-medium text-gray-500">
+                  <dt className="truncate text-sm font-medium text-gray-500 dark:text-gray-400">
                     {item.name}
                   </dt>
-                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
+                  <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900 dark:text-gray-200">
                     {item.stat}
                   </dd>
                 </div>

packages/next-admin/src/components/Menu.tsx

@@ -46,7 +46,7 @@
 });
 
 export type MenuProps = {
-  resource?: ModelName;
+  resource?: ModelName | null;
   resources?: ModelName[];
   resourcesTitles?: Record<ModelName, string | undefined>;
   customPages?: AdminComponentProps["customPages"];
@@ -172,7 +172,7 @@
       <div className="text-nextadmin-menu-color dark:text-dark-nextadmin-menu-color flex flex-1 items-center gap-1 px-2 py-3 text-sm font-semibold leading-6">
         <div className="flex min-w-0 flex-1 items-center gap-3">
           {user.data.picture ? (
             <img
               width={32}
               height={32}
               className="flex h-8 w-8 flex-shrink-0 rounded-full"

packages/next-admin/src/context/ConfigContext.tsx

@@ -12,7 +12,7 @@ export type ConfigContextType = {
   basePath: string;
   isAppDir?: boolean;
   apiBasePath: string;
-  resource?: ModelName;
+  resource?: ModelName | null;
   resourcesIdProperty: Record<ModelName, string> | null;
   schema: Schema;
   nextAdminContext?: NextAdminContext;
@@ -28,7 +28,7 @@ type ProviderProps = {
   options?: NextAdminOptions;
   children: React.ReactNode;
   isAppDir?: boolean;
-  resource?: ModelName;
+  resource?: ModelName | null;
   resourcesIdProperty: Record<ModelName, string> | null;
   schema: Schema;
   nextAdminContext?: NextAdminContext;

packages/next-admin/src/hooks/useCloseOnOutsideClick.ts

@@ -12,17 +12,9 @@ const useClickOutside = <E extends HTMLElement = HTMLElement>(
       }
     };
 
-    setTimeout(() => {
-      /**
-       * There is a weird behavior on Page Router where this triggers
-       * just when a selector is opened. I suppose this is because the click event is not finished
-       * dispatching when we click on a trigger, but this is strange that
-       * this does not occur in App Router
-       */
-      document.addEventListener("click", handleClickOutside);
-    });
+    document.addEventListener("mousedown", handleClickOutside);
     return () => {
-      document.removeEventListener("click", handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [callback]);
 

packages/next-admin/src/types.ts

@@ -830,7 +830,7 @@ export type AdminComponentProps = {
   apiBasePath: string;
   schema: Schema;
   data?: ListData<ModelName>;
-  resource?: ModelName;
+  resource?: ModelName | null;
   slug?: string;
   /**
    * Page router only

packages/next-admin/src/utils/server.test.ts

@@ -19,7 +19,7 @@ describe("Server utils", () => {
     });
 
     it("should not return a resource with /admin/Post", () => {
-      expect(getResourceFromParams(["Post"], ["User"])).toEqual(undefined);
+      expect(getResourceFromParams(["Post"], ["User"])).toEqual(null);
     });
   });
 

packages/next-admin/src/utils/server.ts

@@ -1161,10 +1161,12 @@ export const getResourceFromParams = (
   params: string[],
   resources: Prisma.ModelName[]
 ) => {
-  return resources.find((r) => {
-    const slugifiedResource = r.toLowerCase();
-    return params.some((param) => param.toLowerCase() === slugifiedResource);
-  });
+  return (
+    resources.find((r) => {
+      const slugifiedResource = r.toLowerCase();
+      return params.some((param) => param.toLowerCase() === slugifiedResource);
+    }) ?? null
+  );
 };
 
 /**