@estiva-app/ui 0.10.0 → 0.10.1

package/dist/triggerDisabled.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+/**
+ * Whether the element a `Menu` or `Popover` was handed as its trigger is
+ * disabled — by `disabled`, or by a `disabledReason` (which disables the
+ * button and keeps it reachable). Base UI's trigger parts keep a disabled
+ * state of their own and write it over the rendered button's, so they have to
+ * be told (Finding 39, 2026-09-08).
+ */
+export declare function triggerDisabled(trigger: ReactElement): boolean;
+//# sourceMappingURL=triggerDisabled.d.ts.map

package/dist/triggerDisabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"triggerDisabled.d.ts","sourceRoot":"","sources":["../src/triggerDisabled.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAEzC;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,GAAG,OAAO,CAG9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.10.0",
+  "version": "0.10.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/src/Field.test.tsx

@@ -192,16 +192,44 @@ describe('Field', () => {
     expect(document.getElementById(describedBy!)?.textContent).toBe('That is not a Folder link.')
   })
 
-  it('renders no line, and no wrapper, when there is neither', () => {
-    // The port must not move a pixel for the callers that predate these props,
-    // so the control stays a direct child of the Field exactly as before.
-    const { container } = render(
-      <Field label="Title">
+  it('keeps the same control, and its focus, when an error appears and clears', () => {
+    // Finding 38 (Ship's adoption, 2026-09-08): the control used to be wrapped
+    // only when there was a line under it, so React re-created it the moment
+    // an error appeared or cleared — and a person typing into a field whose
+    // error clears on input lost focus after the first keystroke. The control
+    // sits in the same place now whatever is under it.
+    const { rerender } = render(
+      <Field label="Folder link">
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    const input = screen.getByLabelText('Folder link')
+    input.focus()
+    rerender(
+      <Field label="Folder link" error="That is not a Folder link.">
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByLabelText('Folder link')).toBe(input)
+    expect(document.activeElement).toBe(input)
+    rerender(
+      <Field label="Folder link">
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByLabelText('Folder link')).toBe(input)
+    expect(document.activeElement).toBe(input)
+  })
+
+  it('keeps the required asterisk out of the accessible name', () => {
+    // Ship's test asked for a combobox named "Project" and found "Project*"
+    // (Finding 38). The asterisk is a picture; `aria-required` is the word.
+    render(
+      <Field label="Title" required>
         <TextInput defaultValue="" />
       </Field>,
     )
-    const root = container.firstElementChild!
-    expect(root.children).toHaveLength(2)
-    expect(root.children[1].tagName).toBe('INPUT')
+    expect(screen.getByRole('textbox', { name: 'Title' })).toBeTruthy()
+    expect(screen.getByText('*').getAttribute('aria-hidden')).toBe('true')
   })
 })

package/src/Field.tsx

@@ -58,7 +58,7 @@ export interface FieldProps {
 }
 
 export function Field({ label, required = false, helper, error, children }: FieldProps) {
-  const line = error ?? helper
+
   /*
     The asterisk is a picture of `required`; this is the word for it. Base UI's
     `Field` has no `required` to propagate, so the control is marked here —
@@ -80,27 +80,34 @@ export function Field({ label, required = false, helper, error, children }: Fiel
           `cn.test.ts` pins that. */}
       <BaseField.Label className={cn('text-input-label text-text-primary', required && 'flex items-center')}>
         {label}
-        {required && <span className="text-error-default ml-0.5">*</span>}
+        {/* A picture, not a word: `aria-required` on the control says it, and
+            without this the control was named "Title*" (Finding 38). */}
+        {required && (
+          <span aria-hidden="true" className="text-error-default ml-0.5">
+            *
+          </span>
+        )}
       </BaseField.Label>
       {/*
-        No line, no wrapper: every caller that predates `helper` and `error`
-        keeps the exact DOM it had, so the port cannot move a pixel. With a
-        line, this is the 6px stack Ship and Peek were both writing by hand.
+        The control sits in the same place whether or not there is a line
+        under it. It used to be wrapped only when there was one, and React
+        then re-created the control the moment an error appeared or cleared —
+        so a person typing into a field whose error clears on input lost
+        focus after the first keystroke (found by Ship's adoption, 2026-09-08,
+        Finding 38). A one-child flex column draws exactly as the bare control
+        did; the 6px stack Ship and Peek both wrote by hand appears only with a
+        line.
       */}
-      {line == null ? (
-        control
-      ) : (
-        <div className="flex flex-col gap-1.5">
-          {control}
-          {error != null ? (
-            <BaseField.Error match className="text-caption text-error-default">
-              {error}
-            </BaseField.Error>
-          ) : (
-            <BaseField.Description className="text-caption text-text-muted">{helper}</BaseField.Description>
-          )}
-        </div>
-      )}
+      <div className="flex flex-col gap-1.5">
+        {control}
+        {error != null ? (
+          <BaseField.Error match className="text-caption text-error-default">
+            {error}
+          </BaseField.Error>
+        ) : helper != null ? (
+          <BaseField.Description className="text-caption text-text-muted">{helper}</BaseField.Description>
+        ) : null}
+      </div>
     </BaseField.Root>
   )
 }

package/src/Menu.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, type ComponentPropsWithRef, type ReactElemen
 import { IconChevronRight } from '@tabler/icons-react'
 import { Menu as BaseMenu } from '@base-ui/react/menu'
 import { cn } from './cn'
+import { triggerDisabled } from './triggerDisabled'
 import { Kbd } from './Kbd'
 import { SectionLabel } from './SectionLabel'
 
@@ -173,6 +174,11 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
     >
       <BaseMenu.Trigger
         render={trigger}
+        /* The part writes its own disabled state over the button's, so a
+           disabled trigger came out `aria-disabled="false"` and opened
+           (Finding 39, Ship's adoption, 2026-09-08). It is told what the
+           button already knows. */
+        disabled={triggerDisabled(trigger)}
         openOnHover={openOnHover}
         delay={HOVER_OPEN_DELAY}
         closeDelay={HOVER_CLOSE_DELAY}

package/src/Popover.tsx

@@ -1,6 +1,7 @@
 import { useMemo, type ReactElement, type ReactNode, type RefObject } from 'react'
 import { Popover as BasePopover } from '@base-ui/react/popover'
 import { cn } from './cn'
+import { triggerDisabled } from './triggerDisabled'
 import { MenuPanel } from './Menu'
 
 /**
@@ -108,7 +109,9 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
          take the page away from the person using it. */
       modal={false}
     >
-      {trigger && <BasePopover.Trigger render={trigger} />}
+      {/* Told the button's disabled state, or it writes `aria-disabled="false"`
+          over it and opens anyway (Finding 39). */}
+      {trigger && <BasePopover.Trigger render={trigger} disabled={triggerDisabled(trigger)} />}
       <BasePopover.Portal>
         <BasePopover.Positioner
           anchor={anchorTarget}

package/src/Toolbar.test.tsx

@@ -8,6 +8,8 @@ import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { IconButton } from './IconButton'
 import { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator } from './Toolbar'
+import { Menu, MenuItem } from './Menu'
+import { Popover } from './Popover'
 
 afterEach(cleanup)
 
@@ -196,3 +198,56 @@ describe('a loose row, for comparison', () => {
     expect(walk).toEqual(['One', 'Two', 'Three', 'After'])
   })
 })
