@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/blocks/index.js

@@ -1,5 +1,11 @@
-import { ErrorBoundary, Field, EmptyContent, SearchInput } from '../chunk-OBJ244BO.js';
-import { useBoolean } from '../chunk-BRDWQVRT.js';
+"use client";
+export { AuthGuard, GuestGuard, RoleBasedGuard, createConditionalRender, hasPermission, hasRole } from '../chunk-4HUGZJKU.js';
+import { Field } from '../chunk-LFWKGNCX.js';
+import { EmptyContent } from '../chunk-6IANOSMD.js';
+import { ErrorBoundary } from '../chunk-I6DILPFE.js';
+import { useBoolean } from '../chunk-4R7EZ7GQ.js';
+import { CloseIcon } from '../chunk-VQVVHMPG.js';
+import '../chunk-D5J3KW6Q.js';
 import { createContext, useContext, useCallback, useMemo, useState, useRef, useEffect } from 'react';
 import Box2 from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
@@ -22,8 +28,9 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import Tooltip from '@mui/material/Tooltip';
+import { useEventCallback } from '@mui/material/utils';
 import LinearProgress from '@mui/material/LinearProgress';
-import { DataGrid, GridToolbarContainer, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport } from '@mui/x-data-grid';
+import { DataGrid, GridToolbarContainer, QuickFilter, QuickFilterControl, QuickFilterClear, GridToolbarColumnsButton, GridToolbarDensitySelector, GridToolbarExport } from '@mui/x-data-grid';
 
 var collapseNoop = () => {
 };
@@ -63,7 +70,7 @@ var sizeConfig = {
   }
 };
 function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
-  const { collapsed, toggleCollapse, variant, size, labels } = useDashboardBlockContext();
+  const { collapsible, collapsed, toggleCollapse, size, labels } = useDashboardBlockContext();
   const config = sizeConfig[size];
   return /* @__PURE__ */ jsxs(
     Box2,
@@ -128,7 +135,7 @@ function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
         ] }),
         /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", gap: 0.5, flexShrink: 0 }, children: [
           actions,
