@estiva-app/ui 0.65.0 → 0.65.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.0",
+  "version": "0.65.2",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.65.0",
+    "packageVersion": "0.65.2",
     "exports": 140,
     "typeExports": 145,
     "files": null
@@ -1248,6 +1248,12 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "pending",
+          "takes": "true/false",
+          "required": false,
+          "note": "Opened, and its rows are not in yet: the title says open — the arrow turned, `aria-expanded`, `aria-busy` — and the panel stays shut until this is false, then slides open once, rows and all."
+        },
         {
           "name": "storageKey",
           "takes": "text",
@@ -4378,6 +4384,12 @@
           "required": false,
           "note": "Its rows are being read: a skeleton in their place."
         },
+        {
+          "name": "pending",
+          "takes": "true/false",
+          "required": false,
+          "note": "Opened, and its rows are being read: the arrow turns and the group stays shut until they are in, then opens once — `CollapsibleSection`'s."
+        },
         {
           "name": "storageKey",
           "takes": "text",

package/src/BlockNodes.test.tsx

@@ -477,3 +477,99 @@ describe('what it draws', () => {
     expect(container.querySelector('h1')?.getAttribute('data-block-id')).toBe('h1')
   })
 })
+
+describe('Tab on a list item — MAN-13', () => {
+  /** A key as a person presses it: through the editor's own key handling, not a command. */
+  const press = (key: string, shiftKey = false) =>
+    editor!.view.someProp('handleKeyDown', (f) => f(editor!.view, new KeyboardEvent('keydown', { key, shiftKey })))
+  const LIST = {
+    type: 'doc',
+    content: [
+      {
+        type: 'bulletList',
+        attrs: { blockId: 'l1' },
+        content: [
+          { type: 'listItem', attrs: { blockId: 'i1' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'intro' }] }] },
+          { type: 'listItem', attrs: { blockId: 'i2' }, content: [{ type: 'paragraph', content: [{ type: 'text', text: 'after' }] }] },
+        ],
+      },
+    ],
+  }
+  /** The end of "after": 1 opens the list, 2 the first item, 3 its paragraph, then "intro", two closes, two opens. */
+  const END_OF_AFTER = 1 + 1 + 1 + 5 + 2 + 2 + 5
+
+  it('puts the item in a list inside the one above, keeping its id, and gives that list none', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    expect(press('Tab')).toBe(true)
+    const list = (editor.getJSON() as Json).content![0]
+    expect(list.content!.map((n) => n.attrs?.blockId)).toEqual(['i1'])
+    const inner = list.content![0].content![1]
+    expect(inner.type).toBe('bulletList')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+    expect(inner.content![0].attrs?.blockId).toBe('i2')
+    expect(JSON.stringify(inner)).toContain('after')
+  })
+
+  it('names an item made by Enter inside the inner list, so a save does not re-mint it each time', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Tab')
+    press('Enter')
+    editor.commands.insertContent('third')
+    const inner = (editor.getJSON() as Json).content![0].content![0].content![1]
+    const ids = inner.content!.map((n) => n.attrs?.blockId)
+    expect(ids[0]).toBe('i2')
+    expect(typeof ids[1]).toBe('string')
+    expect(ids[1]).not.toBe('i2')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+  })
+
+  it('names an item in an inner list that arrives without an id, as it does one in the outer list', async () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', content: [{ ...second, attrs: {} }] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    // The editor's `create` comes a tick after it mounts.
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    const inner = (editor.getJSON() as Json).content![0].content![0].content![1]
+    expect(typeof inner.content![0].attrs?.blockId).toBe('string')
+    expect(inner.attrs?.blockId ?? null).toBeNull()
+  })
+
+  it('brings it back out with Shift+Tab, id and text kept', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: LIST })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Tab')
+    press('Tab', true)
+    const list = (editor.getJSON() as Json).content![0]
+    expect(list.content!.map((n) => n.attrs?.blockId)).toEqual(['i1', 'i2'])
+    expect(list.content![0].content).toHaveLength(1)
+  })
+
+  it('clears an id an inner list arrives with, since the save writes no block for it', () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', attrs: { blockId: 'stray' }, content: [second] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    // Any change that brings in a block runs the check; Enter at the end of "after" is one.
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Enter')
+    expect(JSON.stringify(editor.getJSON())).not.toContain('stray')
+  })
+
+  it('never lets an inner list keep a real block\'s id: the block keeps it', () => {
+    const nested = structuredClone(LIST)
+    const [first, second] = nested.content[0].content
+    ;(first.content as unknown[]).push({ type: 'bulletList', attrs: { blockId: 'i1' }, content: [second] })
+    nested.content[0].content = [first]
+    editor = new Editor({ extensions: EXTENSIONS, content: nested })
+    editor.commands.setTextSelection(END_OF_AFTER)
+    press('Enter')
+    const item = (editor.getJSON() as Json).content![0].content![0]
+    expect(item.attrs?.blockId).toBe('i1')
+    expect(item.content![1].attrs?.blockId ?? null).toBeNull()
+  })
+})

