@asteby/metacore-runtime-react 49.3.0 → 49.3.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 49.3.1
+
+### Patch Changes
+
+- 6e6d443: `DocumentFormDialog` reinicia tipo y paso al abrirse durante el render, no en un efecto: el primer frame ya es el DocumentEditor del tipo pedido. Antes, si el host lo dejaba montado mientras cambiaban sus formularios (misma ruta para otra vista) o el `initialType`, al abrir se pintaba un instante el wizard «Nuevo documento» o el editor del tipo anterior (QA Pitsline r6, Nota de crédito).
+
 ## 49.3.0
 
 ### Minor Changes

package/dist/document-form-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"document-form-dialog.d.ts","sourceRoot":"","sources":["../src/document-form-dialog.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,KAAK,sBAAsB,EAE9B,MAAM,8BAA8B,CAAA;AAerC,OAAO,KAAK,EAER,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EAChB,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,uBAAuB;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;IAC5B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;IACjD,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,gFAAgF;IAChF,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;CACvD;AAED,2EAA2E;AAC3E,MAAM,WAAW,eAAe;IAC5B,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,gBAAgB,CAAA;CACzB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,eAAe,GAAG,SAAS,CAIrG;AAED,8EAA8E;AAC9E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,qBAAqB,GAAG,SAAS,CAKjH;AAED,uFAAuF;AACvF,wBAAgB,oBAAoB,CAChC,QAAQ,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAI,EACvD,QAAQ,CAAC,EAAE,qBAAqB,GAAG,IAAI,GACxC,qBAAqB,GAAG,SAAS,CAGnC;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACtC,KAAK,EAAE,qBAAqB,GAAG,SAAS,EACxC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GACxC;IAAE,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAQnE;AAID,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,MAAM,EACN,aAAa,EACb,gBAAgB,GACnB,EAAE,uBAAuB,sCAiVzB"}
+{"version":3,"file":"document-form-dialog.d.ts","sourceRoot":"","sources":["../src/document-form-dialog.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAEH,KAAK,sBAAsB,EAE9B,MAAM,8BAA8B,CAAA;AAerC,OAAO,KAAK,EAER,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EAChB,MAAM,SAAS,CAAA;AAEhB,MAAM,WAAW,uBAAuB;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,oDAAoD;IACpD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,qBAAqB,CAAA;IAC5B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,sBAAsB,CAAC,QAAQ,CAAC,CAAA;IACjD,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0GAA0G;IAC1G,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,gFAAgF;IAChF,aAAa,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;CACvD;AAED,2EAA2E;AAC3E,MAAM,WAAW,eAAe;IAC5B,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,gBAAgB,CAAA;CACzB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,eAAe,GAAG,SAAS,CAIrG;AAED,8EAA8E;AAC9E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,qBAAqB,GAAG,SAAS,GAAG,qBAAqB,GAAG,SAAS,CAKjH;AAED,uFAAuF;AACvF,wBAAgB,oBAAoB,CAChC,QAAQ,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAI,EACvD,QAAQ,CAAC,EAAE,qBAAqB,GAAG,IAAI,GACxC,qBAAqB,GAAG,SAAS,CAGnC;AAED;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CACtC,KAAK,EAAE,qBAAqB,GAAG,SAAS,EACxC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GACxC;IAAE,KAAK,EAAE,qBAAqB,GAAG,SAAS,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAQnE;AAID,wBAAgB,kBAAkB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,cAAc,EACd,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,MAAM,EACN,aAAa,EACb,gBAAgB,GACnB,EAAE,uBAAuB,sCA0VzB"}

package/dist/document-form-dialog.js

@@ -111,18 +111,26 @@ export function DocumentFormDialog({ open, onOpenChange, model, endpoint, forms,
         ? withDefaultTaxRate(searchProducts, taxRate)
         : createCatalogProductSearch(api, { model: productModel, defaultTaxRate: taxRate }), [searchProducts, api, productModel, taxRate]);
     const lineCfg = type ? editorLinesConfig(type, forms) : undefined;
-    // Reset every time the dialog (re)opens.
-    useEffect(() => {
-        if (!open)
-            return;
-        const start = initialType ?? single?.key ?? null;
-        setTypeKey(start);
-        setStep(start ? 'fields' : 'type');
-        setLines([]);
-        setFieldErrors({});
-        setServerLineErrors({});
-        setFormError(undefined);
-    }, [open, initialType, single?.key]);
+    // Reset every time the dialog (re)opens — DURING render, not in an effect.
+    // The host keeps this dialog mounted while closed (and across views whose
+    // forms change, e.g. the same /m/$model route going Facturas → Notas de
+    // crédito); an effect reset ran after the first open frame was already
+    // painted with the previous type/step, so the wizard (or the previous
+    // type's editor) flashed before the right DocumentEditor (QA Pitsline r6).
+    const openKey = open ? `${initialType ?? ''}\u0000${single?.key ?? ''}` : null;
+    const [resetFor, setResetFor] = useState(null);
+    if (openKey !== resetFor) {
+        setResetFor(openKey);
+        if (openKey !== null) {
+            const start = initialType ?? single?.key ?? null;
+            setTypeKey(start);
+            setStep(start ? 'fields' : 'type');
+            setLines([]);
+            setFieldErrors({});
+            setServerLineErrors({});
+            setFormError(undefined);
+        }
+    }
     // Seed field defaults for the chosen type.
     useEffect(() => {
         if (!type)

package/package.json

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

package/src/__tests__/document-form-dialog.no-stale-flash.test.tsx

@@ -0,0 +1,169 @@
+// @vitest-environment happy-dom
+// QA Pitsline r6: «al abrir una Nota de crédito se ve un instante el modal viejo»
+// antes del DocumentEditor. El host reutiliza el diálogo montado (misma ruta
+// /m/$model para Facturas → Notas de crédito, o formularios que cambian de la
+// caché a la metadata viva mientras está cerrado) y el primer render al abrir
+// pintaba el wizard con el tipo de la apertura anterior: el reinicio vivía en un
+// efecto, que corre DESPUÉS de que ese frame ya se pintó.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render } from '@testing-library/react'
+
+vi.mock('@tanstack/react-router', () => ({ useNavigate: () => () => {} }))
+vi.mock('react-i18next', () => {
+    const i18n = { language: 'es' }
+    const t = (k: string, o?: { defaultValue?: string }) => o?.defaultValue ?? k
+    const value = { t, i18n }
+    return { useTranslation: () => value }
+})
+// Dialog sin portal ni Presence: cada commit de React llega tal cual al DOM. Con
+// el portal de Radix el primer commit al abrir queda vacío y, en act(), el efecto
+// de reinicio alcanza a correr antes del siguiente; en el navegador ese reinicio
+// va en otra prioridad y el frame intermedio sí se pinta.
+vi.mock('@asteby/metacore-ui/primitives', async (importOriginal) => {
+    const actual = await importOriginal<Record<string, unknown>>()
+    const React = await import('react')
+    return {
+        ...actual,
+        Dialog: ({ open, children }: { open?: boolean; children?: React.ReactNode }) =>
+            open ? React.createElement(React.Fragment, null, children) : null,
+        DialogContent: ({ children, ...rest }: Record<string, unknown> & { children?: React.ReactNode }) => {
+            const attrs: Record<string, unknown> = {}
+            for (const [k, v] of Object.entries(rest)) if (k.startsWith('data-')) attrs[k] = v
+            return React.createElement('div', { role: 'dialog', ...attrs }, children)
+        },
+        DialogHeader: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
+        DialogFooter: ({ children }: { children?: React.ReactNode }) => React.createElement('div', null, children),
+        DialogTitle: ({ children }: { children?: React.ReactNode }) => React.createElement('h2', null, children),
+        DialogDescription: ({ children }: { children?: React.ReactNode }) => React.createElement('p', null, children),
+    }
+})
+
+import { DocumentFormDialog } from '../document-form-dialog'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { DocumentFormsManifest } from '../types'
+
+afterEach(cleanup)
+
+const client = {
+    get: vi.fn().mockResolvedValue({ data: { data: [] } }),
+    post: vi.fn(),
+    put: vi.fn(),
+    delete: vi.fn(),
+} as unknown as ApiClient
+
+// Formularios genéricos con layout editor (cualquier document_form, no sólo fiscal).
+const formsA: DocumentFormsManifest = {
+    types: [
+        {
+            key: 'doc_a',
+            label: 'Documento A',
+            layout: 'editor',
+            fields: [{ key: 'party', label: 'Contraparte', type: 'text' }],
+        },
+    ],
+}
+const formsB: DocumentFormsManifest = {
+    types: [
+        {
+            key: 'doc_b',
+            label: 'Documento B',
+            layout: 'editor',
+            submit_action: 'create_doc_b',
+            fields: [{ key: 'origin', label: 'Origen', type: 'text' }],
+        },
+    ],
+}
+const formsAB: DocumentFormsManifest = { types: [...formsA.types, ...formsB.types] }
+
+/** Registra si el wizard llegó a montarse en el DOM, aunque sea un frame. */
+function watchLegacyDialog(forbiddenText?: string) {
+    let seen = false
+    let sawText = false
+    const hasText = (v: string | null | undefined) => !!forbiddenText && !!v && v.includes(forbiddenText)
+    const hit = (n: Node) =>
+        n instanceof Element &&
+        (n.matches('[data-slot="document-form-dialog"]') || !!n.querySelector('[data-slot="document-form-dialog"]'))
+    const check = () => {
+        if (document.querySelector('[data-slot="document-form-dialog"]')) seen = true
+    }
+    // React reutiliza el mismo nodo del Dialog entre ramas y sólo cambia
+    // `data-slot`: se mira también el valor anterior del atributo.
+    const scan = (records: MutationRecord[]) => {
+        for (const r of records) {
+            if (r.type === 'attributes' && r.oldValue === 'document-form-dialog') seen = true
+            if (r.type === 'characterData' && hasText(r.oldValue)) sawText = true
+            r.addedNodes.forEach((n) => {
+                if (hit(n)) seen = true
+                if (hasText(n.textContent)) sawText = true
+            })
+        }
+    }
+    const obs = new MutationObserver(scan)
+    obs.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeOldValue: true,
+        attributeFilter: ['data-slot'],
+        characterData: true,
+        characterDataOldValue: true,
+    })
+    return {
+        check,
+        seen: () => {
+            scan(obs.takeRecords())
+            obs.disconnect()
+            return seen
+        },
+        sawText: () => sawText,
+    }
+}
+
+function dialog(props: { open: boolean; forms: DocumentFormsManifest; initialType?: string }) {
+    return (
+        <ApiProvider client={client}>
+            <DocumentFormDialog
+                open={props.open}
+                onOpenChange={() => {}}
+                model="docs"
+                endpoint="/data/docs/me"
+                forms={props.forms}
+                initialType={props.initialType}
+            />
+        </ApiProvider>
+    )
+}
+
+describe('DocumentFormDialog no pinta el wizard antes del DocumentEditor', () => {
+    it('reutilizado con otros formularios (otra vista del mismo host): abre directo el editor', () => {
+        const { rerender } = render(dialog({ open: false, forms: formsA }))
+        rerender(dialog({ open: false, forms: formsB }))
+        const watch = watchLegacyDialog()
+        rerender(dialog({ open: true, forms: formsB, initialType: 'doc_b' }))
+        watch.check()
+        expect(watch.seen()).toBe(false)
+        expect(document.querySelector('[data-slot="document-editor"]')).toBeTruthy()
+    })
+
+    it('«Crear» sin tipo inicial en la vista nueva: tampoco hay frame del wizard', () => {
+        const { rerender } = render(dialog({ open: false, forms: formsA }))
+        rerender(dialog({ open: false, forms: formsB }))
+        const watch = watchLegacyDialog()
+        rerender(dialog({ open: true, forms: formsB }))
+        watch.check()
+        expect(watch.seen()).toBe(false)
+        expect(document.querySelector('[data-slot="document-editor"]')).toBeTruthy()
+    })
+
+    it('reabierto con otro initialType: el primer frame ya es el editor del tipo pedido', () => {
+        const { rerender } = render(dialog({ open: true, forms: formsAB, initialType: 'doc_a' }))
+        rerender(dialog({ open: false, forms: formsAB, initialType: 'doc_a' }))
+        const watch = watchLegacyDialog('Documento A')
+        rerender(dialog({ open: true, forms: formsAB, initialType: 'doc_b' }))
+        watch.check()
+        expect(watch.seen()).toBe(false)
+        // Ni un frame del editor del tipo de la apertura anterior.
+        expect(watch.sawText()).toBe(false)
+        expect(document.querySelector('[data-slot="document-editor"]')).toBeTruthy()
+    })
+})

package/src/document-form-dialog.tsx

@@ -211,17 +211,26 @@ export function DocumentFormDialog({
     )
     const lineCfg = type ? editorLinesConfig(type, forms) : undefined
 
-    // Reset every time the dialog (re)opens.
-    useEffect(() => {
-        if (!open) return
-        const start = initialType ?? single?.key ?? null
-        setTypeKey(start)
-        setStep(start ? 'fields' : 'type')
-        setLines([])
-        setFieldErrors({})
-        setServerLineErrors({})
-        setFormError(undefined)
-    }, [open, initialType, single?.key])
+    // Reset every time the dialog (re)opens — DURING render, not in an effect.
+    // The host keeps this dialog mounted while closed (and across views whose
+    // forms change, e.g. the same /m/$model route going Facturas → Notas de
+    // crédito); an effect reset ran after the first open frame was already
+    // painted with the previous type/step, so the wizard (or the previous
+    // type's editor) flashed before the right DocumentEditor (QA Pitsline r6).
+    const openKey = open ? `${initialType ?? ''}\u0000${single?.key ?? ''}` : null
+    const [resetFor, setResetFor] = useState<string | null>(null)
+    if (openKey !== resetFor) {
+        setResetFor(openKey)
+        if (openKey !== null) {
+            const start = initialType ?? single?.key ?? null
+            setTypeKey(start)
+            setStep(start ? 'fields' : 'type')
+            setLines([])
+            setFieldErrors({})
+            setServerLineErrors({})
+            setFormError(undefined)
+        }
+    }
 
     // Seed field defaults for the chosen type.
     useEffect(() => {