@asteby/metacore-runtime-react 23.11.0 → 23.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 23.11.2
+
+### Patch Changes
+
+- 990bb63: DynamicForm oculta los campos readonly (estado de conexión, valores escritos por sync): el servidor los posee, el form no los captura ni los envía en el submit.
+
+## 23.11.1
+
+### Patch Changes
+
+- 6e3cf4f: DynamicTable: el sentinel de infinite scroll se detiene cuando el backend devuelve una página corta/vacía, aunque meta.total reporte más filas de las que la lista entrega (drift count vs list). Elimina el skeleton accent parpadeando bajo las filas.
+
 ## 23.11.0
 
 ### Minor Changes

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAKhB,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,+BAoFlB"}
+{"version":3,"file":"dynamic-form.d.ts","sourceRoot":"","sources":["../src/dynamic-form.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EACH,cAAc,EACd,aAAa,EAKhB,MAAM,uBAAuB,CAAA;AAO9B,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,cAAc,EAAE,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EACxB,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,WAAuB,EACvB,WAAwB,EACxB,QAAgB,GACnB,EAAE,gBAAgB,+BA8FlB"}

package/dist/dynamic-form.js

@@ -19,22 +19,28 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
     const [values, setValues] = useState({});
     const [errors, setErrors] = useState({});
     const [submitting, setSubmitting] = useState(false);
-    const schema = useMemo(() => buildZodSchema(fields), [fields]);
+    // Readonly fields are system-owned (connection state, sync-written values):
+    // the server writes them, so the form never captures them — hidden outright
+    // instead of rendered disabled, matching the metadata contract
+    // (ColumnDef.Readonly). They are also excluded from defaults/submit so a
+    // create never posts e.g. `status: ""` over the column default.
+    const editableFields = useMemo(() => fields.filter((f) => !f.readonly), [fields]);
+    const schema = useMemo(() => buildZodSchema(editableFields), [editableFields]);
     // Line-items fields carrying a balance rule gate submit: an unbalanced entry
     // (Σdebit ≠ Σcredit, or all-zero when require_nonzero) can't be saved. This
     // is fully declarative — `evaluateBalance` returns undefined for fields with
     // no rule, so non-balanced forms are unaffected.
     const balanceBlocked = useMemo(() => {
-        for (const f of fields) {
+        for (const f of editableFields) {
             const state = evaluateBalance(f, values[f.key]);
             if (state && !state.balanced)
                 return true;
         }
         return false;
-    }, [fields, values]);
+    }, [editableFields, values]);
     useEffect(() => {
         const defaults = {};
-        for (const f of fields) {
+        for (const f of editableFields) {
             if (isLineItemsField(f)) {
                 defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? [];
                 continue;
@@ -43,7 +49,7 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
         }
         setValues(defaults);
         setErrors({});
-    }, [fields, initialValues]);
+    }, [editableFields, initialValues]);
     const update = (k, v) => setValues((prev) => ({ ...prev, [k]: v }));
     const handleSubmit = async (e) => {
         e.preventDefault();
@@ -73,7 +79,7 @@ export function DynamicForm({ fields, initialValues, onSubmit, onCancel, submitL
     // line-items grids (and textareas) span the full width so the row table /
     // memo gets room. Mirrors the pro look of the federated journal modal but
     // stays fully declarative — driven only by field shape.
-    return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [_jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: fields.map((field) => (_jsx(FieldRow, { field: field, value: values[field.key], onChange: (v) => update(field.key, v), values: values, error: errors[field.key], initialValues: initialValues }, field.key))) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })] })] }));
+    return (_jsxs("form", { onSubmit: handleSubmit, className: "grid gap-4", children: [_jsx("div", { className: "grid gap-4 sm:grid-cols-2", children: editableFields.map((field) => (_jsx(FieldRow, { field: field, value: values[field.key], onChange: (v) => update(field.key, v), values: values, error: errors[field.key], initialValues: initialValues }, field.key))) }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: submitting || disabled, children: cancelLabel })), _jsx(Button, { type: "submit", disabled: submitting || disabled || balanceBlocked, children: submitLabel })] })] }));
 }
 // One form field row: label + renderer + inline error. Encapsulated as its own
 // component so a STATIC enum select whose options are all gated out by a sibling

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

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BA8iCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAujCnB"}

package/dist/dynamic-table.js

@@ -50,6 +50,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false);
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false);
     const infPageRef = useRef(1);
     const [optionsMap, setOptionsMap] = useState(new Map());
     const [exportOpen, setExportOpen] = useState(false);
