@asteby/metacore-runtime-react 29.0.0 → 29.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @asteby/metacore-runtime-react
 
+## 29.0.1
+
+### Patch Changes
+
+- be357ff: fix(runtime-react): las sub-tablas de relación resuelven las columnas `ref` al
+  nombre del registro en vez del uuid crudo.
+
+  `OneToManyRelation` construía sus columnas sin precargar las opciones de las
+  columnas `ref` (a diferencia de `<DynamicTable>`, que las mete en `OptionsContext`),
+  así que una celda `ref` (p.ej. el Producto de un renglón de orden de compra)
+  mostraba el uuid. Ahora la sub-tabla precarga `/api/options/<Model>` de sus
+  columnas `useOptions && searchEndpoint` y las provee vía `OptionsContext.Provider`,
+  igual que la tabla principal — el chip muestra "Nombre / SKU".
+
 ## 29.0.0
 
 ### Minor Changes

package/dist/dynamic-relation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"AAkEA,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,cAAc,GACjB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,wBAAwB,EAAE,MAAM,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,oDAAoD;IACpD,iBAAiB,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;CACrB;AAwBD,UAAU,WAAW;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAC9D,IAAI,EAAE,aAAa,CAAA;IACnB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IAC/D,IAAI,EAAE,cAAc,CAAA;IACpB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,oBAAoB,GAC1B,6BAA6B,GAC7B,8BAA8B,CAAA;AAEpC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D"}
+{"version":3,"file":"dynamic-relation.d.ts","sourceRoot":"","sources":["../src/dynamic-relation.tsx"],"names":[],"mappings":"AAmEA,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AACrE,OAAO,EACH,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,wBAAwB,EACxB,aAAa,EACb,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,EACX,eAAe,EACf,cAAc,GACjB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,wBAAwB,EAAE,MAAM,CAAA;IAChC,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;IACnB,oDAAoD;IACpD,iBAAiB,EAAE,MAAM,CAAA;IACzB,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAA;CACrB;AAwBD,UAAU,WAAW;IACjB,6BAA6B;IAC7B,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAChC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC,sBAAsB,CAAC,CAAA;IACzC,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,6BAA8B,SAAQ,WAAW;IAC9D,IAAI,EAAE,aAAa,CAAA;IACnB,yFAAyF;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,8BAA+B,SAAQ,WAAW;IAC/D,IAAI,EAAE,cAAc,CAAA;IACpB,wEAAwE;IACxE,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,UAAU,EAAE,MAAM,CAAA;IAClB,6BAA6B;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,oEAAoE;IACpE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,uEAAuE;IACvE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,oBAAoB,GAC1B,6BAA6B,GAC7B,8BAA8B,CAAA;AAEpC,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,+BAK1D"}

package/dist/dynamic-relation.js

@@ -12,6 +12,7 @@ import { Button, Skeleton, AlertDialog, AlertDialogAction, AlertDialogCancel, Al
 import { Plus, Trash2, Pencil, Search } from 'lucide-react';
 import { useApi } from './api-context';
 import { useMetadataCache } from './metadata-cache';
+import { OptionsContext } from './options-context';
 import { DynamicForm } from './dynamic-form';
 import { useImageUrl } from './image-url-context';
 import { useTimeZone, useCurrency } from './org-runtime-context';
@@ -65,6 +66,11 @@ function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoin
     const cachedMeta = getMetadata(model);
     const labels = { ...DEFAULT_STRINGS, ...(strings || {}) };
     const [metadata, setMetadata] = useState(cachedMeta || null);
+    // Options for the ref/relation columns so their cells render the record's
+    // NAME (+ SKU subtitle) instead of the raw uuid. The main <DynamicTable>
+    // preloads these into OptionsContext; a sub-table skipped it, so a `ref`
+    // column (e.g. a purchase order line's Product) showed the bare uuid.
+    const [optionsMap, setOptionsMap] = useState(new Map());
     const [rows, setRows] = useState([]);
     const [loading, setLoading] = useState(true);
     // Paginación server-side + scroll infinito, igual que <DynamicTable>.
@@ -94,6 +100,39 @@ function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoin
         const id = setTimeout(() => setDebouncedSearch(search.trim()), 300);
         return () => clearTimeout(id);
     }, [search]);
