@acvl/frontend-components 0.0.65 → 0.0.66

package/dist/index.d.ts

@@ -665,6 +665,31 @@ interface MainDrawerV2Props {
     width?: number | string;
     /** Lado desde el que entra el panel. Por defecto `"right"`. */
     anchor?: DrawerProps["anchor"];
+    /**
+     * Añade un tirador en el borde interior del panel para arrastrar su tamaño. Mientras el
+     * usuario no lo arrastre, `width` manda; en cuanto lo hace, el tamaño arrastrado la pisa
+     * y sobrevive a cerrar y reabrir el panel (mientras el componente siga montado). Doble
+     * clic en el tirador vuelve a `width`.
+     */
+    resizable?: boolean;
+    /** Tamaño mínimo en px al que se puede arrastrar. Por defecto `320`. */
+    minWidth?: number;
+    /** Tamaño máximo en px. Por defecto, el viewport menos un margen para el backdrop. */
+    maxWidth?: number;
+    /**
+     * Recuerda el tamaño arrastrado bajo esta clave en `localStorage`, de modo que sobreviva a
+     * desmontar el panel —el caso de `DrawerGrid_v2`, que lo remonta en cada apertura— y a
+     * recargar la página. Sin clave, el tamaño dura lo que dure el componente montado.
+     *
+     * La clave debe ser única por panel: dos que la compartan se pisan el ancho entre sí.
+     */
+    widthStorageKey?: string;
+    /**
+     * Se invoca al soltar el arrastre (y en cada paso del teclado) con el tamaño en px, o
+     * `null` cuando el doble clic lo devuelve a `width`. Para reaccionar al cambio o guardarlo
+     * en otro sitio; `widthStorageKey` no lo necesita.
+     */
+    onWidthChange?: (width: number | null) => void;
     /** Impide que un clic en el backdrop cierre el panel (formularios con cambios sin guardar). */
     disableBackdropClose?: boolean;
     /** Oculta el botón de cerrar integrado, para reemplazarlo desde `slots.headerActions`. */
@@ -696,6 +721,8 @@ interface MainDrawerV2Props {
         footer?: Partial<BoxProps>;
         title?: Partial<TypographyProps>;
         closeButton?: Partial<IconButtonProps>;
+        /** Tirador de arrastre; sólo se renderiza con `resizable`. */
+        resizeHandle?: Partial<BoxProps>;
     };
 }
 /**
@@ -712,8 +739,12 @@ interface MainDrawerV2Props {
  * `theme.shape.borderRadius` y sigue al `anchor`; y el `sx` que llega por `slotProps` se
  * concatena en vez de reemplazar el propio. No depende de `@toolpad/core`, así que sirve
  * fuera de un layout de Toolpad.
+ *
+ * Con `resizable`, el borde interior lleva un tirador: se arrastra con el puntero, se ajusta
+ * con las flechas cuando tiene el foco y vuelve a `width` con doble clic. Con
+ * `widthStorageKey`, además, el tamaño se recuerda entre visitas.
  */
