@byline/admin 6.2.1 → 6.4.0

package/src/presentation/tab-dom-ids.test.tsx

@@ -0,0 +1,153 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+import { act } from 'react'
+
+import type { AdminResourceConfig, Field } from '@byline/core'
+import { defineAdminConfig } from '@byline/core'
+import { adminTranslations } from '@byline/i18n/admin'
+import { I18nProvider } from '@byline/i18n/react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+
+import { BylineFieldServicesProvider } from '../fields/field-services-context'
+import { FormProvider } from '../forms/form-context'
+import { FormLayout } from '../forms/form-layout'
+
+// Deliberately not the `;(globalThis as any)` idiom used elsewhere in this
+// suite: Biome's import sorting can move an import across that leading
+// semicolon, and without semicolons the result parses as a call on the import.
+const globalWithAct = globalThis as any
+globalWithAct.IS_REACT_ACT_ENVIRONMENT = true
+
+defineAdminConfig({
+  i18n: {
+    admin: { defaultLocale: 'en', locales: ['en'] },
+    content: { defaultLocale: 'en', locales: ['en'] },
+  },
+  collections: [
+    {
+      path: 'pages',
+      labels: { singular: 'Page', plural: 'Pages' },
+      fields: [{ name: 'title', label: 'Title', type: 'text' }],
+    },
+  ],
+  slugifier: (value: string) => value.toLowerCase().trim().replace(/\s+/g, '-'),
+})
+
+const fields: Field[] = [
+  { name: 'title', label: 'Title', type: 'text' },
+  { name: 'seoTitle', label: 'SEO title', type: 'text' },
+]
+
+/**
+ * Both forms declare a tab set under the same name, which is the ordinary case:
+ * two forms over one collection share its admin configuration verbatim.
+ */
+const adminConfig = {
+  layout: { main: ['main'] },
+  tabSets: [
+    {
+      name: 'main',
+      tabs: [
+        { name: 'general', label: 'General', fields: ['title'] },
+        { name: 'seo', label: 'SEO', fields: ['seoTitle'] },
+      ],
+    },
+  ],
+} as unknown as AdminResourceConfig
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => {
+    root.unmount()
+  })
+  container.remove()
+})
+
+const Form = ({ name }: { name: string }) => (
+  <form aria-label={name}>
+    <FormProvider initialData={{ fields: {} }} collectionPath="pages">
+      <FormLayout
+        fields={fields}
+        adminConfig={adminConfig}
+        activeTabBySet={{ main: 'general' }}
+        onTabChange={() => {}}
+      />
+    </FormProvider>
+  </form>
+)
+
+const renderTwoForms = () => {
+  act(() => {
+    root.render(
+      <I18nProvider
+        bundle={adminTranslations({ locales: ['en'] })}
+        activeLocale="en"
+        defaultLocale="en"
+        localeDefinitions={[{ code: 'en', nativeName: 'English' }]}
+      >
+        <BylineFieldServicesProvider
+          services={
+            {
+              getCollectionDocuments: async () => ({ docs: [], total: 0 }),
+              uploadField: async () => ({}),
+            } as any
+          }
+        >
+          <Form name="parent" />
+          <Form name="child" />
+        </BylineFieldServicesProvider>
+      </I18nProvider>
+    )
+  })
+}
+
+describe('tab DOM ids across concurrently mounted forms', () => {
+  it('keeps tab trigger ids distinct across two forms with a "main" tab set', () => {
+    renderTwoForms()
+
+    const triggers = Array.from(container.querySelectorAll('[role="tab"]')).map((n) => n.id)
+
+    expect(triggers.length).toBeGreaterThan(0)
+    expect(triggers.every((id) => id !== '')).toBe(true)
+    expect(new Set(triggers).size).toBe(triggers.length)
+  })
+
+  it('labels each tab panel from a trigger in its own form', () => {
+    renderTwoForms()
+
+    const panels = Array.from(container.querySelectorAll('[role="tabpanel"]'))
+    expect(panels).toHaveLength(2)
+
+    for (const panel of panels) {
+      const owner = document.getElementById(panel.getAttribute('aria-labelledby') as string)
+      expect(owner).not.toBeNull()
+      // Resolution is document-wide, so an unscoped id points the second form's
+      // panel at the first form's trigger.
+      expect(owner?.closest('form')).toBe(panel.closest('form'))
+    }
+  })
+
+  it('keeps panel ids distinct so aria-controls cannot cross forms', () => {
+    renderTwoForms()
+
+    const panelIds = Array.from(container.querySelectorAll('[role="tabpanel"]')).map((n) => n.id)
+
+    expect(panelIds.every((id) => id !== '')).toBe(true)
+    expect(new Set(panelIds).size).toBe(panelIds.length)
+  })
+})

package/src/presentation/tabs.test.tsx