+    // Preload the options of the ref/relation columns (same shape <DynamicTable>
+    // uses: `useOptions && searchEndpoint`) so their cells resolve the referenced
+    // record's name via OptionsContext instead of printing the raw uuid.
+    const refEndpointsKey = useMemo(() => {
+        const eps = (metadata?.columns || [])
+            .filter((c) => c.useOptions && c.searchEndpoint)
+            .map((c) => c.searchEndpoint);
+        return Array.from(new Set(eps)).sort().join('|');
+    }, [metadata]);
+    useEffect(() => {
+        if (!refEndpointsKey) {
+            setOptionsMap((prev) => (prev.size ? new Map() : prev));
+            return;
+        }
+        const endpoints = refEndpointsKey.split('|');
+        let cancelled = false;
+        void Promise.all(endpoints.map(async (ep) => {
+            try {
+                const res = (await api.get(ep));
+                return [ep, res.data?.success ? res.data.data || [] : []];
+            }
+            catch {
+                return [ep, []];
+            }
+        })).then((entries) => {
+            if (!cancelled)
+                setOptionsMap(new Map(entries));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [api, refEndpointsKey]);
+    const optionsCtx = useMemo(() => ({ optionsMap }), [optionsMap]);
     // fetchPage REEMPLAZA (página 1) o ANEXA (scroll infinito). Antes esta lista
     // pedía el modelo hijo entero sin page/per_page.
     const fetchPage = useCallback(async (nextPage, append) => {
@@ -261,10 +300,10 @@ function OneToManyRelation({ kind, model, foreignKey, parentId, filters, endpoin
             setSubmitting(false);
         }
     }, [api, dataEndpoint, fetchAll, onChange, rowToDelete]);
-    return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-model": model, children: [(labels.title || canCreate || showSearch) && (_jsxs("div", { className: "flex items-center justify-between gap-2 pb-3", children: [labels.title ? _jsx("h3", { className: "text-sm font-medium", children: labels.title }) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [showSearch && (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute start-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: labels.searchPlaceholder, className: "h-8 w-40 ps-7 sm:w-56" })] })), canCreate && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => { setEditingRow(null); setFormOpen(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), labels.addLabel] }))] })] })), loading ? (_jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-10 w-full" }, `rel-skeleton-${i}`))) })) : rows.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsxs("div", { ref: rootRef, className: "overflow-auto max-h-[60vh] border rounded-md bg-card", children: [_jsxs(Table, { noWrapper: true, className: "w-full", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "border-b-0 hover:bg-transparent", children: headerGroup.headers.map((header) => {
-                                        const isActions = header.id === 'actions';
-                                        return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActions && 'text-right'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                    }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, idx) => (_jsx(TableRow, { children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: "py-2", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, relationRowKey(row.original, idx, foreignKey)))) })] }), loadingMore && (_jsx("div", { className: "p-2", children: _jsx(Skeleton, { className: "h-8 w-full" }) })), _jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px w-full" })] })), !loading && rows.length > 0 && total > rows.length && (_jsx("div", { className: "pt-2 text-end text-xs text-muted-foreground", children: labels.countLabel
+    return (_jsxs("div", { className: className, "data-relation-kind": kind, "data-relation-model": model, children: [(labels.title || canCreate || showSearch) && (_jsxs("div", { className: "flex items-center justify-between gap-2 pb-3", children: [labels.title ? _jsx("h3", { className: "text-sm font-medium", children: labels.title }) : _jsx("span", {}), _jsxs("div", { className: "flex items-center gap-2", children: [showSearch && (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute start-2 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { value: search, onChange: (e) => setSearch(e.target.value), placeholder: labels.searchPlaceholder, className: "h-8 w-40 ps-7 sm:w-56" })] })), canCreate && (_jsxs(Button, { size: "sm", variant: "outline", onClick: () => { setEditingRow(null); setFormOpen(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), labels.addLabel] }))] })] })), loading ? (_jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_, i) => (_jsx(Skeleton, { className: "h-10 w-full" }, `rel-skeleton-${i}`))) })) : rows.length === 0 ? (_jsx("div", { className: "text-center text-sm text-muted-foreground py-8 border rounded-md bg-muted/30", children: labels.emptyState })) : (_jsx(OptionsContext.Provider, { value: optionsCtx, children: _jsxs("div", { ref: rootRef, className: "overflow-auto max-h-[60vh] border rounded-md bg-card", children: [_jsxs(Table, { noWrapper: true, className: "w-full", children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "border-b-0 hover:bg-transparent", children: headerGroup.headers.map((header) => {
+                                            const isActions = header.id === 'actions';
+                                            return (_jsx(TableHead, { colSpan: header.colSpan, style: header.column.columnDef.size ? { width: header.column.columnDef.size } : undefined, className: cn('bg-card border-b h-10', isActions && 'text-right'), children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                        }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row, idx) => (_jsx(TableRow, { children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { style: cell.column.columnDef.size ? { width: cell.column.columnDef.size } : undefined, className: "py-2", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, relationRowKey(row.original, idx, foreignKey)))) })] }), loadingMore && (_jsx("div", { className: "p-2", children: _jsx(Skeleton, { className: "h-8 w-full" }) })), _jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px w-full" })] }) })), !loading && rows.length > 0 && total > rows.length && (_jsx("div", { className: "pt-2 text-end text-xs text-muted-foreground", children: labels.countLabel
                     .replace('{{loaded}}', String(rows.length))
                     .replace('{{total}}', String(total)) })), _jsx(Dialog, { open: formOpen, onOpenChange: (open) => { setFormOpen(open); if (!open)
                     setEditingRow(null); }, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editingRow ? labels.editLabel : labels.addLabel }) }), _jsx(DynamicForm, { fields: formFields, initialValues: editingRow || undefined, onSubmit: handleSubmit, onCancel: () => { setFormOpen(false); setEditingRow(null); }, submitLabel: labels.saveLabel, cancelLabel: labels.cancelLabel, disabled: submitting })] }) }), _jsx(AlertDialog, { open: !!rowToDelete, onOpenChange: (open) => !open && setRowToDelete(null), children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: labels.confirmRemoveTitle }), _jsx(AlertDialogDescription, { children: labels.confirmRemoveDescription })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: submitting, children: labels.cancelLabel }), _jsx(AlertDialogAction, { onClick: (e) => { e.preventDefault(); handleDelete(); }, className: "bg-red-600 hover:bg-red-700", disabled: submitting, children: labels.removeLabel })] })] }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "29.0.0",
