@estiva-app/ui 0.65.0 → 0.65.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.65.0",
+  "version": "0.65.1",
   "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.1",
     "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/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}