@duro-app/ui 5.26.0 → 5.28.0

package/src/components/Select/SelectContext.ts

@@ -11,7 +11,7 @@ export interface SelectContextValue {
   listboxId: string
   highlightedId: string | null
   setHighlightedId: (id: string | null) => void
-  registerItem: (id: string, value: string, element: HTMLElement) => () => void
+  registerItem: (id: string, value: string, element: HTMLElement, disabled?: boolean) => () => void
   triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 

package/src/components/Select/selectState.ts

@@ -1,4 +1,4 @@
-import {useCallback, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {useControllableValue} from '../../hooks/useControllableValue'
 
 export interface SelectStateOptions {
@@ -6,6 +6,12 @@ export interface SelectStateOptions {
   value?: string
   onValueChange?: (value: string | null) => void
   initialLabels?: Record<string, string>
+  /**
+   * Called when the list opens or closes, by any means (a press, a key, a pick,
+   * Escape, a press outside): for work that should start only once someone is
+   * choosing, such as checking which options are available.
+   */
+  onOpenChange?: (open: boolean) => void
 }
 
 /**
@@ -19,6 +25,7 @@ export function useSelectState({
   value: controlledValue,
   onValueChange,
   initialLabels,
+  onOpenChange,
 }: SelectStateOptions) {
   const [value, setValue] = useControllableValue<string | null>(
     controlledValue,
@@ -26,6 +33,15 @@ export function useSelectState({
     onValueChange,
   )
   const [open, setOpen] = useState(false)
+  // Reported after the change commits, once per transition; never for the first render.
+  const onOpenChangeRef = useRef(onOpenChange)
+  onOpenChangeRef.current = onOpenChange
+  const reportedOpenRef = useRef(open)
+  useEffect(() => {
+    if (reportedOpenRef.current === open) return
+    reportedOpenRef.current = open
+    onOpenChangeRef.current?.(open)
+  }, [open])
   const [labels, setLabels] = useState<Record<string, string>>(initialLabels ?? {})
 
   const registerLabel = useCallback((v: string, label: string) => {

package/src/components/Select/styles.css.ts

@@ -121,6 +121,10 @@ export const styles = css.create({
   itemHighlighted: {
     backgroundColor: colors.bgCardHover,
   },
+  itemDisabled: {
+    color: colors.textDisabled,
+    cursor: 'not-allowed',
+  },
   hidden: {
     display: 'none',
   },

package/src/components/Select/useSelectRoot.ts

@@ -12,8 +12,15 @@ export function useSelectRoot(options: SelectStateOptions) {
   const listboxId = useId()
   const rootRef = useRef<HTMLDivElement>(null)
   const triggerRef = useRef<HTMLButtonElement | null>(null)
-  const itemsRef = useRef(new Map<string, {value: string; element: HTMLElement}>())
+  const itemsRef = useRef(
+    new Map<string, {value: string; element: HTMLElement; disabled: boolean}>(),
+  )
   const orderRef = useRef<string[]>([])
+  // What the keys move through: the options in document order, without the disabled ones.
+  const enabledOrder = useCallback(
+    () => orderRef.current.filter((id) => !itemsRef.current.get(id)?.disabled),
+    [],
+  )
 
   const close = useCallback(() => {
     setOpen(false)
@@ -25,7 +32,7 @@ export function useSelectRoot(options: SelectStateOptions) {
     setOpen((prev) => {
       if (!prev) {
         const items = itemsRef.current
-        const order = orderRef.current
+        const order = enabledOrder()
         let found: string | null = null
         for (const id of order) {
           const item = items.get(id)
@@ -40,24 +47,27 @@ export function useSelectRoot(options: SelectStateOptions) {
       }
       return !prev
     })
-  }, [value, setOpen])
+  }, [value, setOpen, enabledOrder])
 
-  const registerItem = useCallback((id: string, itemValue: string, element: HTMLElement) => {
-    itemsRef.current.set(id, {value: itemValue, element})
-    const map = itemsRef.current
-    const ids = [...map.keys()]
-    ids.sort((a, b) => {
-      const elA = map.get(a)?.element
-      const elB = map.get(b)?.element
-      if (!elA || !elB) return 0
-      return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
-    })
-    orderRef.current = ids
-    return () => {
-      itemsRef.current.delete(id)
-      orderRef.current = orderRef.current.filter((i) => i !== id)
-    }
-  }, [])
+  const registerItem = useCallback(
+    (id: string, itemValue: string, element: HTMLElement, disabled = false) => {
+      itemsRef.current.set(id, {value: itemValue, element, disabled})
+      const map = itemsRef.current
+      const ids = [...map.keys()]
+      ids.sort((a, b) => {
+        const elA = map.get(a)?.element
+        const elB = map.get(b)?.element
+        if (!elA || !elB) return 0
+        return elA.compareDocumentPosition(elB) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+      })
+      orderRef.current = ids
+      return () => {
+        itemsRef.current.delete(id)
+        orderRef.current = orderRef.current.filter((i) => i !== id)
+      }
+    },
+    [],
+  )
 
   // Closed: ArrowDown/ArrowUp on the trigger open the listbox (the APG
   // select-only combobox), on the selected option or the first. In a Toolbar
@@ -82,7 +92,7 @@ export function useSelectRoot(options: SelectStateOptions) {
     if (!root || !open) return
 
     function handleKeyDown(e: KeyboardEvent) {
-      const order = orderRef.current
+      const order = enabledOrder()
       const items = itemsRef.current
       if (e.key === 'Escape') {
         e.preventDefault()
@@ -124,7 +134,7 @@ export function useSelectRoot(options: SelectStateOptions) {
           setHighlightedId((prev) => {
             if (prev) {
               const item = items.get(prev)
-              if (item) {
+              if (item && !item.disabled) {
                 setValue(item.value)
                 close()
               }
@@ -142,7 +152,7 @@ export function useSelectRoot(options: SelectStateOptions) {
 
     root.addEventListener('keydown', handleKeyDown)
     return () => root.removeEventListener('keydown', handleKeyDown)
-  }, [open, close, setValue])
+  }, [open, close, setValue, enabledOrder])
 
   const ctx: SelectContextValue = useMemo(
     () => ({

package/src/components/Textarea/Textarea.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input. autoGrow makes the height follow the content from rows up to maxRows, then it scrolls (CSS field-sizing, with a scrollHeight fallback; native grows with the content and caps at maxRows). The anchor props of Listbox.getAnchorProps() (role combobox, aria-controls, aria-expanded, aria-activedescendant) are forwarded as ARIA attributes on web and as the matching accessibility props on native, so a Listbox can be anchored to it while the editor keeps focus.',
+    'Multi-line text input with automatic Field/Form integration. Same Field binding behavior as Input. autoGrow makes the height follow the content from rows up to maxRows, then it scrolls (CSS field-sizing, with a scrollHeight fallback; native grows with the content and caps at maxRows). The anchor props of Listbox.getAnchorProps() (role combobox, aria-controls, aria-expanded, aria-activedescendant) are forwarded as ARIA attributes on web and as the matching accessibility props on native, so a Listbox can be anchored to it while the editor keeps focus. On the web, onFiles receives files pasted into the field or dropped on it (the drop ring shows while files are dragged over it); text pastes stay text.',
   whenToUse: [
     'Multi-line text entry (comments, messages, descriptions)',
     'A composer that grows with its text (autoGrow, maxRows)',

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

@@ -231,3 +231,44 @@ export const AnchoredListbox: Story = {
     await expect(editor).toHaveFocus()
   },
 }
+
+/**
+ * `onFiles` (web): a file pasted into the field or dropped on it goes to
+ * `onFiles`; while files are dragged over it the field shows the drop ring.
+ * Pasted text stays text.
+ */
+export const PasteAndDropFiles: Story = {
+  args: {placeholder: 'Paste or drop a screenshot', onFiles: fn()},
+  play: async ({canvas, args}) => {
+    const field = canvas.getByPlaceholderText('Paste or drop a screenshot')
+    const withFile = () => {
+      const transfer = new DataTransfer()
+      transfer.items.add(new File(['png'], 'shot.png', {type: 'image/png'}))
+      return transfer
+    }
+
+    field.dispatchEvent(
+      new ClipboardEvent('paste', {clipboardData: withFile(), bubbles: true, cancelable: true}),
+    )
+    await expect(args.onFiles).toHaveBeenCalledTimes(1)
+    await expect((args.onFiles as ReturnType<typeof fn>).mock.calls[0][0][0].name).toBe('shot.png')
+
+    const text = new DataTransfer()
+    text.setData('text/plain', 'hello')
+    field.dispatchEvent(
+      new ClipboardEvent('paste', {clipboardData: text, bubbles: true, cancelable: true}),
+    )
+    await expect(args.onFiles).toHaveBeenCalledTimes(1)
+
+    const ringBefore = getComputedStyle(field).boxShadow
+    field.dispatchEvent(
+      new DragEvent('dragenter', {dataTransfer: withFile(), bubbles: true, cancelable: true}),
+    )
+    await waitFor(() => expect(getComputedStyle(field).boxShadow).not.toBe(ringBefore))
+    const drop = new DragEvent('drop', {dataTransfer: withFile(), bubbles: true, cancelable: true})
+    field.dispatchEvent(drop)
+    await expect(drop.defaultPrevented).toBe(true)
+    await expect(args.onFiles).toHaveBeenCalledTimes(2)
+    await waitFor(() => expect(getComputedStyle(field).boxShadow).toBe(ringBefore))
+  },
+}

package/src/components/Textarea/Textarea.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {useFieldContext} from '../Field/FieldContext'
 import type {ListboxAnchorProps} from '../Listbox/Listbox'
 import {useAutoGrowFallback} from './useAutoGrowFallback'
+import {useFileDrop} from './useFileDrop'
 import {grow} from './grow'
 import {styles} from './styles.css'
 
@@ -39,6 +40,12 @@ interface TextareaBaseProps {
    *  navigation of a list driven by this field. */
   onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
   onKeyUp?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void
+  /**
+   * Web: files pasted into the field or dropped on it (a screenshot, a log).
+   * The field shows the drop ring while files are dragged over it. Text
+   * pastes and drops stay text. Native: never called; attach with FileTrigger.
+   */
+  onFiles?: (files: readonly File[]) => void
   ref?: React.Ref<HTMLTextAreaElement>
 }
 
@@ -65,6 +72,7 @@ export function Textarea({
   onFocus,
   onKeyDown,
   onKeyUp,
+  onFiles,
   ref,
 }: TextareaProps) {
   const ctx = useFieldContext()
@@ -92,6 +100,17 @@ export function Textarea({
     [effectiveRef],
   )
   useAutoGrowFallback(innerRef, autoGrow ? 'content' : 'fixed')
+  const dropOver = useFileDrop(innerRef, onFiles)
+  const onPaste = onFiles
+    ? // Structural: the native build (no DOM lib) types this file too; only the web pastes files.
+      (event: {clipboardData?: {files?: ArrayLike<File>} | null; preventDefault: () => void}) => {
+        const files = Array.from(event.clipboardData?.files ?? [])
+        if (files.length === 0) return
+        // Files only: the field keeps no file name as text.
+        event.preventDefault()
+        onFiles(files)
+      }
+    : undefined
 
   return (
     <html.textarea
@@ -112,6 +131,7 @@ export function Textarea({
       onFocus={onFocus as StrictTextareaProps['onFocus']}
       onKeyDown={onKeyDown as StrictTextareaProps['onKeyDown']}
       onKeyUp={onKeyUp as StrictTextareaProps['onKeyUp']}
+      onPaste={onPaste as StrictTextareaProps['onPaste']}
       role={role}
       aria-controls={ariaControls}
       aria-expanded={ariaExpanded}
@@ -124,6 +144,7 @@ export function Textarea({
         styles[effectiveVariant],
         autoGrow && grow.autoGrow,
         autoGrow && maxRows !== undefined && grow.maxRows(maxRows),
+        dropOver && styles.dropOver,
       ]}
       {...extraProps}
     />

package/src/components/Textarea/styles.css.ts

@@ -1,4 +1,5 @@
 import {css} from 'react-strict-dom'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
@@ -56,4 +57,6 @@ export const styles = css.create({
       ':focus': colors.error,
     },
   },
+  // Files dragged over the field: the same ring as a DragDrop zone under the pointer.
+  dropOver: {boxShadow: shadows.dropOver},
 })

package/src/components/Textarea/useFileDrop.native.ts

@@ -0,0 +1,6 @@
+import type {RefObject} from 'react'
+
+/** A phone has no drag and drop of files onto a field; attach with FileTrigger. */
+export function useFileDrop(_ref: RefObject<unknown>, _onFiles: unknown): boolean {
+  return false
+}

package/src/components/Textarea/useFileDrop.ts

@@ -0,0 +1,46 @@
+import {useEffect, useState, type RefObject} from 'react'
+
+const carriesFiles = (event: DragEvent) =>
+  Array.from(event.dataTransfer?.types ?? []).includes('Files')
+
+/**
+ * Files dropped on the field go to `onFiles`, and `over` says files are
+ * being dragged over it (for the drop ring). A listener on the element:
+ * react-strict-dom passes no drag events through. Text drags stay the
+ * browser's.
+ */
+export function useFileDrop(
+  ref: RefObject<HTMLTextAreaElement | null>,
+  onFiles: ((files: readonly File[]) => void) | undefined,
+): boolean {
+  const [over, setOver] = useState(false)
+  useEffect(() => {
+    const field = ref.current
+    if (!field || !onFiles) return
+    const enter = (event: DragEvent) => {
+      if (!carriesFiles(event)) return
+      // Claimed, or the browser opens the file instead of dropping it here.
+      event.preventDefault()
+      setOver(true)
+    }
+    const leave = () => setOver(false)
+    const drop = (event: DragEvent) => {
+      if (!carriesFiles(event)) return
+      event.preventDefault()
+      setOver(false)
+      const files = Array.from(event.dataTransfer?.files ?? [])
+      if (files.length > 0) onFiles(files)
+    }
+    field.addEventListener('dragenter', enter)
+    field.addEventListener('dragover', enter)
+    field.addEventListener('dragleave', leave)
+    field.addEventListener('drop', drop)
+    return () => {
+      field.removeEventListener('dragenter', enter)
+      field.removeEventListener('dragover', enter)
+      field.removeEventListener('dragleave', leave)
+      field.removeEventListener('drop', drop)
+    }
+  }, [onFiles, ref])
+  return over
+}

package/src/index.native.ts

@@ -29,6 +29,7 @@ export {Textarea, type TextareaVariant} from './components/Textarea/Textarea'
 
 // Text and layout
 export {CodeBlock, type CodeBlockProps} from './components/CodeBlock/CodeBlock'
+export type {CodeBlockLineAction, DiffLineInfo} from './components/CodeBlock/types'
 export {Prose} from './components/Prose/Prose'
 export {Toolbar, type ToolbarProps} from './components/Toolbar/Toolbar'
 

package/src/index.ts

@@ -32,6 +32,7 @@ export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
 export {CodeBlock} from './components/CodeBlock/CodeBlock'
+export type {CodeBlockLineAction, DiffLineInfo} from './components/CodeBlock/types'
 export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
 export {ColorInput} from './components/ColorInput/ColorInput'
 export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'