@acvl/frontend-components 0.0.67 → 0.0.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/index.d.ts +222 -19
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -672,6 +672,28 @@ interface MainDrawerV2Props {
|
|
|
672
672
|
width?: number | string;
|
|
673
673
|
/** Lado desde el que entra el panel. Por defecto `"right"`. */
|
|
674
674
|
anchor?: DrawerProps["anchor"];
|
|
675
|
+
/**
|
|
676
|
+
* `"temporary"` (por defecto) flota sobre la página con backdrop, y se cierra con
|
|
677
|
+
* Escape o al hacer clic fuera.
|
|
678
|
+
*
|
|
679
|
+
* `"docked"` se queda acoplado en el flujo: no hay backdrop ni modal, y el panel
|
|
680
|
+
* ocupa su propio hueco encogiendo a lo que tenga al lado, de modo que se puede
|
|
681
|
+
* seguir trabajando en la página con el panel abierto.
|
|
682
|
+
*
|
|
683
|
+
* Se pinta en el hueco que reserva `MainLayout` —al costado de la pantalla— sin
|
|
684
|
+
* importar desde dónde se declare: viaja hasta ahí por portal (ver
|
|
685
|
+
* `SidePanelHostContext`), así que una grilla enterrada en el contenido abre un panel
|
|
686
|
+
* de pantalla completa igual que el `sidePanel` del layout. Sin `MainLayout` arriba se
|
|
687
|
+
* queda donde esté declarado.
|
|
688
|
+
*
|
|
689
|
+
* El hueco es uno solo y se turnan: abrir un panel encoge al que estuviera puesto, y
|
|
690
|
+
* cerrarlo le devuelve el turno. Nunca se reparten el ancho entre varios.
|
|
691
|
+
*
|
|
692
|
+
* En acoplado el ancho se anima al abrir y cerrar, y `anchor` sólo decide de qué
|
|
693
|
+
* lado va el tirador de arrastre: la posición la fija el contenedor. `slotProps.drawer`
|
|
694
|
+
* y `slotProps.paper` no aplican —no hay `Drawer` ni `Paper` que configurar.
|
|
695
|
+
*/
|
|
696
|
+
variant?: "temporary" | "docked";
|
|
675
697
|
/**
|
|
676
698
|
* Añade un tirador en el borde interior del panel para arrastrar su tamaño. Mientras el
|
|
677
699
|
* usuario no lo arrastre, `width` manda; en cuanto lo hace, el tamaño arrastrado la pisa
|
|
@@ -681,7 +703,10 @@ interface MainDrawerV2Props {
|
|
|
681
703
|
resizable?: boolean;
|
|
682
704
|
/** Tamaño mínimo en px al que se puede arrastrar. Por defecto `320`. */
|
|
683
705
|
minWidth?: number;
|
|
684
|
-
/**
|
|
706
|
+
/**
|
|
707
|
+
* Tamaño máximo en px. Por defecto, el viewport menos un margen: lo justo para dejar
|
|
708
|
+
* backdrop que clicar en el flotante, y un hueco de trabajo de verdad en el acoplado.
|
|
709
|
+
*/
|
|
685
710
|
maxWidth?: number;
|
|
686
711
|
/**
|
|
687
712
|
* Recuerda el tamaño arrastrado bajo esta clave en `localStorage`, de modo que sobreviva a
|
|
@@ -750,8 +775,52 @@ interface MainDrawerV2Props {
|
|
|
750
775
|
* Con `resizable`, el borde interior lleva un tirador: se arrastra con el puntero, se ajusta
|
|
751
776
|
* con las flechas cuando tiene el foco y vuelve a `width` con doble clic. Con
|
|
752
777
|
* `widthStorageKey`, además, el tamaño se recuerda entre visitas.
|
|
778
|
+
*
|
|
779
|
+
* Con `variant="docked"` el mismo panel se acopla en el flujo en vez de flotar: sin backdrop,
|
|
780
|
+
* encogiendo a lo que tenga al lado en lugar de taparlo, de modo que la página de atrás sigue
|
|
781
|
+
* usable con el panel abierto. Ver el `sidePanel` de `MainLayout`.
|
|
782
|
+
*/
|
|
783
|
+
declare function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, variant, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
|
|
784
|
+
|
|
785
|
+
interface SidePanelHost {
|
|
786
|
+
/**
|
|
787
|
+
* El nodo donde `MainLayout` reserva sitio para los paneles acoplados, o `null` si no
|
|
788
|
+
* hay a dónde viajar —porque ya se está dentro del hueco, que es el caso de lo que se
|
|
789
|
+
* pasa por `sidePanel`—.
|
|
790
|
+
*/
|
|
791
|
+
element: HTMLElement | null;
|
|
792
|
+
/**
|
|
793
|
+
* Anuncia si este panel está abierto. Sólo se muestra uno a la vez, y el último en
|
|
794
|
+
* anunciarse es el que manda: hay un único hueco y repartirlo entre varios los deja a
|
|
795
|
+
* todos angostos, además de empujar la página fuera de la pantalla.
|
|
796
|
+
*
|
|
797
|
+
* La identidad la pone el propio panel (un `useId`). Hay que soltar el turno al
|
|
798
|
+
* desmontar, o el hueco se queda esperando a un panel que ya no existe.
|
|
799
|
+
*/
|
|
800
|
+
registrar: (id: string, abierto: boolean) => void;
|
|
801
|
+
/**
|
|
802
|
+
* Los paneles abiertos, en el orden en que pidieron el hueco. El último lo tiene; los
|
|
803
|
+
* demás esperan encogidos su turno.
|
|
804
|
+
*
|
|
805
|
+
* Es la pila entera y no sólo el de encima porque un panel también necesita saber si
|
|
806
|
+
* hay algo debajo: es lo que convierte su botón de cerrar en un "volver".
|
|
807
|
+
*/
|
|
808
|
+
pila: string[];
|
|
809
|
+
}
|
|
810
|
+
/**
|
|
811
|
+
* Cómo llega un panel acoplado al costado de la pantalla, y cómo se turnan entre ellos.
|
|
812
|
+
*
|
|
813
|
+
* Un panel acoplado tiene que salir al costado, y quien lo abre casi nunca está ahí: una
|
|
814
|
+
* grilla vive dentro del contenido, varios niveles abajo. Dejarlo donde se declara lo
|
|
815
|
+
* pintaría dentro de la página, que es justo lo que no se quiere; así que un
|
|
816
|
+
* `MainDrawer_v2` con `variant="docked"` se teletransporta (portal) hasta `element`.
|
|
817
|
+
*
|
|
818
|
+
* Fuera de un `MainLayout` el contexto es `null`: el panel se pinta donde esté declarado y
|
|
819
|
+
* no se turna con nadie.
|
|
753
820
|
*/
|
|
754
|
-
declare
|
|
821
|
+
declare const SidePanelHostContext: React.Context<SidePanelHost | null>;
|
|
822
|
+
/** El hueco de paneles acoplados del layout, o `null` si no hay ninguno arriba. */
|
|
823
|
+
declare const useSidePanelHost: () => SidePanelHost | null;
|
|
755
824
|
|
|
756
825
|
declare module "@mui/x-data-grid" {
|
|
757
826
|
interface ToolbarPropsOverrides {
|
|
@@ -1134,9 +1203,30 @@ interface _HistorialDrawerProps {
|
|
|
1134
1203
|
open: boolean;
|
|
1135
1204
|
handleDrawer: () => void;
|
|
1136
1205
|
endpoint?: string;
|
|
1206
|
+
/**
|
|
1207
|
+
* Cómo se coloca el panel. Por defecto `"docked"`: se acopla al costado de la pantalla y
|
|
1208
|
+
* encoge la página en vez de taparla, que es lo que pide el historial —se abre justo para
|
|
1209
|
+
* cotejar lo que dice contra el registro que se está mirando, y con el panel encima había
|
|
1210
|
+
* que cerrarlo entre campo y campo—.
|
|
1211
|
+
*
|
|
1212
|
+
* `"temporary"` lo devuelve a flotar sobre la página, con backdrop y modal. Hace falta
|
|
1213
|
+
* donde no haya un `MainLayout_v2` arriba que le reserve el hueco: sin él, el acoplado se
|
|
1214
|
+
* pinta donde esté declarado, o sea dentro de la propia página.
|
|
1215
|
+
*/
|
|
1216
|
+
variant?: MainDrawerV2Props["variant"];
|
|
1217
|
+
/** Ancho del panel en px. Por defecto el de `MainDrawer_v2` (600). */
|
|
1218
|
+
width?: number | string;
|
|
1219
|
+
/**
|
|
1220
|
+
* Permite arrastrar el borde interior para cambiar el ancho. Activo por defecto: acoplado,
|
|
1221
|
+
* el panel le quita sitio a la página, así que cuánto se lleva tiene que poder decidirlo
|
|
1222
|
+
* quien lo está usando. El ancho arrastrado se recuerda entre visitas.
|
|
1223
|
+
*/
|
|
1224
|
+
resizable?: boolean;
|
|
1225
|
+
/** Dónde se recuerda el ancho arrastrado. Cadena vacía para no recordarlo. */
|
|
1226
|
+
widthStorageKey?: string;
|
|
1137
1227
|
}
|
|
1138
1228
|
|
|
1139
|
-
interface HistorialDrawerProps extends Pick<_HistorialDrawerProps, "endpoint"> {
|
|
1229
|
+
interface HistorialDrawerProps extends Pick<_HistorialDrawerProps, "endpoint" | "variant" | "width"> {
|
|
1140
1230
|
iconButtonProps?: IconButtonProps;
|
|
1141
1231
|
}
|
|
1142
1232
|
declare const HistorialDrawer: React__default.FC<HistorialDrawerProps>;
|
|
@@ -1826,6 +1916,12 @@ interface SubsectionProps {
|
|
|
1826
1916
|
description?: string;
|
|
1827
1917
|
first?: boolean;
|
|
1828
1918
|
slotProps?: {
|
|
1919
|
+
/**
|
|
1920
|
+
* Grid raíz de la subsección. Su `size`/`offset` —por defecto `12`— resuelve igual que el
|
|
1921
|
+
* de un campo: contra el ancho del formulario cuando este corre en modo contenedor, así
|
|
1922
|
+
* que un `{ xs: 12, md: 6 }` parte el formulario en dos columnas cuando *el formulario*
|
|
1923
|
+
* es ancho, no cuando lo es la pantalla.
|
|
1924
|
+
*/
|
|
1829
1925
|
parentGrid?: Partial<GridProps>;
|
|
1830
1926
|
};
|
|
1831
1927
|
fields?: FieldProps[];
|
|
@@ -1972,6 +2068,11 @@ declare const formGridSx: (size: GridProps["size"], offset?: GridProps["offset"]
|
|
|
1972
2068
|
*
|
|
1973
2069
|
* `inline-size`, nunca `size`: el `Collapse` de `Subsection` anima midiendo `clientHeight`, y
|
|
1974
2070
|
* contener el eje de bloque lo rompería.
|
|
2071
|
+
*
|
|
2072
|
+
* Se puede anidar reusando el mismo nombre: un elemento nunca resuelve sus propias
|
|
2073
|
+
* `@container` contra sí mismo, sino contra el contenedor ancestro más cercano. Así una
|
|
2074
|
+
* subsección con `size` responsivo mide contra el formulario mientras sus campos miden contra
|
|
2075
|
+
* ella.
|
|
1975
2076
|
*/
|
|
1976
2077
|
declare const formContainerSx: (containerName?: string) => CSSObject;
|
|
1977
2078
|
|
|
@@ -1989,13 +2090,16 @@ interface DetailFormProps {
|
|
|
1989
2090
|
/** Height factor passed to the loading spinner. Defaults to `0.7`. */
|
|
1990
2091
|
loadingHeight?: number;
|
|
1991
2092
|
/**
|
|
1992
|
-
* What
|
|
2093
|
+
* What the `size` breakpoints inside the form resolve against — each field's, and each
|
|
2094
|
+
* subsection's own (`slotProps.parentGrid.size`).
|
|
1993
2095
|
*
|
|
1994
2096
|
* `"viewport"` is MUI's own behaviour. `"container"` resolves them against the width of
|
|
1995
2097
|
* *this form*, so one section definition serves a full page, a `maxWidth="sm"` dialog and a
|
|
1996
2098
|
* 460px drawer without a hand-picked size per shell — and re-flows live as the drawer is
|
|
1997
2099
|
* dragged. Note that it makes the `<form>` a CSS containment context, so a `slotProps.form`
|
|
1998
|
-
* that overrides `width` with a content-dependent value would no longer resolve.
|
|
2100
|
+
* that overrides `width` with a content-dependent value would no longer resolve. A
|
|
2101
|
+
* subsection that asks for a width of its own becomes, in turn, the container its own fields
|
|
2102
|
+
* resolve against.
|
|
1999
2103
|
* @default "viewport"
|
|
2000
2104
|
*/
|
|
2001
2105
|
responsiveTo?: "viewport" | "container";
|
|
@@ -2063,6 +2167,15 @@ interface DetailFormDrawerProps {
|
|
|
2063
2167
|
width?: number | string;
|
|
2064
2168
|
/** Side the drawer slides in from. Defaults to `"right"`. */
|
|
2065
2169
|
anchor?: DrawerProps["anchor"];
|
|
2170
|
+
/**
|
|
2171
|
+
* `"temporary"` (the default) floats over the page. `"docked"` takes its own space at
|
|
2172
|
+
* the side of the screen and shrinks the app instead of covering it, so the page behind
|
|
2173
|
+
* stays usable — see `MainDrawer_v2`.
|
|
2174
|
+
*
|
|
2175
|
+
* Docked drops the modal: nothing stops the user from touching the page while the form
|
|
2176
|
+
* is open, so a drawer that guards unsaved edits behind the backdrop no longer does.
|
|
2177
|
+
*/
|
|
2178
|
+
variant?: MainDrawerV2Props["variant"];
|
|
2066
2179
|
/**
|
|
2067
2180
|
* Let the user drag the drawer's inner edge to resize it. Forwarded to `MainDrawer_v2`
|
|
2068
2181
|
* along with the four props below — see it for the full behaviour.
|
|
@@ -2080,9 +2193,10 @@ interface DetailFormDrawerProps {
|
|
|
2080
2193
|
/** Fires with the final dragged width in px, or `null` when a double click resets it. */
|
|
2081
2194
|
onWidthChange?: (width: number | null) => void;
|
|
2082
2195
|
/**
|
|
2083
|
-
* What
|
|
2084
|
-
* is narrow by construction, so viewport
|
|
2085
|
-
* cram the fields — and they would not
|
|
2196
|
+
* What the `size` breakpoints of the fields — and of the subsections themselves — resolve
|
|
2197
|
+
* against. Defaults to `"container"`: a drawer is narrow by construction, so viewport
|
|
2198
|
+
* breakpoints would pick the wide-screen value and cram the fields — and they would not
|
|
2199
|
+
* react to a drag either.
|
|
2086
2200
|
* @see DetailFormProps.responsiveTo
|
|
2087
2201
|
*/
|
|
2088
2202
|
responsiveTo?: DetailFormProps["responsiveTo"];
|
|
@@ -2120,7 +2234,7 @@ interface DetailFormDrawerProps {
|
|
|
2120
2234
|
* `labels.saveAndNext`. Guardar sits outside the `<form>` and submits via the native
|
|
2121
2235
|
* `form={formId}` attribute; Guardar ↓ submits by hand, so the implicit Enter stays Guardar.
|
|
2122
2236
|
*/
|
|
2123
|
-
declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, responsiveTo, containerBreakpoints, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
|
|
2237
|
+
declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, variant, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, responsiveTo, containerBreakpoints, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
|
|
2124
2238
|
|
|
2125
2239
|
interface DrawerGridDrawerConfig {
|
|
2126
2240
|
/** Shared field layout, used by every mode. Same shape as `DetailPage_v2`'s `form`/`sections`. */
|
|
@@ -2129,6 +2243,21 @@ interface DrawerGridDrawerConfig {
|
|
|
2129
2243
|
permissionsPath?: string;
|
|
2130
2244
|
/** Panel width. Defaults to the drawer's own default (600). */
|
|
2131
2245
|
width?: number | string;
|
|
2246
|
+
/**
|
|
2247
|
+
* How the panel sits on the screen. Defaults to `"temporary"`: it floats over the page,
|
|
2248
|
+
* modal, the way it always has.
|
|
2249
|
+
*
|
|
2250
|
+
* `"docked"` gives it its own space at the side and shrinks the app instead of covering
|
|
2251
|
+
* it, so the grid stays visible next to the record. Worth it where the row and the list
|
|
2252
|
+
* are read together; it costs two things, both from dropping the modal:
|
|
2253
|
+
*
|
|
2254
|
+
* - Nothing stops the user from re-sorting, filtering or paging the grid while the
|
|
2255
|
+
* drawer is open, and the footer navigator walks the rows it sampled when the record
|
|
2256
|
+
* opened. It stays on the list the user was reading, which is usually what's wanted,
|
|
2257
|
+
* but it can no longer claim to match what's on screen.
|
|
2258
|
+
* - Unsaved edits are no longer fenced off by the backdrop.
|
|
2259
|
+
*/
|
|
2260
|
+
variant?: DetailFormDrawerProps["variant"];
|
|
2132
2261
|
/**
|
|
2133
2262
|
* Let the user drag the drawer's inner edge to resize it. The dragged width is remembered
|
|
2134
2263
|
* across openings under a key derived from the grid's own storage key — override it with
|
|
@@ -2232,8 +2361,13 @@ interface DrawerGridProps {
|
|
|
2232
2361
|
}
|
|
2233
2362
|
/**
|
|
2234
2363
|
* A `ServerGrid_v2` whose rows and create button open a `DetailFormDrawer_v2` instead of
|
|
2235
|
-
* navigating to a full page — without giving up the full-page routes.
|
|
2236
|
-
*
|
|
2364
|
+
* navigating to a full page — without giving up the full-page routes.
|
|
2365
|
+
*
|
|
2366
|
+
* The panel floats over the page by default. `drawer.variant: "docked"` gives it its own
|
|
2367
|
+
* space at the side instead, shrinking the app so the grid stays visible next to the
|
|
2368
|
+
* record; read that prop before switching, the two differ in more than looks.
|
|
2369
|
+
*
|
|
2370
|
+
* A row click and the create menu's "Manual" option both open the drawer; Ctrl/Cmd+click still opens the full
|
|
2237
2371
|
* page in a new tab, Alt+click opens it in the same tab, and the record drawer carries an
|
|
2238
2372
|
* "open full page" button — so the routes stay reachable either way. Grids whose rows have
|
|
2239
2373
|
* no route of their own turn all three off with `drawer.showOpenFullPage: false`.
|
|
@@ -2283,11 +2417,45 @@ interface ConfirmDialogProps {
|
|
|
2283
2417
|
* confirmar puede mostrar estado de carga mientras se resuelve la acción. */
|
|
2284
2418
|
declare function ConfirmDialog({ open, titulo, mensaje, confirmLabel, cancelLabel, confirmColor, confirmIcon, isLoading, onConfirm, onClose, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
|
|
2285
2419
|
|
|
2420
|
+
interface ActionsMenuProps {
|
|
2421
|
+
delete?: {
|
|
2422
|
+
mutation: any;
|
|
2423
|
+
disableNavBack?: boolean;
|
|
2424
|
+
};
|
|
2425
|
+
historial?: {
|
|
2426
|
+
endpoint?: string;
|
|
2427
|
+
/** Defaults to `"docked"` — the panel takes its own space beside the page. */
|
|
2428
|
+
variant?: _HistorialDrawerProps["variant"];
|
|
2429
|
+
/** Panel width in px. Defaults to 600. */
|
|
2430
|
+
width?: number | string;
|
|
2431
|
+
};
|
|
2432
|
+
extraButtons?: {
|
|
2433
|
+
title: string;
|
|
2434
|
+
icon: ReactNode;
|
|
2435
|
+
onClick: () => void;
|
|
2436
|
+
}[];
|
|
2437
|
+
}
|
|
2438
|
+
|
|
2286
2439
|
interface DetailPageV2Props {
|
|
2287
2440
|
api: DetailFormApi;
|
|
2288
2441
|
form: DetailFormConfig["form"];
|
|
2289
2442
|
sections: DetailFormConfig["sections"];
|
|
2290
2443
|
pageType: PageType;
|
|
2444
|
+
/**
|
|
2445
|
+
* What the `size` breakpoints of the fields — and of the subsections themselves — resolve
|
|
2446
|
+
* against. Defaults to `"container"`: the width of the form, not of the screen.
|
|
2447
|
+
*
|
|
2448
|
+
* A full page is no longer the whole viewport minus the sidebar — a docked side panel
|
|
2449
|
+
* takes its share of it — so the screen stopped being a good proxy for how much room
|
|
2450
|
+
* the fields actually have. Against the form they re-flow as that room changes, with
|
|
2451
|
+
* no re-render: the breakpoint ladder is CSS.
|
|
2452
|
+
*
|
|
2453
|
+
* `"viewport"` restores MUI's own behaviour for a page that needs it.
|
|
2454
|
+
* @see DetailFormProps.responsiveTo
|
|
2455
|
+
*/
|
|
2456
|
+
responsiveTo?: DetailFormProps["responsiveTo"];
|
|
2457
|
+
/** @see DetailFormProps.containerBreakpoints */
|
|
2458
|
+
containerBreakpoints?: DetailFormProps["containerBreakpoints"];
|
|
2291
2459
|
slots?: {
|
|
2292
2460
|
button?: ReactNode;
|
|
2293
2461
|
extraButtons?: {
|
|
@@ -2308,9 +2476,12 @@ interface DetailPageV2Props {
|
|
|
2308
2476
|
};
|
|
2309
2477
|
cancel?: Partial<ButtonProps>;
|
|
2310
2478
|
};
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2479
|
+
/**
|
|
2480
|
+
* The history panel opened from the actions menu. It docks beside the page rather
|
|
2481
|
+
* than floating over it, so the record stays readable next to what the history says
|
|
2482
|
+
* about it — see `ActionsMenuProps.historial` for how to change that.
|
|
2483
|
+
*/
|
|
2484
|
+
historial?: ActionsMenuProps["historial"];
|
|
2314
2485
|
permissionsPath?: string;
|
|
2315
2486
|
deleteButton?: {
|
|
2316
2487
|
disableNavBack?: boolean;
|
|
@@ -2333,9 +2504,9 @@ interface DetailFormDialogProps {
|
|
|
2333
2504
|
/** Runs after a successful mutation, before the dialog closes. Receives the response. */
|
|
2334
2505
|
onSuccess?: (response: any) => void;
|
|
2335
2506
|
/**
|
|
2336
|
-
* What
|
|
2337
|
-
* `maxWidth="sm"` dialog is narrow by construction, so
|
|
2338
|
-
* wide-screen value and cram the fields.
|
|
2507
|
+
* What the `size` breakpoints of the fields — and of the subsections themselves — resolve
|
|
2508
|
+
* against. Defaults to `"container"`: a `maxWidth="sm"` dialog is narrow by construction, so
|
|
2509
|
+
* viewport breakpoints would pick the wide-screen value and cram the fields.
|
|
2339
2510
|
* @see DetailFormProps.responsiveTo
|
|
2340
2511
|
*/
|
|
2341
2512
|
responsiveTo?: DetailFormProps["responsiveTo"];
|
|
@@ -2394,6 +2565,9 @@ interface MainLayoutPageHeaderProps extends PageHeaderProps {
|
|
|
2394
2565
|
*
|
|
2395
2566
|
* Atajo Shift+F: alterna pantalla completa (oculta navegación y encabezados).
|
|
2396
2567
|
*
|
|
2568
|
+
* Con `sidePanel` el cascarón deja de ocupar el viewport entero y comparte la fila
|
|
2569
|
+
* con un panel acoplado a la derecha (ver esa prop).
|
|
2570
|
+
*
|
|
2397
2571
|
* El estado plegado/expandido del sidebar de escritorio se guarda en
|
|
2398
2572
|
* `localStorage` y se restaura al recargar (ver `sidebarStorageKey`).
|
|
2399
2573
|
**/
|
|
@@ -2501,9 +2675,38 @@ interface MainLayoutProps {
|
|
|
2501
2675
|
/** Contenido de cada snack de progreso. Por defecto una barra de progreso. */
|
|
2502
2676
|
progressStatus?: (data: any) => ReactNode;
|
|
2503
2677
|
};
|
|
2678
|
+
/**
|
|
2679
|
+
* Panel acoplado a la derecha del cascarón, a lo alto del viewport: al lado del
|
|
2680
|
+
* header, del sidebar y del contenido, no encima. Mientras esté abierto el
|
|
2681
|
+
* dashboard entero se encoge para dejarle sitio, así que la página de atrás sigue
|
|
2682
|
+
* usable —es la diferencia con un drawer, que la tapa—.
|
|
2683
|
+
*
|
|
2684
|
+
* Aquí sólo se le reserva el hueco; el panel maneja su propio ancho, su animación y
|
|
2685
|
+
* si está abierto o cerrado. Lo natural es un `MainDrawer_v2` con `variant="docked"`,
|
|
2686
|
+
* que además queda con el encabezado a la misma altura que la barra superior.
|
|
2687
|
+
*
|
|
2688
|
+
* El ancho que ocupe se publica en `SIDE_PANEL_WIDTH_VAR`, para que lo que esté fijo
|
|
2689
|
+
* al viewport pueda apartarse.
|
|
2690
|
+
*/
|
|
2691
|
+
sidePanel?: ReactNode;
|
|
2504
2692
|
/** Contenido a renderizar; por defecto el `<Outlet />` del router. */
|
|
2505
2693
|
children?: ReactNode;
|
|
2506
2694
|
}
|
|
2695
|
+
/**
|
|
2696
|
+
* Variable CSS con el ancho que ocupa ahora mismo el `sidePanel`, publicada en la raíz
|
|
2697
|
+
* del documento.
|
|
2698
|
+
*
|
|
2699
|
+
* El panel encoge el cascarón, pero no lo que está fijo al viewport —un FAB, los snacks
|
|
2700
|
+
* de progreso—, que quedaría debajo. Leyendo esta variable esos elementos se apartan
|
|
2701
|
+
* solos, y siguen el ancho aunque el panel se anime o el usuario lo arrastre:
|
|
2702
|
+
*
|
|
2703
|
+
* right: `calc(${theme.spacing(4)} + var(--acv-side-panel-width, 0px))`
|
|
2704
|
+
*
|
|
2705
|
+
* Va en `documentElement` porque buena parte de esos elementos se pintan en portales,
|
|
2706
|
+
* fuera del árbol del layout. Sin panel abierto vale `0px`, y fuera de este layout no
|
|
2707
|
+
* existe: de ahí que se lea siempre con un fallback.
|
|
2708
|
+
*/
|
|
2709
|
+
declare const SIDE_PANEL_WIDTH_VAR = "--acv-side-panel-width";
|
|
2507
2710
|
declare const MainLayout: (props: MainLayoutProps) => react_jsx_runtime.JSX.Element;
|
|
2508
2711
|
|
|
2509
2712
|
/**
|
|
@@ -2612,5 +2815,5 @@ interface PulseDotProps {
|
|
|
2612
2815
|
* contrario un color fijo. Se usa para indicar conexión/actividad en vivo. */
|
|
2613
2816
|
declare function PulseDot({ active, inactiveColor, size, title }: PulseDotProps): react_jsx_runtime.JSX.Element;
|
|
2614
2817
|
|
|
2615
|
-
export { APIContext, APIProvider, ActiveCell, ActiveIcon, Base, ButtonWithDrawer, COLOR_SCHEME_SELECTOR, CSVUpload, ConfirmDialog, ContentLayout, ControlledAddressAutocomplete, ControlledAmountWithCurrency, ControlledDate$1 as ControlledDate, ControlledDate as ControlledDate_v2, ControlledDropdown, ControlledFileField$1 as ControlledFileField, ControlledFileField as ControlledFileField_v2, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect$1 as ControlledSelect, ControlledSelect as ControlledSelect_v2, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, CustomNoRows, DEFAULT_FORM_BREAKPOINTS, DEFAULT_PAGINATION, DeleteButton, DeleteConfirmationDialog, DetailFormDialog as DetailFormDialog_v2, DetailFormDrawer as DetailFormDrawer_v2, DetailForm as DetailForm_v2, DetailPage$1 as DetailPage, DetailPage as DetailPage_v2, DrawerGrid as DrawerGrid_v2, EditButton, ExportCSV, ExtraButtons, FORM_CONTAINER_NAME, HistorialDrawer, KpiCard, LAYER_ORDER, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MainDrawer$1 as MainDrawer_v2, MainLayout, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, PAGE_SIZE_OPTIONS, Panel, PollingCountdownChip, PulseDot, SaveCancelButton, ServerGrid as ServerGrid_v2, StatusBadge, StyledMenu, Tabs, Transitions, TrueFalse, UncontrolledText, changeTitle, closeProgressSnack, composeGridProps, deleteColumn$1 as deleteColumn, deleteColumn as deleteColumn_v2, editColumn, filterQuery, formContainerSx, formGridSx, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, resolveInitialState, setErrors, _default$1 as snackProgressReducer, tags, theme, togglableFields, updateProgressSnackData, useAPI, useColorMode, useDetailForm, useHasPermission, useHasPermission_v2, useKeyboardShortcut, useMutationHandler, useNavigation, useServerGrid, valueLabel };
|
|
2616
|
-
export type { APIcontextProps, AddressValue, AppTheme, ColorMode, ComoOpcionesProps, ConfirmDialogProps, ControlledInput, CustomFilterDef, CustomToolbarProps, DeleteGridColumnsProps$1 as DeleteGridColumnsProps, DetachedPage, DetailFormApi, DetailFormConfig, DetailFormController, DetailFormDialogProps, DetailFormDrawerNavigation, DetailFormDrawerProps, DetailFormProps, DetailFormStatus, DetailPageV2Props, DetailRenderProps, DrawerGridDrawerConfig, DrawerGridEditConfig, DrawerGridProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps$1 as FieldProps, FieldValidationProps, FilterInput, FormBreakpoint, FormGridSxOptions, GridArgs, GridColDefPropsOverrides, GridLayerContribution, GridLayerId, GridLayerMap, JSONFormProps, JSONParserProps, KeyboardShortcut, KpiCardProps, MainDrawerV2Props, MainLayoutPageHeaderProps, MainLayoutProps, MainLayoutSidebarFooterProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType, PanelProps, PollingCountdownChipProps, ProgressStatusProps, PulseDotProps, RowsSnapshot, ServerGridArgs, ServerGridCreateApi, ServerGridDataApi, ServerGridDeleteApi, ServerGridEditApi, ServerGridEditToggleApi, ServerGridHandle, ServerGridProps, ServerGridSnapshot, ServerGridState, UseColorModeResult, UseServerGridOptions };
|
|
2818
|
+
export { APIContext, APIProvider, ActiveCell, ActiveIcon, Base, ButtonWithDrawer, COLOR_SCHEME_SELECTOR, CSVUpload, ConfirmDialog, ContentLayout, ControlledAddressAutocomplete, ControlledAmountWithCurrency, ControlledDate$1 as ControlledDate, ControlledDate as ControlledDate_v2, ControlledDropdown, ControlledFileField$1 as ControlledFileField, ControlledFileField as ControlledFileField_v2, FileUploadBox as ControlledFileUploadBox, ControlledNumber, ControlledPhoneNumber, ControlledSelect$1 as ControlledSelect, ControlledSelect as ControlledSelect_v2, ControlledSlider as ControlledSimpleSlider, ControlledSlider$1 as ControlledSlider, ControlledSwitch, ControlledText, ControlledTimePicker, ControlledToggleButtons, CoverPage, CreateButtonBase, CreateButtonWithMenuOptions, CrudDropdown, CustomNoRows, DEFAULT_FORM_BREAKPOINTS, DEFAULT_PAGINATION, DeleteButton, DeleteConfirmationDialog, DetailFormDialog as DetailFormDialog_v2, DetailFormDrawer as DetailFormDrawer_v2, DetailForm as DetailForm_v2, DetailPage$1 as DetailPage, DetailPage as DetailPage_v2, DrawerGrid as DrawerGrid_v2, EditButton, ExportCSV, ExtraButtons, FORM_CONTAINER_NAME, HistorialDrawer, KpiCard, LAYER_ORDER, ListPage, Loadable, LoadingComponent, Logo, MainDrawer, MainDrawer$1 as MainDrawer_v2, MainLayout, MenuItemWithLoading, ModuleCard, MoreOptions, MyGridEditSingleSelect, NavigationContext, NavigationProvider, NormalOrIcon, NotAllowed, NotFound, ObjectProgressStack, PAGE_SIZE_OPTIONS, Panel, PollingCountdownChip, PulseDot, SIDE_PANEL_WIDTH_VAR, SaveCancelButton, ServerGrid as ServerGrid_v2, SidePanelHostContext, StatusBadge, StyledMenu, Tabs, Transitions, TrueFalse, UncontrolledText, changeTitle, closeProgressSnack, composeGridProps, deleteColumn$1 as deleteColumn, deleteColumn as deleteColumn_v2, editColumn, filterQuery, formContainerSx, formGridSx, formParser, _default as headerReducer, manualCacheRefresh, mergeSettings, openProgressSnack, query, renderEditCellWithErrorTooltip, resolveInitialState, setErrors, _default$1 as snackProgressReducer, tags, theme, togglableFields, updateProgressSnackData, useAPI, useColorMode, useDetailForm, useHasPermission, useHasPermission_v2, useKeyboardShortcut, useMutationHandler, useNavigation, useServerGrid, useSidePanelHost, valueLabel };
|
|
2819
|
+
export type { APIcontextProps, AddressValue, AppTheme, ColorMode, ComoOpcionesProps, ConfirmDialogProps, ControlledInput, CustomFilterDef, CustomToolbarProps, DeleteGridColumnsProps$1 as DeleteGridColumnsProps, DetachedPage, DetailFormApi, DetailFormConfig, DetailFormController, DetailFormDialogProps, DetailFormDrawerNavigation, DetailFormDrawerProps, DetailFormProps, DetailFormStatus, DetailPageV2Props, DetailRenderProps, DrawerGridDrawerConfig, DrawerGridEditConfig, DrawerGridProps, EditGridColumnsProps, EditReadOnlyFields, FieldFilter, FieldProps$1 as FieldProps, FieldValidationProps, FilterInput, FormBreakpoint, FormGridSxOptions, GridArgs, GridColDefPropsOverrides, GridLayerContribution, GridLayerId, GridLayerMap, JSONFormProps, JSONParserProps, KeyboardShortcut, KpiCardProps, MainDrawerV2Props, MainLayoutPageHeaderProps, MainLayoutProps, MainLayoutSidebarFooterProps, MyDataGridProps, MyGridFilterModel, MyTab, MyTabProps, PageType, PanelProps, PollingCountdownChipProps, ProgressStatusProps, PulseDotProps, RowsSnapshot, ServerGridArgs, ServerGridCreateApi, ServerGridDataApi, ServerGridDeleteApi, ServerGridEditApi, ServerGridEditToggleApi, ServerGridHandle, ServerGridProps, ServerGridSnapshot, ServerGridState, SidePanelHost, UseColorModeResult, UseServerGridOptions };
|
package/package.json
CHANGED