+
+describe('a ToolbarButton with a reason, as a trigger', () => {
+  /*
+    Found by Ship's adoption (2026-09-08, Finding 39): the message's tools put
+    "React" (a Popover trigger) and "…" (a Menu trigger) on one strip, and with
+    a `disabledReason` both came out `aria-disabled="false"`. The part that
+    renders the trigger writes its own disabled state over the button's.
+  */
+  it('stays disabled, reachable, and closed as a Popover trigger', async () => {
+    const user = userEvent.setup()
+    render(
+      <Toolbar aria-label="Tools">
+        <Popover
+          ariaLabel="Reactions"
+          trigger={
+            <ToolbarButton aria-label="React" disabledReason="Sign in to react.">
+              {dot}
+            </ToolbarButton>
+          }
+        >
+          <p>the picker</p>
+        </Popover>
+      </Toolbar>,
+    )
+    const button = screen.getByRole('button', { name: 'React' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.getAttribute('tabindex')).toBe('0')
+    await user.click(button)
+    expect(screen.queryByRole('dialog')).toBeNull()
+  })
+
+  it('stays disabled, reachable, and closed as a Menu trigger', async () => {
+    const user = userEvent.setup()
+    render(
+      <Toolbar aria-label="Tools">
+        <Menu
+          trigger={
+            <ToolbarButton aria-label="More" disabledReason="Sign in first.">
+              {dot}
+            </ToolbarButton>
+          }
+        >
+          <MenuItem label="Delete" onClick={() => {}} />
+        </Menu>
+      </Toolbar>,
+    )
+    const button = screen.getByRole('button', { name: 'More' })
+    expect(button.getAttribute('aria-disabled')).toBe('true')
+    expect(button.getAttribute('tabindex')).toBe('0')
+    await user.click(button)
+    expect(screen.queryByRole('menu')).toBeNull()
+  })
+})

package/src/triggerDisabled.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from 'react'
+
+/**
+ * Whether the element a `Menu` or `Popover` was handed as its trigger is
+ * disabled — by `disabled`, or by a `disabledReason` (which disables the
+ * button and keeps it reachable). Base UI's trigger parts keep a disabled
+ * state of their own and write it over the rendered button's, so they have to
+ * be told (Finding 39, 2026-09-08).
+ */
+export function triggerDisabled(trigger: ReactElement): boolean {
+  const props = trigger.props as { disabled?: boolean; disabledReason?: string }
+  return !!(props.disabled || props.disabledReason)
+}