@stackcraftmx/calcita 0.56.0 → 0.58.0

package/README.md

@@ -5,8 +5,8 @@ transparente famoso por doblar la luz, y eso es lo que define al vidrio líquido
 
 Arranca un proyecto sin copiar y volver a probar lo de siempre: el marco de la app con menú y permisos, tabla de servidor,
 diálogos de confirmación, avisos, descargas, formularios, formatos de número y fecha, errores RFC 9457, reportes en Excel,
-la cuenta completa, mapa, calendario, tablero kanban, bandeja tipo correo y el tema con vidrio líquido, interpretado
-componente por componente según la guía de Apple.
+la cuenta completa, mapa, calendario, tablero kanban, listas que se ordenan arrastrando, bandeja tipo correo y el tema con
+vidrio líquido, interpretado componente por componente según la guía de Apple.
 
 JavaScript con sus tipos generados: se usa igual desde un proyecto en TypeScript. Sirve para un proyecto nuevo y también
 para meterlo por pedazos en un sistema que ya existe (ver «En un sistema que ya existe»).
@@ -244,6 +244,7 @@ Cada puerta pide solo sus librerías; un proyecto instala lo que usa.
 | `@stackcraftmx/calcita/maps` | `MapView`: mapa con marcadores del color del tema, el elegido con su globo, se acomoda solo; en oscuro, mosaicos oscuros | `leaflet`, `react-leaflet` 5 |
 | `@stackcraftmx/calcita/calendar` | `EventCalendar`: mes, semana, día y lista, con la barra del framework; arrastrar cambia la cita y regresa si el servidor dice que no. `EventDetails`: el detalle de una cita (lugar, liga de la reunión, invitados con su respuesta, recordatorio, notas) | `@fullcalendar/react`, `core`, `daygrid`, `timegrid`, `list`, `interaction` 6.1 |
 | `@stackcraftmx/calcita/kanban` | `KanbanBoard`: columnas con tope (y que se encogen, como un congelador) y tarjetas de producto (etiquetas, responsables, fecha, pendientes, terminar) que se arrastran con el ratón, el dedo o el teclado; `moveCard` para ver la movida al instante | `@hello-pangea/dnd` 18 |
+| `@stackcraftmx/calcita/sortable` | `SortableTable`: una tabla chica cuyos renglones se arrastran (ratón, dedo o teclado) para ordenarlos, con su columna «Orden»; guarda al soltar (y regresa el renglón si el servidor dice que no) o en un formulario con `FormSortableField`; `moveRow` para mover sin arrastrar | `@hello-pangea/dnd` 18 |
 
 ## El tema
 
@@ -307,6 +308,36 @@ números, de fechas, monto con operador o uno propio); lo que se cambia adentro
 por filtro (`filterDrawerDefaultsOf`, `filterDrawerKindsOf`, `filterDrawerChipsOf`). Un monto viaja como `gte:500`
 (`comparisonOf` lo separa en el backend o en la pantalla).
 