-          collapsed !== void 0 && /* @__PURE__ */ jsx(
+          collapsible && /* @__PURE__ */ jsx(
             IconButton2,
             {
               size: "small",
@@ -145,9 +152,9 @@ function DashboardBlockHeader({ title, subtitle, icon, actions, sx }) {
   );
 }
 function DashboardBlockContent({ children, disablePadding = false, sx }) {
-  const { collapsed, loading, error, size } = useDashboardBlockContext();
+  const { size } = useDashboardBlockContext();
   const config = sizeConfig[size];
-  return /* @__PURE__ */ jsx(Collapse, { in: !collapsed, timeout: "auto", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     Box2,
     {
       "data-testid": "prism-dashboard-block-content",
@@ -162,7 +169,7 @@ function DashboardBlockContent({ children, disablePadding = false, sx }) {
       ],
       children
     }
-  ) });
+  );
 }
 function DashboardBlockFooter({ children, divider = true, sx }) {
   const { collapsed, size } = useDashboardBlockContext();
@@ -251,25 +258,18 @@ function DashboardBlock({
   const uncontrolledCollapse = useBoolean(defaultCollapsed);
   const isControlled = controlledCollapsed !== void 0;
   const collapsed = isControlled ? controlledCollapsed : uncontrolledCollapse.value;
-  const handleToggleCollapse = useCallback(() => {
-    if (isControlled) {
-      onCollapseChange?.(!controlledCollapsed);
-    } else {
-      uncontrolledCollapse.onToggle();
-    }
-  }, [isControlled, controlledCollapsed, onCollapseChange, uncontrolledCollapse]);
   const handleSetCollapsed = useCallback(
     (value) => {
-      if (isControlled) {
-        onCollapseChange?.(value);
-      } else {
-        uncontrolledCollapse.setValue(value);
-      }
+      if (!collapsible || value === collapsed) return;
+      if (!isControlled) uncontrolledCollapse.setValue(value);
+      onCollapseChange?.(value);
     },
-    [isControlled, onCollapseChange, uncontrolledCollapse]
+    [collapsible, collapsed, isControlled, onCollapseChange, uncontrolledCollapse]
   );
+  const handleToggleCollapse = useCallback(() => handleSetCollapsed(!collapsed), [collapsed, handleSetCollapsed]);
   const contextValue = useMemo(
     () => ({
+      collapsible,
       collapsed: collapsible ? collapsed : false,
       toggleCollapse: collapsible ? handleToggleCollapse : collapseNoop,
       setCollapsed: collapsible ? handleSetCollapsed : collapseNoop,
@@ -312,7 +312,7 @@ function DashboardBlock({
           }
         ),
         title && /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(Box2, { "aria-live": "polite", "aria-busy": loading, children: catchErrors ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Collapse, { in: !contextValue.collapsed, timeout: "auto", children: /* @__PURE__ */ jsx(Box2, { "aria-live": "polite", "aria-busy": loading, children: catchErrors ? /* @__PURE__ */ jsx(
           ErrorBoundary,
           {
             resetKeys: [loading, error, empty],
@@ -330,7 +330,7 @@ function DashboardBlock({
             ),
             children: body
           }
-        ) : body }),
+        ) : body }) }),
         footer && !loading && !error && /* @__PURE__ */ jsx(DashboardBlockFooter, { divider: footerDivider, ...slotProps?.footer, children: footer })
       ]
     }
@@ -1113,142 +1113,6 @@ var AuthBlock = {
   ResetPassword: ResetPasswordForm,
   VerifyCode: VerifyCodeForm
 };
-function AuthGuard({
-  children,
-  useAuth,
-  loadingComponent = null,
-  onUnauthenticated,
-  unauthenticatedComponent = null
-}) {
-  const { isAuthenticated, isLoading } = useAuth();
-  const [checked, setChecked] = useState(false);
-  useEffect(() => {
-    if (!isLoading) {
-      if (!isAuthenticated) {
-        onUnauthenticated?.();
-      }
-      setChecked(true);
-    }
-  }, [isAuthenticated, isLoading, onUnauthenticated]);
-  if (isLoading || !checked) {
-    return loadingComponent;
-  }
-  if (!isAuthenticated) {
-    return unauthenticatedComponent;
-  }
-  return children;
-}
-function GuestGuard({
-  children,
-  useAuth,
-  loadingComponent = null,
-  onAuthenticated,
-  authenticatedComponent = null
-}) {
-  const { isAuthenticated, isLoading } = useAuth();
-  const [checked, setChecked] = useState(false);
-  useEffect(() => {
-    if (!isLoading) {
-      if (isAuthenticated) {
-        onAuthenticated?.();
-      }
-      setChecked(true);
-    }
-  }, [isAuthenticated, isLoading, onAuthenticated]);
-  if (isLoading || !checked) {
-    return loadingComponent;
-  }
-  if (isAuthenticated) {
-    return authenticatedComponent;
-  }
-  return children;
-}
-function RoleBasedGuard({
-  children,
-  useAuth,
-  roles = [],
-  permissions = [],
-  requireEmailVerified = false,
-  roleMatchStrategy = "any",
-  loadingComponent = null,
-  onAccessDenied,
-  accessDeniedComponent = null
-}) {
-  const { isAuthenticated, isLoading, user } = useAuth();
-  const [checked, setChecked] = useState(false);
-  const [accessGranted, setAccessGranted] = useState(false);
-  useEffect(() => {
-    if (!isLoading) {
-      if (!isAuthenticated || !user) {
-        onAccessDenied?.("not_authenticated");
-        setAccessGranted(false);
-        setChecked(true);
-        return;
-      }
-      if (requireEmailVerified && !user.emailVerified) {
-        onAccessDenied?.("email_not_verified");
-        setAccessGranted(false);
-        setChecked(true);
-        return;
-      }
-      if (roles.length > 0) {
-        const userRoles = user.roles ?? [];
-        const hasRequiredRole = roleMatchStrategy === "all" ? roles.every((role) => userRoles.includes(role)) : roles.some((role) => userRoles.includes(role));
-        if (!hasRequiredRole) {
-          onAccessDenied?.("missing_role");
-          setAccessGranted(false);
-          setChecked(true);
-          return;
-        }
-      }
-      if (permissions.length > 0) {
-        const userPermissions = user.permissions ?? [];
-        const hasAllPermissions = permissions.every((perm) => userPermissions.includes(perm));
-        if (!hasAllPermissions) {
-          onAccessDenied?.("missing_permission");
-          setAccessGranted(false);
-          setChecked(true);
-          return;
-        }
-      }
-      setAccessGranted(true);
-      setChecked(true);
-    }
-  }, [isAuthenticated, isLoading, user, roles, permissions, requireEmailVerified, roleMatchStrategy, onAccessDenied]);
-  if (isLoading || !checked) {
-    return loadingComponent;
-  }
-  if (!accessGranted) {
-    return accessDeniedComponent;
-  }
-  return children;
-}
-function hasRole(user, role, strategy = "any") {
-  if (!user?.roles?.length) return false;
-  const roles = Array.isArray(role) ? role : [role];
-  if (roles.length === 0) return false;
-  return strategy === "all" ? roles.every((r) => user.roles.includes(r)) : roles.some((r) => user.roles.includes(r));
-}
-function hasPermission(user, permission, strategy = "all") {
-  if (!user?.permissions?.length) return false;
-  const permissions = Array.isArray(permission) ? permission : [permission];
-  if (permissions.length === 0) return false;
-  return strategy === "all" ? permissions.every((p) => user.permissions.includes(p)) : permissions.some((p) => user.permissions.includes(p));
-}
-function createConditionalRender(user) {
-  return {
-    canRender: (options) => {
-      const { roles = [], permissions = [], roleMatchStrategy = "any" } = options;
-      if (roles.length > 0 && !hasRole(user, roles, roleMatchStrategy)) {
-        return false;
-      }
-      if (permissions.length > 0 && !hasPermission(user, permissions, "all")) {
-        return false;
-      }
-      return true;
-    }
-  };
-}
 var DataGridBlockContext = createContext(null);
 function useDataGridBlockContext() {
   const context = useContext(DataGridBlockContext);
@@ -1302,36 +1166,12 @@ function EmptyIcon() {
     }
   );
 }
-function CustomToolbar({
-  quickFilter,
-  exportConfig,
-  showColumnSelector = true,
-  showDensitySelector = true,
-  startContent,
-  endContent,
-  actions,
-  onQuickFilterChange
-}) {
-  const [searchValue, setSearchValue] = useState("");
-  const debounceRef = useRef(null);
-  useEffect(
-    () => () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-    },
-    []
-  );
-  const handleSearchChange = useCallback(
-    (value) => {
-      setSearchValue(value);
-      if (debounceRef.current) {
-        clearTimeout(debounceRef.current);
-      }
-      debounceRef.current = setTimeout(() => {
-        onQuickFilterChange?.(value);
-      }, quickFilter?.debounceMs ?? 300);
-    },
-    [onQuickFilterChange, quickFilter?.debounceMs]
-  );
+function CustomToolbar() {
+  const { toolbar } = useDataGridBlockContext();
+  const { quickFilter, export: exportConfig, actions, startContent, endContent } = toolbar ?? {};
+  const showColumnSelector = toolbar?.columnVisibility?.enabled !== false;
+  const showDensitySelector = toolbar?.densitySelector !== false;
+  const placeholder = quickFilter?.placeholder ?? "Search...";
   return /* @__PURE__ */ jsxs(
     GridToolbarContainer,
     {
@@ -1343,16 +1183,24 @@ function CustomToolbar({
       },
       children: [
         startContent,
-        quickFilter?.enabled !== false && /* @__PURE__ */ jsx(
-          SearchInput,
-          {
-            value: searchValue,
-            onChange: handleSearchChange,
-            placeholder: quickFilter?.placeholder ?? "Search...",
-            fullWidth: false,
-            minWidth: 200
-          }
-        ),
+        quickFilter?.enabled !== false && /* @__PURE__ */ jsxs(QuickFilter, { "data-keyboard-search": true, expanded: true, debounceMs: quickFilter?.debounceMs ?? 300, children: [
+          /* @__PURE__ */ jsx(
+            QuickFilterControl,
+            {
+              placeholder,
+              size: "small",
+              slotProps: { htmlInput: { role: "searchbox", "aria-label": placeholder } }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            QuickFilterClear,
+            {
+              "aria-label": "Clear search",
+              size: "small",
+              render: (props, state) => state.value ? /* @__PURE__ */ jsx(IconButton2, { ...props, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) }) : /* @__PURE__ */ jsx("span", {})
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Box2, { sx: { flex: 1 } }),
         showColumnSelector && /* @__PURE__ */ jsx(GridToolbarColumnsButton, {}),
         showDensitySelector && /* @__PURE__ */ jsx(GridToolbarDensitySelector, {}),
@@ -1560,7 +1408,6 @@ function DataGridBlock({
     type: "include",
     ids: /* @__PURE__ */ new Set()
   });
-  const [quickFilterValue, setQuickFilterValue] = useState("");
   const paginationModel = controlledPaginationModel ?? internalPaginationModel;
   const sortModel = controlledSortModel ?? internalSortModel;
   const filterModel = controlledFilterModel ?? internalFilterModel;
@@ -1623,31 +1470,14 @@ function DataGridBlock({
       error,
       density,
       setDensity,
+      toolbar,
       rowCount: rows.length,
       selectedCount: selectionModelValue.ids.size,
       refresh: onRetry
     }),
-    [loading, error, density, rows.length, selectionModelValue, onRetry]
+    [loading, error, density, rows.length, selectionModelValue, onRetry, toolbar]
   );
-  const rowCount = pagination?.mode === "server" ? pagination.rowCount ?? 0 : rows.length;
-  const toolbarSlot = useMemo(() => {
-    if (toolbar?.show === false) {
-      return void 0;
-    }
-    return () => /* @__PURE__ */ jsx(
-      CustomToolbar,
-      {
-        quickFilter: toolbar?.quickFilter,
-        exportConfig: toolbar?.export,
-        showColumnSelector: toolbar?.columnVisibility?.enabled !== false,
-        showDensitySelector: toolbar?.densitySelector !== false,
-        startContent: toolbar?.startContent,
-        endContent: toolbar?.endContent,
-        actions: toolbar?.actions,
-        onQuickFilterChange: setQuickFilterValue
-      }
-    );
-  }, [toolbar]);
+  const rowCount = pagination?.mode === "server" ? pagination.rowCount ?? 0 : void 0;
   const noRowsOverlay = useMemo(() => {
     if (error) {
       return () => /* @__PURE__ */ jsx(ErrorState2, { message: errorMessage, onRetry });
@@ -1682,6 +1512,8 @@ function DataGridBlock({
           columns: finalColumns,
           loading,
           density,
+          onDensityChange: setDensity,
+          showToolbar: toolbar?.show !== false,
           autoHeight,
           rowHeight,
           getRowId,
@@ -1698,6 +1530,7 @@ function DataGridBlock({
           filterMode: pagination?.mode === "server" ? "server" : "client",
           filterModel,
           onFilterModelChange: handleFilterChange,
+          rowSelection: selection?.enabled ?? true,
           checkboxSelection: selection?.checkboxSelection ?? false,
           rowSelectionModel: selectionModelValue,
           onRowSelectionModelChange: handleSelectionChange,
@@ -1712,7 +1545,7 @@ function DataGridBlock({
           disableVirtualization,
           hideFooter: hideFooter || pagination?.hide,
           slots: {
-            toolbar: toolbarSlot,
+            toolbar: CustomToolbar,
             noRowsOverlay,
             loadingOverlay: () => /* @__PURE__ */ jsx(LinearProgress, { sx: { position: "absolute", top: 0, left: 0, right: 0 } }),
             ...slots
@@ -1723,9 +1556,6 @@ function DataGridBlock({
             "& .MuiDataGrid-columnHeaders": {
               bgcolor: "action.hover"
             },
-            "& .MuiDataGrid-cell:focus": {
-              outline: "none"
-            },
             "& .MuiDataGrid-row:hover": {
               bgcolor: "action.hover"
             }
@@ -1754,37 +1584,35 @@ function useDataGridBlock(options) {
   });
   const [sortModel, setSortModel] = useState(initialSortModel);
   const [filterModel, setFilterModel] = useState(initialFilterModel);
-  const isMountedRef = useRef(true);
   const abortControllerRef = useRef(null);
-  const fetchData = useCallback(
-    async (params) => {
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
+  const fetchData = useEventCallback(async (params) => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await fetcher({ ...params, quickFilterValue: params.filterModel.quickFilterValues?.join(" "), signal: controller.signal });
+      if (!controller.signal.aborted) {
+        setRows(result.rows);
+        setTotal(result.total);
       }
-      abortControllerRef.current = new AbortController();
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await fetcher(params);
-        if (isMountedRef.current) {
-          setRows(result.rows);
-          setTotal(result.total);
-        }
-      } catch (err) {
-        if (isMountedRef.current && err instanceof Error && err.name !== "AbortError") {
-          setError(err);
-          if (!keepPreviousData) {
-            setRows([]);
-          }
-        }
-      } finally {
-        if (isMountedRef.current) {
-          setLoading(false);
+    } catch (err) {
+      if (!controller.signal.aborted && err instanceof Error && err.name !== "AbortError") {
+        setError(err);
+        if (!keepPreviousData) {
+          setRows([]);
+          setTotal(0);
         }
       }
-    },
-    [fetcher, keepPreviousData]
-  );
+    } finally {
+      if (!controller.signal.aborted) {
+        setLoading(false);
+      }
+    }
+  });
   const refresh = useCallback(() => {
     fetchData({
       page: paginationModel.page,
@@ -1810,7 +1638,6 @@ function useDataGridBlock(options) {
   }, [fetchData, paginationModel, sortModel, filterModel, autoFetch]);
   useEffect(
     () => () => {
-      isMountedRef.current = false;
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
       }
@@ -1844,6 +1671,6 @@ function useDataGridBlock(options) {
   };
 }
 
-export { AuthBlock, AuthGuard, DashboardBlock, DashboardBlockContent, DashboardBlockFooter, DashboardBlockHeader, DataGridBlock, ForgotPasswordForm, GuestGuard, LoginForm, RegisterForm, ResetPasswordForm, RoleBasedGuard, VerifyCodeForm, createConditionalRender, hasPermission, hasRole, useDashboardBlock, useDashboardBlockContext, useDataGridBlock, useDataGridBlockContext };
+export { AuthBlock, DashboardBlock, DashboardBlockContent, DashboardBlockFooter, DashboardBlockHeader, DataGridBlock, ForgotPasswordForm, LoginForm, RegisterForm, ResetPasswordForm, VerifyCodeForm, useDashboardBlock, useDashboardBlockContext, useDataGridBlock, useDataGridBlockContext };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map