@stackcraftmx/calcita 0.56.0 → 0.58.0

package/dist/sortable/SortableTable.js

@@ -0,0 +1,230 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useState, useRef } from "react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import Box from "@mui/material/Box";
+import FormHelperText from "@mui/material/FormHelperText";
+import Paper from "@mui/material/Paper";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import DragIndicatorRoundedIcon from "@mui/icons-material/DragIndicatorRounded";
+import { moveRow } from "./sortableRows.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.js";
+import { warnUnknownProps } from "../toolkit/unknownProps.js";
+import { useToolkitTranslation } from "../toolkit/useToolkitTranslation.js";
+const THEME_NAME = "CalcitaSortableTable";
+const SortableRoot = piecePart(THEME_NAME, "Root", Box);
+const SortableContainer = piecePart(THEME_NAME, "Container", TableContainer);
+const SortableTableElement = piecePart(THEME_NAME, "Table", Table);
+const SortableHead = piecePart(THEME_NAME, "Head", TableHead);
+const SortableHeaderRow = piecePart(THEME_NAME, "HeaderRow", TableRow);
+const SortableHeaderCell = piecePart(THEME_NAME, "HeaderCell", TableCell);
+const SortableBody = piecePart(THEME_NAME, "Body", TableBody);
+const SortableRow = piecePart(THEME_NAME, "Row", TableRow);
+const SortableHandleCell = piecePart(THEME_NAME, "HandleCell", TableCell);
+const SortableHandle = piecePart(THEME_NAME, "Handle", Box);
+const SortablePositionCell = piecePart(THEME_NAME, "PositionCell", TableCell);
+const SortableCell = piecePart(THEME_NAME, "Cell", TableCell);
+const SortableEmpty = piecePart(THEME_NAME, "Empty", TableCell);
+const SortableHelperText = piecePart(THEME_NAME, "HelperText", FormHelperText);
+const SortableAnnouncer = piecePart(THEME_NAME, "Announcer", Box);
+const HANDLE_COLUMN_WIDTH_PIXELS = 48;
+const POSITION_COLUMN_WIDTH_PIXELS = 88;
+const HOUSE_COLUMN_PADDING_X = 1.5;
+const DEFAULT_COLUMN_MIN_WIDTH_PIXELS = 96;
+const VISUALLY_HIDDEN_SX = { position: "absolute", width: "1px", height: "1px", padding: 0, margin: "-1px", overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", border: 0 };
+const JUSTIFY_BY_ALIGN = Object.freeze({ left: "flex-start", center: "center", right: "flex-end" });
+function trackOf(column) {
+  if (column.width) {
+    return `${column.width}px`;
+  }
+  return `minmax(${column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH_PIXELS}px, ${column.flex ?? 1}fr)`;
+}
+function isPromiseLike(value) {
+  return typeof value?.then === "function";
+}
+function SortableTableContent(props) {
+  const {
+    rows,
+    columns,
+    onReorder,
+    ariaLabel,
+    getRowId = (row) => row.id,
+    getRowLabel,
+    showPosition = true,
+    disabled = false,
+    error,
+    helperText,
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("sortableTable", texts);
+  const helperId = useId();
+  const listId = useId();
+  const [pending, setPending] = useState(null);
+  const [notice, setNotice] = useState("");
+  const handlePropsByRow = useRef(/* @__PURE__ */ new Map());
+  const shownRows = pending && pending.basedOn === rows ? pending.rows : rows;
+  const isSaving = Boolean(pending && pending.basedOn === rows && pending.saving);
+  const canDrag = !disabled && !isSaving;
+  const total = shownRows.length;
+  const labelOf = (row) => String(getRowLabel ? getRowLabel(row) : row[columns[0]?.field] ?? getRowId(row));
+  const rowOfDraggable = (draggableId) => shownRows.find((row) => String(getRowId(row)) === draggableId);
+  const titleOf = (draggableId) => {
+    const row = rowOfDraggable(draggableId);
+    return row ? labelOf(row) : draggableId;
+  };
+  const handlePropsOf = (rowId, dragHandleProps) => {
+    if (dragHandleProps) {
+      handlePropsByRow.current.set(rowId, dragHandleProps);
+      return dragHandleProps;
+    }
+    return handlePropsByRow.current.get(rowId) ?? { tabIndex: 0, role: "button" };
+  };
+  const reorder = (row, fromIndex, toIndex) => {
+    const movedRows = moveRow(shownRows, fromIndex, toIndex);
+    const outcome = onReorder({ rows: movedRows, rowId: getRowId(row), fromIndex, toIndex });
+    if (!isPromiseLike(outcome)) {
+      return;
+    }
+    const attempt = { rows: movedRows, basedOn: rows, saving: true };
+    setPending(attempt);
+    outcome.then(
+      () => setPending((current) => current === attempt ? { ...attempt, saving: false } : current),
+      () => {
+        setPending((current) => current === attempt ? null : current);
+        setNotice(t("reverted", { title: labelOf(row), position: fromIndex + 1 }));
+      }
+    );
+  };
+  const announceStart = (start, provided) => {
+    setNotice("");
+    provided.announce(t("lifted", { title: titleOf(start.draggableId), position: start.source.index + 1, total }));
+  };
+  const announceUpdate = (update, provided) => {
+    if (update.destination) {
+      provided.announce(t("moving", { position: update.destination.index + 1, total }));
+    }
+  };
+  const finishMove = (result, provided) => {
+    const { draggableId, source, destination } = result;
+    const row = rowOfDraggable(draggableId);
+    if (!row || !destination || destination.index === source.index) {
+      provided.announce(t("cancelled", { title: titleOf(draggableId), position: source.index + 1 }));
+      return;
+    }
+    provided.announce(t("dropped", { title: labelOf(row), position: destination.index + 1, total }));
+    reorder(row, source.index, destination.index);
+  };
+  const gridTemplateColumns = [
+    `${HANDLE_COLUMN_WIDTH_PIXELS}px`,
+    ...showPosition ? [`${POSITION_COLUMN_WIDTH_PIXELS}px`] : [],
+    ...columns.map(trackOf)
+  ].join(" ");
+  const minimumWidth = HANDLE_COLUMN_WIDTH_PIXELS + (showPosition ? POSITION_COLUMN_WIDTH_PIXELS : 0) + columns.reduce((sum, column) => sum + (column.width ?? column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH_PIXELS), 0);
+  const rowSx = { display: "grid", gridTemplateColumns };
+  const cellSx = (align = "left") => ({ display: "flex", alignItems: "center", minWidth: 0, justifyContent: JUSTIFY_BY_ALIGN[align], textAlign: align, overflowWrap: "break-word" });
+  const houseCellSx = (align) => ({ ...cellSx(align), px: HOUSE_COLUMN_PADDING_X });
+  const bottomText = error || helperText;
+  return /* @__PURE__ */ jsxs(SortableRoot, { sx, children: [
+    /* @__PURE__ */ jsx(SortableContainer, { component: Paper, variant: "outlined", ownSx: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs(
+      SortableTableElement,
+      {
+        component: "div",
+        "aria-label": ariaLabel,
+        "aria-busy": isSaving || void 0,
+        "aria-describedby": bottomText ? helperId : void 0,
+        ownSx: { display: "block", minWidth: minimumWidth },
+        children: [
+          /* @__PURE__ */ jsx(SortableHead, { component: "div", ownSx: { display: "block" }, children: /* @__PURE__ */ jsxs(SortableHeaderRow, { component: "div", ownSx: rowSx, children: [
+            /* @__PURE__ */ jsx(SortableHeaderCell, { component: "div", role: "columnheader", ownSx: houseCellSx("center"), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: VISUALLY_HIDDEN_SX, children: t("handleHeader") }) }),
+            showPosition && /* @__PURE__ */ jsx(SortableHeaderCell, { component: "div", role: "columnheader", ownSx: houseCellSx("right"), children: t("position") }),
+            columns.map((column) => /* @__PURE__ */ jsx(SortableHeaderCell, { component: "div", role: "columnheader", ownSx: cellSx(column.align), children: column.headerName }, column.field))
+          ] }) }),
+          /* @__PURE__ */ jsx(
+            DragDropContext,
+            {
+              onDragStart: announceStart,
+              onDragUpdate: announceUpdate,
+              onDragEnd: finishMove,
+              dragHandleUsageInstructions: t("instructions"),
+              children: /* @__PURE__ */ jsx(Droppable, { droppableId: listId, children: (droppableProvided) => /* @__PURE__ */ jsxs(
+                SortableBody,
+                {
+                  component: "div",
+                  ref: droppableProvided.innerRef,
+                  ...droppableProvided.droppableProps,
+                  ownSx: { display: "block", "& > .MuiTableRow-root:last-of-type > .MuiTableCell-root": { borderBottom: 0 } },
+                  children: [
+                    shownRows.map((row, index) => {
+                      const rowId = String(getRowId(row));
+                      const label = labelOf(row);
+                      return /* @__PURE__ */ jsx(Draggable, { draggableId: rowId, index, isDragDisabled: !canDrag, children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */ jsxs(
+                        SortableRow,
+                        {
+                          component: "div",
+                          ref: draggableProvided.innerRef,
+                          ...draggableProvided.draggableProps,
+                          ownSx: {
+                            ...rowSx,
+                            // el que flota lleva fondo y sombra: sin eso se transparenta sobre los demás
+                            ...draggableSnapshot.isDragging && { bgcolor: "background.paper", boxShadow: 8, borderRadius: 1 }
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx(SortableHandleCell, { component: "div", role: "cell", ownSx: houseCellSx("center"), children: /* @__PURE__ */ jsx(
+                              SortableHandle,
+                              {
+                                component: "span",
+                                ...handlePropsOf(rowId, draggableProvided.dragHandleProps),
+                                "aria-label": t("handle", { title: label, position: index + 1 }),
+                                "aria-disabled": !canDrag || void 0,
+                                ownSx: {
+                                  display: "inline-flex",
+                                  p: 0.5,
+                                  borderRadius: 1,
+                                  color: canDrag ? "text.secondary" : "text.disabled",
+                                  cursor: canDrag ? draggableSnapshot.isDragging ? "grabbing" : "grab" : "default",
+                                  "&:focus-visible": { outline: 2, outlineColor: "primary.main", outlineOffset: 1 }
+                                },
+                                children: /* @__PURE__ */ jsx(DragIndicatorRoundedIcon, { fontSize: "small" })
+                              }
+                            ) }),
+                            showPosition && /* @__PURE__ */ jsx(
+                              SortablePositionCell,
+                              {
+                                component: "div",
+                                role: "cell",
+                                ownSx: { ...houseCellSx("right"), fontVariantNumeric: "tabular-nums", color: "text.secondary" },
+                                children: index + 1
+                              }
+                            ),
+                            columns.map((column) => /* @__PURE__ */ jsx(SortableCell, { component: "div", role: "cell", ownSx: cellSx(column.align), children: column.renderCell ? column.renderCell(row, { index, position: index + 1 }) : row[column.field] ?? t("noValue") }, column.field))
+                          ]
+                        }
+                      ) }, rowId);
+                    }),
+                    droppableProvided.placeholder,
+                    total === 0 && /* @__PURE__ */ jsx(TableRow, { component: "div", sx: rowSx, children: /* @__PURE__ */ jsx(SortableEmpty, { component: "div", role: "cell", ownSx: { gridColumn: "1 / -1", color: "text.secondary", textAlign: "center", py: 3 }, children: t("empty") }) })
+                  ]
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    ) }),
+    bottomText && /* @__PURE__ */ jsx(SortableHelperText, { id: helperId, error: Boolean(error), children: bottomText }),
+    /* @__PURE__ */ jsx(SortableAnnouncer, { role: "status", "aria-live": "polite", ownSx: VISUALLY_HIDDEN_SX, children: notice })
+  ] });
+}
+const SortableTable = withPieceSlots(SortableTableContent, THEME_NAME);
+export {
+  SortableTable as default
+};
+//# sourceMappingURL=SortableTable.js.map

package/dist/sortable/SortableTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableTable.js","sources":["../../src/sortable/SortableTable.jsx"],"sourcesContent":["// Una tabla chica donde el orden de los renglones es el dato (@stackcraftmx/calcita/sortable): qué se hace primero, en qué\n// orden pasa la ruta. Los renglones se arrastran con el ratón, con el dedo o con el teclado (espacio para levantar, flechas\n// para mover, espacio para soltar), y la columna «Orden» se renumera 1..n. Con @hello-pangea/dnd por dentro, la misma del\n// tablero kanban.\n//\n//   <SortableTable rows={stops} columns={[{field: 'name', headerName: 'Sucursal', flex: 1}]} ariaLabel=\"Ruta de reparto\"\n//                  onReorder={({rows}) => setStops(rows)} />\n//\n// Dos formas de guardar, según lo que regrese onReorder:\n//   - nada (en un formulario: se guarda al final con su botón): la pantalla pone los renglones nuevos (rows) y la tabla los\n//     enseña. FormSortableField lo hace con formik y marca el formulario como cambiado;\n//   - una promesa (se guarda al soltar): la tabla enseña el orden nuevo al instante y, si la promesa truena (el servidor dijo\n//     que no), el renglón regresa a donde estaba y el lector de pantalla lo anuncia; mientras se guarda no se arrastra otro.\n//     Al cumplirse, la pantalla pone los renglones nuevos o los vuelve a pedir.\n//\n// Para lo que no va en una tabla de servidor: la tabla de MUI X gratis no ordena renglones arrastrando (es de su versión de\n// paga), así que esta lista va completa en el navegador, sin páginas.\n//\n// OJO trampa: un renglón que se arrastra flota (position fixed) y en una tabla de HTML pierde el ancho de sus columnas. Aquí\n// la tabla de MUI se pinta con divisiones (role table, row y cell) y cada renglón es una cuadrícula con las mismas columnas:\n// el que flota conserva su ancho. El estilo del tema del proyecto para MuiTableCell se le aplica igual.\n//\n// Mover sin arrastrar (un botón «Subir» en las acciones de la pantalla): moveRow de sortableRows.js.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSortableTable con defaultProps y\n// styleOverrides de sus partes: root, container, table, head, headerRow, headerCell, body, row, handleCell, handle, positionCell,\n// cell, empty, helperText, announcer.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useRef, useState} from 'react';\nimport {DragDropContext, Draggable, Droppable} from '@hello-pangea/dnd';\nimport Box from '@mui/material/Box';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport Paper from '@mui/material/Paper';\nimport Table from '@mui/material/Table';\nimport TableBody from '@mui/material/TableBody';\nimport TableCell from '@mui/material/TableCell';\nimport TableContainer from '@mui/material/TableContainer';\nimport TableHead from '@mui/material/TableHead';\nimport TableRow from '@mui/material/TableRow';\nimport DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';\n\nimport {moveRow} from '@/sortable/sortableRows.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\n\nconst THEME_NAME = 'CalcitaSortableTable';\nconst SortableRoot = piecePart(THEME_NAME, 'Root', Box);\nconst SortableContainer = piecePart(THEME_NAME, 'Container', TableContainer);\nconst SortableTableElement = piecePart(THEME_NAME, 'Table', Table);\nconst SortableHead = piecePart(THEME_NAME, 'Head', TableHead);\nconst SortableHeaderRow = piecePart(THEME_NAME, 'HeaderRow', TableRow);\nconst SortableHeaderCell = piecePart(THEME_NAME, 'HeaderCell', TableCell);\nconst SortableBody = piecePart(THEME_NAME, 'Body', TableBody);\nconst SortableRow = piecePart(THEME_NAME, 'Row', TableRow);\nconst SortableHandleCell = piecePart(THEME_NAME, 'HandleCell', TableCell);\nconst SortableHandle = piecePart(THEME_NAME, 'Handle', Box);\nconst SortablePositionCell = piecePart(THEME_NAME, 'PositionCell', TableCell);\nconst SortableCell = piecePart(THEME_NAME, 'Cell', TableCell);\nconst SortableEmpty = piecePart(THEME_NAME, 'Empty', TableCell);\nconst SortableHelperText = piecePart(THEME_NAME, 'HelperText', FormHelperText);\nconst SortableAnnouncer = piecePart(THEME_NAME, 'Announcer', Box);\n\n// las columnas de la casa, con menos relleno a los lados que las demás: la del asa (el ícono y su foco) y la del orden\n// (OJO: con 72 px y el relleno de siempre, «Orden» se partía en «Orde / n»; con 88 caben «Orden», «Order» o «Prioridad»)\nconst HANDLE_COLUMN_WIDTH_PIXELS = 48;\nconst POSITION_COLUMN_WIDTH_PIXELS = 88;\nconst HOUSE_COLUMN_PADDING_X = 1.5;\n// lo mínimo de una columna sin ancho fijo: abajo de eso la tabla se desliza de lado (en el teléfono)\nconst DEFAULT_COLUMN_MIN_WIDTH_PIXELS = 96;\n// lo que se ve, solo para el lector de pantalla\nconst VISUALLY_HIDDEN_SX = {position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', border: 0};\nconst JUSTIFY_BY_ALIGN = Object.freeze({left: 'flex-start', center: 'center', right: 'flex-end'});\n\n/**\n * Una columna de la tabla. Row: el renglón de la pantalla (llega tal cual a renderCell).\n *\n * @template Row\n * @typedef {object} SortableTableColumn\n * @property {string} field la llave del renglón que se pinta (y la del encabezado)\n * @property {string} headerName el encabezado, ya traducido\n * @property {number} [width] ancho fijo en px\n * @property {number} [flex] cuánto del espacio libre toma, como en la tabla de servidor (por omisión 1)\n * @property {number} [minWidth] el mínimo en px de una columna sin ancho fijo (por omisión 96)\n * @property {'left'|'center'|'right'} [align] los números a la derecha\n * @property {(row: Row, place: {index: number, position: number}) => import('react').ReactNode} [renderCell] lo de la celda a la\n *     medida; position es la que ve la persona (desde 1)\n */\n\n/** La pista de la cuadrícula de una columna: el ancho fijo, o lo que le toque del espacio libre sin bajar de su mínimo. */\nfunction trackOf(column) {\n    if (column.width) {\n        return `${column.width}px`;\n    }\n    return `minmax(${column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH_PIXELS}px, ${column.flex ?? 1}fr)`;\n}\n\n/** Una función que regresa una promesa: se guarda al soltar. */\nfunction isPromiseLike(value) {\n    return typeof value?.then === 'function';\n}\n\n/**\n * Los renglones conservan el tipo que usa la pantalla (Row): onReorder los regresa del mismo tipo, ya en su orden nuevo.\n *\n * @template {object} Row\n * @param {object} props\n * @param {Row[]} props.rows en su orden\n * @param {SortableTableColumn<Row>[]} props.columns\n * @param {(change: {rows: Row[], rowId: string|number, fromIndex: number, toIndex: number}) => Promise<unknown>|void} props.onReorder\n *     al soltar un renglón en otro lugar: rows ya en el orden nuevo; fromIndex y toIndex desde 0. Si regresa una promesa, el\n *     orden nuevo se enseña mientras se cumple y regresa si truena\n * @param {string} props.ariaLabel qué es la tabla, ya traducido\n * @param {(row: Row) => string|number} [props.getRowId] por omisión row.id\n * @param {(row: Row) => string} [props.getRowLabel] el nombre del renglón que oye el lector de pantalla («Polanco»); por omisión\n *     lo de la primera columna\n * @param {boolean} [props.showPosition] la columna «Orden» con 1..n (por omisión sí)\n * @param {boolean} [props.disabled] nada se arrastra (mientras se envía el formulario, o de solo lectura)\n * @param {import('react').ReactNode} [props.error] el error de la lista (en rojo, abajo de la tabla)\n * @param {import('react').ReactNode} [props.helperText] una ayuda abajo de la tabla (el error gana)\n * @param {import('@mui/material').SxProps<import('@mui/material').Theme>} [props.sx] lo de afuera de la tabla\n * @param {object} [props.texts] los textos que cambian, con la forma de `sortableTable` en los textos del paquete\n */\nfunction SortableTableContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSortableTable.defaultProps) y encima lo que llega aquí\n    const {\n        rows, columns, onReorder, ariaLabel, getRowId = (row) => row.id, getRowLabel, showPosition = true, disabled = false, error,\n        helperText, sx, texts, ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('sortableTable', texts);\n    const helperId = useId();\n    const listId = useId();\n    // un orden que se está guardando (o ya se guardó y la pantalla todavía no da los renglones nuevos); vale mientras rows\n    // sea el mismo arreglo sobre el que se movió\n    const [pending, setPending] = useState(null);\n    // lo último que se anunció fuera del arrastre (el renglón que regresó)\n    const [notice, setNotice] = useState('');\n    // el asa que la librería le dio a cada renglón la última vez que se podía arrastrar (ver la trampa en el asa)\n    const handlePropsByRow = useRef(new Map());\n    const shownRows = pending && pending.basedOn === rows ? pending.rows : rows;\n    const isSaving = Boolean(pending && pending.basedOn === rows && pending.saving);\n    const canDrag = !disabled && !isSaving;\n    const total = shownRows.length;\n\n    const labelOf = (row) => String(getRowLabel ? getRowLabel(row) : (row[columns[0]?.field] ?? getRowId(row)));\n    const rowOfDraggable = (draggableId) => shownRows.find((row) => String(getRowId(row)) === draggableId);\n    const titleOf = (draggableId) => {\n        const row = rowOfDraggable(draggableId);\n        return row ? labelOf(row) : draggableId;\n    };\n\n    // OJO trampa pagada: sin poder arrastrar (mientras se guarda) la librería no da el asa. Sin ella, quien soltó con el\n    // teclado se quedaba sin foco, y la librería (que busca el asa para devolverle el foco al soltar) avisaba en la consola\n    // que no la encontraba. Mientras tanto se queda con la que tuvo la última vez: con el renglón apagado no arranca otro\n    // arrastre (la librería lo revisa en su registro, no en el asa). Sin una de antes (apagada desde el principio), solo\n    // recibe el foco.\n    const handlePropsOf = (rowId, dragHandleProps) => {\n        if (dragHandleProps) {\n            handlePropsByRow.current.set(rowId, dragHandleProps);\n            return dragHandleProps;\n        }\n        return handlePropsByRow.current.get(rowId) ?? {tabIndex: 0, role: 'button'};\n    };\n\n    const reorder = (row, fromIndex, toIndex) => {\n        const movedRows = moveRow(shownRows, fromIndex, toIndex);\n        const outcome = onReorder({rows: movedRows, rowId: getRowId(row), fromIndex, toIndex});\n        // sin promesa: la pantalla ya puso sus renglones (un formulario); nada que esperar\n        if (!isPromiseLike(outcome)) {\n            return;\n        }\n        const attempt = {rows: movedRows, basedOn: rows, saving: true};\n        setPending(attempt);\n        outcome.then(\n            () => setPending((current) => (current === attempt ? {...attempt, saving: false} : current)),\n            () => {\n                // el servidor dijo que no: se enseñan otra vez los renglones de la pantalla (el orden de antes)\n                setPending((current) => (current === attempt ? null : current));\n                setNotice(t('reverted', {title: labelOf(row), position: fromIndex + 1}));\n            },\n        );\n    };\n\n    // lo que oye quien usa lector de pantalla (posiciones desde 1, como se cuentan)\n    const announceStart = (start, provided) => {\n        setNotice('');\n        provided.announce(t('lifted', {title: titleOf(start.draggableId), position: start.source.index + 1, total}));\n    };\n    const announceUpdate = (update, provided) => {\n        if (update.destination) {\n            provided.announce(t('moving', {position: update.destination.index + 1, total}));\n        }\n    };\n    const finishMove = (result, provided) => {\n        const {draggableId, source, destination} = result;\n        const row = rowOfDraggable(draggableId);\n        // se soltó fuera de la tabla o en el mismo lugar: nada que mover\n        if (!row || !destination || destination.index === source.index) {\n            provided.announce(t('cancelled', {title: titleOf(draggableId), position: source.index + 1}));\n            return;\n        }\n        provided.announce(t('dropped', {title: labelOf(row), position: destination.index + 1, total}));\n        reorder(row, source.index, destination.index);\n    };\n\n    // todas las filas con las mismas columnas: la del asa, la del orden y las de la pantalla\n    const gridTemplateColumns = [\n        `${HANDLE_COLUMN_WIDTH_PIXELS}px`, ...(showPosition ? [`${POSITION_COLUMN_WIDTH_PIXELS}px`] : []), ...columns.map(trackOf),\n    ].join(' ');\n    // abajo de esto la tabla se desliza de lado en vez de apretar las columnas\n    const minimumWidth = HANDLE_COLUMN_WIDTH_PIXELS + (showPosition ? POSITION_COLUMN_WIDTH_PIXELS : 0)\n        + columns.reduce((sum, column) => sum + (column.width ?? column.minWidth ?? DEFAULT_COLUMN_MIN_WIDTH_PIXELS), 0);\n    const rowSx = {display: 'grid', gridTemplateColumns};\n    // una palabra solo se parte si no cabe ni sola en su renglón (un correo largo); un encabezado de dos palabras baja entero\n    const cellSx = (align = 'left') => ({display: 'flex', alignItems: 'center', minWidth: 0, justifyContent: JUSTIFY_BY_ALIGN[align], textAlign: align, overflowWrap: 'break-word'});\n    const houseCellSx = (align) => ({...cellSx(align), px: HOUSE_COLUMN_PADDING_X});\n    const bottomText = error || helperText;\n\n    return (\n        <SortableRoot sx={sx}>\n            <SortableContainer component={Paper} variant=\"outlined\" ownSx={{overflowX: 'auto'}}>\n                <SortableTableElement component=\"div\" aria-label={ariaLabel} aria-busy={isSaving || undefined}\n                                      aria-describedby={bottomText ? helperId : undefined} ownSx={{display: 'block', minWidth: minimumWidth}}>\n                    <SortableHead component=\"div\" ownSx={{display: 'block'}}>\n                        <SortableHeaderRow component=\"div\" ownSx={rowSx}>\n                            <SortableHeaderCell component=\"div\" role=\"columnheader\" ownSx={houseCellSx('center')}>\n                                <Box component=\"span\" sx={VISUALLY_HIDDEN_SX}>{t('handleHeader')}</Box>\n                            </SortableHeaderCell>\n                            {showPosition && (\n                                <SortableHeaderCell component=\"div\" role=\"columnheader\" ownSx={houseCellSx('right')}>{t('position')}</SortableHeaderCell>\n                            )}\n                            {columns.map((column) => (\n                                <SortableHeaderCell key={column.field} component=\"div\" role=\"columnheader\" ownSx={cellSx(column.align)}>\n                                    {column.headerName}\n                                </SortableHeaderCell>\n                            ))}\n                        </SortableHeaderRow>\n                    </SortableHead>\n                    <DragDropContext onDragStart={announceStart} onDragUpdate={announceUpdate} onDragEnd={finishMove}\n                                     dragHandleUsageInstructions={t('instructions')}>\n                        <Droppable droppableId={listId}>\n                            {(droppableProvided) => (\n                                <SortableBody component=\"div\" ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}\n                                              ownSx={{display: 'block', '& > .MuiTableRow-root:last-of-type > .MuiTableCell-root': {borderBottom: 0}}}>\n                                    {shownRows.map((row, index) => {\n                                        const rowId = String(getRowId(row));\n                                        const label = labelOf(row);\n                                        return (\n                                            <Draggable key={rowId} draggableId={rowId} index={index} isDragDisabled={!canDrag}>\n                                                {(draggableProvided, draggableSnapshot) => (\n                                                    <SortableRow component=\"div\" ref={draggableProvided.innerRef} {...draggableProvided.draggableProps}\n                                                                 ownSx={{\n                                                                     ...rowSx,\n                                                                     // el que flota lleva fondo y sombra: sin eso se transparenta sobre los demás\n                                                                     ...(draggableSnapshot.isDragging && {bgcolor: 'background.paper', boxShadow: 8, borderRadius: 1}),\n                                                                 }}>\n                                                        <SortableHandleCell component=\"div\" role=\"cell\" ownSx={houseCellSx('center')}>\n                                                            <SortableHandle component=\"span\" {...handlePropsOf(rowId, draggableProvided.dragHandleProps)}\n                                                                            aria-label={t('handle', {title: label, position: index + 1})}\n                                                                            aria-disabled={!canDrag || undefined}\n                                                                            ownSx={{\n                                                                                display: 'inline-flex', p: 0.5, borderRadius: 1,\n                                                                                color: canDrag ? 'text.secondary' : 'text.disabled',\n                                                                                cursor: canDrag ? (draggableSnapshot.isDragging ? 'grabbing' : 'grab') : 'default',\n                                                                                '&:focus-visible': {outline: 2, outlineColor: 'primary.main', outlineOffset: 1},\n                                                                            }}>\n                                                                <DragIndicatorRoundedIcon fontSize=\"small\" />\n                                                            </SortableHandle>\n                                                        </SortableHandleCell>\n                                                        {showPosition && (\n                                                            <SortablePositionCell component=\"div\" role=\"cell\"\n                                                                                  ownSx={{...houseCellSx('right'), fontVariantNumeric: 'tabular-nums', color: 'text.secondary'}}>\n                                                                {index + 1}\n                                                            </SortablePositionCell>\n                                                        )}\n                                                        {columns.map((column) => (\n                                                            <SortableCell key={column.field} component=\"div\" role=\"cell\" ownSx={cellSx(column.align)}>\n                                                                {column.renderCell ? column.renderCell(row, {index, position: index + 1}) : (row[column.field] ?? t('noValue'))}\n                                                            </SortableCell>\n                                                        ))}\n                                                    </SortableRow>\n                                                )}\n                                            </Draggable>\n                                        );\n                                    })}\n                                    {droppableProvided.placeholder}\n                                    {total === 0 && (\n                                        <TableRow component=\"div\" sx={rowSx}>\n                                            <SortableEmpty component=\"div\" role=\"cell\" ownSx={{gridColumn: '1 / -1', color: 'text.secondary', textAlign: 'center', py: 3}}>\n                                                {t('empty')}\n                                            </SortableEmpty>\n                                        </TableRow>\n                                    )}\n                                </SortableBody>\n                            )}\n                        </Droppable>\n                    </DragDropContext>\n                </SortableTableElement>\n            </SortableContainer>\n            {bottomText && <SortableHelperText id={helperId} error={Boolean(error)}>{bottomText}</SortableHelperText>}\n            <SortableAnnouncer role=\"status\" aria-live=\"polite\" ownSx={VISUALLY_HIDDEN_SX}>{notice}</SortableAnnouncer>\n        </SortableRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\n// OJO: con su tipo propio, el genérico (Row: el renglón de la pantalla) que la envoltura borraría; slots y slotProps van en su\n// documentación\n/** @type {typeof SortableTableContent} */\nconst SortableTable = withPieceSlots(SortableTableContent, THEME_NAME);\nexport default SortableTable;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA+CA,MAAM,aAAa;AACnB,MAAM,eAAe,UAAU,YAAY,QAAQ,GAAG;AACtD,MAAM,oBAAoB,UAAU,YAAY,aAAa,cAAc;AAC3E,MAAM,uBAAuB,UAAU,YAAY,SAAS,KAAK;AACjE,MAAM,eAAe,UAAU,YAAY,QAAQ,SAAS;AAC5D,MAAM,oBAAoB,UAAU,YAAY,aAAa,QAAQ;AACrE,MAAM,qBAAqB,UAAU,YAAY,cAAc,SAAS;AACxE,MAAM,eAAe,UAAU,YAAY,QAAQ,SAAS;AAC5D,MAAM,cAAc,UAAU,YAAY,OAAO,QAAQ;AACzD,MAAM,qBAAqB,UAAU,YAAY,cAAc,SAAS;AACxE,MAAM,iBAAiB,UAAU,YAAY,UAAU,GAAG;AAC1D,MAAM,uBAAuB,UAAU,YAAY,gBAAgB,SAAS;AAC5E,MAAM,eAAe,UAAU,YAAY,QAAQ,SAAS;AAC5D,MAAM,gBAAgB,UAAU,YAAY,SAAS,SAAS;AAC9D,MAAM,qBAAqB,UAAU,YAAY,cAAc,cAAc;AAC7E,MAAM,oBAAoB,UAAU,YAAY,aAAa,GAAG;AAIhE,MAAM,6BAA6B;AACnC,MAAM,+BAA+B;AACrC,MAAM,yBAAyB;AAE/B,MAAM,kCAAkC;AAExC,MAAM,qBAAqB,EAAC,UAAU,YAAY,OAAO,OAAO,QAAQ,OAAO,SAAS,GAAG,QAAQ,QAAQ,UAAU,UAAU,MAAM,iBAAiB,YAAY,UAAU,QAAQ,EAAA;AACpL,MAAM,mBAAmB,OAAO,OAAO,EAAC,MAAM,cAAc,QAAQ,UAAU,OAAO,YAAW;AAkBhG,SAAS,QAAQ,QAAQ;AACrB,MAAI,OAAO,OAAO;AACd,WAAO,GAAG,OAAO,KAAK;AAAA,EAC1B;AACA,SAAO,UAAU,OAAO,YAAY,+BAA+B,OAAO,OAAO,QAAQ,CAAC;AAC9F;AAGA,SAAS,cAAc,OAAO;AAC1B,SAAO,OAAO,OAAO,SAAS;AAClC;AAuBA,SAAS,qBAAqB,OAAO;AAEjC,QAAM;AAAA,IACF;AAAA,IAAM;AAAA,IAAS;AAAA,IAAW;AAAA,IAAW,WAAW,CAAC,QAAQ,IAAI;AAAA,IAAI;AAAA,IAAa,eAAe;AAAA,IAAM,WAAW;AAAA,IAAO;AAAA,IACrH;AAAA,IAAY;AAAA,IAAI;AAAA,IAAO,GAAG;AAAA,EAAA,IAC1B,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,iBAAiB,KAAK;AACxD,QAAM,WAAW,MAAA;AACjB,QAAM,SAAS,MAAA;AAGf,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AAEvC,QAAM,mBAAmB,OAAO,oBAAI,KAAK;AACzC,QAAM,YAAY,WAAW,QAAQ,YAAY,OAAO,QAAQ,OAAO;AACvE,QAAM,WAAW,QAAQ,WAAW,QAAQ,YAAY,QAAQ,QAAQ,MAAM;AAC9E,QAAM,UAAU,CAAC,YAAY,CAAC;AAC9B,QAAM,QAAQ,UAAU;AAExB,QAAM,UAAU,CAAC,QAAQ,OAAO,cAAc,YAAY,GAAG,IAAK,IAAI,QAAQ,CAAC,GAAG,KAAK,KAAK,SAAS,GAAG,CAAE;AAC1G,QAAM,iBAAiB,CAAC,gBAAgB,UAAU,KAAK,CAAC,QAAQ,OAAO,SAAS,GAAG,CAAC,MAAM,WAAW;AACrG,QAAM,UAAU,CAAC,gBAAgB;AAC7B,UAAM,MAAM,eAAe,WAAW;AACtC,WAAO,MAAM,QAAQ,GAAG,IAAI;AAAA,EAChC;AAOA,QAAM,gBAAgB,CAAC,OAAO,oBAAoB;AAC9C,QAAI,iBAAiB;AACjB,uBAAiB,QAAQ,IAAI,OAAO,eAAe;AACnD,aAAO;AAAA,IACX;AACA,WAAO,iBAAiB,QAAQ,IAAI,KAAK,KAAK,EAAC,UAAU,GAAG,MAAM,SAAA;AAAA,EACtE;AAEA,QAAM,UAAU,CAAC,KAAK,WAAW,YAAY;AACzC,UAAM,YAAY,QAAQ,WAAW,WAAW,OAAO;AACvD,UAAM,UAAU,UAAU,EAAC,MAAM,WAAW,OAAO,SAAS,GAAG,GAAG,WAAW,QAAA,CAAQ;AAErF,QAAI,CAAC,cAAc,OAAO,GAAG;AACzB;AAAA,IACJ;AACA,UAAM,UAAU,EAAC,MAAM,WAAW,SAAS,MAAM,QAAQ,KAAA;AACzD,eAAW,OAAO;AAClB,YAAQ;AAAA,MACJ,MAAM,WAAW,CAAC,YAAa,YAAY,UAAU,EAAC,GAAG,SAAS,QAAQ,MAAA,IAAS,OAAQ;AAAA,MAC3F,MAAM;AAEF,mBAAW,CAAC,YAAa,YAAY,UAAU,OAAO,OAAQ;AAC9D,kBAAU,EAAE,YAAY,EAAC,OAAO,QAAQ,GAAG,GAAG,UAAU,YAAY,EAAA,CAAE,CAAC;AAAA,MAC3E;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,OAAO,aAAa;AACvC,cAAU,EAAE;AACZ,aAAS,SAAS,EAAE,UAAU,EAAC,OAAO,QAAQ,MAAM,WAAW,GAAG,UAAU,MAAM,OAAO,QAAQ,GAAG,MAAA,CAAM,CAAC;AAAA,EAC/G;AACA,QAAM,iBAAiB,CAAC,QAAQ,aAAa;AACzC,QAAI,OAAO,aAAa;AACpB,eAAS,SAAS,EAAE,UAAU,EAAC,UAAU,OAAO,YAAY,QAAQ,GAAG,MAAA,CAAM,CAAC;AAAA,IAClF;AAAA,EACJ;AACA,QAAM,aAAa,CAAC,QAAQ,aAAa;AACrC,UAAM,EAAC,aAAa,QAAQ,YAAA,IAAe;AAC3C,UAAM,MAAM,eAAe,WAAW;AAEtC,QAAI,CAAC,OAAO,CAAC,eAAe,YAAY,UAAU,OAAO,OAAO;AAC5D,eAAS,SAAS,EAAE,aAAa,EAAC,OAAO,QAAQ,WAAW,GAAG,UAAU,OAAO,QAAQ,EAAA,CAAE,CAAC;AAC3F;AAAA,IACJ;AACA,aAAS,SAAS,EAAE,WAAW,EAAC,OAAO,QAAQ,GAAG,GAAG,UAAU,YAAY,QAAQ,GAAG,MAAA,CAAM,CAAC;AAC7F,YAAQ,KAAK,OAAO,OAAO,YAAY,KAAK;AAAA,EAChD;AAGA,QAAM,sBAAsB;AAAA,IACxB,GAAG,0BAA0B;AAAA,IAAM,GAAI,eAAe,CAAC,GAAG,4BAA4B,IAAI,IAAI,CAAA;AAAA,IAAK,GAAG,QAAQ,IAAI,OAAO;AAAA,EAAA,EAC3H,KAAK,GAAG;AAEV,QAAM,eAAe,8BAA8B,eAAe,+BAA+B,KAC3F,QAAQ,OAAO,CAAC,KAAK,WAAW,OAAO,OAAO,SAAS,OAAO,YAAY,kCAAkC,CAAC;AACnH,QAAM,QAAQ,EAAC,SAAS,QAAQ,oBAAA;AAEhC,QAAM,SAAS,CAAC,QAAQ,YAAY,EAAC,SAAS,QAAQ,YAAY,UAAU,UAAU,GAAG,gBAAgB,iBAAiB,KAAK,GAAG,WAAW,OAAO,cAAc;AAClK,QAAM,cAAc,CAAC,WAAW,EAAC,GAAG,OAAO,KAAK,GAAG,IAAI;AACvD,QAAM,aAAa,SAAS;AAE5B,SACI,qBAAC,gBAAa,IACV,UAAA;AAAA,IAAA,oBAAC,mBAAA,EAAkB,WAAW,OAAO,SAAQ,YAAW,OAAO,EAAC,WAAW,OAAA,GACvE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAqB,WAAU;AAAA,QAAM,cAAY;AAAA,QAAW,aAAW,YAAY;AAAA,QAC9D,oBAAkB,aAAa,WAAW;AAAA,QAAW,OAAO,EAAC,SAAS,SAAS,UAAU,aAAA;AAAA,QAC3G,UAAA;AAAA,UAAA,oBAAC,cAAA,EAAa,WAAU,OAAM,OAAO,EAAC,SAAS,QAAA,GAC3C,UAAA,qBAAC,mBAAA,EAAkB,WAAU,OAAM,OAAO,OACtC,UAAA;AAAA,YAAA,oBAAC,sBAAmB,WAAU,OAAM,MAAK,gBAAe,OAAO,YAAY,QAAQ,GAC/E,UAAA,oBAAC,KAAA,EAAI,WAAU,QAAO,IAAI,oBAAqB,UAAA,EAAE,cAAc,GAAE,GACrE;AAAA,YACC,gBACG,oBAAC,oBAAA,EAAmB,WAAU,OAAM,MAAK,gBAAe,OAAO,YAAY,OAAO,GAAI,UAAA,EAAE,UAAU,GAAE;AAAA,YAEvG,QAAQ,IAAI,CAAC,WACV,oBAAC,oBAAA,EAAsC,WAAU,OAAM,MAAK,gBAAe,OAAO,OAAO,OAAO,KAAK,GAChG,iBAAO,WAAA,GADa,OAAO,KAEhC,CACH;AAAA,UAAA,EAAA,CACL,EAAA,CACJ;AAAA,UACA;AAAA,YAAC;AAAA,YAAA;AAAA,cAAgB,aAAa;AAAA,cAAe,cAAc;AAAA,cAAgB,WAAW;AAAA,cACrE,6BAA6B,EAAE,cAAc;AAAA,cAC1D,UAAA,oBAAC,WAAA,EAAU,aAAa,QACnB,WAAC,sBACE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAAa,WAAU;AAAA,kBAAM,KAAK,kBAAkB;AAAA,kBAAW,GAAG,kBAAkB;AAAA,kBACvE,OAAO,EAAC,SAAS,SAAS,2DAA2D,EAAC,cAAc,IAAC;AAAA,kBAC9G,UAAA;AAAA,oBAAA,UAAU,IAAI,CAAC,KAAK,UAAU;AAC3B,4BAAM,QAAQ,OAAO,SAAS,GAAG,CAAC;AAClC,4BAAM,QAAQ,QAAQ,GAAG;AACzB,6BACI,oBAAC,WAAA,EAAsB,aAAa,OAAO,OAAc,gBAAgB,CAAC,SACrE,UAAA,CAAC,mBAAmB,sBACjB;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BAAY,WAAU;AAAA,0BAAM,KAAK,kBAAkB;AAAA,0BAAW,GAAG,kBAAkB;AAAA,0BACvE,OAAO;AAAA,4BACH,GAAG;AAAA;AAAA,4BAEH,GAAI,kBAAkB,cAAc,EAAC,SAAS,oBAAoB,WAAW,GAAG,cAAc,EAAA;AAAA,0BAAC;AAAA,0BAE5G,UAAA;AAAA,4BAAA,oBAAC,oBAAA,EAAmB,WAAU,OAAM,MAAK,QAAO,OAAO,YAAY,QAAQ,GACvE,UAAA;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCAAe,WAAU;AAAA,gCAAQ,GAAG,cAAc,OAAO,kBAAkB,eAAe;AAAA,gCAC3E,cAAY,EAAE,UAAU,EAAC,OAAO,OAAO,UAAU,QAAQ,GAAE;AAAA,gCAC3D,iBAAe,CAAC,WAAW;AAAA,gCAC3B,OAAO;AAAA,kCACH,SAAS;AAAA,kCAAe,GAAG;AAAA,kCAAK,cAAc;AAAA,kCAC9C,OAAO,UAAU,mBAAmB;AAAA,kCACpC,QAAQ,UAAW,kBAAkB,aAAa,aAAa,SAAU;AAAA,kCACzE,mBAAmB,EAAC,SAAS,GAAG,cAAc,gBAAgB,eAAe,EAAA;AAAA,gCAAC;AAAA,gCAE9F,UAAA,oBAAC,0BAAA,EAAyB,UAAS,QAAA,CAAQ;AAAA,8BAAA;AAAA,4BAAA,GAEnD;AAAA,4BACC,gBACG;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCAAqB,WAAU;AAAA,gCAAM,MAAK;AAAA,gCACrB,OAAO,EAAC,GAAG,YAAY,OAAO,GAAG,oBAAoB,gBAAgB,OAAO,iBAAA;AAAA,gCAC7F,UAAA,QAAQ;AAAA,8BAAA;AAAA,4BAAA;AAAA,4BAGhB,QAAQ,IAAI,CAAC,WACV,oBAAC,gBAAgC,WAAU,OAAM,MAAK,QAAO,OAAO,OAAO,OAAO,KAAK,GAClF,iBAAO,aAAa,OAAO,WAAW,KAAK,EAAC,OAAO,UAAU,QAAQ,GAAE,IAAK,IAAI,OAAO,KAAK,KAAK,EAAE,SAAS,EAAA,GAD9F,OAAO,KAE1B,CACH;AAAA,0BAAA;AAAA,wBAAA;AAAA,sBAAA,KA/BG,KAkChB;AAAA,oBAER,CAAC;AAAA,oBACA,kBAAkB;AAAA,oBAClB,UAAU,KACP,oBAAC,UAAA,EAAS,WAAU,OAAM,IAAI,OAC1B,UAAA,oBAAC,eAAA,EAAc,WAAU,OAAM,MAAK,QAAO,OAAO,EAAC,YAAY,UAAU,OAAO,kBAAkB,WAAW,UAAU,IAAI,EAAA,GACtH,UAAA,EAAE,OAAO,EAAA,CACd,EAAA,CACJ;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA,EAER,CAER;AAAA,YAAA;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,IACC,kCAAe,oBAAA,EAAmB,IAAI,UAAU,OAAO,QAAQ,KAAK,GAAI,UAAA,WAAA,CAAW;AAAA,IACpF,oBAAC,qBAAkB,MAAK,UAAS,aAAU,UAAS,OAAO,oBAAqB,UAAA,OAAA,CAAO;AAAA,EAAA,GAC3F;AAER;AAMA,MAAM,gBAAgB,eAAe,sBAAsB,UAAU;"}

package/dist/sortable/sortableRows.js

@@ -0,0 +1,14 @@
+function moveRow(rows, fromIndex, toIndex) {
+  const next = [...rows];
+  const isInside = (index) => Number.isInteger(index) && index >= 0 && index < rows.length;
+  if (!isInside(fromIndex) || !isInside(toIndex) || fromIndex === toIndex) {
+    return next;
+  }
+  const [moved] = next.splice(fromIndex, 1);
+  next.splice(toIndex, 0, moved);
+  return next;
+}
+export {
+  moveRow
+};
+//# sourceMappingURL=sortableRows.js.map

package/dist/sortable/sortableRows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableRows.js","sources":["../../src/sortable/sortableRows.js"],"sourcesContent":["// Mover un renglón de lugar en una lista donde el orden es el dato (qué se hace primero, en qué orden pasa la ruta). Sin\n// React ni MUI: lo usa SortableTable al soltar y la pantalla que quiera mover sin arrastrar (botones «Subir» y «Bajar»).\n//\n// Las posiciones van desde 0, como las del arreglo; lo que ve una persona («posición 3») es la de aquí más uno.\n//\n// Funciones puras, sin React: function (regla de la casa).\n\n/**\n * La lista con un renglón movido a otro lugar. No toca la lista que recibe: regresa una nueva.\n *\n * Una posición fuera de la lista (o la misma) regresa una copia igual: nada que mover.\n *\n * @template T\n * @param {ReadonlyArray<T>} rows en su orden de hoy\n * @param {number} fromIndex dónde está el renglón (desde 0)\n * @param {number} toIndex dónde queda (desde 0, contado en la lista ya sin él, como lo da el arrastre)\n * @returns {T[]}\n */\nexport function moveRow(rows, fromIndex, toIndex) {\n    const next = [...rows];\n    const isInside = (index) => Number.isInteger(index) && index >= 0 && index < rows.length;\n    // guard clause: posiciones que no existen o el mismo lugar\n    if (!isInside(fromIndex) || !isInside(toIndex) || fromIndex === toIndex) {\n        return next;\n    }\n    const [moved] = next.splice(fromIndex, 1);\n    next.splice(toIndex, 0, moved);\n    return next;\n}\n"],"names":[],"mappings":"AAkBO,SAAS,QAAQ,MAAM,WAAW,SAAS;AAC9C,QAAM,OAAO,CAAC,GAAG,IAAI;AACrB,QAAM,WAAW,CAAC,UAAU,OAAO,UAAU,KAAK,KAAK,SAAS,KAAK,QAAQ,KAAK;AAElF,MAAI,CAAC,SAAS,SAAS,KAAK,CAAC,SAAS,OAAO,KAAK,cAAc,SAAS;AACrE,WAAO;AAAA,EACX;AACA,QAAM,CAAC,KAAK,IAAI,KAAK,OAAO,WAAW,CAAC;AACxC,OAAK,OAAO,SAAS,GAAG,KAAK;AAC7B,SAAO;AACX;"}

package/dist/sortable.js

@@ -0,0 +1,9 @@
+import { default as default2 } from "./sortable/FormSortableField.js";
+import { default as default3 } from "./sortable/SortableTable.js";
+import { moveRow } from "./sortable/sortableRows.js";
+export {
+  default2 as FormSortableField,
+  default3 as SortableTable,
+  moveRow
+};
+//# sourceMappingURL=sortable.js.map

package/dist/sortable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/theme/components/minimalComponents.js

@@ -92,6 +92,21 @@ function minimalComponents() {
       defaultProps: { disableUnderline: true },
       styleOverrides: { root: ({ theme }) => fieldWellStylesOf(theme, { radius: RADIUS_PIXELS.control }) }
     },
+    // las fechas y horas de MUI X (/date-pickers) tienen su propia pieza: lo mismo que el campo de arriba. Sin esto salían
+    // transparentes y con la raya de MUI, distintas de los campos de al lado (medido en Chrome, claro y oscuro). La raya se
+    // quita también al pasar el cursor, con el foco y con error: ahí MUI X la vuelve a poner
+    MuiPickersOutlinedInput: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          ...fieldWellStylesOf(theme, { radius: RADIUS_PIXELS.control }),
+          "& .MuiPickersOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline, &.Mui-error .MuiPickersOutlinedInput-notchedOutline": {
+            border: 0
+          },
+          "&.Mui-focused": { outline: `2px solid ${tintOf(theme, "primary", TINT_PERCENT.ring)}` },
+          "&.Mui-error": { outline: `2px solid ${tintOf(theme, "error", TINT_PERCENT.ring)}` }
+        })
+      }
+    },
     // la etiqueta con borde también es tonal: el tinte de su color (o el gris si no lleva color)
     MuiChip: {
       styleOverrides: {

package/dist/theme/components/minimalComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"minimalComponents.js","sources":["../../../src/theme/components/minimalComponents.js"],"sourcesContent":["// El estilo minimalista (createToolkitTheme({look: 'minimal'})): plano y tonal, como pidió el autor («casi solo colores, sin\n// bordes, que el mismo color diga dónde están las superficies»; su referencia: BELOW y Samurai Jack, formas de bloques de\n// color sin contorno y una sola luz de acento).\n//\n// Las reglas:\n//   - sin bordes ni sombras: las superficies se separan por su tono, por omisión con los grises de Apple (MINIMAL_TONES: el\n//     fondo agrupado gris y las tarjetas un escalón arriba; los campos, el gris de relleno; lo que flota, un gris más). Cada\n//     proyecto puede pasar los suyos (createToolkitTheme minimalTones) y el minimalista se pinta con su marca;\n//   - un solo color de acento: el botón principal, lo elegido (un tinte suave de su color, sin marco) y las ligas; lo demás\n//     neutro. El botón con borde y la etiqueta con borde pasan a «tonales»: el tinte de su color, sin la raya;\n//   - sin vidrio ni degradados: superficies sólidas.\n// Va encima de los ajustes del framework (toolkitComponents) y el proyecto puede sumar los suyos encima.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {accentTextStylesOf, fieldWellStylesOf} from '@/theme/glassSurface.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport {cssTokenOf} from '@/theme/cssTokens.js';\n\n/**\n * Los tonos del minimalista por omisión, los grises de Apple, en claro y en oscuro:\n *   - default: el fondo de la página (el gris agrupado);\n *   - paper: las tarjetas, un escalón arriba;\n *   - fill: el relleno de campos, grupos y botones sin color (más claro que el fondo en oscuro);\n *   - floating: lo que flota sobre el contenido (la barra de pestañas del teléfono, el aviso de versión nueva), un escalón\n *     más oscuro que las tarjetas. Del color de las tarjetas «se perdía» sobre ellas (lo dijo el autor de la primera barra\n *     de abajo del minimalista); así se distingue sin borde ni sombra, sobre tarjetas y sobre el fondo.\n */\nexport const MINIMAL_TONES = Object.freeze({\n    light: Object.freeze({default: '#F2F2F7', paper: '#FFFFFF', fill: 'rgba(118, 118, 128, 0.12)', floating: '#E5E5EA'}),\n    dark: Object.freeze({default: '#000000', paper: '#1C1C1E', fill: 'rgba(118, 118, 128, 0.24)', floating: '#2C2C2E'}),\n});\n\n/** Los fondos del minimalista por omisión (los de MINIMAL_TONES): el gris agrupado de Apple y la tarjeta un escalón arriba. */\nexport const MINIMAL_BACKGROUND = Object.freeze({\n    light: {default: MINIMAL_TONES.light.default, paper: MINIMAL_TONES.light.paper},\n    dark: {default: MINIMAL_TONES.dark.default, paper: MINIMAL_TONES.dark.paper},\n});\n\n/**\n * Los tonos del minimalista con los del proyecto encima: lo que el proyecto no trae se queda con el gris de Apple.\n *\n * @param {{light?: object, dark?: object}} [projectTones] cualquiera de default, paper, fill y floating por modo\n * @returns {{light: {default: string, paper: string, fill: string, floating: string}, dark: {default: string, paper: string, fill: string, floating: string}}}\n */\nexport function minimalTonesOf(projectTones = {}) {\n    return {\n        light: {...MINIMAL_TONES.light, ...projectTones.light},\n        dark: {...MINIMAL_TONES.dark, ...projectTones.dark},\n    };\n}\n\n/** Los tonos con que se armó el tema (createToolkitTheme los guarda); sin ellos, los de Apple. */\nfunction tonesOf(theme) {\n    return theme.toolkit?.minimalTones ?? MINIMAL_TONES;\n}\n// el tinte de lo elegido y de los controles tonales (por ciento de su color) y al pasar el cursor\nconst TINT_PERCENT = Object.freeze({rest: 14, hover: 22, ring: 45});\n// las esquinas: tarjetas y controles (px)\nconst RADIUS_PIXELS = Object.freeze({card: 16, control: 10, group: 12, segment: 9});\n// los títulos chicos (overline), como se escriben (px)\nconst SMALL_TITLE_PIXELS = 13;\n\n/**\n * El tinte de un color del tema (lo elegido, un botón tonal).\n *\n * @param {object} theme\n * @param {string} [colorName]\n * @param {number} [percent]\n * @returns {string}\n */\nfunction tintOf(theme, colorName = 'primary', percent = TINT_PERCENT.rest) {\n    const palette = paletteOf(theme);\n    const color = (palette[colorName] ?? palette.primary).main;\n    return `color-mix(in srgb, ${color} ${percent}%, transparent)`;\n}\n\n/**\n * El relleno gris de un campo o de un grupo, en claro y en oscuro.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction tonalFillOf(theme) {\n    const tones = tonesOf(theme);\n    return lightDarkStylesOf(theme, {backgroundColor: tones.light.fill}, {backgroundColor: tones.dark.fill});\n}\n\n/**\n * Lo elegido: el tinte suave del acento y su letra legible, sin marco ni gota.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction selectedTintOf(theme) {\n    return {backgroundColor: tintOf(theme), ...accentTextStylesOf(theme)};\n}\n\n/**\n * La superficie de lo que flota en el minimalista, sólida, en claro y en oscuro (el tono floating; ver MINIMAL_TONES).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function minimalFloatingStylesOf(theme) {\n    const tones = tonesOf(theme);\n    return lightDarkStylesOf(theme, {backgroundColor: tones.light.floating}, {backgroundColor: tones.dark.floating});\n}\n\n/**\n * @returns {object} el `components` del tema de MUI para el estilo minimalista\n */\nexport function minimalComponents() {\n    return {\n        MuiPaper: {\n            defaultProps: {elevation: 0},\n            styleOverrides: {\n                root: {backgroundImage: 'none', boxShadow: 'none'},\n                outlined: {border: 0},\n                // las tarjetas: la variable de los paneles (cssTokens.js) con sus 16 px de respaldo\n                rounded: {borderRadius: cssTokenOf('panelRadius', `${RADIUS_PIXELS.card}px`)},\n            },\n        },\n        MuiCard: {defaultProps: {elevation: 0}},\n        // la barra del mismo tono que el fondo: sin raya ni sombra, solo su contenido\n        MuiAppBar: {\n            defaultProps: {elevation: 0, color: 'inherit'},\n            styleOverrides: {\n                root: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, color: paletteOf(theme).text.primary, boxShadow: 'none', borderBottom: 0}),\n            },\n        },\n        // el menú lateral también del tono del fondo, sin raya: lo separa el espacio, no una línea\n        MuiDrawer: {\n            styleOverrides: {\n                paper: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, borderRight: 0, backgroundImage: 'none'}),\n            },\n        },\n        MuiButton: {\n            defaultProps: {disableElevation: true},\n            styleOverrides: {\n                root: {borderRadius: RADIUS_PIXELS.control, boxShadow: 'none'},\n                // el de borde es «tonal»: el tinte de su color, sin la raya\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    backgroundColor: tintOf(theme, ownerState.color),\n                    '&:hover': {border: 0, backgroundColor: tintOf(theme, ownerState.color, TINT_PERCENT.hover)},\n                }),\n            },\n        },\n        MuiButtonGroup: {defaultProps: {disableElevation: true}},\n        MuiOutlinedInput: {\n            styleOverrides: {\n                // el campo: los tonos de los campos del tema (por omisión, el relleno del minimalista; ver createToolkitTheme)\n                root: ({theme}) => ({\n                    ...fieldWellStylesOf(theme, {radius: RADIUS_PIXELS.control}),\n                    '&.Mui-focused': {outline: `2px solid ${tintOf(theme, 'primary', TINT_PERCENT.ring)}`},\n                    '&.Mui-error': {outline: `2px solid ${tintOf(theme, 'error', TINT_PERCENT.ring)}`},\n                }),\n                notchedOutline: {border: 0},\n            },\n        },\n        MuiFilledInput: {\n            defaultProps: {disableUnderline: true},\n            styleOverrides: {root: ({theme}) => fieldWellStylesOf(theme, {radius: RADIUS_PIXELS.control})},\n        },\n        // la etiqueta con borde también es tonal: el tinte de su color (o el gris si no lleva color)\n        MuiChip: {\n            styleOverrides: {\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    ...(ownerState.color && ownerState.color !== 'default' ? {backgroundColor: tintOf(theme, ownerState.color)} : tonalFillOf(theme)),\n                }),\n            },\n        },\n        MuiListItemButton: {\n            styleOverrides: {\n                root: ({theme}) => ({borderRadius: RADIUS_PIXELS.control, '&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        MuiMenuItem: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        // las columnas de horas y minutos de MUI X: lo elegido con el mismo tinte que un menú (MUI X les pone el color lleno con\n        // la letra de contraste, que en oscuro sale negra sobre el naranja)\n        MuiMultiSectionDigitalClockSection: {\n            styleOverrides: {\n                item: ({theme}) => ({justifyContent: 'center', '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus-visible': selectedTintOf(theme)}),\n            },\n        },\n        MuiDigitalClock: {\n            styleOverrides: {\n                item: ({theme}) => ({'&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus-visible': selectedTintOf(theme)}),\n            },\n        },\n        // el grupo de botones (el control segmentado): una tira gris y lo elegido en blanco (claro) o un escalón arriba (oscuro)\n        MuiToggleButtonGroup: {\n            styleOverrides: {\n                root: ({theme}) => ({...tonalFillOf(theme), border: 0, borderRadius: RADIUS_PIXELS.group, padding: 3, gap: 3}),\n                // sin !important: el ajuste del tema va después de las reglas del grupo de MUI (las que quitan las esquinas de los\n                // de en medio) y les gana igual; con !important ni el control segmentado ni el proyecto podían cambiar la forma\n                grouped: {border: 0, borderRadius: RADIUS_PIXELS.segment},\n            },\n        },\n        MuiToggleButton: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    border: 0,\n                    ...lightDarkStylesOf(theme,\n                        {'&.Mui-selected, &.Mui-selected:hover': {backgroundColor: paletteOf(theme).background.paper, color: paletteOf(theme).text.primary}},\n                        {'&.Mui-selected, &.Mui-selected:hover': {backgroundColor: 'rgba(118, 118, 128, 0.36)'}}),\n                }),\n            },\n        },\n        MuiTab: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected': accentTextStylesOf(theme)}),\n            },\n        },\n        // las tablas sin rayas entre renglones: el encabezado se distingue por su tono\n        MuiTableCell: {\n            styleOverrides: {\n                root: {borderBottom: 0},\n                head: ({theme}) => ({...tonalFillOf(theme), fontWeight: 600}),\n            },\n        },\n        MuiDataGrid: {\n            styleOverrides: {\n                root: {border: 0, '--DataGrid-rowBorderColor': 'transparent'},\n                columnHeaders: ({theme}) => tonalFillOf(theme),\n            },\n        },\n        MuiAlert: {styleOverrides: {root: {border: 0}}},\n        // los títulos chicos como se escriben (Apple ya no los pone en mayúsculas), con el espaciado de su tamaño\n        MuiTypography: {\n            styleOverrides: {\n                overline: {textTransform: 'none', fontWeight: 600, ...textSizeOf(SMALL_TITLE_PIXELS)},\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"minimalComponents.js","sources":["../../../src/theme/components/minimalComponents.js"],"sourcesContent":["// El estilo minimalista (createToolkitTheme({look: 'minimal'})): plano y tonal, como pidió el autor («casi solo colores, sin\n// bordes, que el mismo color diga dónde están las superficies»; su referencia: BELOW y Samurai Jack, formas de bloques de\n// color sin contorno y una sola luz de acento).\n//\n// Las reglas:\n//   - sin bordes ni sombras: las superficies se separan por su tono, por omisión con los grises de Apple (MINIMAL_TONES: el\n//     fondo agrupado gris y las tarjetas un escalón arriba; los campos, el gris de relleno; lo que flota, un gris más). Cada\n//     proyecto puede pasar los suyos (createToolkitTheme minimalTones) y el minimalista se pinta con su marca;\n//   - un solo color de acento: el botón principal, lo elegido (un tinte suave de su color, sin marco) y las ligas; lo demás\n//     neutro. El botón con borde y la etiqueta con borde pasan a «tonales»: el tinte de su color, sin la raya;\n//   - sin vidrio ni degradados: superficies sólidas.\n// Va encima de los ajustes del framework (toolkitComponents) y el proyecto puede sumar los suyos encima.\n//\n// Funciones puras, sin React: function (regla de la casa).\nimport {paletteOf} from '@/theme/components/paletteOf.js';\nimport {textSizeOf} from '@/theme/appleTracking.js';\nimport {accentTextStylesOf, fieldWellStylesOf} from '@/theme/glassSurface.js';\nimport {lightDarkStylesOf} from '@/theme/lightDarkStyles.js';\nimport {cssTokenOf} from '@/theme/cssTokens.js';\n\n/**\n * Los tonos del minimalista por omisión, los grises de Apple, en claro y en oscuro:\n *   - default: el fondo de la página (el gris agrupado);\n *   - paper: las tarjetas, un escalón arriba;\n *   - fill: el relleno de campos, grupos y botones sin color (más claro que el fondo en oscuro);\n *   - floating: lo que flota sobre el contenido (la barra de pestañas del teléfono, el aviso de versión nueva), un escalón\n *     más oscuro que las tarjetas. Del color de las tarjetas «se perdía» sobre ellas (lo dijo el autor de la primera barra\n *     de abajo del minimalista); así se distingue sin borde ni sombra, sobre tarjetas y sobre el fondo.\n */\nexport const MINIMAL_TONES = Object.freeze({\n    light: Object.freeze({default: '#F2F2F7', paper: '#FFFFFF', fill: 'rgba(118, 118, 128, 0.12)', floating: '#E5E5EA'}),\n    dark: Object.freeze({default: '#000000', paper: '#1C1C1E', fill: 'rgba(118, 118, 128, 0.24)', floating: '#2C2C2E'}),\n});\n\n/** Los fondos del minimalista por omisión (los de MINIMAL_TONES): el gris agrupado de Apple y la tarjeta un escalón arriba. */\nexport const MINIMAL_BACKGROUND = Object.freeze({\n    light: {default: MINIMAL_TONES.light.default, paper: MINIMAL_TONES.light.paper},\n    dark: {default: MINIMAL_TONES.dark.default, paper: MINIMAL_TONES.dark.paper},\n});\n\n/**\n * Los tonos del minimalista con los del proyecto encima: lo que el proyecto no trae se queda con el gris de Apple.\n *\n * @param {{light?: object, dark?: object}} [projectTones] cualquiera de default, paper, fill y floating por modo\n * @returns {{light: {default: string, paper: string, fill: string, floating: string}, dark: {default: string, paper: string, fill: string, floating: string}}}\n */\nexport function minimalTonesOf(projectTones = {}) {\n    return {\n        light: {...MINIMAL_TONES.light, ...projectTones.light},\n        dark: {...MINIMAL_TONES.dark, ...projectTones.dark},\n    };\n}\n\n/** Los tonos con que se armó el tema (createToolkitTheme los guarda); sin ellos, los de Apple. */\nfunction tonesOf(theme) {\n    return theme.toolkit?.minimalTones ?? MINIMAL_TONES;\n}\n// el tinte de lo elegido y de los controles tonales (por ciento de su color) y al pasar el cursor\nconst TINT_PERCENT = Object.freeze({rest: 14, hover: 22, ring: 45});\n// las esquinas: tarjetas y controles (px)\nconst RADIUS_PIXELS = Object.freeze({card: 16, control: 10, group: 12, segment: 9});\n// los títulos chicos (overline), como se escriben (px)\nconst SMALL_TITLE_PIXELS = 13;\n\n/**\n * El tinte de un color del tema (lo elegido, un botón tonal).\n *\n * @param {object} theme\n * @param {string} [colorName]\n * @param {number} [percent]\n * @returns {string}\n */\nfunction tintOf(theme, colorName = 'primary', percent = TINT_PERCENT.rest) {\n    const palette = paletteOf(theme);\n    const color = (palette[colorName] ?? palette.primary).main;\n    return `color-mix(in srgb, ${color} ${percent}%, transparent)`;\n}\n\n/**\n * El relleno gris de un campo o de un grupo, en claro y en oscuro.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction tonalFillOf(theme) {\n    const tones = tonesOf(theme);\n    return lightDarkStylesOf(theme, {backgroundColor: tones.light.fill}, {backgroundColor: tones.dark.fill});\n}\n\n/**\n * Lo elegido: el tinte suave del acento y su letra legible, sin marco ni gota.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction selectedTintOf(theme) {\n    return {backgroundColor: tintOf(theme), ...accentTextStylesOf(theme)};\n}\n\n/**\n * La superficie de lo que flota en el minimalista, sólida, en claro y en oscuro (el tono floating; ver MINIMAL_TONES).\n *\n * @param {object} theme\n * @returns {object}\n */\nexport function minimalFloatingStylesOf(theme) {\n    const tones = tonesOf(theme);\n    return lightDarkStylesOf(theme, {backgroundColor: tones.light.floating}, {backgroundColor: tones.dark.floating});\n}\n\n/**\n * @returns {object} el `components` del tema de MUI para el estilo minimalista\n */\nexport function minimalComponents() {\n    return {\n        MuiPaper: {\n            defaultProps: {elevation: 0},\n            styleOverrides: {\n                root: {backgroundImage: 'none', boxShadow: 'none'},\n                outlined: {border: 0},\n                // las tarjetas: la variable de los paneles (cssTokens.js) con sus 16 px de respaldo\n                rounded: {borderRadius: cssTokenOf('panelRadius', `${RADIUS_PIXELS.card}px`)},\n            },\n        },\n        MuiCard: {defaultProps: {elevation: 0}},\n        // la barra del mismo tono que el fondo: sin raya ni sombra, solo su contenido\n        MuiAppBar: {\n            defaultProps: {elevation: 0, color: 'inherit'},\n            styleOverrides: {\n                root: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, color: paletteOf(theme).text.primary, boxShadow: 'none', borderBottom: 0}),\n            },\n        },\n        // el menú lateral también del tono del fondo, sin raya: lo separa el espacio, no una línea\n        MuiDrawer: {\n            styleOverrides: {\n                paper: ({theme}) => ({backgroundColor: paletteOf(theme).background.default, borderRight: 0, backgroundImage: 'none'}),\n            },\n        },\n        MuiButton: {\n            defaultProps: {disableElevation: true},\n            styleOverrides: {\n                root: {borderRadius: RADIUS_PIXELS.control, boxShadow: 'none'},\n                // el de borde es «tonal»: el tinte de su color, sin la raya\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    backgroundColor: tintOf(theme, ownerState.color),\n                    '&:hover': {border: 0, backgroundColor: tintOf(theme, ownerState.color, TINT_PERCENT.hover)},\n                }),\n            },\n        },\n        MuiButtonGroup: {defaultProps: {disableElevation: true}},\n        MuiOutlinedInput: {\n            styleOverrides: {\n                // el campo: los tonos de los campos del tema (por omisión, el relleno del minimalista; ver createToolkitTheme)\n                root: ({theme}) => ({\n                    ...fieldWellStylesOf(theme, {radius: RADIUS_PIXELS.control}),\n                    '&.Mui-focused': {outline: `2px solid ${tintOf(theme, 'primary', TINT_PERCENT.ring)}`},\n                    '&.Mui-error': {outline: `2px solid ${tintOf(theme, 'error', TINT_PERCENT.ring)}`},\n                }),\n                notchedOutline: {border: 0},\n            },\n        },\n        MuiFilledInput: {\n            defaultProps: {disableUnderline: true},\n            styleOverrides: {root: ({theme}) => fieldWellStylesOf(theme, {radius: RADIUS_PIXELS.control})},\n        },\n        // las fechas y horas de MUI X (/date-pickers) tienen su propia pieza: lo mismo que el campo de arriba. Sin esto salían\n        // transparentes y con la raya de MUI, distintas de los campos de al lado (medido en Chrome, claro y oscuro). La raya se\n        // quita también al pasar el cursor, con el foco y con error: ahí MUI X la vuelve a poner\n        MuiPickersOutlinedInput: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    ...fieldWellStylesOf(theme, {radius: RADIUS_PIXELS.control}),\n                    '& .MuiPickersOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline, &.Mui-error .MuiPickersOutlinedInput-notchedOutline': {\n                        border: 0,\n                    },\n                    '&.Mui-focused': {outline: `2px solid ${tintOf(theme, 'primary', TINT_PERCENT.ring)}`},\n                    '&.Mui-error': {outline: `2px solid ${tintOf(theme, 'error', TINT_PERCENT.ring)}`},\n                }),\n            },\n        },\n        // la etiqueta con borde también es tonal: el tinte de su color (o el gris si no lleva color)\n        MuiChip: {\n            styleOverrides: {\n                outlined: ({ownerState, theme}) => ({\n                    border: 0,\n                    ...(ownerState.color && ownerState.color !== 'default' ? {backgroundColor: tintOf(theme, ownerState.color)} : tonalFillOf(theme)),\n                }),\n            },\n        },\n        MuiListItemButton: {\n            styleOverrides: {\n                root: ({theme}) => ({borderRadius: RADIUS_PIXELS.control, '&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        MuiMenuItem: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected, &.Mui-selected:hover': selectedTintOf(theme)}),\n            },\n        },\n        // las columnas de horas y minutos de MUI X: lo elegido con el mismo tinte que un menú (MUI X les pone el color lleno con\n        // la letra de contraste, que en oscuro sale negra sobre el naranja)\n        MuiMultiSectionDigitalClockSection: {\n            styleOverrides: {\n                item: ({theme}) => ({justifyContent: 'center', '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus-visible': selectedTintOf(theme)}),\n            },\n        },\n        MuiDigitalClock: {\n            styleOverrides: {\n                item: ({theme}) => ({'&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus-visible': selectedTintOf(theme)}),\n            },\n        },\n        // el grupo de botones (el control segmentado): una tira gris y lo elegido en blanco (claro) o un escalón arriba (oscuro)\n        MuiToggleButtonGroup: {\n            styleOverrides: {\n                root: ({theme}) => ({...tonalFillOf(theme), border: 0, borderRadius: RADIUS_PIXELS.group, padding: 3, gap: 3}),\n                // sin !important: el ajuste del tema va después de las reglas del grupo de MUI (las que quitan las esquinas de los\n                // de en medio) y les gana igual; con !important ni el control segmentado ni el proyecto podían cambiar la forma\n                grouped: {border: 0, borderRadius: RADIUS_PIXELS.segment},\n            },\n        },\n        MuiToggleButton: {\n            styleOverrides: {\n                root: ({theme}) => ({\n                    border: 0,\n                    ...lightDarkStylesOf(theme,\n                        {'&.Mui-selected, &.Mui-selected:hover': {backgroundColor: paletteOf(theme).background.paper, color: paletteOf(theme).text.primary}},\n                        {'&.Mui-selected, &.Mui-selected:hover': {backgroundColor: 'rgba(118, 118, 128, 0.36)'}}),\n                }),\n            },\n        },\n        MuiTab: {\n            styleOverrides: {\n                root: ({theme}) => ({'&.Mui-selected': accentTextStylesOf(theme)}),\n            },\n        },\n        // las tablas sin rayas entre renglones: el encabezado se distingue por su tono\n        MuiTableCell: {\n            styleOverrides: {\n                root: {borderBottom: 0},\n                head: ({theme}) => ({...tonalFillOf(theme), fontWeight: 600}),\n            },\n        },\n        MuiDataGrid: {\n            styleOverrides: {\n                root: {border: 0, '--DataGrid-rowBorderColor': 'transparent'},\n                columnHeaders: ({theme}) => tonalFillOf(theme),\n            },\n        },\n        MuiAlert: {styleOverrides: {root: {border: 0}}},\n        // los títulos chicos como se escriben (Apple ya no los pone en mayúsculas), con el espaciado de su tamaño\n        MuiTypography: {\n            styleOverrides: {\n                overline: {textTransform: 'none', fontWeight: 600, ...textSizeOf(SMALL_TITLE_PIXELS)},\n            },\n        },\n    };\n}\n"],"names":[],"mappings":"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"}

package/dist/theme/glassSurface.js

@@ -224,21 +224,19 @@ function fieldWellStylesOf(theme, { radius = FIELD_WELL_RADIUS_PIXELS } = {}) {
   const base = { backgroundImage: "none", backdropFilter: "none", WebkitBackdropFilter: "none", borderRadius: fieldRadiusOf(theme, radius) };
   const field = fieldPaletteOf(theme);
   if (field) {
-    return {
-      ...base,
-      backgroundColor: field.fill,
-      boxShadow: fieldEdgeOf(field.border),
-      "&:hover": { backgroundColor: field.hoverFill, boxShadow: fieldEdgeOf(field.hoverBorder) }
-    };
+    return { ...base, ...fieldWellOfTones(field) };
   }
   const { light, dark } = FIELD_TONES;
+  return { ...base, ...lightDarkStylesOf(theme, fieldWellOfTones(light), fieldWellOfTones(dark)) };
+}
+function fieldWellOfTones(tones) {
   return {
-    ...base,
-    ...lightDarkStylesOf(
-      theme,
-      { backgroundColor: light.fill, boxShadow: fieldEdgeOf(light.border), "&:hover": { backgroundColor: light.hoverFill, boxShadow: fieldEdgeOf(light.hoverBorder) } },
-      { backgroundColor: dark.fill, boxShadow: fieldEdgeOf(dark.border), "&:hover": { backgroundColor: dark.hoverFill, boxShadow: fieldEdgeOf(dark.hoverBorder) } }
-    )
+    backgroundColor: `var(--calcita-field-fill, ${tones.fill})`,
+    boxShadow: `var(--calcita-field-edge, ${fieldEdgeOf(tones.border)})`,
+    "&:hover": {
+      backgroundColor: `var(--calcita-field-hover-fill, ${tones.hoverFill})`,
+      boxShadow: `var(--calcita-field-hover-edge, ${fieldEdgeOf(tones.hoverBorder)})`
+    }
   };
 }
 function fieldVariablesOf(theme) {