+  "version": "29.0.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-relation.tsx

@@ -43,6 +43,7 @@ import {
 import { Plus, Trash2, Pencil, Search } from 'lucide-react'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
+import { OptionsContext } from './options-context'
 import { DynamicForm } from './dynamic-form'
 import { useImageUrl } from './image-url-context'
 import { useTimeZone, useCurrency } from './org-runtime-context'
@@ -244,6 +245,11 @@ function OneToManyRelation({
     const labels = { ...DEFAULT_STRINGS, ...(strings || {}) }
 
     const [metadata, setMetadata] = useState<TableMetadata | null>(cachedMeta || null)
+    // Options for the ref/relation columns so their cells render the record's
+    // NAME (+ SKU subtitle) instead of the raw uuid. The main <DynamicTable>
+    // preloads these into OptionsContext; a sub-table skipped it, so a `ref`
+    // column (e.g. a purchase order line's Product) showed the bare uuid.
+    const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
     const [rows, setRows] = useState<any[]>([])
     const [loading, setLoading] = useState(true)
     // Paginación server-side + scroll infinito, igual que <DynamicTable>.
@@ -277,6 +283,42 @@ function OneToManyRelation({
         return () => clearTimeout(id)
     }, [search])
 
+    // Preload the options of the ref/relation columns (same shape <DynamicTable>
+    // uses: `useOptions && searchEndpoint`) so their cells resolve the referenced
+    // record's name via OptionsContext instead of printing the raw uuid.
+    const refEndpointsKey = useMemo(() => {
+        const eps = (metadata?.columns || [])
+            .filter((c) => (c as any).useOptions && (c as any).searchEndpoint)
+            .map((c) => (c as any).searchEndpoint as string)
+        return Array.from(new Set(eps)).sort().join('|')
+    }, [metadata])
+
+    useEffect(() => {
+        if (!refEndpointsKey) {
+            setOptionsMap((prev) => (prev.size ? new Map() : prev))
+            return
+        }
+        const endpoints = refEndpointsKey.split('|')
+        let cancelled = false
+        void Promise.all(
+            endpoints.map(async (ep) => {
+                try {
+                    const res = (await api.get(ep)) as { data: ApiResponse<any[]> }
+                    return [ep, res.data?.success ? res.data.data || [] : []] as const
+                } catch {
+                    return [ep, [] as any[]] as const
+                }
+            }),
+        ).then((entries) => {
+            if (!cancelled) setOptionsMap(new Map(entries))
+        })
+        return () => {
+            cancelled = true
+        }
+    }, [api, refEndpointsKey])
+
+    const optionsCtx = useMemo(() => ({ optionsMap }), [optionsMap])
+
     // fetchPage REEMPLAZA (página 1) o ANEXA (scroll infinito). Antes esta lista
     // pedía el modelo hijo entero sin page/per_page.
     const fetchPage = useCallback(async (nextPage: number, append: boolean) => {
@@ -522,6 +564,7 @@ function OneToManyRelation({
                 // `max-h` + scroll propio: la sub-tabla no puede estirar el modal
                 // del padre a lo alto de cientos de filas. El sentinel del fondo
                 // pide la página siguiente al entrar en vista.
+                <OptionsContext.Provider value={optionsCtx}>
                 <div ref={rootRef} className="overflow-auto max-h-[60vh] border rounded-md bg-card">
                     <Table noWrapper className="w-full">
                         <TableHeader>
@@ -566,6 +609,7 @@ function OneToManyRelation({
                     )}
                     <div ref={sentinelRef} aria-hidden className="h-px w-full" />
                 </div>
+                </OptionsContext.Provider>
             )}
 
             {/* Cuánto de la relación se ve. Sin esto una sub-tabla paginada