+Las fechas del cajón usan el calendario del navegador, así el cajón no obliga a instalar MUI X. Una app que ya trae
+`/date-pickers` pone el suyo para que el cajón y sus formularios se vean igual: `slots={{dateInput: DateInput}}` en un
+cajón (desde la tabla, `drawerProps`), o una vez en el tema para todas las listas. Un rango de fechas se acota con
+`minDate`, `maxDate`, `disablePast` y `disableFuture`: el calendario no deja escoger fuera y cada extremo acota al otro. Si
+alguien teclea una fecha fuera de los topes o un rango al revés, su campo lo dice y «Buscar» no busca; nada se borra solo.
+Un `custom` con `keys` es un rango propio en un solo campo: guarda en sus dos llaves, cuenta como un filtro, da sus dos chips
+y, con `isBackwards`, tampoco deja buscar al revés. Su `render` recibe todo el borrador (`values`, `setValue`), sus `keys` y
+lo que esté mal en cada una (`errors`), ya dicho. En un cajón angosto, `stackPairsBelow` pone cada par uno arriba del otro.
+
+```jsx
+import {DateInput, TimeInput} from '@stackcraftmx/calcita/date-pickers';
+
+const FIELDS = [
+    {name: 'paid', label: 'Fecha de pago', kind: FILTER_FIELD_KIND.dateRange, minDate: '2026-01-01', disableFuture: true},
+    {
+        name: 'hours', label: 'Hora de compra', kind: FILTER_FIELD_KIND.custom, keys: {from: 'hour_from', to: 'hour_to'},
+        isBackwards: (from, to) => to < from,
+        render: ({values, setValue, keys: [fromKey, toKey], errors}) => (
+            <>
+                <TimeInput label="Desde" value={values[fromKey]} onChange={(time) => setValue(fromKey, time)} />
+                <TimeInput label="Hasta" value={values[toKey]} onChange={(time) => setValue(toKey, time)} error={errors[toKey]} />
+            </>
+        ),
+    },
+];
+
+<ServerTableFilterDrawer fields={FIELDS} width={460} stackPairsBelow={420} drawerProps={{slots: {dateInput: DateInput}}} />
+// o para todas las listas: createTheme({components: {CalcitaFilterDrawer: {defaultProps: {slots: {dateInput: DateInput}}}}})
+```
+
 ```jsx
 <BarActions label="Buscar en pedidos" order={1}>
     <IconButton aria-label="Buscar" onClick={openSearch}><SearchRoundedIcon /></IconButton>
@@ -336,6 +367,16 @@ se pueden escribir en `colorSchemes`.
 createToolkitTheme({glass: true, fields: {radius: 8, light: {fill: '#FFFFFF', hoverFill: '#FFFFFF', border: '#C4CDD5'}}});
 ```
 
+Para cambiar el relleno solo en ciertos campos (los bloqueados, o todos en oscuro con el color de la marca), el tema del
+proyecto pone la variable `--calcita-field-fill` (y `--calcita-field-hover-fill`, `--calcita-field-edge`,
+`--calcita-field-hover-edge`) en el campo o en algo que lo contenga: todos los campos de Calcita la leen, los de
+`FormSection` y los sueltos (un cajón de filtros, una ventana). Ponerle un `backgroundColor` al campo no siempre gana, porque
+las reglas de Calcita llevan selectores largos; con la variable manda la definición más cercana.
+
+```js
+MuiOutlinedInput: {styleOverrides: {root: ({theme}) => theme.applyStyles('dark', {'--calcita-field-fill': '#1E3A5F', '--calcita-field-hover-fill': '#1E3A5F'})}}
+```
+
 El minimalista separa las superficies por su tono con los grises de Apple. Para pintarlo con los colores de la marca:
 `minimalTones`, por modo, con el fondo de la página (`default`), las tarjetas (`paper`), el relleno de campos, grupos y
 botones sin color (`fill`) y lo que flota, como la barra del teléfono (`floating`). Lo que no se pase se queda con el gris
