@acvl/frontend-components 0.0.61 → 0.0.62

package/dist/esm/types/src/components/v1/buttons/DeleteButton/DeleteConfirmationDialog.d.ts

@@ -5,6 +5,8 @@ export interface DeleteConfirmationDialogProps {
     handleClose: () => void;
     id?: GridRowId;
     disableNavBack?: boolean;
+    /** Extra callback fired after a successful delete (e.g. close a drawer that has no route to go back to). */
+    onSuccess?: () => void;
 }
 declare const DeleteConfirmationDialog: (props: DeleteConfirmationDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default DeleteConfirmationDialog;

package/dist/esm/types/src/components/v1/datagrids/wrappers/CreateGridWrapper.d.ts

@@ -19,6 +19,11 @@ export interface CreateGridAPIProps {
         extraOptions?: CSVMenuOptionProps[];
     };
     navigationOptions?: NavigateOptions;
+    /**
+     * Overrides the "Manual" option's default behavior (routing to the create page). When
+     * provided, the option runs this callback instead of navigating — e.g. to open a drawer.
+     */
+    onManualCreate?: () => void;
 }
 export interface CreateGridWrapperProps extends CreateGridAPIProps {
     permission: boolean;

package/dist/esm/types/src/components/v2/dashboards/KpiCard.d.ts

@@ -0,0 +1,17 @@
+import type { TypographyProps } from "@mui/material";
+import type { ReactNode } from "react";
+export interface KpiCardProps {
+    icon: ReactNode;
+    label: string;
+    value: ReactNode;
+    caption?: string;
+    color?: string;
+    /** Variante tipográfica del valor. Por defecto `h4`; usa `h5` cuando el valor es
+     *  largo o hay muchas tarjetas por fila. */
+    valueVariant?: TypographyProps["variant"];
+    isLoading: boolean;
+}
+/** Tarjeta de KPI: ícono + etiqueta, un valor destacado y una leyenda opcional.
+ *  Muestra un esqueleto mientras se cargan los datos. */
+declare function KpiCard({ icon, label, value, caption, color, valueVariant, isLoading, }: KpiCardProps): import("react/jsx-runtime").JSX.Element;
+export default KpiCard;

package/dist/esm/types/src/components/v2/dashboards/Panel.d.ts

@@ -0,0 +1,24 @@
+import type { SxProps, Theme } from "@mui/material";
+import type { ReactNode } from "react";
+export interface PanelProps {
+    /** Ícono a la izquierda del título (típicamente `color="action" fontSize="small"`). */
+    icon?: ReactNode;
+    /** Título del encabezado. Si se omite (y no hay ícono ni acción), no se renderiza encabezado. */
+    title?: ReactNode;
+    /** Contenido alineado a la derecha del encabezado (chips, botones, etc.). */
+    action?: ReactNode;
+    /** Región entre el encabezado y el divisor, p. ej. un `<Tabs>`. */
+    tabs?: ReactNode;
+    /** Muestra un divisor bajo el encabezado/tabs. Por defecto `true`. */
+    divider?: boolean;
+    /** Altura del contenedor. Con un número (px) el contenido ocupa el espacio
+     *  restante y hace scroll; con `"100%"` solo iguala la altura de la columna. */
+    height?: number | string;
+    /** Estilos adicionales para el `Paper`. */
+    sx?: SxProps<Theme>;
+    children?: ReactNode;
+}
+/** Contenedor estándar de panel: `Paper` con encabezado (ícono + título + acción),
+ *  divisor opcional y contenido. Unifica el aspecto de los paneles del dashboard. */
+declare function Panel({ icon, title, action, tabs, divider, height, sx, children }: PanelProps): import("react/jsx-runtime").JSX.Element;
+export default Panel;

package/dist/esm/types/src/components/v2/dashboards/PollingCountdownChip.d.ts

@@ -0,0 +1,8 @@
+export interface PollingCountdownChipProps {
+    pollingInterval: number;
+    isFetching: boolean;
+    onRefresh?: () => void;
+}
+/** Chip con cuenta regresiva hasta el próximo refresco de un polling. Al terminar cada
+ *  fetch reinicia el conteo; opcionalmente refresca al hacer clic. */
+export default function PollingCountdownChip({ pollingInterval, isFetching, onRefresh, }: PollingCountdownChipProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/dashboards/index.d.ts

@@ -0,0 +1,3 @@
+export { default as KpiCard, type KpiCardProps } from "./KpiCard";
+export { default as Panel, type PanelProps } from "./Panel";
+export { default as PollingCountdownChip, type PollingCountdownChipProps, } from "./PollingCountdownChip";

package/dist/esm/types/src/components/v2/datagrids/DrawerGrid/index.d.ts

@@ -0,0 +1,74 @@
+import { type ReactNode } from "react";
+import { type GridRowId } from "@mui/x-data-grid";
+import { type PageType } from "@v1";
+import { type BaseGridProps } from "@v1/datagrids/Base";
+import { type DetailFormConfig } from "@v2/layout/pages/DetailPage/useDetailForm";
+export interface DrawerGridDrawerConfig {
+    /** Shared field layout, used by every mode. Same shape as `DetailPage_v2`'s `form`/`sections`. */
+    form: DetailFormConfig["form"];
+    sections: DetailFormConfig["sections"];
+    permissionsPath?: string;
+    /** Panel width. Defaults to the drawer's own default (480). */
+    width?: number | string;
+    title?: {
+        create?: ReactNode;
+        record?: ReactNode | ((id: GridRowId) => ReactNode);
+    };
+    /** Create-mode API (opened by the "Quick create" menu option). */
+    create: {
+        mutation: any;
+        /** Defaults to `"create"`. */
+        pageType?: PageType;
+        successMessage?: string | ((response: any) => string);
+    };
+    /** Record-mode API (opened by a row when `rowAction` is `"drawer"`). */
+    record: {
+        /** Single-record query hook, called with `{ id, ...args(id) }`. */
+        query: any;
+        mutation: any;
+        /** Defaults to `"detail"` (read-only), matching a row-click. Use `"edit"` for an editable drawer. */
+        pageType?: PageType;
+        successMessage?: string | ((response: any) => string);
+        /** Extra query args merged with `{ id }`. */
+        args?: (id: GridRowId) => Record<string, any>;
+        /** Optional delete mutation. When set and the user has delete permission, a delete button appears in the drawer header. */
+        delete?: {
+            mutation: any;
+        };
+    };
+    /** Runs after any successful create/edit (e.g. side effects; the grid refetches via RTK tag invalidation). */
+    onSaved?: (response: any) => void;
+    /** Show the "open full page" button in the drawer header. Defaults to `true`. */
+    showOpenFullPage?: boolean;
+    labels?: {
+        save?: string;
+        cancel?: string;
+    };
+}
+export interface DrawerGridProps {
+    /** Full v1 `Base` grid configuration (pathname, api, dataGridProps, slotProps, ref). */
+    grid: BaseGridProps;
+    /**
+     * How a single row click behaves. `"navigate"` (default) keeps the full-page route;
+     * `"drawer"` opens the record drawer instead. Ctrl/Cmd+click always opens the full page
+     * in a new tab, and the drawer carries an "open full page" button — so the route stays
+     * reachable either way.
+     */
+    rowAction?: "navigate" | "drawer";
+    drawer: DrawerGridDrawerConfig;
+}
+/**
+ * A v1 `Base` grid whose rows and create button can open a `DetailFormDrawer_v2` instead of
+ * navigating to a full page — without giving up the full-page routes. `rowAction` is a
+ * per-grid mode switch: in `"drawer"` mode both a row click and the create menu's "Manual"
+ * option open the drawer; in `"navigate"` mode (default) the grid keeps its full-page routes.
+ * Ctrl/Cmd+click always opens the full page in a new tab, and the record drawer carries an
+ * "open full page" button — so the routes stay reachable either way.
+ *
+ * The full `Base` grid config goes under `grid` (`{ pathname, api, dataGridProps, slotProps }`),
+ * alongside `rowAction` and `drawer`.
+ *
+ * Composition only: the v1 grid stays drawer-agnostic (its `onRowClick` and `onManualCreate`
+ * are generic passthroughs), so the v1→v2 layering is never inverted.
+ */
+export default function DrawerGrid({ grid, rowAction, drawer }: DrawerGridProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/datagrids/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DrawerGrid_v2 } from "./DrawerGrid";
+export type { DrawerGridProps, DrawerGridDrawerConfig } from "./DrawerGrid";

package/dist/esm/types/src/components/v2/dialogs/ConfirmDialog.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export interface ConfirmDialogProps {
+    open: boolean;
+    titulo: string;
+    mensaje: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmColor?: "primary" | "secondary" | "error" | "warning" | "info" | "success";
+    confirmIcon?: ReactNode;
+    isLoading?: boolean;
+    onConfirm: () => void;
+    onClose: () => void;
+}
+/** Diálogo de confirmación genérico: título, mensaje y un par de acciones. El botón de
+ *  confirmar puede mostrar estado de carga mientras se resuelve la acción. */
+declare function ConfirmDialog({ open, titulo, mensaje, confirmLabel, cancelLabel, confirmColor, confirmIcon, isLoading, onConfirm, onClose, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export default ConfirmDialog;

package/dist/esm/types/src/components/v2/dialogs/index.d.ts

@@ -0,0 +1 @@
+export { default as ConfirmDialog, type ConfirmDialogProps } from "./ConfirmDialog";

package/dist/esm/types/src/components/v2/index.d.ts

@@ -1,3 +1,7 @@
+export * from "./dashboards";
+export * from "./datagrids";
+export * from "./dialogs";
 export * from "./inputs";
 export * from "./layout";
 export * from "./lib";
+export * from "./shared";

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/DetailForm.d.ts

@@ -0,0 +1,25 @@
+import { type BoxProps } from "@mui/material";
+import { type DetailFormController } from "./useDetailForm";
+export interface DetailFormProps {
+    /** Result of `useDetailForm`. */
+    controller: DetailFormController;
+    /**
+     * `id` of the `<form>` element. External submit buttons (e.g. inside a dialog footer,
+     * which live outside the form tree) submit via `<button form={formId} type="submit">`.
+     * Defaults to `"formulario"` for parity with `SaveCancelButton`.
+     */
+    formId?: string;
+    /** Persist-tab key for multi-section forms. Defaults to `formId`. */
+    storageKey?: string;
+    /** Height factor passed to the loading spinner. Defaults to `0.7`. */
+    loadingHeight?: number;
+    slotProps?: {
+        form?: Partial<BoxProps>;
+    };
+}
+/**
+ * Presentational, chrome-less body of a record form: the `FormProvider`, the `<form>`
+ * element and the section/tab render tree — no page layout, no header buttons. Compose it
+ * inside a page, dialog or drawer shell that supplies the surrounding chrome.
+ */
+export default function DetailForm({ controller, formId, storageKey, loadingHeight, slotProps, }: DetailFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/DetailFormDialog.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from "react";
+import { type ButtonProps, type DialogContentProps, type DialogProps } from "@mui/material";
+import { type PageType } from "@v1";
+import { type DetailFormApi, type DetailFormConfig } from "./useDetailForm";
+export interface DetailFormDialogProps {
+    open: boolean;
+    /** Close the dialog. Also invoked after a successful save and on cancel. */
+    onClose: () => void;
+    title?: ReactNode;
+    api: DetailFormApi;
+    form: DetailFormConfig["form"];
+    sections: DetailFormConfig["sections"];
+    /** Defaults to `"create"`. */
+    pageType?: PageType;
+    permissionsPath?: string;
+    /** Runs after a successful mutation, before the dialog closes. Receives the response. */
+    onSuccess?: (response: any) => void;
+    labels?: {
+        save?: string;
+        cancel?: string;
+    };
+    slotProps?: {
+        dialog?: Partial<DialogProps>;
+        content?: Partial<DialogContentProps>;
+        saveButton?: Partial<ButtonProps>;
+        cancelButton?: Partial<ButtonProps>;
+    };
+}
+/**
+ * A record form inside a modal dialog. Reuses the exact same `useDetailForm` engine and
+ * `DetailForm` body as `DetailPage_v2` — only the surrounding chrome differs: the header
+ * becomes a `DialogTitle` and the buttons move into `DialogActions`. The save button lives
+ * outside the `<form>` tree, so it submits via the native `form={formId}` attribute.
+ */
+export default function DetailFormDialog({ open, onClose, title, api, form, sections, pageType, permissionsPath, onSuccess, labels, slotProps, }: DetailFormDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/DetailFormDrawer.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+import { type ButtonProps, type DrawerProps } from "@mui/material";
+import { type PageType } from "@v1";
+import { type DetailFormApi, type DetailFormConfig } from "./useDetailForm";
+export interface DetailFormDrawerProps {
+    open: boolean;
+    /** Close the drawer. Also invoked after a successful save and on cancel. */
+    onClose: () => void;
+    title?: ReactNode;
+    api: DetailFormApi;
+    form: DetailFormConfig["form"];
+    sections: DetailFormConfig["sections"];
+    /** Defaults to `"create"`. */
+    pageType?: PageType;
+    permissionsPath?: string;
+    /** Runs after a successful mutation, before the drawer closes. Receives the response. */
+    onSuccess?: (response: any) => void;
+    /** Panel width. Defaults to `480`. */
+    width?: number | string;
+    /** Side the drawer slides in from. Defaults to `"right"`. */
+    anchor?: DrawerProps["anchor"];
+    labels?: {
+        save?: string;
+        cancel?: string;
+    };
+    slots?: {
+        /** Extra actions rendered in the header, left of the close button (e.g. "open full page"). */
+        headerActions?: ReactNode;
+    };
+    slotProps?: {
+        drawer?: Partial<DrawerProps>;
+        saveButton?: Partial<ButtonProps>;
+        cancelButton?: Partial<ButtonProps>;
+    };
+}
+/**
+ * A record form inside a side drawer. Reuses the same `useDetailForm` engine and
+ * `DetailForm` body as `DetailPage_v2`; only the chrome differs — a titled header, a
+ * scrollable body and a pinned footer holding the actions. The save button sits outside
+ * the `<form>`, so it submits via the native `form={formId}` attribute.
+ */
+export default function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, permissionsPath, onSuccess, width, anchor, labels, slots, slotProps, }: DetailFormDrawerProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/index.d.ts

@@ -1,36 +1,11 @@
 import { type ReactNode } from "react";
-import { type JSONFormProps, type PageType } from "@v1";
+import { type PageType } from "@v1";
 import { type ButtonProps } from "@mui/material";
-import { type SectionProps } from "./Section";
+import { type DetailFormApi, type DetailFormConfig } from "./useDetailForm";
 export interface DetailPageV2Props {
-    api: {
-        data: {
-            query: any;
-            args?: any;
-            skipToken?: boolean;
-        };
-        mutate: {
-            mutation: any;
-            args?: any;
-            disable?: boolean;
-            successMessage?: string | ((response: any) => string);
-            postAction?: {
-                after: "create" | "edit" | "both";
-                type: string;
-                node: ReactNode;
-            };
-        };
-        delete?: {
-            mutation: any;
-        };
-    };
-    form: Pick<JSONFormProps, "props" | "type" | "useLabel"> & {
-        schema: any;
-        defaultValues: {
-            [k: string]: any;
-        };
-    };
-    sections: (form: any) => SectionProps[];
+    api: DetailFormApi;
+    form: DetailFormConfig["form"];
+    sections: DetailFormConfig["sections"];
     pageType: PageType;
     slots?: {
         button?: ReactNode;

package/dist/esm/types/src/components/v2/layout/pages/DetailPage/useDetailForm.d.ts

@@ -0,0 +1,82 @@
+import { type BaseSyntheticEvent, type ReactNode } from "react";
+import { type JSONFormProps, type PageType } from "@v1";
+import { type UseFormReturn } from "react-hook-form";
+import { type SectionProps } from "./Section";
+export type DetailFormStatus = "loading" | "not-found" | "not-allowed" | "ready";
+export interface DetailFormApi {
+    data: {
+        query: any;
+        args?: any;
+        skipToken?: boolean;
+    };
+    mutate: {
+        mutation: any;
+        args?: any;
+        disable?: boolean;
+        successMessage?: string | ((response: any) => string);
+        postAction?: {
+            after: "create" | "edit" | "both";
+            type: string;
+            node: ReactNode;
+        };
+    };
+    delete?: {
+        mutation: any;
+    };
+}
+export interface DetailFormConfig {
+    api: DetailFormApi;
+    form: Pick<JSONFormProps, "props" | "type" | "useLabel"> & {
+        schema: any;
+        defaultValues: {
+            [k: string]: any;
+        };
+    };
+    sections: (form: any) => SectionProps[];
+    pageType: PageType;
+    /** dot-path prefix where `obj_permissions` live inside the fetched record. */
+    permissionsPath?: string;
+    /**
+     * Fired after a successful mutation (the form has already been reset). Receives the
+     * mutation response. A page shell navigates back here; a dialog/drawer closes itself.
+     */
+    onSuccess?: (response: any) => void;
+    /** Fired when the user cancels (the form has already been reset). */
+    onCancel?: () => void;
+    /** Fired whenever a fresh record is loaded — e.g. to sync a page title. */
+    onData?: (data: any) => void;
+}
+export interface DetailFormController {
+    /** react-hook-form instance (also exposed via `FormProvider` by `<DetailForm/>`). */
+    form: UseFormReturn<any>;
+    /** The fetched record. */
+    data: any;
+    /** High-level state for a shell to branch on. */
+    status: DetailFormStatus;
+    isLoading: boolean;
+    isFetching: boolean;
+    /** A mutation is in flight. */
+    isSubmitting: boolean;
+    canEdit: boolean;
+    canDelete: boolean;
+    /** Whether the mutate action was disabled via config. */
+    mutateDisabled: boolean;
+    /** Bound submit handler — wire to `<form onSubmit>`. */
+    onSubmit: (e?: BaseSyntheticEvent) => Promise<void>;
+    /** Reset the form, then run `config.onCancel`. */
+    cancel: () => void;
+    /** Node emitted by a successful mutation's `post_action`, or `null`. */
+    postActionNode: ReactNode;
+    /** Passthroughs consumed by `<DetailForm/>`. */
+    sections: (form: any) => SectionProps[];
+    pageType: PageType;
+}
+/**
+ * Headless engine behind every `v2` record form. Owns the form state, data fetch/reset,
+ * permission flags, the mutation + submit pipeline and post-action detection — with zero
+ * page chrome and no routing side-effects. Side-effects (navigate, close, title) are
+ * injected via `onSuccess`/`onCancel`/`onData`, so the same hook drives a full page, a
+ * dialog or a drawer.
+ */
+export declare function useDetailForm(config: DetailFormConfig): DetailFormController;
+export default useDetailForm;

package/dist/esm/types/src/components/v2/layout/pages/index.d.ts

@@ -1 +1,10 @@
 export { default as DetailPage_v2 } from "./DetailPage";
+export type { DetailPageV2Props } from "./DetailPage";
+export { useDetailForm } from "./DetailPage/useDetailForm";
+export type { DetailFormApi, DetailFormConfig, DetailFormController, DetailFormStatus, } from "./DetailPage/useDetailForm";
+export { default as DetailForm_v2 } from "./DetailPage/DetailForm";
+export type { DetailFormProps } from "./DetailPage/DetailForm";
+export { default as DetailFormDialog_v2 } from "./DetailPage/DetailFormDialog";
+export type { DetailFormDialogProps } from "./DetailPage/DetailFormDialog";
+export { default as DetailFormDrawer_v2 } from "./DetailPage/DetailFormDrawer";
+export type { DetailFormDrawerProps } from "./DetailPage/DetailFormDrawer";

package/dist/esm/types/src/components/v2/lib/hooks/useMutationHandler.d.ts

@@ -5,7 +5,7 @@ interface MutationHandlerOptions {
         unwrap: () => Promise<any>;
     };
     form?: UseFormReturn<any>;
-    onSuccess: () => void;
+    onSuccess: (response?: any) => void;
     onValidationError?: () => void;
     successTitle?: string;
     successMessage?: string | ((response: any) => string);

package/dist/esm/types/src/components/v2/shared/PulseDot.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface PulseDotProps {
+    /** Cuando es `true`, el punto es verde y parpadea; si no, usa `inactiveColor`. */
+    active: boolean;
+    /** Color cuando no está activo. Por defecto `error.main`. */
+    inactiveColor?: string;
+    /** Tamaño del punto en px. Por defecto 10. */
+    size?: number;
+    /** Título opcional; si se pasa, envuelve el punto en un Tooltip. */
+    title?: ReactNode;
+}
+/** Punto de estado: verde con animación de parpadeo cuando está activo, de lo
+ *  contrario un color fijo. Se usa para indicar conexión/actividad en vivo. */
+declare function PulseDot({ active, inactiveColor, size, title }: PulseDotProps): import("react/jsx-runtime").JSX.Element;
+export default PulseDot;

package/dist/esm/types/src/components/v2/shared/index.d.ts

@@ -0,0 +1 @@
+export { default as PulseDot, type PulseDotProps } from "./PulseDot";