-declare function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
+declare function MainDrawer$1({ open, onClose, title, subtitle, children, width, anchor, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, disableBackdropClose, hideCloseButton, disableGutters, pageBackgroundColor, chromeBackgroundColor, contentGap, contentBorderRadius, slots, slotProps, }: MainDrawerV2Props): react_jsx_runtime.JSX.Element;
 
 declare module "@mui/x-data-grid" {
     interface ToolbarPropsOverrides {
@@ -851,6 +882,25 @@ interface MyTabProps {
     initialValue?: string;
     storageKey?: string;
     type?: PageType;
+    /**
+     * Alto que se ajusta al contenido, con `ALTO` de tope, en vez del alto fijo de siempre.
+     *
+     * El default arma la cadena de altos con porcentajes: el contenedor mide `ALTO`, el de
+     * los paneles 93.5% de él y cada panel 100% del anterior. Eso sólo funciona con un alto
+     * definido arriba — si el contenedor midiera `100%` de un padre sin alto, toda la cadena
+     * resuelve a `auto` y lo de adentro (un DataGrid, por ejemplo) crece con su contenido y
+     * se desborda.
+     *
+     * Con `fitContent` la cadena es flex: el contenedor no fija alto, sólo `maxHeight`, y
+     * cada eslabón va con `flex: 1 1 auto` + `minHeight: 0` para poder encoger. Las pestañas
+     * miden entonces lo que mida su contenido y, al pasarse del tope, es el contenido el que
+     * encoge y scrollea por dentro. El contenido tiene que seguir la cadena: cualquier
+     * envoltura propia entre el panel y el grid necesita también `flex: 1 1 auto` y
+     * `minHeight: 0`, en lugar de `height: 1`.
+     *
+     * @default false
+     */
+    fitContent?: boolean;
     slotProps?: {
         mainContainer?: BoxProps;
         contentContainer?: BoxProps;
@@ -1201,6 +1251,17 @@ interface ServerGridEditApi {
 interface ServerGridEditToggleApi {
     /** Hides the button and its shortcuts without touching permissions. */
     disabled?: boolean;
+    /**
+     * Drives edit mode from outside instead of leaving it to the toolbar toggle — e.g. a grid
+     * embedded in a detail form that should follow the form's own edit state.
+     *
+     * Leave it `undefined` and the layer owns the mode, as always. Pass a boolean and the
+     * caller owns it: the toolbar button and its shortcuts disappear, because two edit
+     * affordances for one grid only raises the question of which one won, and the checkbox
+     * column is left alone — whoever drives the mode also decides what it looks like. Still
+     * fail-closed — `true` without the model's change permission stays off.
+     */
+    active?: boolean;
     /** Notified whenever the toggle flips. */
     onEditModeChange?: (edit: boolean) => void;
 }
@@ -1769,8 +1830,20 @@ interface DrawerGridDrawerConfig {
     form: DetailFormConfig["form"];
     sections: DetailFormConfig["sections"];
     permissionsPath?: string;
-    /** Panel width. Defaults to the drawer's own default (480). */
+    /** Panel width. Defaults to the drawer's own default (600). */
     width?: number | string;
+    /**
+     * Let the user drag the drawer's inner edge to resize it. The dragged width is remembered
+     * across openings under a key derived from the grid's own storage key — override it with
+     * `widthStorageKey`, or turn the memory off by passing an empty string.
+     */
+    resizable?: boolean;
+    /** Smallest width the drag allows, in px. Defaults to `320`. */
+    minWidth?: number;
+    /** Largest width the drag allows, in px. Defaults to the viewport minus a margin. */
+    maxWidth?: number;
+    /** Where the dragged width is remembered. Defaults to the grid's storage key + `_DW`. */
+    widthStorageKey?: string;
     title?: {
         create?: ReactNode;
         record?: ReactNode | ((id: GridRowId) => ReactNode);
@@ -1814,16 +1887,28 @@ interface DrawerGridDrawerConfig {
     /**
      * Show the footer navigator that walks the grid's rows — prev/next arrows plus the
      * record's position — in the record drawer. Defaults to `true`.
+     *
+     * It also gates "Guardar ↓", the save that steps to the next row instead of closing:
+     * without a list to walk there is nothing to continue to.
      */
     showNavigator?: boolean;
+    /** Rótulos del pie del cajón. `saveAndNext` por defecto es `"Guardar ↓"`. */
     labels?: {
         save?: string;
         cancel?: string;
+        saveAndNext?: string;
     };
 }
 interface DrawerGridEditConfig {
     /** Hides the toggle (and its shortcuts) without touching permissions. */
     disabled?: boolean;
+    /**
+     * Drives edit mode from outside instead of leaving it to the toolbar toggle — pass the
+     * edit state of the form this grid is embedded in and a row click follows it, opening the
+     * drawer already editing without the user flipping a second switch. The toolbar button
+     * disappears while it's set, and it stays fail-closed against the model's permission.
+     */
+    active?: boolean;
 }
 interface DrawerGridProps {
     /**
@@ -1855,10 +1940,18 @@ interface DrawerGridProps {
  * the current filters — not just the ones on screen. Turn it off with
  * `drawer.showNavigator: false`.
  *
+ * Editing a list that way gets a third footer button, "Guardar ↓" / Alt+Shift+↓ (rename it
+ * with `drawer.labels.saveAndNext`): it saves and steps to the next row instead of closing,
+ * carrying the edit mode over, so capturing a column across many rows is one pass rather than
+ * open-edit-save-reopen per row — and with the shortcut, without leaving the keyboard. It
+ * rides on the navigator — no navigator, or last row, and there is just Guardar.
+ *
  * Edit mode is opt-in with `api.edit: {}` and adds nothing to the grid but a toolbar toggle —
  * no mutation, no actions column, no in-grid editing. While it's on, a row click opens the
  * record drawer already editing, provided the record allows it; the drawer form is the only
- * thing that writes.
+ * thing that writes. A grid embedded in a detail form can hand the mode over instead, with
+ * `api.edit: { active: pageType === "edit" }`, so it follows the form rather than asking for
+ * a second switch.
  *
  * The full grid config goes under `grid` (`{ pathname, api, dataGridProps, slotProps }`),
  * alongside `drawer`.
@@ -2021,13 +2114,35 @@ interface DetailFormDrawerProps {
      * closing the drawer. Omit it and no navigator renders.
      */
     navigation?: DetailFormDrawerNavigation;
-    /** Panel width. Defaults to `480`. */
+    /** Panel width. Defaults to `600`. */
     width?: number | string;
     /** Side the drawer slides in from. Defaults to `"right"`. */
     anchor?: DrawerProps["anchor"];
+    /**
+     * Let the user drag the drawer's inner edge to resize it. Forwarded to `MainDrawer_v2`
+     * along with the four props below — see it for the full behaviour.
+     */
+    resizable?: boolean;
+    /** Smallest width the drag allows, in px. Defaults to `320`. */
+    minWidth?: number;
+    /** Largest width the drag allows, in px. Defaults to the viewport minus a margin. */
+    maxWidth?: number;
+    /**
+     * Remember the dragged width under this `localStorage` key. Worth setting whenever the
+     * drawer is remounted per record — a fresh mount otherwise forgets the drag.
+     */
+    widthStorageKey?: string;
+    /** Fires with the final dragged width in px, or `null` when a double click resets it. */
+    onWidthChange?: (width: number | null) => void;
     labels?: {
         save?: string;
         cancel?: string;
+        /**
+         * Rótulo del guardar-y-seguir. Por defecto `"Guardar ↓"`, corto porque va junto al
+         * Guardar de siempre y el tooltip ya dice qué hace; pásale un texto propio donde el
+         * paso al siguiente registro merezca nombrarse ("Guardar y siguiente bulto").
+         */
+        saveAndNext?: string;
     };
     slots?: {
         /** Extra actions rendered in the header, left of the close button (e.g. "open full page"). */
@@ -2037,6 +2152,7 @@ interface DetailFormDrawerProps {
         drawer?: Partial<DrawerProps>;
         saveButton?: Partial<ButtonProps>;
         cancelButton?: Partial<ButtonProps>;
+        saveAndNextButton?: Partial<ButtonProps>;
     };
 }
 /**
@@ -2044,10 +2160,13 @@ interface DetailFormDrawerProps {
  * `DetailForm` body as `DetailPage_v2`, and `MainDrawer_v2` for the chrome — so it frames
  * the form exactly like every other v2 drawer. What it adds on top is the per-record
  * furniture: edit/delete in the header, and a footer holding the form actions and, when
- * `navigation` is given, a prev/next record navigator. The save button sits outside the
- * `<form>`, so it submits via the native `form={formId}` attribute.
+ * `navigation` is given, a prev/next record navigator (Alt+↑ / Alt+↓) plus "Guardar ↓"
+ * (Alt+Shift+↓) — a save that steps to the next record instead of closing, so a column can be
+ * captured down a list in one pass without the hands leaving the keyboard. Rename it with
+ * `labels.saveAndNext`. Guardar sits outside the `<form>` and submits via the native
+ * `form={formId}` attribute; Guardar ↓ submits by hand, so the implicit Enter stays Guardar.
  */
-declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
+declare function DetailFormDrawer({ open, onClose, title, api, form, sections, pageType, startInEdit, recordKey, permissionsPath, onSuccess, navigation, width, anchor, resizable, minWidth, maxWidth, widthStorageKey, onWidthChange, labels, slots, slotProps, }: DetailFormDrawerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Encabezado por defecto del `PageContainer`: resuelve título y breadcrumbs a

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@acvl/frontend-components",
-    "version": "0.0.65",
+    "version": "0.0.66",
     "description": "Component library for ACV frontend projects.",
     "homepage": "https://github.com/ACV-Logistics/acv-frontend-components#readme",
     "access": "public",