@@ -467,6 +471,11 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 setData((prev) => (append ? dedupeById(prev, rows) : rows));
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // A short page means the backend has no more rows, even if
+                // meta.total disagrees with the visible count (count query
+                // vs list query drift, dedupe). Without this the sentinel
+                // re-fires forever on empty pages.
+                setInfExhausted(rows.length < infPageSize);
             }
         }
         catch (error) {
@@ -483,19 +492,19 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // the filters/search AND the sort (both live in buildFilterParams).
     const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData)
+        if (loadingMore || loadingData || infExhausted)
             return;
         if (data.length >= rowCount)
             return;
         infPageRef.current += 1;
         void fetchPage(infPageRef.current, true);
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage]);
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage]);
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
     // `hidden`/`sm:hidden` container has no box, so its observer never fires.
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
-    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || data.length >= rowCount;
+    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount;
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const initialFetchDone = useRef(false);

package/package.json

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

package/src/dynamic-form.tsx

@@ -58,23 +58,33 @@ export function DynamicForm({
     const [errors, setErrors] = useState<Record<string, string>>({})
     const [submitting, setSubmitting] = useState(false)
 
-    const schema = useMemo(() => buildZodSchema(fields), [fields])
+    // Readonly fields are system-owned (connection state, sync-written values):
+    // the server writes them, so the form never captures them — hidden outright
+    // instead of rendered disabled, matching the metadata contract
+    // (ColumnDef.Readonly). They are also excluded from defaults/submit so a
+    // create never posts e.g. `status: ""` over the column default.
+    const editableFields = useMemo(
+        () => fields.filter((f) => !(f as { readonly?: boolean }).readonly),
+        [fields],
+    )
+
+    const schema = useMemo(() => buildZodSchema(editableFields), [editableFields])
 
     // Line-items fields carrying a balance rule gate submit: an unbalanced entry
     // (Σdebit ≠ Σcredit, or all-zero when require_nonzero) can't be saved. This
     // is fully declarative — `evaluateBalance` returns undefined for fields with
     // no rule, so non-balanced forms are unaffected.
     const balanceBlocked = useMemo(() => {
-        for (const f of fields) {
+        for (const f of editableFields) {
             const state = evaluateBalance(f, values[f.key])
             if (state && !state.balanced) return true
         }
         return false
-    }, [fields, values])
+    }, [editableFields, values])
 
     useEffect(() => {
         const defaults: Record<string, any> = {}
-        for (const f of fields) {
+        for (const f of editableFields) {
             if (isLineItemsField(f)) {
                 defaults[f.key] = initialValues?.[f.key] ?? f.defaultValue ?? []
                 continue
@@ -83,7 +93,7 @@ export function DynamicForm({
         }
         setValues(defaults)
         setErrors({})
-    }, [fields, initialValues])
+    }, [editableFields, initialValues])
 
     const update = (k: string, v: any) =>
         setValues((prev: Record<string, any>) => ({ ...prev, [k]: v }))
@@ -113,7 +123,7 @@ export function DynamicForm({
     return (
         <form onSubmit={handleSubmit} className="grid gap-4">
             <div className="grid gap-4 sm:grid-cols-2">
-                {fields.map((field) => (
+                {editableFields.map((field) => (
                     <FieldRow
                         key={field.key}
                         field={field}

package/src/dynamic-table.tsx

@@ -157,6 +157,10 @@ export function DynamicTable({
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false)
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -546,6 +550,11 @@ export function DynamicTable({
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
                     if (res.data.meta) setRowCount(res.data.meta.total)
+                    // A short page means the backend has no more rows, even if
+                    // meta.total disagrees with the visible count (count query
+                    // vs list query drift, dedupe). Without this the sentinel
+                    // re-fires forever on empty pages.
+                    setInfExhausted(rows.length < infPageSize)
                 }
             } catch (error) {
                 console.error('Error al cargar los datos', error)
@@ -565,11 +574,11 @@ export function DynamicTable({
     )
 
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData) return
+        if (loadingMore || loadingData || infExhausted) return
         if (data.length >= rowCount) return
         infPageRef.current += 1
         void fetchPage(infPageRef.current, true)
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage])
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage])
 
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
@@ -577,7 +586,7 @@ export function DynamicTable({
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
     const infScrollDisabled =
-        !infiniteScroll || loadingMore || loadingData || data.length >= rowCount
+        !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } =
         useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled })
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } =