@duro-app/ui 3.6.0 → 4.0.0

package/src/components/Input/Input.tsx

@@ -51,6 +51,11 @@ interface InputProps {
   'aria-describedby'?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
   onBlur?: () => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  /** Keyboard handlers — e.g. Enter to commit, Escape to cancel, arrow-key
+   *  navigation of a list driven by this field. */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void
   ref?: React.Ref<HTMLInputElement>
 }
 
@@ -80,6 +85,9 @@ export function Input({
   'aria-describedby': ariaDescribedby,
   onChange,
   onBlur,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
   ref,
 }: InputProps) {
   const ctx = useFieldContext()
@@ -129,6 +137,9 @@ export function Input({
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
       onChange={effectiveOnChange as StrictInputProps['onChange']}
       onBlur={effectiveOnBlur as StrictInputProps['onBlur']}
+      onFocus={onFocus as StrictInputProps['onFocus']}
+      onKeyDown={onKeyDown as StrictInputProps['onKeyDown']}
+      onKeyUp={onKeyUp as StrictInputProps['onKeyUp']}
       ref={effectiveRef as React.Ref<HTMLInputElement>}
       style={[
         styles.base,

package/src/components/Menu/Menu.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it).',
+    'Dropdown action menu. Triggers actions (not value selection). Compound component — Root is required (throws without it). Menu.Trigger renders the button itself: give it the label (text, an Icon), never a Button.',
   whenToUse: [
     'Context menu or "more actions" dropdown',
     'Navigation links in a dropdown',
@@ -19,12 +19,15 @@ export const meta: ComponentMeta = {
       kind: 'contrast',
       relationship: 'Select picks values; Menu triggers actions',
     },
-    {component: 'Button', kind: 'composition', relationship: 'Often used as Menu.Trigger content'},
+    {
+      component: 'Button',
+      kind: 'contrast',
+      relationship:
+        'Button runs one action; Menu opens a list of them. Menu.Trigger is already a button — never put a Button inside it',
+    },
   ],
   example: `<Menu.Root>
-  <Menu.Trigger>
-    <Button variant="secondary">Actions</Button>
-  </Menu.Trigger>
+  <Menu.Trigger>Actions</Menu.Trigger>
   <Menu.Popup>
     <Menu.Item onClick={() => console.log('edit')}>Edit</Menu.Item>
     <Menu.Item onClick={() => console.log('duplicate')}>Duplicate</Menu.Item>

package/src/components/Menu/Menu.stories.tsx

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import {expect, fn} from 'storybook/test'
+import {expect, fn, spyOn} from 'storybook/test'
 import {Menu} from './Menu'
+import {Button} from '../Button/Button'
 
 const meta: Meta = {
   title: 'Components/Menu',
@@ -144,3 +145,28 @@ export const WithLinks: Story = {
     await expect(items[0]).toHaveAttribute('href', '#admin')
   },
 }
+
+// Misuse on purpose, so it runs as a test but stays out of the sidebar:
+// Menu.Trigger is the button, and a Button inside it earns a dev warning.
+export const NestedControlWarns: Story = {
+  tags: ['!dev', '!autodocs'],
+  beforeEach: () => {
+    const warn = spyOn(console, 'warn').mockImplementation(() => {})
+    return () => warn.mockRestore()
+  },
+  render: () => (
+    <Menu.Root>
+      <Menu.Trigger>
+        <Button variant="secondary">Nested</Button>
+      </Menu.Trigger>
+      <Menu.Popup>
+        <Menu.Item>Edit</Menu.Item>
+      </Menu.Popup>
+    </Menu.Root>
+  ),
+  play: async () => {
+    await expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining('Menu.Trigger is itself the button'),
+    )
+  },
+}

package/src/components/Menu/Menu.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {MenuContext, useMenu} from './MenuContext'
 import {useMenuRoot} from './useMenuRoot'
+import {devWarnOnce} from '../../shared/devWarnOnce'
 
 // --- Root ---
 interface RootProps {
@@ -22,6 +23,11 @@ function Root({children}: RootProps) {
 }
 
 // --- Trigger ---
+// Trigger IS the button: aria-haspopup / aria-expanded / aria-controls have to
+// sit on the focusable element, so it cannot be a wrapper like Dialog.Trigger.
+// Its children are the label (text, an Icon) — never a Button or other control.
+const NESTED_CONTROL = 'button, a[href], input, select, textarea, [role="button"]'
+
 function Trigger({children}: {children: ReactNode}) {
   const {open, toggle, menuId, triggerRef} = useMenu()
   const localRef = useRef<HTMLButtonElement>(null)
@@ -31,6 +37,17 @@ function Trigger({children}: {children: ReactNode}) {
     triggerRef.current = localRef.current
   })
 
+  // TypeScript can't stop a <Button> child; the DOM can tell.
+  useEffect(() => {
+    if (localRef.current?.querySelector(NESTED_CONTROL)) {
+      devWarnOnce(
+        'Menu',
+        'trigger-nested-control',
+        'Menu.Trigger is itself the button — give it the label (text, an Icon), not a Button, link or other control. A control inside a <button> is invalid HTML: it breaks hydration and hands assistive tech a button inside a button.',
+      )
+    }
+  }, [])
+
   return (
     <html.button
       ref={localRef}

package/src/components/Table/Table.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {devWarnOnce} from '../../shared/devWarnOnce'
 
 // --- Types ---
 
@@ -43,19 +44,6 @@ function useTable() {
 
 const HeaderContext = createContext(false)
 
-// --- Dev-only warn registry ---
-//
-// One-shot per warning code per process: long-running dev sessions
-// shouldn't drown the console on every re-render of a misconfigured table.
-const _IS_PROD = typeof process !== 'undefined' && process.env?.NODE_ENV === 'production'
-const _devWarned = new Set<string>()
-function devWarnOnce(code: string, message: string) {
-  if (_IS_PROD || _devWarned.has(code)) return
-  _devWarned.add(code)
-
-  console.warn(`[duro-app/ui Table] ${message}`)
-}
-
 // --- Container — owns the @container query target ---
 //
 // @deprecated Root sets up its own container query and accepts `sortChip`
@@ -148,6 +136,7 @@ function extractColumnMeta(
           // Children are JSX with no string content — stack mode will render
           // an unlabeled cell. Tell the developer once.
           devWarnOnce(
+            'Table',
             'headerCell-missing-label',
             'Table.HeaderCell with JSX children must set `label` for stack-mode rendering.',
           )

package/src/components/Textarea/Textarea.stories.tsx

@@ -36,6 +36,22 @@ export const Default: Story = {
   },
 }
 
+export const KeyboardEvents: Story = {
+  args: {placeholder: 'Edit note', onFocus: fn(), onKeyDown: fn(), onKeyUp: fn()},
+  play: async ({args, canvas, userEvent}) => {
+    const textarea = canvas.getByPlaceholderText('Edit note')
+    await userEvent.click(textarea)
+    await expect(args.onFocus).toHaveBeenCalledTimes(1)
+
+    await userEvent.keyboard('{ArrowDown}{Enter}{Escape}')
+    const keys = (args.onKeyDown as ReturnType<typeof fn>).mock.calls.map(
+      ([e]) => (e as React.KeyboardEvent).key,
+    )
+    await expect(keys).toEqual(['ArrowDown', 'Enter', 'Escape'])
+    await expect(args.onKeyUp).toHaveBeenCalledTimes(3)
+  },
+}
+
 export const Error: Story = {
   args: {variant: 'error', placeholder: 'Invalid content'},
   play: async ({canvas}) => {

package/src/components/Textarea/Textarea.tsx

@@ -18,6 +18,11 @@ interface TextareaProps {
   autoFocus?: boolean
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
   onBlur?: () => void
+  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void
+  /** Keyboard handlers — e.g. Enter to commit, Escape to cancel, arrow-key
+   *  navigation of a list driven by this field. */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   ref?: React.Ref<HTMLTextAreaElement>
 }
 
@@ -33,6 +38,9 @@ export function Textarea({
   autoFocus,
   onChange,
   onBlur,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
   ref,
 }: TextareaProps) {
   const ctx = useFieldContext()
@@ -65,6 +73,9 @@ export function Textarea({
       aria-invalid={ctx?.invalid || variant === 'error' || undefined}
       onChange={effectiveOnChange as StrictTextareaProps['onChange']}
       onBlur={effectiveOnBlur as StrictTextareaProps['onBlur']}
+      onFocus={onFocus as StrictTextareaProps['onFocus']}
+      onKeyDown={onKeyDown as StrictTextareaProps['onKeyDown']}
+      onKeyUp={onKeyUp as StrictTextareaProps['onKeyUp']}
       ref={effectiveRef as React.Ref<HTMLTextAreaElement>}
       style={[styles.base, styles[effectiveVariant]]}
       {...extraProps}

package/src/form.ts

@@ -0,0 +1,21 @@
+/**
+ * `@duro-app/ui/form` — Form, the schema-validated wrapper.
+ *
+ * Form resolves an Effect Schema through `@hookform/resolvers/effect-ts`, and
+ * both `@hookform/resolvers` and `effect` are peer dependencies an app only
+ * has if it validates with them. Keeping Form out of the package root is what
+ * makes those peers genuinely optional: a bundler must RESOLVE every static
+ * import before tree-shaking can drop the code behind it, so a single
+ * `import ... from '@hookform/resolvers/effect-ts'` in the root's graph fails
+ * the build of an app that never renders a Form. (Same reasoning as
+ * `@duro-app/ui/table` for TanStack.)
+ *
+ *   -import {Form, Field, Input} from '@duro-app/ui'
+ *   +import {Field, Input} from '@duro-app/ui'
+ *   +import {Form} from '@duro-app/ui/form'
+ *
+ * Field, Input and the rest stay on the root. They bind to a surrounding
+ * Form through react-hook-form's context, which is why `react-hook-form`
+ * itself is a required peer.
+ */
+export {Form, type FormProps} from './components/Form/Form'

package/src/index.ts

@@ -34,7 +34,6 @@ export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
 export {Field} from './components/Field/Field'
-export {Form, type FormProps} from './components/Form/Form'
 export type {LabelPosition, NecessityIndicator} from './components/Form/FormContext'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
 export {Input, type InputVariant} from './components/Input/Input'

package/src/shared/devWarnOnce.ts

@@ -0,0 +1,15 @@
+// --- Dev-only warn registry ---
+//
+// One-shot per warning code per process: long-running dev sessions
+// shouldn't drown the console on every re-render of a misused component.
+const IS_PROD = typeof process !== 'undefined' && process.env?.NODE_ENV === 'production'
+const warned = new Set<string>()
+
+/** Warn once, outside production, as `[duro-app/ui <scope>] <message>`. */
+export function devWarnOnce(scope: string, code: string, message: string): void {
+  const key = `${scope}:${code}`
+  if (IS_PROD || warned.has(key)) return
+  warned.add(key)
+
+  console.warn(`[duro-app/ui ${scope}] ${message}`)
+}