@@ -51,7 +51,7 @@ import { AdminTabs } from './tabs'
  * report overflow. Drive the two widths the component reads off its stable
  * override handles.
  */
-const layout = { container: 0, row: 0 }
+const layout = { container: 0, row: 0, rowReads: 0 }
 
 function installPointerStubs() {
   // jsdom implements neither pointer capture nor scrollTo; the component guards
@@ -96,7 +96,11 @@ function installLayoutStubs() {
   Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
     configurable: true,
     get(this: HTMLElement) {
-      return this.classList.contains('byline-admin-tablist') ? layout.row : 0
+      if (!this.classList.contains('byline-admin-tablist')) return 0
+      // Counted, not just answered: in a browser this getter is what forces
+      // the synchronous layout, so the count is the cost under test.
+      layout.rowReads += 1
+      return layout.row
     },
   })
 }
@@ -135,6 +139,7 @@ describe('AdminTabs', () => {
     observed.length = 0
     layout.container = 1000
     layout.row = 400
+    layout.rowReads = 0
     onChange = vi.fn()
     container = document.createElement('div')
     document.body.appendChild(container)
@@ -367,6 +372,48 @@ describe('AdminTabs', () => {
     expect(observedClasses.some((c) => c.includes('byline-admin-tabs '))).toBe(true)
   })
 
+  /**
+   * The tab array arrives with a fresh identity on every render of the form
+   * layout: `useFormTabs.resolve()` filters `set.tabs` each time it is called,
+   * and the live form data it filters against updates per keystroke. Keying the
+   * measurement effect on that identity made every unrelated render tear down
+   * the ResizeObserver and force a synchronous layout read — measured in Chrome
+   * against a seeded `pages` document as one forced read per keystroke, and two
+   * on an editor mount.
+   */
+  it('does not re-measure when the parent re-renders with an equal tab array', () => {
+    render()
+    const readsAfterMount = layout.rowReads
+    const observedAfterMount = observed.length
+
+    render({ tabs: TABS.map((tab) => ({ ...tab })) })
+
+    expect(layout.rowReads).toBe(readsAfterMount)
+    expect(observed.length).toBe(observedAfterMount)
+  })
+
+  it('re-measures when a tab is added or removed', () => {
+    render()
+    const readsAfterMount = layout.rowReads
+
+    render({ tabs: [...TABS, { name: 'indexing', label: 'Indexing' }] })
+
+    expect(layout.rowReads).toBeGreaterThan(readsAfterMount)
+  })
+
+  /**
+   * A label carries the width, so a translation change has to re-measure even
+   * though the tab names are untouched.
+   */
+  it('re-measures when a label changes', () => {
+    render()
+    const readsAfterMount = layout.rowReads
+
+    render({ tabs: TABS.map((tab, i) => (i === 0 ? { ...tab, label: 'Détails' } : tab)) })
+
+    expect(layout.rowReads).toBeGreaterThan(readsAfterMount)
+  })
+
   // ─── Drag-to-scroll (desktop) ─────────────────────────────────────────
 
   const viewport = () =>

package/src/presentation/tabs.tsx

@@ -124,6 +124,16 @@ export const AdminTabs = ({
 
   const [strip, setStrip] = useState<StripState>(INITIAL_STRIP_STATE)
 
+  // The measurement effect is keyed on what the tabs *are*, not on the identity
+  // of the array carrying them. A form layout rebuilds that array on every
+  // render — `useFormTabs.resolve()` filters `set.tabs` against live form data,
+  // so a new array arrives per keystroke — and re-running the effect for one of
+  // those renders would disconnect the observer and force a synchronous layout
+  // read on a tree the browser has just invalidated. Labels are part of the key
+  // because the label is what carries the width: a translation change has to
+  // re-measure, a keystroke elsewhere in the form does not.
+  const tabsKey = tabs.map((tab) => `${tab.name}:${tab.label}`).join('\u0000')
+
   const measure = useCallback(() => {
     const container = containerRef.current
     const row = rowRef.current
@@ -162,7 +172,7 @@ export const AdminTabs = ({
     observer.observe(container)
     observer.observe(row)
     return () => observer.disconnect()
-  }, [measure, tabs])
+  }, [measure, tabsKey])
 
   const reveal = useCallback((name: string) => {
     const viewport = viewportRef.current

package/src/react.ts

@@ -81,10 +81,12 @@ export * from './widgets/status-badge/status-badge.js'
 // Field-side service contract types.
 export type {
   BylineFieldServices,
+  CanCreateInCollectionFn,
   CollectionListDoc,
   CollectionListParams,
   CollectionListResponse,
   GetCollectionDocumentsFn,
+  GetCreateDocumentUrlFn,
   GetTreeAncestorsFn,
   GetTreeParentFn,
   PlaceTreeNodeFn,