@@ -368,7 +409,8 @@ createTheme({components: {CalcitaRecordCard: {defaultProps: {slotProps: {root: {
 ```
 
 `className`, `style` y `sx` de `slotProps` se suman a los de Calcita; una pieza dentro de otra igual no toma los `slots` de la
-de afuera. `TextInput` es la excepción: su `slotProps` es el del `TextField` de MUI (`input`, `htmlInput`…). Una pieza propia
+de afuera. Una parte propia no recibe el estilo de Calcita ni, si la parte es un `Stack`, su acomodo (`spacing`,
+`direction`): eso lo pone ella; lo que la pantalla le dé en `slotProps` sí le llega. `TextInput` es la excepción: su `slotProps` es el del `TextField` de MUI (`input`, `htmlInput`…). Una pieza propia
 del proyecto se arma con lo mismo: `piecePart`, `usePieceProps` y `withPieceSlots`.
 
 El `sx` de la pantalla se **combina regla por regla** con el de la pieza, no la reemplaza: en la tabla,
@@ -429,7 +471,7 @@ Para hacer lo mismo en un componente propio: `sx={[{p: 2}, ...sxListOf(sx)]}` (u
 | `CalcitaFileInput` | `root`, `button`, `fileChip`, `empty` |
 | `CalcitaFileUploadInput` | `root`, `fileName`, `status`, `button`, `helper` |
 | `CalcitaFilterChips` | `root`, `header`, `clearButton` |
-| `CalcitaFilterDrawer` | `header`, `body`, `footer` |
+| `CalcitaFilterDrawer` | `header`, `body`, `footer`, `dateInput` |
 | `CalcitaFontSizeToggle` | `button` |
 | `CalcitaFormProblemAlert` | `root` |
 | `CalcitaFormRow` | `root`, `label`, `control` |
@@ -495,6 +537,7 @@ Para hacer lo mismo en un componente propio: `sx={[{p: 2}, ...sxListOf(sx)]}` (u
 | `CalcitaSignInForm` | `footer` |
 | `CalcitaSignInScreen` | `alert` |
 | `CalcitaSortableFilterHeader` | `title`, `root`, `sortButton`, `sortIndicator`, `clearButton` |
+| `CalcitaSortableTable` | `root`, `container`, `table`, `head`, `headerRow`, `headerCell`, `body`, `row`, `handleCell`, `handle`, `positionCell`, `cell`, `empty`, `helperText`, `announcer` |
 | `CalcitaStackedCell` | `root`, `line`, `label`, `valueRow`, `primary`, `secondary`, `note` |
 | `CalcitaStatusChip` | `root`, `dot`, `label`, `chip` |
 | `CalcitaSubmenuActionsMenu` | `badge` |
@@ -682,6 +725,42 @@ const columns = [
   para decidirlo desde la pantalla.
 - `gridSx` se combina con los estilos de la tabla regla por regla; `gridProps` pasa lo demás al DataGrid.
 
+## Listas que se ordenan (`/sortable`)
+
+Para una lista chica donde el orden de los renglones es el dato (qué se surte primero, en qué orden pasa la ruta, qué se
+hace antes): `SortableTable` es una tabla cuyos renglones se arrastran con el ratón, el dedo o el teclado (espacio, flechas,
+espacio), con la columna «Orden» 1..n que se renumera sola. Pide `@hello-pangea/dnd`, la misma del tablero kanban. La tabla
+de servidor no sirve para esto: en MUI X, ordenar renglones arrastrando es de su versión de paga; esta lista va completa en
+el navegador.
+
+```jsx
+import {FormSortableField, SortableTable, moveRow} from '@stackcraftmx/calcita/sortable';
+
+// guardar al soltar: si la promesa truena (el servidor dijo que no), el renglón regresa solo a su lugar
+<SortableTable rows={orders} ariaLabel="Orden de surtido" getRowLabel={(order) => order.folio}
+               columns={[{field: 'folio', headerName: 'Pedido', width: 120}, {field: 'customer', headerName: 'Cliente', flex: 1}]}
+               onReorder={async ({rows}) => {
+                   await api.put('/packing', rows.map((order, index) => ({order_id: order.id, priority: index + 1})));
+                   setOrders(rows);
+               }} />
+
+// en un formulario de formik: el valor del campo es la lista en su orden; al soltar, el formulario queda cambiado
+<FormSortableField name="stops" ariaLabel="Ruta de reparto" columns={columns} />
+// al guardar: values.stops.map((stop, index) => ({branch_id: stop.id, stop: index + 1}))
+```
+
+- `onReorder` recibe los renglones ya en su orden nuevo (`rows`), el id del que se movió y de dónde a dónde (desde 0). Si no
+  regresa nada, la pantalla pone los renglones nuevos. Si regresa una promesa, la tabla enseña el orden nuevo al instante,
+  no deja mover otro mientras se guarda y, si truena, lo regresa a su lugar y el lector de pantalla lo anuncia.
+- El error de la lista (una regla de yup sobre el arreglo, o el 422 del servidor con `applyServerProblem`) sale abajo de la
+  tabla. Con react-hook-form: `SortableTable` dentro de un `Controller` (`rows={field.value}`,
+  `onReorder={({rows}) => field.onChange(rows)}`).
+- Las columnas: `width` fijo, o `flex` y `minWidth` para repartirse el espacio libre; abajo de su mínimo, la tabla se desliza
+  de lado (en el teléfono). `renderCell(row, {position})` para una celda a la medida. Los renglones conservan su tipo en
+  TypeScript.
+- `moveRow(rows, desde, hasta)` mueve sin arrastrar (un botón «Subir» de la pantalla). `showPosition={false}` quita la
+  columna «Orden»; `disabled` la deja de solo lectura; `texts` y el tema (`CalcitaSortableTable`) cambian lo demás.
+
 ## Eventos y textos de cada componente
 
 Cada componente de la casa avisa hacia afuera todo lo que pasa adentro (`onSelect`, `onChange`, `onViewChange`,

package/dist/DataTable/ServerTableFilterDrawer.js

@@ -12,7 +12,7 @@ import { piecePart, withPieceSlots, usePieceProps } from "../theme/themePieces.j
 const THEME_NAME = "CalcitaServerTableFilterDrawer";
 const ServerTableFilterDrawerButton = piecePart(THEME_NAME, "Button", Button);
 function ServerTableFilterDrawerContent(props) {
-  const { fields, anchor, width, title, buttonLabel, onApply, children, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  const { fields, anchor, width, title, buttonLabel, onApply, stackPairsBelow, drawerProps, children, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("common", texts);
   const { filters, setFilters } = useTableFilter();
@@ -33,6 +33,7 @@ function ServerTableFilterDrawerContent(props) {
     /* @__PURE__ */ jsx(
       FilterDrawer,
       {
+        ...drawerProps,
         open: isOpen,
         onClose: () => setIsOpen(false),
         fields,
@@ -40,6 +41,7 @@ function ServerTableFilterDrawerContent(props) {
         anchor,
         width,
         title,
+        stackPairsBelow,
         texts,
         onApply: (values) => {
           setFilters(values);

package/dist/DataTable/ServerTableFilterDrawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ServerTableFilterDrawer.js","sources":["../../src/DataTable/ServerTableFilterDrawer.jsx"],"sourcesContent":["// El botón «Filtros» de ServerTable con su cajón de búsqueda (FilterDrawer): se pone en toolbarExtra y lee y cambia los\n// filtros de SU tabla (los de la dirección, los mismos de los chips). El botón dice cuántos filtros del cajón hay puestos.\n//\n//   const FILTER_FIELDS = [{name: 'total', label: 'Total', kind: FILTER_FIELD_KIND.comparison, prefix: '$'}, …];\n//   <ServerTable … filterDefaults={{...MIS_DEFAULTS, ...filterDrawerDefaultsOf(FILTER_FIELDS)}}\n//                  filterKinds={{...MIS_KINDS, ...filterDrawerKindsOf(FILTER_FIELDS)}}\n//                  chipConfig={buildChipConfig(filterDrawerChipsOf(FILTER_FIELDS, {t, formatDate}))}\n//                  toolbarExtra={<ServerTableFilterDrawer fields={FILTER_FIELDS} />} />\n//\n// filterDefaults: la tabla solo guarda en la dirección lo que declara ahí. filterKinds: las listas se leen como lista. Los\n// chips dicen cada filtro en palabras y cada uno se quita con su ×.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaServerTableFilterDrawer con defaultProps, styleOverrides de\n// sus partes (button) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport TuneRoundedIcon from '@mui/icons-material/TuneRounded';\n\nimport {useTableFilter} from '@/DataTable/filterContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FilterDrawer from '@/ui/filters/FilterDrawer.jsx';\nimport {activeDrawerFilterCountOf} from '@/ui/filters/filterDrawerFields.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaServerTableFilterDrawer)\nconst THEME_NAME = 'CalcitaServerTableFilterDrawer';\nconst ServerTableFilterDrawerButton = piecePart(THEME_NAME, 'Button', Button);\n\n/**\n * @param {object} props\n * @param {object[]} props.fields los campos del cajón (filterDrawerFields.js)\n * @param {'left'|'right'} [props.anchor] de qué lado sale; por omisión la derecha\n * @param {number} [props.width] su ancho en escritorio\n * @param {string} [props.title] ya traducido; por omisión «Filtros»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Filtros» (con los puestos, «Filtros (3)»)\n * @param {(values: Record<string, unknown>) => void} [props.onApply] aviso de lo que se buscó (la tabla ya se filtró)\n * @param {import('react').ReactNode} [props.children] algo más abajo de los campos del cajón\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ServerTableFilterDrawerContent(props) {\n    const {fields, anchor, width, title, buttonLabel, onApply, children, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {filters, setFilters} = useTableFilter();\n    const [isOpen, setIsOpen] = useState(false);\n    const activeCount = activeDrawerFilterCountOf(fields, filters);\n\n    return (\n        <>\n            <ServerTableFilterDrawerButton size=\"small\" variant={activeCount > 0 ? 'contained' : 'outlined'} startIcon={<TuneRoundedIcon />}\n                    aria-haspopup=\"dialog\" onClick={() => setIsOpen(true)}>\n                {activeCount > 0 ? t('filterDrawer.openWithCount', {count: activeCount}) : (buttonLabel ?? t('filterDrawer.open'))}\n            </ServerTableFilterDrawerButton>\n            <FilterDrawer open={isOpen} onClose={() => setIsOpen(false)} fields={fields} values={filters} anchor={anchor} width={width} title={title}\n                          texts={texts}\n                          onApply={(values) => {\n                              setFilters(values);\n                              onApply?.(values);\n                          }}>\n                {children}\n            </FilterDrawer>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ServerTableFilterDrawer = withPieceSlots(ServerTableFilterDrawerContent, THEME_NAME);\nexport default ServerTableFilterDrawer;\n"],"names":[],"mappings":";;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,gCAAgC,UAAU,YAAY,UAAU,MAAM;AAa5E,SAAS,+BAA+B,OAAO;AAC3C,QAAM,EAAC,QAAQ,QAAQ,OAAO,OAAO,aAAa,SAAS,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9H,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,WAAA,IAAc,eAAA;AAC9B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAE7D,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAA8B,MAAK;AAAA,QAAQ,SAAS,cAAc,IAAI,cAAc;AAAA,QAAY,+BAAY,iBAAA,EAAgB;AAAA,QACrH,iBAAc;AAAA,QAAS,SAAS,MAAM,UAAU,IAAI;AAAA,QACvD,UAAA,cAAc,IAAI,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAK,eAAe,EAAE,mBAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,MAAM;AAAA,QAAQ,SAAS,MAAM,UAAU,KAAK;AAAA,QAAG;AAAA,QAAgB,QAAQ;AAAA,QAAS;AAAA,QAAgB;AAAA,QAAc;AAAA,QAC9G;AAAA,QACA,SAAS,CAAC,WAAW;AACjB,qBAAW,MAAM;AACjB,oBAAU,MAAM;AAAA,QACpB;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAGA,MAAM,0BAA0B,eAAe,gCAAgC,UAAU;"}
+{"version":3,"file":"ServerTableFilterDrawer.js","sources":["../../src/DataTable/ServerTableFilterDrawer.jsx"],"sourcesContent":["// El botón «Filtros» de ServerTable con su cajón de búsqueda (FilterDrawer): se pone en toolbarExtra y lee y cambia los\n// filtros de SU tabla (los de la dirección, los mismos de los chips). El botón dice cuántos filtros del cajón hay puestos.\n//\n//   const FILTER_FIELDS = [{name: 'total', label: 'Total', kind: FILTER_FIELD_KIND.comparison, prefix: '$'}, …];\n//   <ServerTable … filterDefaults={{...MIS_DEFAULTS, ...filterDrawerDefaultsOf(FILTER_FIELDS)}}\n//                  filterKinds={{...MIS_KINDS, ...filterDrawerKindsOf(FILTER_FIELDS)}}\n//                  chipConfig={buildChipConfig(filterDrawerChipsOf(FILTER_FIELDS, {t, formatDate}))}\n//                  toolbarExtra={<ServerTableFilterDrawer fields={FILTER_FIELDS} />} />\n//\n// filterDefaults: la tabla solo guarda en la dirección lo que declara ahí. filterKinds: las listas se leen como lista. Los\n// chips dicen cada filtro en palabras y cada uno se quita con su ×.\n//\n// Lo demás del cajón (su calendario propio, sus partes) va en drawerProps: <ServerTableFilterDrawer fields={…}\n// drawerProps={{slots: {dateInput: DateInput}}} />. Los slots de aquí son del botón.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaServerTableFilterDrawer con defaultProps, styleOverrides de\n// sus partes (button) y slots/slotProps para cambiarlas.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport Button from '@mui/material/Button';\nimport TuneRoundedIcon from '@mui/icons-material/TuneRounded';\n\nimport {useTableFilter} from '@/DataTable/filterContext.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport FilterDrawer from '@/ui/filters/FilterDrawer.jsx';\nimport {activeDrawerFilterCountOf} from '@/ui/filters/filterDrawerFields.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaServerTableFilterDrawer)\nconst THEME_NAME = 'CalcitaServerTableFilterDrawer';\nconst ServerTableFilterDrawerButton = piecePart(THEME_NAME, 'Button', Button);\n\n/**\n * @param {object} props\n * @param {object[]} props.fields los campos del cajón (filterDrawerFields.js)\n * @param {'left'|'right'} [props.anchor] de qué lado sale; por omisión la derecha\n * @param {number} [props.width] su ancho en escritorio\n * @param {string} [props.title] ya traducido; por omisión «Filtros»\n * @param {string} [props.buttonLabel] ya traducido; por omisión «Filtros» (con los puestos, «Filtros (3)»)\n * @param {(values: Record<string, unknown>) => void} [props.onApply] aviso de lo que se buscó (la tabla ya se filtró)\n * @param {number} [props.stackPairsBelow] en px: si el cajón mide menos, cada par («desde» y «hasta») va uno arriba del otro\n * @param {object} [props.drawerProps] lo demás de FilterDrawer: slots (dateInput, body…), slotProps, applyLabel, closeOnApply\n * @param {import('react').ReactNode} [props.children] algo más abajo de los campos del cajón\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction ServerTableFilterDrawerContent(props) {\n    const {fields, anchor, width, title, buttonLabel, onApply, stackPairsBelow, drawerProps, children, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {filters, setFilters} = useTableFilter();\n    const [isOpen, setIsOpen] = useState(false);\n    const activeCount = activeDrawerFilterCountOf(fields, filters);\n\n    return (\n        <>\n            <ServerTableFilterDrawerButton size=\"small\" variant={activeCount > 0 ? 'contained' : 'outlined'} startIcon={<TuneRoundedIcon />}\n                    aria-haspopup=\"dialog\" onClick={() => setIsOpen(true)}>\n                {activeCount > 0 ? t('filterDrawer.openWithCount', {count: activeCount}) : (buttonLabel ?? t('filterDrawer.open'))}\n            </ServerTableFilterDrawerButton>\n            <FilterDrawer {...drawerProps} open={isOpen} onClose={() => setIsOpen(false)} fields={fields} values={filters} anchor={anchor} width={width}\n                          title={title} stackPairsBelow={stackPairsBelow} texts={texts}\n                          onApply={(values) => {\n                              setFilters(values);\n                              onApply?.(values);\n                          }}>\n                {children}\n            </FilterDrawer>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst ServerTableFilterDrawer = withPieceSlots(ServerTableFilterDrawerContent, THEME_NAME);\nexport default ServerTableFilterDrawer;\n"],"names":[],"mappings":";;;;;;;;;;;AA+BA,MAAM,aAAa;AACnB,MAAM,gCAAgC,UAAU,YAAY,UAAU,MAAM;AAe5E,SAAS,+BAA+B,OAAO;AAC3C,QAAM,EAAC,QAAQ,QAAQ,OAAO,OAAO,aAAa,SAAS,iBAAiB,aAAa,UAAU,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC5J,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,SAAS,WAAA,IAAc,eAAA;AAC9B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,cAAc,0BAA0B,QAAQ,OAAO;AAE7D,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAA8B,MAAK;AAAA,QAAQ,SAAS,cAAc,IAAI,cAAc;AAAA,QAAY,+BAAY,iBAAA,EAAgB;AAAA,QACrH,iBAAc;AAAA,QAAS,SAAS,MAAM,UAAU,IAAI;AAAA,QACvD,UAAA,cAAc,IAAI,EAAE,8BAA8B,EAAC,OAAO,YAAA,CAAY,IAAK,eAAe,EAAE,mBAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAc,GAAG;AAAA,QAAa,MAAM;AAAA,QAAQ,SAAS,MAAM,UAAU,KAAK;AAAA,QAAG;AAAA,QAAgB,QAAQ;AAAA,QAAS;AAAA,QAAgB;AAAA,QACjH;AAAA,QAAc;AAAA,QAAkC;AAAA,QAChD,SAAS,CAAC,WAAW;AACjB,qBAAW,MAAM;AACjB,oBAAU,MAAM;AAAA,QACpB;AAAA,QACT;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAGA,MAAM,0BAA0B,eAAe,gCAAgC,UAAU;"}

package/dist/locales/en.js

@@ -214,6 +214,8 @@ const en = Object.freeze({
         "lte": "At most"
       },
       "rangeBackwards": "It must be equal to or greater than «From».",
+      "dateBeforeMin": "It cannot be before {{date}}.",
+      "dateAfterMax": "It cannot be after {{date}}.",
       "chipFrom": "{{label}} from",
       "chipTo": "{{label}} to"
     },
@@ -955,6 +957,19 @@ const en = Object.freeze({
     "emptyFiltered": "No card here matches the search.",
     "empty": "No cards. Drag one here."
   },
+  "sortableTable": {
+    "instructions": "To move a row with the keyboard: space to lift it, up and down arrows to move it and space to drop it. Escape leaves it where it was.",
+    "handleHeader": "Move",
+    "handle": "Move “{{title}}”, position {{position}}",
+    "position": "Order",
+    "lifted": "You lifted “{{title}}”, position {{position}} of {{total}}.",
+    "moving": "Going to position {{position}} of {{total}}.",
+    "dropped": "You dropped “{{title}}” in position {{position}} of {{total}}.",
+    "cancelled": "“{{title}}” stayed in position {{position}}.",
+    "reverted": "“{{title}}” could not be moved: it went back to position {{position}}.",
+    "empty": "No rows.",
+    "noValue": "—"
+  },
   "inbox": {
     "labels": "Labels",
     "select": "Select “{{subject}}”",