@stackcraftmx/calcita 0.31.0 → 0.32.0

package/dist/types/ui/metrics/CalendarHeatmap.d.ts

@@ -1,12 +1,13 @@
 /**
  * @param {object} props
- * @param {string} props.startsOn primer día del rango ("2025-09-16"), fecha de calendario
- * @param {string} props.endsOn último día del rango ("2026-09-15")
- * @param {Array<{date: string, value: number, detail?: string}>} props.days solo los días con actividad; el resto vale
+ * @param {string} [props.startsOn] primer día del rango ("2025-09-16"), fecha de calendario; sin él, un año antes de endsOn
+ * @param {string} [props.endsOn] último día del rango ("2026-09-15"); sin él, hoy en la zona del proveedor
+ * @param {Array<{date: string, value: number, detail?: string}>} [props.days] solo los días con actividad; el resto vale
  *     0
  * @param {string} props.ariaLabel qué muestra el calendario, ya traducido
  * @param {string} props.valueLabel encabezado de la columna de valor en la tabla ("Registros leídos")
- * @param {(value: number) => string} props.describeValue el valor en palabras para el tooltip ("120 registros leídos")
+ * @param {(value: number) => string} [props.describeValue] el valor en palabras para el tooltip ("120 registros leídos");
+ *     sin ella, solo el número
  * @param {import('react').ReactNode} [props.summary] renglón de resumen arriba del calendario
  * @param {string} [props.emptyLabel] qué decir si ningún día tiene actividad
  * @param {'primary'|'info'|'success'|'warning'|'error'} [props.tone]
@@ -15,16 +16,16 @@
  * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete
  */
 export default function CalendarHeatmap(props: {
-    startsOn: string;
-    endsOn: string;
-    days: Array<{
+    startsOn?: string;
+    endsOn?: string;
+    days?: Array<{
         date: string;
         value: number;
         detail?: string;
     }>;
     ariaLabel: string;
     valueLabel: string;
-    describeValue: (value: number) => string;
+    describeValue?: (value: number) => string;
     summary?: import('react').ReactNode;
     emptyLabel?: string;
     tone?: 'primary' | 'info' | 'success' | 'warning' | 'error';

package/dist/types/ui/metrics/chartParts.d.ts

@@ -70,7 +70,7 @@ export declare function highestValueOf(data: Array<Record<string, any>>, series:
  * @param {(value: number) => string} props.formatValue
  * @param {number} props.height
  */
-export declare function ChartTable({ data, series, periodLabel, formatValue, height }: {
+export declare function ChartTable({ data, series, periodLabel, formatValue, height, ...unknownProps }: {
     data: Array<Record<string, any>>;
     series: Array<{
         key: string;
@@ -88,7 +88,7 @@ export declare function ChartTable({ data, series, periodLabel, formatValue, hei
  * @param {boolean} [props.showsDash] la muestra con el trazo de su línea (LineChart); sin él, un cuadro de color
  * @param {string} props.ariaLabel
  */
-export declare function ChartLegend({ series, showsDash, ariaLabel }: {
+export declare function ChartLegend({ series, showsDash, ariaLabel, ...unknownProps }: {
     series: Array<{
         key: string;
         label: string;
@@ -104,7 +104,7 @@ export declare function ChartLegend({ series, showsDash, ariaLabel }: {
  *
  * @param {{referenceLine?: {value: number, label: string}}} props
  */
-export declare function ReferenceCaption({ referenceLine }: {
+export declare function ReferenceCaption({ referenceLine, ...unknownProps }: {
     referenceLine?: {
         value: number;
         label: string;

package/dist/types/ui/metrics/heatmapScale.d.ts

@@ -15,6 +15,29 @@ export declare function quantileThresholds(values: number[]): [number, number, n
  * @returns {0|1|2|3|4}
  */
 export declare function levelOf(value: number, [firstQuartile, median, thirdQuartile]: [number, number, number]): 0 | 1 | 2 | 3 | 4;
+/**
+ * El día de hoy (AAAA-MM-DD) en la zona del negocio: en la noche de México, en UTC ya es mañana.
+ *
+ * @param {string} timeZone zona de Intl ('America/Mexico_City')
+ * @param {Date} [now]
+ * @returns {string}
+ */
+export declare function todayInZone(timeZone: string, now?: Date): string;
+/**
+ * El rango del calendario con lo que falte: sin endsOn termina hoy y sin startsOn abarca el último año (desde el día
+ * siguiente al mismo de hace un año). OJO: antes, sin las dos fechas el calendario tronaba al abrir la pantalla.
+ *
+ * @param {{startsOn?: string, endsOn?: string, today: string}} range fechas de calendario AAAA-MM-DD
+ * @returns {{startsOn: string, endsOn: string}}
+ */
+export declare function calendarRangeOf({ startsOn, endsOn, today }: {
+    startsOn?: string;
+    endsOn?: string;
+    today: string;
+}): {
+    startsOn: string;
+    endsOn: string;
+};
 /**
  * Semanas del calendario: columnas de lunes a domingo desde la semana de startsOn hasta la de endsOn.
  *

package/dist/types/ui/navigation/DocumentTitle.d.ts

@@ -1,6 +1,6 @@
 /**
  * @param {{title: string}} props texto ya traducido
  */
-export default function DocumentTitle({ title }: {
+export default function DocumentTitle({ title, ...unknownProps }: {
     title: string;
 }): import("react").JSX.Element;

package/dist/ui/actions/ActionsMenu.js

@@ -9,11 +9,13 @@ import MenuItem from "@mui/material/MenuItem";
 import Tooltip from "@mui/material/Tooltip";
 import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaActionsMenu";
 const ActionsItem = piecePart(THEME_NAME, "Item", MenuItem);
 const ActionsItemIcon = piecePart(THEME_NAME, "ItemIcon", ListItemIcon);
 function ActionsMenu(props) {
-  const { label, actions, icon, size = "small" } = usePieceProps(props, THEME_NAME);
+  const { label, actions, icon, size = "small", ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const [anchor, setAnchor] = useState(null);
   if (!actions?.length) {
     return null;

package/dist/ui/actions/ActionsMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActionsMenu con defaultProps y\n// styleOverrides de sus partes: item, itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActionsMenu)\nconst THEME_NAME = 'CalcitaActionsMenu';\nconst ActionsItem = piecePart(THEME_NAME, 'Item', MenuItem);\nconst ActionsItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActionsMenu.defaultProps) y encima lo que llega aquí\n    const {label, actions, icon, size = 'small'} = usePieceProps(props, THEME_NAME);\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <ActionsItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              ownSx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ActionsItemIcon ownSx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ActionsItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </ActionsItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAuBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,QAAQ;AAC1D,MAAM,kBAAkB,UAAU,YAAY,YAAY,YAAY;AAStE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,SAAS,MAAM,OAAO,YAAW,cAAc,OAAO,UAAU;AAC9E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA6B,UAAU,OAAO;AAAA,QACrC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,OAAO,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC7D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,iBAAA,EAAgB,OAAO,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UACpG,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPd,OAAO;AAAA,IAAA,CAS5B,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"ActionsMenu.js","sources":["../../../src/ui/actions/ActionsMenu.jsx"],"sourcesContent":["// Un botón «⋯» con un menú de acciones: el de cada tarjeta del tablero, el de cada columna, el de cada mensaje de la bandeja.\n// Las acciones las da la pantalla (label ya traducido, ícono, color, apagada); sin acciones no se pinta nada.\n//\n//   <ActionsMenu label=\"Acciones de «Junta de cierre»\"\n//                actions={[{key: 'delete', label: 'Borrar', icon: <DeleteOutlineIcon fontSize=\"small\" />, color: 'error', onClick: remove}]} />\n//\n// El clic no llega a lo de abajo: no levanta una tarjeta que se arrastra ni abre el renglón donde vive.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaActionsMenu con defaultProps y\n// styleOverrides de sus partes: item, itemIcon.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaActionsMenu)\nconst THEME_NAME = 'CalcitaActionsMenu';\nconst ActionsItem = piecePart(THEME_NAME, 'Item', MenuItem);\nconst ActionsItemIcon = piecePart(THEME_NAME, 'ItemIcon', ListItemIcon);\n\n/**\n * @param {object} props\n * @param {string} props.label el nombre del botón (lector de pantalla y su tooltip), ya traducido\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: string, disabled?: boolean, onClick: () => void}>} [props.actions]\n * @param {import('react').ReactNode} [props.icon] otro ícono para el botón (por omisión «⋯»)\n * @param {'small'|'medium'} [props.size]\n */\nexport default function ActionsMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaActionsMenu.defaultProps) y encima lo que llega aquí\n    const {label, actions, icon, size = 'small', ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const [anchor, setAnchor] = useState(null);\n    if (!actions?.length) {\n        return null;\n    }\n    return (\n        <>\n            <Tooltip title={label}>\n                <IconButton size={size} aria-label={label} aria-haspopup=\"menu\"\n                            onClick={(event) => {\n                                event.stopPropagation();\n                                setAnchor(event.currentTarget);\n                            }}>\n                    {icon ?? <MoreHorizRoundedIcon fontSize=\"small\" />}\n                </IconButton>\n            </Tooltip>\n            <Menu anchorEl={anchor} open={Boolean(anchor)} onClose={() => setAnchor(null)} onClick={(event) => event.stopPropagation()}>\n                {actions.map((action) => (\n                    <ActionsItem key={action.key} disabled={action.disabled}\n                              onClick={() => {\n                                  setAnchor(null);\n                                  action.onClick();\n                              }}\n                              ownSx={action.color ? {color: `${action.color}.main`} : undefined}>\n                        {action.icon && <ActionsItemIcon ownSx={action.color ? {color: 'inherit'} : undefined}>{action.icon}</ActionsItemIcon>}\n                        <ListItemText>{action.label}</ListItemText>\n                    </ActionsItem>\n                ))}\n            </Menu>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,QAAQ,QAAQ;AAC1D,MAAM,kBAAkB,UAAU,YAAY,YAAY,YAAY;AAStE,SAAwB,YAAY,OAAO;AAEvC,QAAM,EAAC,OAAO,SAAS,MAAM,OAAO,SAAS,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC/F,mBAAiB,YAAY,YAAY;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,IAAI;AACzC,MAAI,CAAC,SAAS,QAAQ;AAClB,WAAO;AAAA,EACX;AACA,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAQ,OAAO,OACZ,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW;AAAA,QAAY,cAAY;AAAA,QAAO,iBAAc;AAAA,QAC7C,SAAS,CAAC,UAAU;AAChB,gBAAM,gBAAA;AACN,oBAAU,MAAM,aAAa;AAAA,QACjC;AAAA,QACP,UAAA,QAAQ,oBAAC,sBAAA,EAAqB,UAAS,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA,GAExD;AAAA,IACA,oBAAC,QAAK,UAAU,QAAQ,MAAM,QAAQ,MAAM,GAAG,SAAS,MAAM,UAAU,IAAI,GAAG,SAAS,CAAC,UAAU,MAAM,mBACpG,UAAA,QAAQ,IAAI,CAAC,WACV;AAAA,MAAC;AAAA,MAAA;AAAA,QAA6B,UAAU,OAAO;AAAA,QACrC,SAAS,MAAM;AACX,oBAAU,IAAI;AACd,iBAAO,QAAA;AAAA,QACX;AAAA,QACA,OAAO,OAAO,QAAQ,EAAC,OAAO,GAAG,OAAO,KAAK,QAAA,IAAW;AAAA,QAC7D,UAAA;AAAA,UAAA,OAAO,QAAQ,oBAAC,iBAAA,EAAgB,OAAO,OAAO,QAAQ,EAAC,OAAO,UAAA,IAAa,QAAY,UAAA,OAAO,MAAK;AAAA,UACpG,oBAAC,cAAA,EAAc,UAAA,OAAO,MAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAPd,OAAO;AAAA,IAAA,CAS5B,EAAA,CACL;AAAA,EAAA,GACJ;AAER;"}

package/dist/ui/actions/CopyButton.js

@@ -6,8 +6,10 @@ import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import CheckIcon from "@mui/icons-material/CheckRounded";
 import CopyIcon from "@mui/icons-material/ContentCopyOutlined";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const COPIED_FEEDBACK_MILLISECONDS = 2e3;
-function CopyButton({ value, label, size = "small", onCopied, texts }) {
+function CopyButton({ value, label, size = "small", onCopied, texts, ...unknownProps }) {
+  warnUnknownProps("CopyButton", unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const [isCopied, setIsCopied] = useState(false);
   const buttonLabel = label ?? t("form.copy");

package/dist/ui/actions/CopyButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyButton.js","sources":["../../../src/ui/actions/CopyButton.jsx"],"sourcesContent":["// Botón para copiar un valor al portapapeles, con la palomita de «copiado» un par de segundos.\n//\n// Sin permiso de portapapeles (una página en http, dentro de un iframe) no truena: el valor sigue a la vista para copiarlo\n// a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\n\n// cuánto se queda la palomita de «copiado»\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\n\n/**\n * @param {object} props\n * @param {string} props.value lo que se copia\n * @param {string} [props.label] ya traducido; por omisión «Copiar»\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CopyButton({value, label, size = 'small', onCopied, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const [isCopied, setIsCopied] = useState(false);\n    const buttonLabel = label ?? t('form.copy');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: el valor está a la vista para copiarlo a mano\n        }\n    };\n\n    return (\n        <Tooltip title={isCopied ? t('form.copied') : buttonLabel}>\n            <IconButton size={size} aria-label={buttonLabel} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                {isCopied ? <CheckIcon fontSize=\"inherit\" /> : <CopyIcon fontSize=\"inherit\" />}\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;AAcA,MAAM,+BAA+B;AAUrC,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,SAAQ;AAChF,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,SAAS,EAAE,WAAW;AAE1C,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAAA,IAER;AAAA,EACJ;AAEA,SACI,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,aAC1C,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,aAAa,SAAS,MAAM,OAAO,WAAW,YAAY,WACzF,UAAA,WAAW,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,IAAK,oBAAC,UAAA,EAAS,UAAS,UAAA,CAAU,GAChF,GACJ;AAER;"}
+{"version":3,"file":"CopyButton.js","sources":["../../../src/ui/actions/CopyButton.jsx"],"sourcesContent":["// Botón para copiar un valor al portapapeles, con la palomita de «copiado» un par de segundos.\n//\n// Sin permiso de portapapeles (una página en http, dentro de un iframe) no truena: el valor sigue a la vista para copiarlo\n// a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// cuánto se queda la palomita de «copiado»\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\n\n/**\n * @param {object} props\n * @param {string} props.value lo que se copia\n * @param {string} [props.label] ya traducido; por omisión «Copiar»\n * @param {'small'|'medium'} [props.size]\n * @param {() => void} [props.onCopied]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function CopyButton({value, label, size = 'small', onCopied, texts, ...unknownProps}) {\n    warnUnknownProps('CopyButton', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const [isCopied, setIsCopied] = useState(false);\n    const buttonLabel = label ?? t('form.copy');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: el valor está a la vista para copiarlo a mano\n        }\n    };\n\n    return (\n        <Tooltip title={isCopied ? t('form.copied') : buttonLabel}>\n            <IconButton size={size} aria-label={buttonLabel} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                {isCopied ? <CheckIcon fontSize=\"inherit\" /> : <CopyIcon fontSize=\"inherit\" />}\n            </IconButton>\n        </Tooltip>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;AAeA,MAAM,+BAA+B;AAUrC,SAAwB,WAAW,EAAC,OAAO,OAAO,OAAO,SAAS,UAAU,OAAO,GAAG,gBAAe;AACjG,mBAAiB,cAAc,YAAY;AAC3C,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,SAAS,EAAE,WAAW;AAE1C,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAAA,IAER;AAAA,EACJ;AAEA,SACI,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,aAC1C,UAAA,oBAAC,YAAA,EAAW,MAAY,cAAY,aAAa,SAAS,MAAM,OAAO,WAAW,YAAY,WACzF,UAAA,WAAW,oBAAC,WAAA,EAAU,UAAS,UAAA,CAAU,IAAK,oBAAC,UAAA,EAAS,UAAS,UAAA,CAAU,GAChF,GACJ;AAER;"}

package/dist/ui/actions/DownloadMenu.js

@@ -17,6 +17,7 @@ import { useFileTypes } from "../../downloads/fileTypes.js";
 import ConfirmDialog from "../../feedback/ConfirmDialog.js";
 import { useConfirmAction } from "../../feedback/useConfirmAction.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDownloadMenu";
 const DownloadButton = piecePart(THEME_NAME, "Button", Button);
 function DownloadMenu(props) {
@@ -33,8 +34,10 @@ function DownloadMenu(props) {
     variant = "button",
     ariaLabel,
     onChooseFormat,
-    icon: ButtonIcon = FileDownloadOutlinedIcon
+    icon: ButtonIcon = FileDownloadOutlinedIcon,
+    ...unknownProps
   } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common");
   const fileTypes = useFileTypes();
   const [anchorElement, setAnchorElement] = useState(null);

package/dist/ui/actions/DownloadMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadMenu.js","sources":["../../../src/ui/actions/DownloadMenu.jsx"],"sourcesContent":["// \"Descargar ▾\" con los formatos de un reporte: PDF para leer o archivar, Excel o CSV para trabajar.\n//\n// Un solo botón y no tres: en la barra de una pantalla tres botones de descarga compiten con la acción principal.\n// Se acomoda a donde quedó, como BarActionButton: en una cápsula de la barra (las `actions` de PageHeading con cápsulas)\n// es solo el ícono con su nombre en el tooltip, como las demás acciones; antes salía la píldora «Descargar ▾» dentro de\n// la cápsula y se veía una cápsula dentro de otra. En el «⋯» del teléfono es un renglón que abre los formatos.\n// Quien llama pasa QUÉ descargar por formato (download(format, transferOptions) → {blob, fileName}, la forma de\n// un cliente HTTP que descarga). La descarga va al panel de descargas (startDownload, downloads): el diálogo se cierra al\n// confirmar y el avance, el aviso de \"descargado\" y el error se ven allá, mientras la persona sigue trabajando.\n//\n// Regla de tablas: una descarga pasa por un diálogo de confirmación que dice qué se va a bajar (p. ej. que la base\n// completa de clientes tarda unos minutos). Con `confirmation` el formato elegido NO se descarga de inmediato: abre\n// ConfirmDialog (máquina confirmActionMachine) y solo al confirmar se pide el archivo, una sola vez aunque haya doble clic.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDownloadMenu con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {useFileTypes} from '@/downloads/fileTypes.js';\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDownloadMenu)\nconst THEME_NAME = 'CalcitaDownloadMenu';\nconst DownloadButton = piecePart(THEME_NAME, 'Button', Button);\n\n\n/**\n * @param {object} props\n * @param {string[]} props.formats los tipos de archivo, en orden: los de la casa (xlsx, csv, pdf) y los que el proyecto declare\n *     en ToolkitProvider fileTypes (zip, xml…)\n * @param {(format: string, transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} props.download\n * @param {string} [props.label] ya traducido; por defecto \"Descargar\"\n * @param {string} [props.downloadLabel] ya traducido; lo que se ve en el panel de descargas antes de saber el nombre\n *     del archivo\n * @param {boolean} [props.disabled]\n * @param {(format: string) => {title: string, description: import('react').ReactNode, confirmLabel?: string}} [props.confirmation]\n * @param {(format: string) => void} [props.onDownloaded] p. ej. volver a pedir la tabla (si la descarga cambia algo en\n *     el servidor)\n * @param {(format: string, error: unknown) => void} [props.onFailed] cuando la descarga no se pudo (el panel ya lo dice)\n * @param {(format: string) => void} [props.onCanceled] cuando la persona la canceló desde el panel\n * @param {'button'|'icon'} [props.variant] icon = solo el icono (columna de acciones de una tabla)\n * @param {string} [props.ariaLabel] ya traducido; obligatorio en la variante icon\n * @param {(format: string) => void} [props.onChooseFormat] quien llama se encarga de confirmar y descargar\n * @param {import('react').ElementType} [props.icon] ícono del botón; por defecto el de descarga. Distingue dos descargas en la\n *     misma fila\n *\n * IMPORTANTE: hay que pasar `confirmation` u `onChooseFormat`. Sin ninguno de los dos el menú no descarga nada (regla de\n * tablas: toda descarga pasa por confirmación).\n *\n * OJO onChooseFormat: dentro de una celda del DataGrid el diálogo de confirmación NO puede vivir en la celda (el grid\n * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato\n * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.\n */\nexport default function DownloadMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDownloadMenu.defaultProps) y encima lo que llega aquí\n    const {\n    formats, download, label, downloadLabel, disabled = false, confirmation, onDownloaded, onFailed, onCanceled, variant = 'button', ariaLabel,\n    onChooseFormat, icon: ButtonIcon = FileDownloadOutlinedIcon,\n} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('common');\n    const fileTypes = useFileTypes();\n    // de dónde sale el menú de formatos: del botón, o (desde el «⋯» del teléfono, que se cierra) de donde estaba el renglón\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [anchorPosition, setAnchorPosition] = useState(null);\n    const placement = useBarActionsPlacement();\n    const closeMoreMenu = useCloseBarActionsMenu();\n    const closeFormats = () => {\n        setAnchorElement(null);\n        setAnchorPosition(null);\n    };\n\n    // no se espera a que termine: la descarga sigue en el panel y el diálogo de confirmación se cierra de inmediato\n    const runDownload = (format) => {\n        startDownload({\n            label: downloadLabel ?? label ?? ariaLabel ?? t('actions.download'),\n            format,\n            request: (transferOptions) => download(format, transferOptions),\n            onCompleted: () => onDownloaded?.(format),\n            onFailed: (error) => onFailed?.(format, error),\n            onCanceled: () => onCanceled?.(format),\n        });\n    };\n\n    const confirmedDownload = useConfirmAction({run: ({subject}) => runDownload(subject.format)});\n\n    const chooseFormat = (format) => {\n        closeFormats();\n        if (onChooseFormat) {\n            onChooseFormat(format);\n            return;\n        }\n        if (confirmation) {\n            confirmedDownload.open({format});\n            return;\n        }\n        // Regla de tablas: nada se descarga con un solo clic. Sin confirmation ni onChooseFormat es un error de quien\n        // llama, no un camino válido: lo decimos en la consola y no descargamos\n        console.error('DownloadMenu: falta confirmation u onChooseFormat; toda descarga pasa por un diálogo de confirmación');\n    };\n\n    const buttonLabel = label ?? t('actions.download');\n    const openMenu = (event) => setAnchorElement(event.currentTarget);\n    // desde el «⋯»: se cierra ese menú y los formatos salen donde estaba el renglón\n    const openFromMoreMenu = (event) => {\n        const {bottom, right} = event.currentTarget.getBoundingClientRect();\n        closeMoreMenu();\n        setAnchorPosition({top: bottom, left: right});\n    };\n    const isFormatsOpen = Boolean(anchorElement || anchorPosition);\n    const confirmationTexts = confirmedDownload.subject ? confirmation?.(confirmedDownload.subject.format) : null;\n\n    return (\n        <>\n            {placement === BAR_ACTIONS_PLACEMENT.menu && (\n                <MenuItem disabled={disabled} aria-haspopup=\"menu\" onClick={openFromMoreMenu}>\n                    <ListItemIcon><ButtonIcon /></ListItemIcon>\n                    <ListItemText>{buttonLabel}</ListItemText>\n                </MenuItem>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.capsule && (\n                // en la cápsula, del tamaño y color de las demás acciones (BarActionButton)\n                <Tooltip title={buttonLabel} describeChild>\n                    <span>\n                        <IconButton color=\"primary\" aria-label={buttonLabel} aria-haspopup=\"menu\" aria-expanded={isFormatsOpen}\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.inline && (variant === 'icon' ? (\n                // describeChild: el nombre accesible ya lo trae el botón; sin esto el Tooltip le pone el mismo aria-label al\n                // span y un lector de pantalla (o una prueba) encuentra dos \"botones\" con el mismo nombre\n                <Tooltip title={ariaLabel ?? buttonLabel} describeChild>\n                    {/* el span deja que el tooltip funcione con el botón inhabilitado */}\n                    <span>\n                        <IconButton size=\"small\" aria-label={ariaLabel ?? buttonLabel} aria-haspopup=\"menu\"\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon fontSize=\"small\" />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            ) : (\n                <DownloadButton variant=\"outlined\" startIcon={<ButtonIcon />} endIcon={<ArrowDropDownIcon />}\n                        ownSx={{flexShrink: 0}} disabled={disabled} aria-haspopup=\"menu\" onClick={openMenu}>\n                    {buttonLabel}\n                </DownloadButton>\n            ))}\n            <Menu open={isFormatsOpen} onClose={closeFormats}\n                  anchorReference={anchorPosition ? 'anchorPosition' : 'anchorEl'} anchorEl={anchorElement} anchorPosition={anchorPosition ?? undefined}\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                {formats.map((format) => {\n                    const fileType = fileTypes[format];\n                    const Icon = fileType?.Icon ?? FileDownloadOutlinedIcon;\n                    return (\n                        <MenuItem key={format} onClick={() => chooseFormat(format)}>\n                            <ListItemIcon><Icon fontSize=\"small\" /></ListItemIcon>\n                            {/* los de la casa con sus textos; los del proyecto con su label y hint (o esas llaves en sus texts) */}\n                            <ListItemText primary={t(`download.formats.${format}.label`, {defaultValue: fileType?.label ?? format.toUpperCase()})}\n                                          secondary={t(`download.formats.${format}.hint`, {defaultValue: fileType?.hint ?? ''})}\n                                          slotProps={{secondary: {variant: 'caption'}}} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n            {confirmation && (\n                <ConfirmDialog\n                    {...confirmedDownload.dialogProps}\n                    title={confirmationTexts?.title ?? ''}\n                    description={confirmationTexts?.description}\n                    confirmLabel={confirmationTexts?.confirmLabel ?? t('actions.download')}\n                />\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DownloadMenu.js","sources":["../../../src/ui/actions/DownloadMenu.jsx"],"sourcesContent":["// \"Descargar ▾\" con los formatos de un reporte: PDF para leer o archivar, Excel o CSV para trabajar.\n//\n// Un solo botón y no tres: en la barra de una pantalla tres botones de descarga compiten con la acción principal.\n// Se acomoda a donde quedó, como BarActionButton: en una cápsula de la barra (las `actions` de PageHeading con cápsulas)\n// es solo el ícono con su nombre en el tooltip, como las demás acciones; antes salía la píldora «Descargar ▾» dentro de\n// la cápsula y se veía una cápsula dentro de otra. En el «⋯» del teléfono es un renglón que abre los formatos.\n// Quien llama pasa QUÉ descargar por formato (download(format, transferOptions) → {blob, fileName}, la forma de\n// un cliente HTTP que descarga). La descarga va al panel de descargas (startDownload, downloads): el diálogo se cierra al\n// confirmar y el avance, el aviso de \"descargado\" y el error se ven allá, mientras la persona sigue trabajando.\n//\n// Regla de tablas: una descarga pasa por un diálogo de confirmación que dice qué se va a bajar (p. ej. que la base\n// completa de clientes tarda unos minutos). Con `confirmation` el formato elegido NO se descarga de inmediato: abre\n// ConfirmDialog (máquina confirmActionMachine) y solo al confirmar se pide el archivo, una sola vez aunque haya doble clic.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDownloadMenu con defaultProps y\n// styleOverrides de sus partes: button.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport IconButton from '@mui/material/IconButton';\nimport ListItemIcon from '@mui/material/ListItemIcon';\nimport ListItemText from '@mui/material/ListItemText';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Tooltip from '@mui/material/Tooltip';\nimport ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\n\nimport {BAR_ACTIONS_PLACEMENT, useBarActionsPlacement, useCloseBarActionsMenu} from '@/appShell/barActionsSlot.js';\nimport {startDownload} from '@/downloads/downloadQueue.js';\nimport {useFileTypes} from '@/downloads/fileTypes.js';\nimport ConfirmDialog from '@/feedback/ConfirmDialog.jsx';\nimport {useConfirmAction} from '@/feedback/useConfirmAction.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDownloadMenu)\nconst THEME_NAME = 'CalcitaDownloadMenu';\nconst DownloadButton = piecePart(THEME_NAME, 'Button', Button);\n\n\n/**\n * @param {object} props\n * @param {string[]} props.formats los tipos de archivo, en orden: los de la casa (xlsx, csv, pdf) y los que el proyecto declare\n *     en ToolkitProvider fileTypes (zip, xml…)\n * @param {(format: string, transferOptions: {signal: AbortSignal, onDownloadProgress: (progress: {loaded: number, total?: number|null}) => void}) => Promise<{blob: Blob, fileName: string}>} props.download\n * @param {string} [props.label] ya traducido; por defecto \"Descargar\"\n * @param {string} [props.downloadLabel] ya traducido; lo que se ve en el panel de descargas antes de saber el nombre\n *     del archivo\n * @param {boolean} [props.disabled]\n * @param {(format: string) => {title: string, description: import('react').ReactNode, confirmLabel?: string}} [props.confirmation]\n * @param {(format: string) => void} [props.onDownloaded] p. ej. volver a pedir la tabla (si la descarga cambia algo en\n *     el servidor)\n * @param {(format: string, error: unknown) => void} [props.onFailed] cuando la descarga no se pudo (el panel ya lo dice)\n * @param {(format: string) => void} [props.onCanceled] cuando la persona la canceló desde el panel\n * @param {'button'|'icon'} [props.variant] icon = solo el icono (columna de acciones de una tabla)\n * @param {string} [props.ariaLabel] ya traducido; obligatorio en la variante icon\n * @param {(format: string) => void} [props.onChooseFormat] quien llama se encarga de confirmar y descargar\n * @param {import('react').ElementType} [props.icon] ícono del botón; por defecto el de descarga. Distingue dos descargas en la\n *     misma fila\n *\n * IMPORTANTE: hay que pasar `confirmation` u `onChooseFormat`. Sin ninguno de los dos el menú no descarga nada (regla de\n * tablas: toda descarga pasa por confirmación).\n *\n * OJO onChooseFormat: dentro de una celda del DataGrid el diálogo de confirmación NO puede vivir en la celda (el grid\n * virtualiza y vuelve a pintar sus celdas; el diálogo se perdía al elegir el formato). Ahí el menú solo avisa qué formato\n * se eligió y la pantalla abre SU confirmación (useConfirmAction) fuera de la tabla.\n */\nexport default function DownloadMenu(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDownloadMenu.defaultProps) y encima lo que llega aquí\n    const {\n    formats, download, label, downloadLabel, disabled = false, confirmation, onDownloaded, onFailed, onCanceled, variant = 'button', ariaLabel,\n    onChooseFormat, icon: ButtonIcon = FileDownloadOutlinedIcon,\n    ...unknownProps\n} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common');\n    const fileTypes = useFileTypes();\n    // de dónde sale el menú de formatos: del botón, o (desde el «⋯» del teléfono, que se cierra) de donde estaba el renglón\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [anchorPosition, setAnchorPosition] = useState(null);\n    const placement = useBarActionsPlacement();\n    const closeMoreMenu = useCloseBarActionsMenu();\n    const closeFormats = () => {\n        setAnchorElement(null);\n        setAnchorPosition(null);\n    };\n\n    // no se espera a que termine: la descarga sigue en el panel y el diálogo de confirmación se cierra de inmediato\n    const runDownload = (format) => {\n        startDownload({\n            label: downloadLabel ?? label ?? ariaLabel ?? t('actions.download'),\n            format,\n            request: (transferOptions) => download(format, transferOptions),\n            onCompleted: () => onDownloaded?.(format),\n            onFailed: (error) => onFailed?.(format, error),\n            onCanceled: () => onCanceled?.(format),\n        });\n    };\n\n    const confirmedDownload = useConfirmAction({run: ({subject}) => runDownload(subject.format)});\n\n    const chooseFormat = (format) => {\n        closeFormats();\n        if (onChooseFormat) {\n            onChooseFormat(format);\n            return;\n        }\n        if (confirmation) {\n            confirmedDownload.open({format});\n            return;\n        }\n        // Regla de tablas: nada se descarga con un solo clic. Sin confirmation ni onChooseFormat es un error de quien\n        // llama, no un camino válido: lo decimos en la consola y no descargamos\n        console.error('DownloadMenu: falta confirmation u onChooseFormat; toda descarga pasa por un diálogo de confirmación');\n    };\n\n    const buttonLabel = label ?? t('actions.download');\n    const openMenu = (event) => setAnchorElement(event.currentTarget);\n    // desde el «⋯»: se cierra ese menú y los formatos salen donde estaba el renglón\n    const openFromMoreMenu = (event) => {\n        const {bottom, right} = event.currentTarget.getBoundingClientRect();\n        closeMoreMenu();\n        setAnchorPosition({top: bottom, left: right});\n    };\n    const isFormatsOpen = Boolean(anchorElement || anchorPosition);\n    const confirmationTexts = confirmedDownload.subject ? confirmation?.(confirmedDownload.subject.format) : null;\n\n    return (\n        <>\n            {placement === BAR_ACTIONS_PLACEMENT.menu && (\n                <MenuItem disabled={disabled} aria-haspopup=\"menu\" onClick={openFromMoreMenu}>\n                    <ListItemIcon><ButtonIcon /></ListItemIcon>\n                    <ListItemText>{buttonLabel}</ListItemText>\n                </MenuItem>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.capsule && (\n                // en la cápsula, del tamaño y color de las demás acciones (BarActionButton)\n                <Tooltip title={buttonLabel} describeChild>\n                    <span>\n                        <IconButton color=\"primary\" aria-label={buttonLabel} aria-haspopup=\"menu\" aria-expanded={isFormatsOpen}\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            )}\n            {placement === BAR_ACTIONS_PLACEMENT.inline && (variant === 'icon' ? (\n                // describeChild: el nombre accesible ya lo trae el botón; sin esto el Tooltip le pone el mismo aria-label al\n                // span y un lector de pantalla (o una prueba) encuentra dos \"botones\" con el mismo nombre\n                <Tooltip title={ariaLabel ?? buttonLabel} describeChild>\n                    {/* el span deja que el tooltip funcione con el botón inhabilitado */}\n                    <span>\n                        <IconButton size=\"small\" aria-label={ariaLabel ?? buttonLabel} aria-haspopup=\"menu\"\n                                    disabled={disabled} onClick={openMenu}>\n                            <ButtonIcon fontSize=\"small\" />\n                        </IconButton>\n                    </span>\n                </Tooltip>\n            ) : (\n                <DownloadButton variant=\"outlined\" startIcon={<ButtonIcon />} endIcon={<ArrowDropDownIcon />}\n                        ownSx={{flexShrink: 0}} disabled={disabled} aria-haspopup=\"menu\" onClick={openMenu}>\n                    {buttonLabel}\n                </DownloadButton>\n            ))}\n            <Menu open={isFormatsOpen} onClose={closeFormats}\n                  anchorReference={anchorPosition ? 'anchorPosition' : 'anchorEl'} anchorEl={anchorElement} anchorPosition={anchorPosition ?? undefined}\n                  anchorOrigin={{vertical: 'bottom', horizontal: 'right'}} transformOrigin={{vertical: 'top', horizontal: 'right'}}>\n                {formats.map((format) => {\n                    const fileType = fileTypes[format];\n                    const Icon = fileType?.Icon ?? FileDownloadOutlinedIcon;\n                    return (\n                        <MenuItem key={format} onClick={() => chooseFormat(format)}>\n                            <ListItemIcon><Icon fontSize=\"small\" /></ListItemIcon>\n                            {/* los de la casa con sus textos; los del proyecto con su label y hint (o esas llaves en sus texts) */}\n                            <ListItemText primary={t(`download.formats.${format}.label`, {defaultValue: fileType?.label ?? format.toUpperCase()})}\n                                          secondary={t(`download.formats.${format}.hint`, {defaultValue: fileType?.hint ?? ''})}\n                                          slotProps={{secondary: {variant: 'caption'}}} />\n                        </MenuItem>\n                    );\n                })}\n            </Menu>\n            {confirmation && (\n                <ConfirmDialog\n                    {...confirmedDownload.dialogProps}\n                    title={confirmationTexts?.title ?? ''}\n                    description={confirmationTexts?.description}\n                    confirmLabel={confirmationTexts?.confirmLabel ?? t('actions.download')}\n                />\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAuCA,MAAM,aAAa;AACnB,MAAM,iBAAiB,UAAU,YAAY,UAAU,MAAM;AA8B7D,SAAwB,aAAa,OAAO;AAExC,QAAM;AAAA,IACN;AAAA,IAAS;AAAA,IAAU;AAAA,IAAO;AAAA,IAAe,WAAW;AAAA,IAAO;AAAA,IAAc;AAAA,IAAc;AAAA,IAAU;AAAA,IAAY,UAAU;AAAA,IAAU;AAAA,IACjI;AAAA,IAAgB,MAAM,aAAa;AAAA,IACnC,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AAC/B,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,QAAQ;AAC1C,QAAM,YAAY,aAAA;AAElB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,IAAI;AACzD,QAAM,YAAY,uBAAA;AAClB,QAAM,gBAAgB,uBAAA;AACtB,QAAM,eAAe,MAAM;AACvB,qBAAiB,IAAI;AACrB,sBAAkB,IAAI;AAAA,EAC1B;AAGA,QAAM,cAAc,CAAC,WAAW;AAC5B,kBAAc;AAAA,MACV,OAAO,iBAAiB,SAAS,aAAa,EAAE,kBAAkB;AAAA,MAClE;AAAA,MACA,SAAS,CAAC,oBAAoB,SAAS,QAAQ,eAAe;AAAA,MAC9D,aAAa,MAAM,eAAe,MAAM;AAAA,MACxC,UAAU,CAAC,UAAU,WAAW,QAAQ,KAAK;AAAA,MAC7C,YAAY,MAAM,aAAa,MAAM;AAAA,IAAA,CACxC;AAAA,EACL;AAEA,QAAM,oBAAoB,iBAAiB,EAAC,KAAK,CAAC,EAAC,QAAA,MAAa,YAAY,QAAQ,MAAM,GAAE;AAE5F,QAAM,eAAe,CAAC,WAAW;AAC7B,iBAAA;AACA,QAAI,gBAAgB;AAChB,qBAAe,MAAM;AACrB;AAAA,IACJ;AACA,QAAI,cAAc;AACd,wBAAkB,KAAK,EAAC,QAAO;AAC/B;AAAA,IACJ;AAGA,YAAQ,MAAM,sGAAsG;AAAA,EACxH;AAEA,QAAM,cAAc,SAAS,EAAE,kBAAkB;AACjD,QAAM,WAAW,CAAC,UAAU,iBAAiB,MAAM,aAAa;AAEhE,QAAM,mBAAmB,CAAC,UAAU;AAChC,UAAM,EAAC,QAAQ,MAAA,IAAS,MAAM,cAAc,sBAAA;AAC5C,kBAAA;AACA,sBAAkB,EAAC,KAAK,QAAQ,MAAM,OAAM;AAAA,EAChD;AACA,QAAM,gBAAgB,QAAQ,iBAAiB,cAAc;AAC7D,QAAM,oBAAoB,kBAAkB,UAAU,eAAe,kBAAkB,QAAQ,MAAM,IAAI;AAEzG,SACI,qBAAA,UAAA,EACK,UAAA;AAAA,IAAA,cAAc,sBAAsB,QACjC,qBAAC,UAAA,EAAS,UAAoB,iBAAc,QAAO,SAAS,kBACxD,UAAA;AAAA,MAAA,oBAAC,cAAA,EAAa,UAAA,oBAAC,YAAA,CAAA,CAAW,GAAE;AAAA,MAC5B,oBAAC,gBAAc,UAAA,YAAA,CAAY;AAAA,IAAA,GAC/B;AAAA,IAEH,cAAc,sBAAsB;AAAA,wBAEhC,SAAA,EAAQ,OAAO,aAAa,eAAa,MACtC,8BAAC,QAAA,EACG,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAW,OAAM;AAAA,QAAU,cAAY;AAAA,QAAa,iBAAc;AAAA,QAAO,iBAAe;AAAA,QAC7E;AAAA,QAAoB,SAAS;AAAA,QACrC,8BAAC,YAAA,CAAA,CAAW;AAAA,MAAA;AAAA,IAAA,GAEpB,EAAA,CACJ;AAAA,IAEH,cAAc,sBAAsB,WAAW,YAAY;AAAA;AAAA;AAAA,MAGxD,oBAAC,WAAQ,OAAO,aAAa,aAAa,eAAa,MAEnD,8BAAC,QAAA,EACG,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAW,MAAK;AAAA,UAAQ,cAAY,aAAa;AAAA,UAAa,iBAAc;AAAA,UACjE;AAAA,UAAoB,SAAS;AAAA,UACrC,UAAA,oBAAC,YAAA,EAAW,UAAS,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA,GAErC,EAAA,CACJ;AAAA,QAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAe,SAAQ;AAAA,QAAW,+BAAY,YAAA,EAAW;AAAA,QAAI,6BAAU,mBAAA,EAAkB;AAAA,QAClF,OAAO,EAAC,YAAY,EAAA;AAAA,QAAI;AAAA,QAAoB,iBAAc;AAAA,QAAO,SAAS;AAAA,QAC7E,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT;AAAA,MAAC;AAAA,MAAA;AAAA,QAAK,MAAM;AAAA,QAAe,SAAS;AAAA,QAC9B,iBAAiB,iBAAiB,mBAAmB;AAAA,QAAY,UAAU;AAAA,QAAe,gBAAgB,kBAAkB;AAAA,QAC5H,cAAc,EAAC,UAAU,UAAU,YAAY,QAAA;AAAA,QAAU,iBAAiB,EAAC,UAAU,OAAO,YAAY,QAAA;AAAA,QACzG,UAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,gBAAM,WAAW,UAAU,MAAM;AACjC,gBAAM,OAAO,UAAU,QAAQ;AAC/B,sCACK,UAAA,EAAsB,SAAS,MAAM,aAAa,MAAM,GACrD,UAAA;AAAA,YAAA,oBAAC,cAAA,EAAa,UAAA,oBAAC,MAAA,EAAK,UAAS,SAAQ,GAAE;AAAA,YAEvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBAAa,SAAS,EAAE,oBAAoB,MAAM,UAAU,EAAC,cAAc,UAAU,SAAS,OAAO,YAAA,EAAY,CAAE;AAAA,gBACtG,WAAW,EAAE,oBAAoB,MAAM,SAAS,EAAC,cAAc,UAAU,QAAQ,GAAA,CAAG;AAAA,gBACpF,WAAW,EAAC,WAAW,EAAC,SAAS,YAAS;AAAA,cAAC;AAAA,YAAA;AAAA,UAAG,EAAA,GALjD,MAMf;AAAA,QAER,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEJ,gBACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG,kBAAkB;AAAA,QACtB,OAAO,mBAAmB,SAAS;AAAA,QACnC,aAAa,mBAAmB;AAAA,QAChC,cAAc,mBAAmB,gBAAgB,EAAE,kBAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,EACzE,GAER;AAER;"}

package/dist/ui/actions/SecretField.js

@@ -11,9 +11,11 @@ import CopyIcon from "@mui/icons-material/ContentCopyOutlined";
 import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import FieldFrame from "../../inputs/FieldFrame.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const COPIED_FEEDBACK_MILLISECONDS = 2e3;
 const MONOSPACE_FONT = "ui-monospace, SFMono-Regular, Menlo, monospace";
-function SecretField({ value, label, helperText = " ", onCopied, onRevealChange, texts }) {
+function SecretField({ value, label, helperText = " ", onCopied, onRevealChange, texts, ...unknownProps }) {
+  warnUnknownProps("SecretField", unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const generatedId = useId();
   const inputId = `secret-${generatedId}`;

package/dist/ui/actions/SecretField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecretField.js","sources":["../../../src/ui/actions/SecretField.jsx"],"sourcesContent":["// Un secreto que se enseña UNA vez (una clave de acceso, un token recién creado): tapado por omisión, con el ojo para verlo\n// y el botón para copiarlo.\n//\n// Tapado porque la pantalla se comparte, se graba o la ve quien pasa por atrás; el botón de copiar evita seleccionarlo a\n// mano y dejar un carácter afuera. Si el navegador no deja copiar, se destapa para copiarlo a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\n\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\nconst MONOSPACE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * @param {object} props\n * @param {string} props.value el secreto\n * @param {string} props.label ya traducido\n * @param {string} [props.helperText] p. ej. «Guárdela: no se vuelve a enseñar»\n * @param {() => void} [props.onCopied]\n * @param {(isRevealed: boolean) => void} [props.onRevealChange] se destapó o se tapó (para registrar quién vio el secreto)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function SecretField({value, label, helperText = ' ', onCopied, onRevealChange, texts}) {\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `secret-${generatedId}`;\n    const [isRevealed, setIsRevealedState] = useState(false);\n    const setIsRevealed = (nextIsRevealed) => {\n        setIsRevealedState(nextIsRevealed);\n        onRevealChange?.(nextIsRevealed);\n    };\n    const [isCopied, setIsCopied] = useState(false);\n    const revealLabel = isRevealed ? t('form.hidePassword') : t('form.showPassword');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: se destapa para copiarlo a mano\n            setIsRevealed(true);\n        }\n    };\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                id={inputId}\n                fullWidth\n                size=\"small\"\n                value={value}\n                helperText={helperText}\n                type={isRevealed ? 'text' : 'password'}\n                slotProps={{\n                    htmlInput: {readOnly: true, spellCheck: false, autoComplete: 'off', style: {fontFamily: MONOSPACE_FONT}},\n                    input: {\n                        endAdornment: (\n                            <InputAdornment position=\"end\">\n                                <Tooltip title={revealLabel}>\n                                    <IconButton size=\"small\" aria-label={revealLabel} onClick={() => setIsRevealed(!isRevealed)}>\n                                        {isRevealed ? <VisibilityOffOutlinedIcon fontSize=\"small\" /> : <VisibilityOutlinedIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                                <Tooltip title={isCopied ? t('form.copied') : t('form.copy')}>\n                                    <IconButton size=\"small\" aria-label={t('form.copy')} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                                        {isCopied ? <CheckIcon fontSize=\"small\" /> : <CopyIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                            </InputAdornment>\n                        ),\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,+BAA+B;AACrC,MAAM,iBAAiB;AAWvB,SAAwB,YAAY,EAAC,OAAO,OAAO,aAAa,KAAK,UAAU,gBAAgB,SAAQ;AACnG,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,UAAU,WAAW;AACrC,QAAM,CAAC,YAAY,kBAAkB,IAAI,SAAS,KAAK;AACvD,QAAM,gBAAgB,CAAC,mBAAmB;AACtC,uBAAmB,cAAc;AACjC,qBAAiB,cAAc;AAAA,EACnC;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,aAAa,EAAE,mBAAmB,IAAI,EAAE,mBAAmB;AAE/E,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAEJ,oBAAc,IAAI;AAAA,IACtB;AAAA,EACJ;AAEA,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,aAAa,SAAS;AAAA,MAC5B,WAAW;AAAA,QACP,WAAW,EAAC,UAAU,MAAM,YAAY,OAAO,cAAc,OAAO,OAAO,EAAC,YAAY,eAAA,EAAc;AAAA,QACtG,OAAO;AAAA,UACH,cACI,qBAAC,gBAAA,EAAe,UAAS,OACrB,UAAA;AAAA,YAAA,oBAAC,SAAA,EAAQ,OAAO,aACZ,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,aAAa,SAAS,MAAM,cAAc,CAAC,UAAU,GACrF,UAAA,aAAa,oBAAC,2BAAA,EAA0B,UAAS,QAAA,CAAQ,IAAK,oBAAC,wBAAA,EAAuB,UAAS,QAAA,CAAQ,EAAA,CAC5G,GACJ;AAAA,YACA,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,EAAE,WAAW,GACvD,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,WAAW,GAAG,SAAS,MAAM,OAAO,WAAW,YAAY,WAC7F,qBAAW,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ,IAAK,oBAAC,UAAA,EAAS,UAAS,QAAA,CAAQ,GAC5E,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ;AAAA,QAAA;AAAA,MAER;AAAA,IACJ;AAAA,EAAA,GAER;AAER;"}
+{"version":3,"file":"SecretField.js","sources":["../../../src/ui/actions/SecretField.jsx"],"sourcesContent":["// Un secreto que se enseña UNA vez (una clave de acceso, un token recién creado): tapado por omisión, con el ojo para verlo\n// y el botón para copiarlo.\n//\n// Tapado porque la pantalla se comparte, se graba o la ve quien pasa por atrás; el botón de copiar evita seleccionarlo a\n// mano y dejar un carácter afuera. Si el navegador no deja copiar, se destapa para copiarlo a mano.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useId, useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport IconButton from '@mui/material/IconButton';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport TextField from '@mui/material/TextField';\nimport Tooltip from '@mui/material/Tooltip';\nimport CheckIcon from '@mui/icons-material/CheckRounded';\nimport CopyIcon from '@mui/icons-material/ContentCopyOutlined';\nimport VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';\nimport VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';\n\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\nconst COPIED_FEEDBACK_MILLISECONDS = 2000;\nconst MONOSPACE_FONT = 'ui-monospace, SFMono-Regular, Menlo, monospace';\n\n/**\n * @param {object} props\n * @param {string} props.value el secreto\n * @param {string} props.label ya traducido\n * @param {string} [props.helperText] p. ej. «Guárdela: no se vuelve a enseñar»\n * @param {() => void} [props.onCopied]\n * @param {(isRevealed: boolean) => void} [props.onRevealChange] se destapó o se tapó (para registrar quién vio el secreto)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nexport default function SecretField({value, label, helperText = ' ', onCopied, onRevealChange, texts, ...unknownProps}) {\n    warnUnknownProps('SecretField', unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const generatedId = useId();\n    const inputId = `secret-${generatedId}`;\n    const [isRevealed, setIsRevealedState] = useState(false);\n    const setIsRevealed = (nextIsRevealed) => {\n        setIsRevealedState(nextIsRevealed);\n        onRevealChange?.(nextIsRevealed);\n    };\n    const [isCopied, setIsCopied] = useState(false);\n    const revealLabel = isRevealed ? t('form.hidePassword') : t('form.showPassword');\n\n    const copy = async () => {\n        try {\n            await navigator.clipboard.writeText(value);\n            setIsCopied(true);\n            onCopied?.();\n            setTimeout(() => setIsCopied(false), COPIED_FEEDBACK_MILLISECONDS);\n        } catch {\n            // sin permiso de portapapeles: se destapa para copiarlo a mano\n            setIsRevealed(true);\n        }\n    };\n\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <TextField\n                id={inputId}\n                fullWidth\n                size=\"small\"\n                value={value}\n                helperText={helperText}\n                type={isRevealed ? 'text' : 'password'}\n                slotProps={{\n                    htmlInput: {readOnly: true, spellCheck: false, autoComplete: 'off', style: {fontFamily: MONOSPACE_FONT}},\n                    input: {\n                        endAdornment: (\n                            <InputAdornment position=\"end\">\n                                <Tooltip title={revealLabel}>\n                                    <IconButton size=\"small\" aria-label={revealLabel} onClick={() => setIsRevealed(!isRevealed)}>\n                                        {isRevealed ? <VisibilityOffOutlinedIcon fontSize=\"small\" /> : <VisibilityOutlinedIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                                <Tooltip title={isCopied ? t('form.copied') : t('form.copy')}>\n                                    <IconButton size=\"small\" aria-label={t('form.copy')} onClick={copy} color={isCopied ? 'success' : 'default'}>\n                                        {isCopied ? <CheckIcon fontSize=\"small\" /> : <CopyIcon fontSize=\"small\" />}\n                                    </IconButton>\n                                </Tooltip>\n                            </InputAdornment>\n                        ),\n                    },\n                }}\n            />\n        </FieldFrame>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,+BAA+B;AACrC,MAAM,iBAAiB;AAWvB,SAAwB,YAAY,EAAC,OAAO,OAAO,aAAa,KAAK,UAAU,gBAAgB,OAAO,GAAG,gBAAe;AACpH,mBAAiB,eAAe,YAAY;AAC5C,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,UAAU,WAAW;AACrC,QAAM,CAAC,YAAY,kBAAkB,IAAI,SAAS,KAAK;AACvD,QAAM,gBAAgB,CAAC,mBAAmB;AACtC,uBAAmB,cAAc;AACjC,qBAAiB,cAAc;AAAA,EACnC;AACA,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,cAAc,aAAa,EAAE,mBAAmB,IAAI,EAAE,mBAAmB;AAE/E,QAAM,OAAO,YAAY;AACrB,QAAI;AACA,YAAM,UAAU,UAAU,UAAU,KAAK;AACzC,kBAAY,IAAI;AAChB,iBAAA;AACA,iBAAW,MAAM,YAAY,KAAK,GAAG,4BAA4B;AAAA,IACrE,QAAQ;AAEJ,oBAAc,IAAI;AAAA,IACtB;AAAA,EACJ;AAEA,SACI,oBAAC,YAAA,EAAW,SAAkB,OAC1B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAI;AAAA,MACJ,WAAS;AAAA,MACT,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,MAAM,aAAa,SAAS;AAAA,MAC5B,WAAW;AAAA,QACP,WAAW,EAAC,UAAU,MAAM,YAAY,OAAO,cAAc,OAAO,OAAO,EAAC,YAAY,eAAA,EAAc;AAAA,QACtG,OAAO;AAAA,UACH,cACI,qBAAC,gBAAA,EAAe,UAAS,OACrB,UAAA;AAAA,YAAA,oBAAC,SAAA,EAAQ,OAAO,aACZ,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,aAAa,SAAS,MAAM,cAAc,CAAC,UAAU,GACrF,UAAA,aAAa,oBAAC,2BAAA,EAA0B,UAAS,QAAA,CAAQ,IAAK,oBAAC,wBAAA,EAAuB,UAAS,QAAA,CAAQ,EAAA,CAC5G,GACJ;AAAA,YACA,oBAAC,SAAA,EAAQ,OAAO,WAAW,EAAE,aAAa,IAAI,EAAE,WAAW,GACvD,UAAA,oBAAC,YAAA,EAAW,MAAK,SAAQ,cAAY,EAAE,WAAW,GAAG,SAAS,MAAM,OAAO,WAAW,YAAY,WAC7F,qBAAW,oBAAC,WAAA,EAAU,UAAS,QAAA,CAAQ,IAAK,oBAAC,UAAA,EAAS,UAAS,QAAA,CAAQ,GAC5E,EAAA,CACJ;AAAA,UAAA,EAAA,CACJ;AAAA,QAAA;AAAA,MAER;AAAA,IACJ;AAAA,EAAA,GAER;AAER;"}

package/dist/ui/actions/SelectionActions.js

@@ -19,6 +19,7 @@ import { minimalFloatingStylesOf } from "../../theme/components/minimalComponent
 import { isGlassTheme, glassStylesOf } from "../../theme/glassSurface.js";
 import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaSelectionActions";
 const SelectionBar = piecePart(THEME_NAME, "Bar", Stack);
 const SelectionCount = piecePart(THEME_NAME, "Count", Typography);
@@ -49,7 +50,8 @@ function bottomCapsuleSxOf(theme) {
   };
 }
 function SelectionActions(props) {
-  const { countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx } = usePieceProps(props, THEME_NAME);
+  const { countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const theme = useTheme();
   const { t } = useToolkitTranslation("common", texts);
   const [runningActionKey, setRunningActionKey] = useState(null);

package/dist/ui/actions/SelectionActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionActions.js","sources":["../../../src/ui/actions/SelectionActions.jsx"],"sourcesContent":["// Las acciones de lo elegido en una lista («5 pedidos elegidos · Cancelar · Borrar · Quitar selección»), en el lugar que le\n// toca según el equipo. Una sola pieza para que cada lista con casillas (la tabla de servidor, una propia) no repita dónde\n// va cada cosa:\n//   - escritorio, y el teléfono sin barra de pestañas abajo (el tema de MUI sin vidrio): un renglón donde se pone la pieza,\n//     cada acción como botón con su texto;\n//   - teléfono con vidrio, o minimalista con cápsulas (usesMobileTabBar), según phoneLayout (SELECTION_PHONE_LAYOUT):\n//       top (por omisión): arriba, en la barra flotante, «5 elegidos ✕» y las acciones como íconos en su propia cápsula,\n//         como Apple separa los grupos; las que no caben, al «⋯» (BarActions);\n//       en los dos, mientras hay algo elegido, el renglón de arriba queda solo para lo elegido (BarActions exclusive): las\n//         demás cápsulas de la pantalla y la lupa se esconden, como el modo de edición del iPhone;\n//       split: como iOS en modo de edición (Fotos, Mail, Archivos): arriba «5 elegidos ✕» y abajo, encima de las pestañas,\n//         una cápsula fija con las acciones, donde llega el pulgar. Mientras se ve, pide su alto al marco\n//         (FLOATING_BOTTOM_SPACE_CSS_VARIABLE) para no tapar el final de la página.\n// Lo pidió el autor: en el teléfono, configurable, y por omisión todo arriba.\n//\n// Con vidrio, la cápsula de arriba deja sus botones del color del texto (BarCapsule: la regla de la barra); abajo, una acción\n// destructiva (color: 'error') conserva su rojo, como pide la guía de Apple para lo que borra.\n//\n// Cada acción puede regresar una promesa: mientras corre, las demás se apagan (nadie cancela dos veces lo mismo).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSelectionActions con defaultProps y\n// styleOverrides de sus partes: bar, count, clear, phoneCount, phoneActions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport BarActionButton from '@/appShell/BarActionButton.jsx';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport BarCapsule from '@/appShell/BarCapsule.jsx';\nimport {\n    FLOATING_BOTTOM_SPACE_CSS_VARIABLE, GLASS_PANEL_GAP_PIXELS, PHONE_MEDIA_QUERY, aboveMobileTabBarOf,\n} from '@/appShell/shellSizes.js';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport {minimalFloatingStylesOf} from '@/theme/components/minimalComponents.js';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSelectionActions)\nconst THEME_NAME = 'CalcitaSelectionActions';\nconst SelectionBar = piecePart(THEME_NAME, 'Bar', Stack);\nconst SelectionCount = piecePart(THEME_NAME, 'Count', Typography);\nconst SelectionClear = piecePart(THEME_NAME, 'Clear', Button);\nconst SelectionPhoneCount = piecePart(THEME_NAME, 'PhoneCount', Typography);\nconst SelectionPhoneActions = piecePart(THEME_NAME, 'PhoneActions', Box);\n\n/** Dónde van las acciones de lo elegido en el teléfono con barra de pestañas abajo: todo arriba o divididas (iOS). */\nexport const SELECTION_PHONE_LAYOUT = Object.freeze({top: 'top', split: 'split'});\n\n// lo que se separa la cápsula de abajo de la barra de pestañas (px), lo mismo que el aviso de versión nueva\nconst FLOATING_GAP_PIXELS = 8;\n// lo que pide al marco mientras flota abajo: su alto (48) y su separación, con aire\nconst FLOATING_BOTTOM_SPACE_PIXELS = 64;\n// lo que solo se ve en el teléfono\nconst PHONE_ONLY_SX = {display: 'none', [PHONE_MEDIA_QUERY]: {display: 'flex'}};\n\n/**\n * ¿En el teléfono lo elegido sale de su renglón (arriba o abajo)? La misma regla que la barra de pestañas de abajo: con ella,\n * el renglón de la pantalla se queda con lo suyo (el conteo de la tabla) y las acciones flotan.\n *\n * @param {object} theme\n * @returns {boolean}\n */\nexport function selectionFloatsOnPhone(theme) {\n    return usesMobileTabBar(theme);\n}\n\n/**\n * La cápsula fija abajo, centrada en la ventana, encima de la barra de pestañas.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction bottomCapsuleSxOf(theme) {\n    return {\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : minimalFloatingStylesOf(theme)),\n        position: 'fixed',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: theme.zIndex.appBar,\n        alignItems: 'center',\n        gap: 0.5,\n        width: 'max-content',\n        maxWidth: `calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px)`,\n        borderRadius: '999px',\n        p: 0.5,\n        ...aboveMobileTabBarOf(FLOATING_GAP_PIXELS),\n    };\n}\n\n/**\n * @param {object} props\n * @param {string} props.countText «5 pedidos elegidos», ya traducido. La pieza se pinta mientras la pantalla la ponga: con\n *     nada elegido, no la ponga\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: 'inherit'|'primary'|'secondary'|'error'|'info'|'success'|'warning', disabled?: boolean, onClick: () => unknown}>} [props.actions]\n *     label ya traducido; en el teléfono se ve el ícono (sin él, el texto). onClick puede regresar una promesa\n * @param {() => void} props.onClear quitar la selección\n * @param {'top'|'split'} [props.phoneLayout] SELECTION_PHONE_LAYOUT; por omisión todo arriba\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}\n * @param {object} [props.sx] estilos del renglón\n */\nexport default function SelectionActions(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSelectionActions.defaultProps) y encima lo que llega aquí\n    const {countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx} = usePieceProps(props, THEME_NAME);\n    const theme = useTheme();\n    const {t} = useToolkitTranslation('common', texts);\n    const [runningActionKey, setRunningActionKey] = useState(null);\n    const floatsOnPhone = selectionFloatsOnPhone(theme);\n    const extraSx = Array.isArray(sx) ? sx : [sx];\n\n    const runAction = async (action) => {\n        setRunningActionKey(action.key);\n        try {\n            await action.onClick();\n        } finally {\n            setRunningActionKey(null);\n        }\n    };\n    const isDisabledOf = (action) => runningActionKey !== null || Boolean(action.disabled);\n\n    const clearButton = (\n        <Tooltip title={t('selection.clear')}>\n            <IconButton aria-label={t('selection.clear')} onClick={onClear}>\n                <CloseRoundedIcon />\n            </IconButton>\n        </Tooltip>\n    );\n\n    // el renglón: escritorio siempre; en el teléfono, solo si ahí no flota\n    const row = (\n        <SelectionBar role=\"toolbar\" aria-label={t('selection.actionsLabel')} direction=\"row\" spacing={1} useFlexGap\n               ownSx={[{flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', minHeight: 32},\n                   floatsOnPhone && {[PHONE_MEDIA_QUERY]: {display: 'none'}}, ...extraSx]}>\n            <SelectionCount variant=\"body2\" ownSx={{fontWeight: 600, mr: 1}}>{countText}</SelectionCount>\n            {actions.map((action) => (\n                <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} startIcon={action.icon}\n                        disabled={isDisabledOf(action)} onClick={() => runAction(action)}>\n                    {action.label}\n                </Button>\n            ))}\n            <SelectionClear size=\"small\" color=\"inherit\" startIcon={<CloseRoundedIcon />} onClick={onClear} ownSx={{ml: 'auto'}}>\n                {t('selection.clear')}\n            </SelectionClear>\n        </SelectionBar>\n    );\n\n    if (!floatsOnPhone) {\n        return row;\n    }\n\n    const showsBottomCapsule = phoneLayout === SELECTION_PHONE_LAYOUT.split && actions.length > 0;\n\n    return (\n        <>\n            {row}\n            {/* arriba: con las demás cápsulas flotantes de la pantalla (BarActions), antes que ellas. Sin label en BarActions:\n                el nombre ya lo lleva la cápsula (dos grupos anidados con el mismo nombre se leen dos veces) */}\n            <BarActions bare exclusive order={-2} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                <BarCapsule aria-label={t('selection.summaryLabel')} sx={{pl: 2}}>\n                    <SelectionPhoneCount variant=\"body2\" role=\"status\" aria-live=\"polite\" ownSx={{fontWeight: 600, whiteSpace: 'nowrap', mr: 0.5}}>\n                        {countText}\n                    </SelectionPhoneCount>\n                    {clearButton}\n                </BarCapsule>\n            </BarActions>\n            {phoneLayout === SELECTION_PHONE_LAYOUT.top && actions.length > 0 && (\n                <BarActions label={t('selection.actionsLabel')} exclusive order={-1} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                    {actions.map((action) => (\n                        <BarActionButton key={action.key} label={action.label} icon={action.icon} color={action.color}\n                                         disabled={isDisabledOf(action)} onClick={() => runAction(action)} />\n                    ))}\n                </BarActions>\n            )}\n            {showsBottomCapsule && (\n                <>\n                    <GlobalStyles styles={{':root': {[FLOATING_BOTTOM_SPACE_CSS_VARIABLE]: `${FLOATING_BOTTOM_SPACE_PIXELS}px`}}} />\n                    <SelectionPhoneActions role=\"toolbar\" aria-label={t('selection.actionsLabel')} ownSx={[bottomCapsuleSxOf, PHONE_ONLY_SX]}>\n                        {actions.map((action) => (action.icon ? (\n                            <Tooltip key={action.key} title={action.label}>\n                                {/* el span deja ver el tooltip aunque el botón esté apagado */}\n                                <span>\n                                    <IconButton aria-label={action.label} color={action.color ?? 'default'} disabled={isDisabledOf(action)}\n                                                onClick={() => runAction(action)}>\n                                        {action.icon}\n                                    </IconButton>\n                                </span>\n                            </Tooltip>\n                        ) : (\n                            <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} disabled={isDisabledOf(action)}\n                                    onClick={() => runAction(action)}>\n                                {action.label}\n                            </Button>\n                        )))}\n                    </SelectionPhoneActions>\n                </>\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectionActions.js","sources":["../../../src/ui/actions/SelectionActions.jsx"],"sourcesContent":["// Las acciones de lo elegido en una lista («5 pedidos elegidos · Cancelar · Borrar · Quitar selección»), en el lugar que le\n// toca según el equipo. Una sola pieza para que cada lista con casillas (la tabla de servidor, una propia) no repita dónde\n// va cada cosa:\n//   - escritorio, y el teléfono sin barra de pestañas abajo (el tema de MUI sin vidrio): un renglón donde se pone la pieza,\n//     cada acción como botón con su texto;\n//   - teléfono con vidrio, o minimalista con cápsulas (usesMobileTabBar), según phoneLayout (SELECTION_PHONE_LAYOUT):\n//       top (por omisión): arriba, en la barra flotante, «5 elegidos ✕» y las acciones como íconos en su propia cápsula,\n//         como Apple separa los grupos; las que no caben, al «⋯» (BarActions);\n//       en los dos, mientras hay algo elegido, el renglón de arriba queda solo para lo elegido (BarActions exclusive): las\n//         demás cápsulas de la pantalla y la lupa se esconden, como el modo de edición del iPhone;\n//       split: como iOS en modo de edición (Fotos, Mail, Archivos): arriba «5 elegidos ✕» y abajo, encima de las pestañas,\n//         una cápsula fija con las acciones, donde llega el pulgar. Mientras se ve, pide su alto al marco\n//         (FLOATING_BOTTOM_SPACE_CSS_VARIABLE) para no tapar el final de la página.\n// Lo pidió el autor: en el teléfono, configurable, y por omisión todo arriba.\n//\n// Con vidrio, la cápsula de arriba deja sus botones del color del texto (BarCapsule: la regla de la barra); abajo, una acción\n// destructiva (color: 'error') conserva su rojo, como pide la guía de Apple para lo que borra.\n//\n// Cada acción puede regresar una promesa: mientras corre, las demás se apagan (nadie cancela dos veces lo mismo).\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaSelectionActions con defaultProps y\n// styleOverrides de sus partes: bar, count, clear, phoneCount, phoneActions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport GlobalStyles from '@mui/material/GlobalStyles';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Tooltip from '@mui/material/Tooltip';\nimport Typography from '@mui/material/Typography';\nimport {useTheme} from '@mui/material/styles';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport BarActionButton from '@/appShell/BarActionButton.jsx';\nimport BarActions from '@/appShell/BarActions.jsx';\nimport BarCapsule from '@/appShell/BarCapsule.jsx';\nimport {\n    FLOATING_BOTTOM_SPACE_CSS_VARIABLE, GLASS_PANEL_GAP_PIXELS, PHONE_MEDIA_QUERY, aboveMobileTabBarOf,\n} from '@/appShell/shellSizes.js';\nimport {usesMobileTabBar} from '@/appShell/tabBarRule.js';\nimport {minimalFloatingStylesOf} from '@/theme/components/minimalComponents.js';\nimport {glassStylesOf, isGlassTheme} from '@/theme/glassSurface.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaSelectionActions)\nconst THEME_NAME = 'CalcitaSelectionActions';\nconst SelectionBar = piecePart(THEME_NAME, 'Bar', Stack);\nconst SelectionCount = piecePart(THEME_NAME, 'Count', Typography);\nconst SelectionClear = piecePart(THEME_NAME, 'Clear', Button);\nconst SelectionPhoneCount = piecePart(THEME_NAME, 'PhoneCount', Typography);\nconst SelectionPhoneActions = piecePart(THEME_NAME, 'PhoneActions', Box);\n\n/** Dónde van las acciones de lo elegido en el teléfono con barra de pestañas abajo: todo arriba o divididas (iOS). */\nexport const SELECTION_PHONE_LAYOUT = Object.freeze({top: 'top', split: 'split'});\n\n// lo que se separa la cápsula de abajo de la barra de pestañas (px), lo mismo que el aviso de versión nueva\nconst FLOATING_GAP_PIXELS = 8;\n// lo que pide al marco mientras flota abajo: su alto (48) y su separación, con aire\nconst FLOATING_BOTTOM_SPACE_PIXELS = 64;\n// lo que solo se ve en el teléfono\nconst PHONE_ONLY_SX = {display: 'none', [PHONE_MEDIA_QUERY]: {display: 'flex'}};\n\n/**\n * ¿En el teléfono lo elegido sale de su renglón (arriba o abajo)? La misma regla que la barra de pestañas de abajo: con ella,\n * el renglón de la pantalla se queda con lo suyo (el conteo de la tabla) y las acciones flotan.\n *\n * @param {object} theme\n * @returns {boolean}\n */\nexport function selectionFloatsOnPhone(theme) {\n    return usesMobileTabBar(theme);\n}\n\n/**\n * La cápsula fija abajo, centrada en la ventana, encima de la barra de pestañas.\n *\n * @param {object} theme\n * @returns {object}\n */\nfunction bottomCapsuleSxOf(theme) {\n    return {\n        ...(isGlassTheme(theme) ? glassStylesOf(theme) : minimalFloatingStylesOf(theme)),\n        position: 'fixed',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        zIndex: theme.zIndex.appBar,\n        alignItems: 'center',\n        gap: 0.5,\n        width: 'max-content',\n        maxWidth: `calc(100% - ${GLASS_PANEL_GAP_PIXELS * 2}px)`,\n        borderRadius: '999px',\n        p: 0.5,\n        ...aboveMobileTabBarOf(FLOATING_GAP_PIXELS),\n    };\n}\n\n/**\n * @param {object} props\n * @param {string} props.countText «5 pedidos elegidos», ya traducido. La pieza se pinta mientras la pantalla la ponga: con\n *     nada elegido, no la ponga\n * @param {Array<{key: string, label: string, icon?: import('react').ReactNode, color?: 'inherit'|'primary'|'secondary'|'error'|'info'|'success'|'warning', disabled?: boolean, onClick: () => unknown}>} [props.actions]\n *     label ya traducido; en el teléfono se ve el ícono (sin él, el texto). onClick puede regresar una promesa\n * @param {() => void} props.onClear quitar la selección\n * @param {'top'|'split'} [props.phoneLayout] SELECTION_PHONE_LAYOUT; por omisión todo arriba\n * @param {object} [props.texts] los textos que cambian, con la forma de `common`: {selection: {clear, actionsLabel, summaryLabel}}\n * @param {object} [props.sx] estilos del renglón\n */\nexport default function SelectionActions(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaSelectionActions.defaultProps) y encima lo que llega aquí\n    const {countText, actions = [], onClear, phoneLayout = SELECTION_PHONE_LAYOUT.top, texts, sx, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const theme = useTheme();\n    const {t} = useToolkitTranslation('common', texts);\n    const [runningActionKey, setRunningActionKey] = useState(null);\n    const floatsOnPhone = selectionFloatsOnPhone(theme);\n    const extraSx = Array.isArray(sx) ? sx : [sx];\n\n    const runAction = async (action) => {\n        setRunningActionKey(action.key);\n        try {\n            await action.onClick();\n        } finally {\n            setRunningActionKey(null);\n        }\n    };\n    const isDisabledOf = (action) => runningActionKey !== null || Boolean(action.disabled);\n\n    const clearButton = (\n        <Tooltip title={t('selection.clear')}>\n            <IconButton aria-label={t('selection.clear')} onClick={onClear}>\n                <CloseRoundedIcon />\n            </IconButton>\n        </Tooltip>\n    );\n\n    // el renglón: escritorio siempre; en el teléfono, solo si ahí no flota\n    const row = (\n        <SelectionBar role=\"toolbar\" aria-label={t('selection.actionsLabel')} direction=\"row\" spacing={1} useFlexGap\n               ownSx={[{flexGrow: 1, alignItems: 'center', flexWrap: 'wrap', minHeight: 32},\n                   floatsOnPhone && {[PHONE_MEDIA_QUERY]: {display: 'none'}}, ...extraSx]}>\n            <SelectionCount variant=\"body2\" ownSx={{fontWeight: 600, mr: 1}}>{countText}</SelectionCount>\n            {actions.map((action) => (\n                <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} startIcon={action.icon}\n                        disabled={isDisabledOf(action)} onClick={() => runAction(action)}>\n                    {action.label}\n                </Button>\n            ))}\n            <SelectionClear size=\"small\" color=\"inherit\" startIcon={<CloseRoundedIcon />} onClick={onClear} ownSx={{ml: 'auto'}}>\n                {t('selection.clear')}\n            </SelectionClear>\n        </SelectionBar>\n    );\n\n    if (!floatsOnPhone) {\n        return row;\n    }\n\n    const showsBottomCapsule = phoneLayout === SELECTION_PHONE_LAYOUT.split && actions.length > 0;\n\n    return (\n        <>\n            {row}\n            {/* arriba: con las demás cápsulas flotantes de la pantalla (BarActions), antes que ellas. Sin label en BarActions:\n                el nombre ya lo lleva la cápsula (dos grupos anidados con el mismo nombre se leen dos veces) */}\n            <BarActions bare exclusive order={-2} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                <BarCapsule aria-label={t('selection.summaryLabel')} sx={{pl: 2}}>\n                    <SelectionPhoneCount variant=\"body2\" role=\"status\" aria-live=\"polite\" ownSx={{fontWeight: 600, whiteSpace: 'nowrap', mr: 0.5}}>\n                        {countText}\n                    </SelectionPhoneCount>\n                    {clearButton}\n                </BarCapsule>\n            </BarActions>\n            {phoneLayout === SELECTION_PHONE_LAYOUT.top && actions.length > 0 && (\n                <BarActions label={t('selection.actionsLabel')} exclusive order={-1} sx={PHONE_ONLY_SX} inlineSx={PHONE_ONLY_SX}>\n                    {actions.map((action) => (\n                        <BarActionButton key={action.key} label={action.label} icon={action.icon} color={action.color}\n                                         disabled={isDisabledOf(action)} onClick={() => runAction(action)} />\n                    ))}\n                </BarActions>\n            )}\n            {showsBottomCapsule && (\n                <>\n                    <GlobalStyles styles={{':root': {[FLOATING_BOTTOM_SPACE_CSS_VARIABLE]: `${FLOATING_BOTTOM_SPACE_PIXELS}px`}}} />\n                    <SelectionPhoneActions role=\"toolbar\" aria-label={t('selection.actionsLabel')} ownSx={[bottomCapsuleSxOf, PHONE_ONLY_SX]}>\n                        {actions.map((action) => (action.icon ? (\n                            <Tooltip key={action.key} title={action.label}>\n                                {/* el span deja ver el tooltip aunque el botón esté apagado */}\n                                <span>\n                                    <IconButton aria-label={action.label} color={action.color ?? 'default'} disabled={isDisabledOf(action)}\n                                                onClick={() => runAction(action)}>\n                                        {action.icon}\n                                    </IconButton>\n                                </span>\n                            </Tooltip>\n                        ) : (\n                            <Button key={action.key} size=\"small\" color={action.color ?? 'primary'} disabled={isDisabledOf(action)}\n                                    onClick={() => runAction(action)}>\n                                {action.label}\n                            </Button>\n                        )))}\n                    </SelectionPhoneActions>\n                </>\n            )}\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/DateRangeFilter.js

@@ -11,12 +11,14 @@ import Typography from "@mui/material/Typography";
 import DateRangeOutlinedIcon from "@mui/icons-material/DateRangeOutlined";
 import { useFormatters } from "../../toolkit/useFormatters.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDateRangeFilter";
 const RangeChip = piecePart(THEME_NAME, "Chip", Chip);
 const RangePanel = piecePart(THEME_NAME, "Panel", Stack);
 const RangeActions = piecePart(THEME_NAME, "Actions", Stack);
 function DateRangeFilter(props) {
-  const { from = "", to = "", onChange, label, texts } = usePieceProps(props, THEME_NAME);
+  const { from = "", to = "", onChange, label, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
   const { formatDate } = useFormatters();
   const [anchorElement, setAnchorElement] = useState(null);

package/dist/ui/filters/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateRangeFilter con defaultProps y\n// styleOverrides de sus partes: chip, panel, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateRangeFilter)\nconst THEME_NAME = 'CalcitaDateRangeFilter';\nconst RangeChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst RangePanel = piecePart(THEME_NAME, 'Panel', Stack);\nconst RangeActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function DateRangeFilter(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDateRangeFilter.defaultProps) y encima lo que llega aquí\n    const {from = '', to = '', onChange, label, texts} = usePieceProps(props, THEME_NAME);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatDate} = useFormatters();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <RangeChip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} ownSx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <RangePanel spacing={2} ownSx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <RangeActions direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </RangeActions>\n                </RangePanel>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateRangeFilter con defaultProps y\n// styleOverrides de sus partes: chip, panel, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateRangeFilter)\nconst THEME_NAME = 'CalcitaDateRangeFilter';\nconst RangeChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst RangePanel = piecePart(THEME_NAME, 'Panel', Stack);\nconst RangeActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function DateRangeFilter(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDateRangeFilter.defaultProps) y encima lo que llega aquí\n    const {from = '', to = '', onChange, label, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatDate} = useFormatters();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <RangeChip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} ownSx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <RangePanel spacing={2} ownSx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <RangeActions direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </RangeActions>\n                </RangePanel>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/PeriodRangeSelector.js

@@ -8,6 +8,7 @@ import Select from "@mui/material/Select";
 import Stack from "@mui/material/Stack";
 import { rangeEndOptionsOf, rangeEndAfterStartChange } from "../../periodRanges.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaPeriodRangeSelector";
 const PeriodField = piecePart(THEME_NAME, "Field", FormControl);
 const PeriodSelectPart = piecePart(THEME_NAME, "Select", Select);
@@ -31,7 +32,8 @@ function PeriodSelect({ id, label, value, options, onChange }) {
   ] });
 }
 function PeriodRangeSelector(props) {
-  const { id, options, from, to, fromLabel, toLabel, onChange } = usePieceProps(props, THEME_NAME);
+  const { id, options, from, to, fromLabel, toLabel, onChange, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const endOptions = rangeEndOptionsOf(options, from);
   return /* @__PURE__ */ jsxs(PeriodRoot, { direction: "row", spacing: 1.5, useFlexGap: true, ownSx: { alignItems: "center", flexWrap: "wrap" }, children: [
     /* @__PURE__ */ jsx(

package/dist/ui/filters/PeriodRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodRangeSelector.js","sources":["../../../src/ui/filters/PeriodRangeSelector.jsx"],"sourcesContent":["// Un rango de periodos: «desde» y «hasta», cada uno una lista para elegir (de tal quincena a tal quincena, de tal mes a\n// tal mes). Se usa en lugar de un calendario porque los periodos no son días: solo se ofrecen los que existen, y los que no\n// se pueden elegir salen apagados con su razón.\n//\n// «Hasta» solo ofrece lo que hace un rango válido con «desde»: nada de antes y nada que salte un periodo apagado\n// (periodRanges.js). Al cambiar «desde», si el «hasta» que había ya no vale, se iguala a «desde».\n//\n// No sabe de quincenas ni de productos: recibe las opciones ya ordenadas y con sus textos traducidos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPeriodRangeSelector con defaultProps y\n// styleOverrides de sus partes: field, select, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Stack from '@mui/material/Stack';\n\nimport {rangeEndAfterStartChange, rangeEndOptionsOf} from '@/periodRanges.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPeriodRangeSelector)\nconst THEME_NAME = 'CalcitaPeriodRangeSelector';\nconst PeriodField = piecePart(THEME_NAME, 'Field', FormControl);\nconst PeriodSelectPart = piecePart(THEME_NAME, 'Select', Select);\nconst PeriodRoot = piecePart(THEME_NAME, 'Root', Stack);\n\n// ancho de cada lista: cabe «septiembre 2026 · Q2» sin cortarse\nconst SELECT_MINIMUM_WIDTH = 210;\n\n/**\n * Una lista del rango.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {string} props.value\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options\n */\nfunction PeriodSelect({id, label, value, options, onChange}) {\n    return (\n        <PeriodField size=\"small\" ownSx={{minWidth: SELECT_MINIMUM_WIDTH, flex: '0 0 auto'}}>\n            <InputLabel id={`${id}-label`}>{label}</InputLabel>\n            <PeriodSelectPart labelId={`${id}-label`} label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value)}\n                    ownSx={{bgcolor: 'background.paper'}}\n                    renderValue={(selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? ''}>\n                {options.map((option) => (\n                    <MenuItem key={option.value} value={option.value} disabled={option.disabled}>\n                        {/* la razón de una opción apagada va debajo de su nombre: «sin validar» se lee sin tooltip */}\n                        <ListItemText primary={option.label} secondary={option.disabled ? option.hint : undefined} />\n                    </MenuItem>\n                ))}\n            </PeriodSelectPart>\n        </PeriodField>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.id prefijo de los id de las dos listas (accesibilidad)\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options en orden; ya\n *     traducidas\n * @param {string|null} props.from\n * @param {string|null} props.to\n * @param {string} props.fromLabel ya traducido\n * @param {string} props.toLabel ya traducido\n * @param {(range: {from: string, to: string}) => void} props.onChange\n */\nexport default function PeriodRangeSelector(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPeriodRangeSelector.defaultProps) y encima lo que llega aquí\n    const {id, options, from, to, fromLabel, toLabel, onChange} = usePieceProps(props, THEME_NAME);\n    const endOptions = rangeEndOptionsOf(options, from);\n\n    return (\n        <PeriodRoot direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n            <PeriodSelect id={`${id}-from`} label={fromLabel} value={from} options={options}\n                          onChange={(nextFrom) => onChange({from: nextFrom, to: rangeEndAfterStartChange(options, nextFrom, to)})} />\n            <PeriodSelect id={`${id}-to`} label={toLabel} value={to} options={endOptions}\n                          onChange={(nextTo) => onChange({from, to: nextTo})} />\n        </PeriodRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAwBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,WAAW;AAC9D,MAAM,mBAAmB,UAAU,YAAY,UAAU,MAAM;AAC/D,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AAGtD,MAAM,uBAAuB;AAY7B,SAAS,aAAa,EAAC,IAAI,OAAO,OAAO,SAAS,YAAW;AACzD,SACI,qBAAC,aAAA,EAAY,MAAK,SAAQ,OAAO,EAAC,UAAU,sBAAsB,MAAM,WAAA,GACpE,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,IAAI,GAAG,EAAE,UAAW,UAAA,OAAM;AAAA,IACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAiB,SAAS,GAAG,EAAE;AAAA,QAAU;AAAA,QAAc,OAAO,SAAS;AAAA,QAAI,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QACpH,OAAO,EAAC,SAAS,mBAAA;AAAA,QACjB,aAAa,CAAC,kBAAkB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAAA,QACtG,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,UAAA,EAA4B,OAAO,OAAO,OAAO,UAAU,OAAO,UAE/D,UAAA,oBAAC,gBAAa,SAAS,OAAO,OAAO,WAAW,OAAO,WAAW,OAAO,OAAO,OAAA,CAAW,EAAA,GAFhF,OAAO,KAGtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAaA,SAAwB,oBAAoB,OAAO;AAE/C,QAAM,EAAC,IAAI,SAAS,MAAM,IAAI,WAAW,SAAS,SAAA,IAAY,cAAc,OAAO,UAAU;AAC7F,QAAM,aAAa,kBAAkB,SAAS,IAAI;AAElD,SACI,qBAAC,YAAA,EAAW,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UACzF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAS,OAAO;AAAA,QAAW,OAAO;AAAA,QAAM;AAAA,QACjD,UAAU,CAAC,aAAa,SAAS,EAAC,MAAM,UAAU,IAAI,yBAAyB,SAAS,UAAU,EAAE,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IACpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAO,OAAO;AAAA,QAAS,OAAO;AAAA,QAAI,SAAS;AAAA,QACpD,UAAU,CAAC,WAAW,SAAS,EAAC,MAAM,IAAI,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAG,GACtE;AAER;"}
+{"version":3,"file":"PeriodRangeSelector.js","sources":["../../../src/ui/filters/PeriodRangeSelector.jsx"],"sourcesContent":["// Un rango de periodos: «desde» y «hasta», cada uno una lista para elegir (de tal quincena a tal quincena, de tal mes a\n// tal mes). Se usa en lugar de un calendario porque los periodos no son días: solo se ofrecen los que existen, y los que no\n// se pueden elegir salen apagados con su razón.\n//\n// «Hasta» solo ofrece lo que hace un rango válido con «desde»: nada de antes y nada que salte un periodo apagado\n// (periodRanges.js). Al cambiar «desde», si el «hasta» que había ya no vale, se iguala a «desde».\n//\n// No sabe de quincenas ni de productos: recibe las opciones ya ordenadas y con sus textos traducidos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPeriodRangeSelector con defaultProps y\n// styleOverrides de sus partes: field, select, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Stack from '@mui/material/Stack';\n\nimport {rangeEndAfterStartChange, rangeEndOptionsOf} from '@/periodRanges.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPeriodRangeSelector)\nconst THEME_NAME = 'CalcitaPeriodRangeSelector';\nconst PeriodField = piecePart(THEME_NAME, 'Field', FormControl);\nconst PeriodSelectPart = piecePart(THEME_NAME, 'Select', Select);\nconst PeriodRoot = piecePart(THEME_NAME, 'Root', Stack);\n\n// ancho de cada lista: cabe «septiembre 2026 · Q2» sin cortarse\nconst SELECT_MINIMUM_WIDTH = 210;\n\n/**\n * Una lista del rango.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {string} props.value\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options\n */\nfunction PeriodSelect({id, label, value, options, onChange}) {\n    return (\n        <PeriodField size=\"small\" ownSx={{minWidth: SELECT_MINIMUM_WIDTH, flex: '0 0 auto'}}>\n            <InputLabel id={`${id}-label`}>{label}</InputLabel>\n            <PeriodSelectPart labelId={`${id}-label`} label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value)}\n                    ownSx={{bgcolor: 'background.paper'}}\n                    renderValue={(selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? ''}>\n                {options.map((option) => (\n                    <MenuItem key={option.value} value={option.value} disabled={option.disabled}>\n                        {/* la razón de una opción apagada va debajo de su nombre: «sin validar» se lee sin tooltip */}\n                        <ListItemText primary={option.label} secondary={option.disabled ? option.hint : undefined} />\n                    </MenuItem>\n                ))}\n            </PeriodSelectPart>\n        </PeriodField>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.id prefijo de los id de las dos listas (accesibilidad)\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options en orden; ya\n *     traducidas\n * @param {string|null} props.from\n * @param {string|null} props.to\n * @param {string} props.fromLabel ya traducido\n * @param {string} props.toLabel ya traducido\n * @param {(range: {from: string, to: string}) => void} props.onChange\n */\nexport default function PeriodRangeSelector(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPeriodRangeSelector.defaultProps) y encima lo que llega aquí\n    const {id, options, from, to, fromLabel, toLabel, onChange, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const endOptions = rangeEndOptionsOf(options, from);\n\n    return (\n        <PeriodRoot direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n            <PeriodSelect id={`${id}-from`} label={fromLabel} value={from} options={options}\n                          onChange={(nextFrom) => onChange({from: nextFrom, to: rangeEndAfterStartChange(options, nextFrom, to)})} />\n            <PeriodSelect id={`${id}-to`} label={toLabel} value={to} options={endOptions}\n                          onChange={(nextTo) => onChange({from, to: nextTo})} />\n        </PeriodRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,WAAW;AAC9D,MAAM,mBAAmB,UAAU,YAAY,UAAU,MAAM;AAC/D,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AAGtD,MAAM,uBAAuB;AAY7B,SAAS,aAAa,EAAC,IAAI,OAAO,OAAO,SAAS,YAAW;AACzD,SACI,qBAAC,aAAA,EAAY,MAAK,SAAQ,OAAO,EAAC,UAAU,sBAAsB,MAAM,WAAA,GACpE,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,IAAI,GAAG,EAAE,UAAW,UAAA,OAAM;AAAA,IACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAiB,SAAS,GAAG,EAAE;AAAA,QAAU;AAAA,QAAc,OAAO,SAAS;AAAA,QAAI,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QACpH,OAAO,EAAC,SAAS,mBAAA;AAAA,QACjB,aAAa,CAAC,kBAAkB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAAA,QACtG,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,UAAA,EAA4B,OAAO,OAAO,OAAO,UAAU,OAAO,UAE/D,UAAA,oBAAC,gBAAa,SAAS,OAAO,OAAO,WAAW,OAAO,WAAW,OAAO,OAAO,OAAA,CAAW,EAAA,GAFhF,OAAO,KAGtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAaA,SAAwB,oBAAoB,OAAO;AAE/C,QAAM,EAAC,IAAI,SAAS,MAAM,IAAI,WAAW,SAAS,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9G,mBAAiB,YAAY,YAAY;AACzC,QAAM,aAAa,kBAAkB,SAAS,IAAI;AAElD,SACI,qBAAC,YAAA,EAAW,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UACzF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAS,OAAO;AAAA,QAAW,OAAO;AAAA,QAAM;AAAA,QACjD,UAAU,CAAC,aAAa,SAAS,EAAC,MAAM,UAAU,IAAI,yBAAyB,SAAS,UAAU,EAAE,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IACpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAO,OAAO;AAAA,QAAS,OAAO;AAAA,QAAI,SAAS;AAAA,QACpD,UAAU,CAAC,WAAW,SAAS,EAAC,MAAM,IAAI,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAG,GACtE;AAER;"}

package/dist/ui/filters/QuickFilters.js

@@ -8,6 +8,7 @@ import Chip from "@mui/material/Chip";
 import Typography from "@mui/material/Typography";
 import ScrollableRow from "../layout/ScrollableRow.js";
 import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaQuickFilters";
 const QuickRoot = piecePart(THEME_NAME, "Root", Box);
 const QuickCaption = piecePart(THEME_NAME, "Caption", Typography);
@@ -32,7 +33,8 @@ function compactCount(count) {
   return String(count);
 }
 function QuickFilters(props) {
-  const { value, onChange, options = [], caption, ariaLabel, extra, texts } = usePieceProps(props, THEME_NAME);
+  const { value, onChange, options = [], caption, ariaLabel, extra, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
   const activeChip = useRef(null);
   const isFirstRender = useRef(true);