package/src/BlockNodes.tsx

@@ -72,9 +72,12 @@ interface Claim {
 /** Every block that claims an id, by id, in document order. */
 function claimsIn(doc: ProseMirrorNode): Map<string, Claim[]> {
   const claims = new Map<string, Claim[]>()
-  doc.descendants((node, pos) => {
+  doc.descendants((node, pos, parent) => {
     const fixed = node.type.name === 'unknownBlock'
     if (!fixed && !BLOCK_TYPE_SET.has(node.type.name)) return
+    // A list inside a list item is no block (MAN-13): an id it arrived with is
+    // cleared, never a claim that could take a real block's.
+    if (parent?.type.name === 'listItem' && LISTS.has(node.type.name)) return
     const id = node.attrs.blockId
     if (typeof id !== 'string' || id === '') return
     const copies = claims.get(id)
@@ -151,6 +154,22 @@ const BLOCK_CONTAINERS = new Set(['bulletList', 'orderedList', 'table', 'tableRo
 /** The wrappers the save flattens: their paragraphs become inline runs of theirs. */
 const FLATTENED = new Set(['listItem', 'blockquote'])
 
+/**
+ * The lists Tab puts inside a list item (MAN-13). §13.3 keeps a list flat and
+ * marks an item's depth, so the save walks into such a list for its items and
+ * writes no block for the list itself: its items get ids, it gets none.
+ */
+const LISTS = new Set(['bulletList', 'orderedList'])
+
+/** The lists inside a list item, with where each starts. */
+function innerLists(item: ProseMirrorNode, pos: number): { pos: number; node: ProseMirrorNode }[] {
+  const out: { pos: number; node: ProseMirrorNode }[] = []
+  item.forEach((child, offset) => {
+    if (LISTS.has(child.type.name)) out.push({ pos: pos + 1 + offset, node: child })
+  })
+  return out
+}
+
 const idOf = (node: ProseMirrorNode): string | undefined => {
   const id = node.attrs.blockId
   return typeof id === 'string' && id !== '' ? id : undefined
@@ -163,6 +182,9 @@ function addressedBlocks(doc: ProseMirrorNode): { pos: number; node: ProseMirror
     if (!BLOCK_TYPE_SET.has(node.type.name)) return
     out.push({ pos, node })
     if (BLOCK_CONTAINERS.has(node.type.name)) node.forEach((child, offset) => visit(child, pos + 1 + offset))
+    if (node.type.name === 'listItem') {
+      for (const list of innerLists(node, pos)) list.node.forEach((child, offset) => visit(child, list.pos + 1 + offset))
+    }
   }
   doc.forEach((node, offset) => visit(node, offset))
   return out
@@ -175,13 +197,17 @@ function unnamedBlocks(doc: ProseMirrorNode): number[] {
     .map((b) => b.pos)
 }
 
-/** Where a paragraph inside a list item or a quote claims an id — which the save drops. */
+/**
+ * Where a paragraph inside a list item or a quote claims an id, or a list
+ * inside a list item does — both of which the save drops.
+ */
 function hiddenIds(doc: ProseMirrorNode): number[] {
   const out: number[] = []
   doc.descendants((node, pos) => {
     if (!FLATTENED.has(node.type.name)) return
     node.forEach((child, offset) => {
-      if (child.isTextblock && idOf(child) !== undefined) out.push(pos + 1 + offset)
+      const inner = child.isTextblock || (node.type.name === 'listItem' && LISTS.has(child.type.name))
+      if (inner && idOf(child) !== undefined) out.push(pos + 1 + offset)
     })
   })
   return out

package/src/CollapsibleSection.mdx

@@ -20,6 +20,13 @@ toggle, and the rows under it, sliding shut and open.
   reloads: this browser remembers, under that key. The app prefixes the
   key (`app.sidebar.starred`).
 - `open` + `onOpenChange` when the app owns the state.
+- `pending` when the rows are read as it opens and usually arrive quickly:
+  the title turns open at once (and says `aria-busy`), the panel stays shut
+  until `pending` is false, then opens once with every row. A skeleton that
+  the rows replace would move everything below it twice. Only for rows not
+  yet drawn: on a section already showing its rows, `pending` shuts them
+  until it is false. The tests pin the state (open, busy, rows hidden); the
+  single slide is Chrome's to show, measured in Peek (OPT-11).
 - `actions` for add, sort, filter beside the title — SectionHeader's,
   revealed while the row is hovered or keyboard-focused.
 - `look="row"` when the section is a row among rows — a folder in a

package/src/CollapsibleSection.test.tsx

@@ -81,6 +81,36 @@ describe('CollapsibleSection', () => {
   })
 })
 
+/** Opened before its rows are in (0.65.1, OPT-11): the title says open, the panel waits. */
+describe('CollapsibleSection, pending', () => {
+  it('the title says open and busy while the rows stay shut, then they open', () => {
+    const { rerender } = render(<CollapsibleSection title="Section" open pending>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('true')
+    expect(title().getAttribute('aria-busy')).toBe('true')
+    expect(screen.getByText('Item one').closest('[hidden]')).not.toBeNull()
+    rerender(<CollapsibleSection title="Section" open>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('true')
+    expect(title().getAttribute('aria-busy')).toBeNull()
+    expect(screen.getByText('Item one').closest('[hidden]')).toBeNull()
+  })
+
+  it('a click while pending closes it', async () => {
+    const onOpenChange = vi.fn()
+    render(<CollapsibleSection title="Section" open pending onOpenChange={onOpenChange}>{rows}</CollapsibleSection>)
+    await userEvent.click(title())
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it('a closed section is not busy, and a click opens it', async () => {
+    const onOpenChange = vi.fn()
+    render(<CollapsibleSection title="Section" open={false} pending onOpenChange={onOpenChange}>{rows}</CollapsibleSection>)
+    expect(title().getAttribute('aria-expanded')).toBe('false')
+    expect(title().getAttribute('aria-busy')).toBeNull()
+    await userEvent.click(title())
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+})
+
 /** What it hands its header (0.56.0): the folder's ⋮, the ⋮'s name, and the icon before the title. */
 describe('CollapsibleSection, its header', () => {
   it('passes menu and menuLabel on: the ⋮ is named by menuLabel and opens the menu', async () => {

package/src/CollapsibleSection.tsx

@@ -30,6 +30,15 @@ export interface CollapsibleSectionProps {
   /** The caller owns the state. */
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  /**
+   * Opened, and its rows are not in yet: the title says open — the arrow
+   * turned, `aria-expanded`, `aria-busy` — and the panel stays shut until
+   * this is false, then slides open once, rows and all. A skeleton the rows
+   * then replace moves everything below twice (Peek's Folders, OPT-11). A
+   * click while pending closes it, as on an open section. Not for a re-read:
+   * on a section already showing its rows it shuts them until it is false.
+   */
+  pending?: boolean
   /** Remember open or closed in this browser, under this key. The app prefixes it. */
   storageKey?: string
   /** 16px, before the title; the arrow takes its place on hover — `SectionHeader`'s. */
@@ -85,7 +94,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, pending = false, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -93,9 +102,12 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
     writeStored(storageKey, next)
     onOpenChange?.(next)
   }
+  // Pending, Base UI holds the panel shut and so would open it on a click: the click is the title's, and the title says open.
+  // Only a click: find-in-page reaching into the shut panel asks to open it, and it is open.
+  const shown = open && !pending
   return (
-    <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
+    <Collapsible.Root open={shown} onOpenChange={(next, details) => setOpen(pending && details.reason === 'trigger-press' ? !open : next)} className={cn('flex flex-col', className)}>
+      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger aria-expanded={open} aria-busy={pending && open ? true : undefined} />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame

package/src/NavTree.mdx

@@ -54,7 +54,10 @@ rows to any depth.
   skeleton under it once open, and `onOpenChange` says when to read them;
   `childrenMessage` is the line under it. `onIntent` on a group says the
   pointer rests on it or the keyboard reached it: read it then, so opening
-  it draws rows.
+  it draws rows. A `NavTreeSection` opened while its read is in flight takes
+  `pending`: its arrow turns and it opens once the rows are in, in one move,
+  instead of a skeleton the rows then replace; keep `loading` for a read
+  that turns out slow.
 
 <Canvas of={NavTreeStories.ReadAsItOpens} />
 

package/src/NavTree.test.tsx

@@ -121,6 +121,16 @@ describe('NavTree drawn by the app', () => {
     expect(screen.getByText('Item a')).not.toBeNull()
     expect(screen.getByText('Nothing in this yet.')).not.toBeNull()
   })
+
+  it('a pending NavTreeSection says open and busy, its rows shut until it is not (OPT-11)', () => {
+    const { rerender } = render(<NavTreeSection title="Group a" open pending><a href="#a">Item a</a></NavTreeSection>)
+    const heading = screen.getByRole('button', { name: 'Group a' })
+    expect(heading.getAttribute('aria-expanded')).toBe('true')
+    expect(heading.getAttribute('aria-busy')).toBe('true')
+    expect(screen.getByText('Item a').closest('[hidden]')).not.toBeNull()
+    rerender(<NavTreeSection title="Group a" open><a href="#a">Item a</a></NavTreeSection>)
+    expect(screen.getByText('Item a').closest('[hidden]')).toBeNull()
+  })
 })
 
 describe('NavTree marks its groups', () => {

package/src/NavTree.tsx

@@ -186,6 +186,12 @@ export interface NavTreeSectionProps {
   onIntent?: () => void
   /** Its rows are being read: a skeleton in their place. */
   loading?: boolean
+  /**
+   * Opened, and its rows are being read: the arrow turns and the group stays
+   * shut until they are in, then opens once — `CollapsibleSection`'s. For a
+   * read that is usually quick; a slow one is `loading`'s skeleton.
+   */
+  pending?: boolean
   /** Remember it open or closed in this browser, under this key. */
   storageKey?: string
   /** The rows: `NavItem`s. */
@@ -199,7 +205,7 @@ export interface NavTreeSectionProps {
  * `groups`; an app whose groups each read their own data draws them itself,
  * as `NavTree`'s children.
  */
-export function NavTreeSection({ id, title, message, loading = false, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
+export function NavTreeSection({ id, title, message, loading = false, pending, trailing, actions, menu, icon, defaultOpen = true, open, onOpenChange, storageKey, onIntent, children }: NavTreeSectionProps) {
   const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   useEffect(() => () => clearTimeout(timer.current), [])
   const intent = onIntent
@@ -225,6 +231,7 @@ export function NavTreeSection({ id, title, message, loading = false, trailing,
         defaultOpen={defaultOpen}
         open={open}
         onOpenChange={onOpenChange}
+        pending={pending}
         storageKey={storageKey}
         trailing={trailing}
         actions={actions}